How to make a stylish bouncing logo animation

In this lesson you will learn how to create a cool logo, that will "land" on the scene by bouncing off it. You will also see:

• How to make outlined text in Flash,
• How to fill all the letters of your logo with the same color gradient fill easily,
• How to add a drop shadow effect to your logo in a snap,
• How to make the logo accelerate and slow down when it bounces,
• How to make a smooth fade-in animation effect and also some more!

You can see what you will be working towards below. Note that this tutorial was written with Flash 8 Pro in mind, but you can follow it even if you have older versions of Flash, in which case you just won't be able to apply some blending effects. Everything else is perfectly doable.

Creating the outlined logo filled with a color gradient

1. Open a new Flash document. Choose Modify > Document (shortcut key: Ctrl+J). In the Document Properties window that will appear, change the Frame rate of your movie to 30 fps. Click OK.

This will enable you to make smooth animations for your logotype.

2. Select the Text tool (T). In the Property inspector below the scene, choose Static Text (see left part of the image below). Choose any font you like — it is important that it is a nice fat font — don't choose any thin one because it will be difficult to fill it with the gradient later and also to give it an outline. For now, you can choose any color you like. Make its size big (I chose 72) and bold it.

If you are working in Flash 8, select Anti-alias for animation as the rendering option. Also, you might consider making more space between each individual character (see the area marked in red on the image below), since you will add the outline later.

3. Click anywhere on the stage and type a word - "design" for example, or the name of your site or logo. Make all letters capitals, if you wish. Once you have done this, hit Esc to exit the text editing mode.

4. While your text field is still selected, choose Modify > Break Apart. Each character will become an individual text field.

5. Repeat the previous step (shortcut key: Ctrl+B). The text will be broken down to basic shapes: the letters have become vectors.

6. Click on an empty part of the stage with the Selection tool (V) to deselect everything.

7. Go to the Color Mixer panel. If isn't open yet (which usually is), select Window > Color Mixer to access it. Make the following choices:

• Select Linear as type (see 1 below),
• Double-click on the left square below the gradient strip (2) and select a color you like,
• Lastly, double-click on the right square (3) and select a lighter hue of the same color that you chose on the left.

8. Choose the Paint Bucket tool (K). Hold down Shift, click near the bottom part of the first letter and drag your mouse upwards. Once you reach the top part of the letter, release the mouse button.

Holding down the Shift key forces Flash to make a perfectly straight fill. Here's the result:

You won't have to repeat this for each letter. Just proceed to the next step to see how easy this will be done.

9. With the Paint Bucket tool (K) still active, go to the bottom part (Options) of the Tools panel. Click on the Lock Fill icon.

10. Now just click on each letter (no need to click and drag anymore).

Every character will fill up nicely, just as the first one was. See how easy that was? Flash is great!

11. Choose Modify > Document and set the Background color of your document to black. Click OK. This is just a temporary modification. You are going to give a white stroke (outline) to your letter shapes. If you keep the white background color, you won't be able to see what you are doing. After you finish outlining the letters, you will revert back to white background color.

12. Select the Ink Bottle tool (S). In the Property inspector, select white for the color (1), set the line thickness to 3 (see 2 below), choose Solid as line type (3) and you may also check the Stroke hinting option (4) if you are working in Flash 8 - this will give you better and more smooth outlines.

13. Click on each letter - you will give it a nice stroke. Don't forget to click inside the letters like D, R or O to apply the stroke inside them too.

14. You may set the background color of your document back to white now.

15. Choose the Selection tool (V) and select the whole shape created so far - the white outlines too!

You can easily make sure that you selected everything — the selected graphics are dotted.

16. Hit F8 (or choose Modify > Convert to Symbol) to make a symbol out of the selected shapes. In the window that appears, select Movie clip as type, call it logo and click OK.

17. After its creation, the new movie clip will be selected by default. Go to the Property inspector and click on the Filters tab.

18. Click on the plus icon (1 in the image below) to open the list of filters. Choose the Drop Shadow filter. Set the Strength option to 56% (see 2 below). Make Distance equal 3 (see 3 below) . All the other options should be left at their default values: The Blur X and Y settings on 5, Quality on Low, color on black, the options Knockout, Inner shadow and Hide object left unchecked.

Your logo will have a nice shadow now:

There! You have finished designing the logo. It is time to make it move now, which is explained on the next page.