This tutorial was suggested via an email on accont of seeing the image below. This tutorial will state how to use this simple but effective technique and offer other advise which should be helpful to you.

Firstly, we will begin by showing an example of a final result.

[kml_flashembed movie="http://9tutorials.com/wp-content/uploads/2007/06/motion-flash-070607.swf" width="150" height="60" wmode="transparent" /]

As you can see from above, this technique is aesthetically pleasing yet simplistic. To create an effect like it, simply follow the instructions below. We will now begin the tutorial.

The first step is to select the right font for the job. For this to work, you will need to use a neat-style font, in regular style. The font used in the example above was ’Trivia’ – this font is freeware, and can be found via this link. Windows users please read this if you wish to know how to instal downloaded fonts.

Once you have downloaded this font, or chosen one of your own you are ready to begin. Firstly, open a new document in Adobe Flash. This can be seen below.

This may be very simple to some of you, but please remember that this may come in handy for a new user of flash. The next step is to set your flash document size to 60 pixels height, and consider how many words you will include before determining the width of your document. The flash example logo above is 150 pixels wide, and contains 6 characters. To change the dimentions of your flash document – alter the ’size’ settings. This can be seen below.

After you click ’OK’ your canvas should change to the correct size. Now we come to adding the text.

Adding the text

To add the text into flash you need to locate the ’Text Tool’. This is represented with an ’A’ on the toolbox and if you are unable to locate it simply press T on your keyboard. Once you have selected this, click in the middle of the canvas and type your header text. To format this text use the tools in the Properties tab. This can be found at the bottom of the Adobe Flash window. This box can be seen below.

If you look in the bottom-right hand corner of this image, you will be able to see a drop down list displaying
’Bitmap Text’. This box is for Anti-Aliasing. Aa is a technique used on a lot of software to alter the way text is created to produce a far smoother effect. This can be done manually or automatically by programmes, and it is a very useful characteristic of Flash to know about.

To give an example of the huge benefits of including Aa, I have produced an animated picture, the first slide showing the ’xccnet’ without Aa and the second with it.

All you need to do to add Aa is to click on the box (in my example diagram containing the words ’Bitmap Text’) and change the characteristics to ’Anti-alias for readability’.

Choosing Font Colors

I suggest that when you choose your font colors, you select one non-saturated colour, and one saturated color – This effect is very nice to use. Your final image will look better if your header contains two words (e.g. xcc and net).

Adding a gloss effect

To finalize your text, you may wish to add a gloss effect – this can be seen in the example. To add a gloss effect, simple select the ’Oval Tool’ – Press O to choose it, or find it in the toolbox. Once this is done, change the properties of the circle to the following:

- Border: None
- Fill: White

If you need help please view the image below – this shows the settings displayed above.

With these settings, create an oval covering the majority of the top half of your text. This can be seen below.

Do not worry, the effect is not complete. Firstly you will need to convert your circle to a symbol. To do this press F8. This will open up a box named ’Convert to Symbol’. This can be seen below.

After you have converted the circle into a ’graphic’, you should see a change in the properties of the circle. There should now be a box labelled ’color’. Alter this propety from the default ’none’ to ’alpha’. A preview of what this property looks like is below.

The alpha setting determine’s the properties transparency. Drop this to around 25% and your gloss effect is done. The final gloss result can be seen below.

Your text should now look very professional. Now we will move onto adding the squares.

Adding the Squares

The squares’ create that extra professional touch to the image. Below will teach you how to create them.

Firstly, select with A the Rectangular tool. Before you create your first square you will need to apply the following changes to the properties of the Rectangular tool. Firstly, change the ’corner radius’ via the options.

Alter the corner radius to 5 points and click ok. This can be seen below.

Now you need to edit the properties of the Rectangular tool. To do this, once more locate the properties box, and alter them to these settings – below.

Note: The Red Fill will vary on your secondary color
Once this is done, create a circle of any size into the canvas whilst holding shift (This will make it a regular circle). Once you have done this, click inside the square to bring up it’s properties. This time, look for the dimensions of the shape. This can be seen below.

As you can see from the image above, I have changed the width and the height to 10 pixels. Your square may display different numbers to mine, but that is just because you made a randomly sized object. Do not alter the X and Y, these are displaying their position in the page – it is easier to alter these by tapping the left and right keys until you are satistfied.

If you do this successfully, you should be presented with a neat looking square like the one shown below.

If you do not wish to make an animated header you can go on producing squares like this until you get a final result – Below.

Animating the squares

To animated the squares, you first have to press F8 and change the square into a movie clip.

Please Note: Create every sqaure seperately, and make a new movie clip for each square.

To make life easier, name your squares to ’Square #’. Converting the squares to movie clips can be seen below.

Once you have done this, double click inside your new movie clip (the square you just converted). This will take you to a seperate editing window. You should have displayed something like below.

The first thing you need to do, is to insert a keyframe at frame 10. This can be seen below.

Create another at frame ’20’ and at frame ’100’. Next select frame 10. To do this, use the timeline as guideline and click on the frame below number 10 until it is highlighted blue. With this selected, look once more at the size properties. Change all of the properties to the ones below.

How it works: The square here is changed to 14 pixels height and width from the original 10. To accomodate for this, the square is slid along 2 pixels to the left and two pixels up. This makes the square grow outwards evenly in each dirrection.

Your image should now look something like this.

Once this is done, highlight all of the frames (from 1-100). Right click on any of the selected frames in the timeline and select ’create motion tween’.

Creating a motion tween, means that it will gradually change the image in between the keyframes. This will make the square get gradually bigger and then decrease back to it’s original size. You should now have a result similar to below – press enter to play your flash movie.

The effect we are looking for is a more bubbled movement. To do this, you will have to go back into the shape’s movie clip view (by double clicking on the square) and do the following.

Click anywhere in between frames 1 to 10 (Note this is where the square is growing) – go down to the properties box and change the ease to ’50 out’. This can be seen below.

Now once more, click anywhere in between frames 11-20 and do the same but this time change the ease to ’50 in’. Again, this can be seen below.

The effect of the movement of the squares has now changed. The new effect can be seen below.

That’s basically it. Every time you move along a square, make the time between the square getting bigger another 5 frames along. However ensure that you always have 100 frames in each movie clip. The effect you need to make is similar to a domino effect. Very soon after the first one topples they all follow the same patten but a little later than the last. The sequence you want to stick to is as follows:

Square 1

Square Begins to grow at: Frame 0
Square Begins to decrease at: Frame 10

Square 2

Square Begins to grow at: Frame 5
Square Begins to decrease at: Frame 15

Square 3

Square Begins to grow at: Frame 10
Square Begins to decrease at: Frame 20

The effect generated is very nice, and pretty easy to create once you get the hang of it. Once you are done, you may wish to gloss over the squares. To do this, follow these steps:

Create a rectangle by using the Rectangular Tool. Press R to select it. Draw a line intersecting all the squares in half. Make the height go as far as almost touching the text above it. An example of this is below.

The rectangle is in grey in my picture (zoomed in), but this is only to show you where to put it. In your image, make it white.

Next convert your rectangle to a ’graphic’. If you do not remember how to get the convert to box up press F8.

Click inside your rectangle, choose the color mode as ’Alpha’ and like with the text before drop the opacity down to around 25%.
View the final result below:

Creating a motion header in flash

Thank you for viewing this tutorial – we hope you liked it

Copyrigh @ EvenICouldDoIt 2007