Creating the bouncing logo in Flash

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. Note: the screenshot above is resized, just to save some space here — the logo is still the same size, don't worry :). 21. Go to the timeline, right-click on frame 15 and select Insert Keyframe from the menu that appears. Your timeline will now look like this:

22. Move your logo down now (Shift+Down arrow), so that it is placed on the scene, about 105 pixels down from its first position.

23. Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. An uninterrupted arrow on magenta background will appear, showing you that you made a correct motion tween.

Fine, the motion tween is here, but you need to apply some easing to it, so that when the logo "falls" onto the scene it looks more natural — as in real life, you will make it seem as if the gravitation was accelerating its fall. 24. Select the first keyframe by clicking on it.

25. Options for this keyframe will appear in the Property inspector. Find the Ease option and set it to -60. This is easing in (as shown to the right of the Ease field), which will result in the logo speeding up as it approaches frame 15. Like I said, this will make the appearance of logo more realistic.

Try testing your movie (Ctrl+Enter). You should see the logo speeding up as it moves towards the stage. Also, note that this easing option that you have just turned on in the first keyframe (situated on frame 1) is creating the essing effect on the portion of animation that comes after it, meaning between frames 1 and 15. 26. Right-click on frame 22 and insert a keyframe there.

27. In this new keyframe, move the logo up (use the Up arrow key together with Shift, it is the easiest method) by approximately 40 pixels. This means 40 pixels from the "ground" or "floor" position (whichever you prefer) that you defined in the second keyframe as the logo's "landing point". This point — from which the logo will bounce and where it will ultimately stop and "land" will never change, throughout the whole animation. You will just change the position of the logo in every second keyframe (the odd keyframes — the first, third, fifth, etc). Just proceed with next steps and it will become clear to you.

28. Right-click between the second and third keyframes (i.e., the 15th and 22nd frames) and create a Motion Tween.

29. Select the second keyframe (frame 15).

30. Jump over to the Propertiy inspector again and enter 24 in the Ease option field. This will make the logo progressively slow down as it bounces off the stage, again, as in real life — it's speed is decreasing because of the gravitational pull.

31. What follows next is the repetition of previous steps — you will add five more keyframes and apply appropriate easing for each segment of your animation. Of course, you will also move the logo up where needed to create the bouncing effect. The figure below clearly shows what should be done:

Here's the explanation for the codes: The blue codes are frame numbers. For example, F43 means frame 43. They indicate where you must insert a new keyframe. P stands for position. This is the logo's vertical position, since it is always staying at the same horizontal position. The first one is called initial — where the logo is off the stage at the beginning of the animation. Notice that on every second (even) keyframe the position stays the same: it is the landing position that I mentioned and explained earlier. For odd keyframes, the position is always different — the px value indicates the distance (in pixels) of the logo from the landing position — bear in mind that these values do not indicate its Y coordinate! This value is decreasing as it would in real life: as the logo bounces more and more, it always jumps up a little less and gets closer to the landing position. Finally, E stands for easing, which tells you what value you should insert in the Ease field in Property inspector for each of these keyframes. Pay attention to the value in each keyframe: sometimes it's a negative number (in), sometimes a positive one (out).

After you've done making this additions and adjustements, your animation shouldm look like this:

In case something went wrong or you can't figure out how to make the bouncing, just download the source file for the bouncing animation (the source FLA is in Flash 8 format). 32. Right-click on frame 85 and add a frame.

By adding a frame here, you are prolonging the duration of the last keyframe in this layer —the final, "landing" position of the logo. This is necessary, because you will add the fade-in animation of the logo's reflection soon, so the original logo has to be visible during this time. Top of page Creating the fade-in logo reflection animation 33. Call the current layer bouncing and lock it. Make a new layer above it and call it reflection.

34. In this new layer, add a keyframe in frame 51. This keyframe comes just after the last keyframe in the bouncing layer.

35. Unlock the bouncing layer and go to a keyframe where the logo is in the "landing" position (the last one is a good choice). Click on the logo movie clip there to select it and press Ctrl+C to copy it. Lock the bouncing layer again. 36. Click on the keyframe you have just inserted in the reflection layer to select it.

37. Choose Edit > Paste in Place (shortcut key: Ctrl+Shift+V). The logo you copied will be pasted in the same exact place it is occupying in the bouncing layer. 38. Hold down Shift and use the Down arrow key to move the logo downwards, until it reaches a position where it is right under the original logo situated in the bouncing layer.

39. With the logo in the reflection layer still selected, choose Modify > Transform > Flip Vertical. Here's the start of a nice reflection :).

Before you continue, look closely at the reflection (it is a movie clip, but I will refer to it as reflection for simplicity's sake). Do you see something that doesn't fit well with a reflected image? No? Look more closely: the shadow of the reflection has the same angle as the original logo's shadow. This can't be — a reflection must be a mirror image of the original. Luckily, changing this in Flash is done in a blink of an eye! 40. Click on the reflection to select it. Go to the Property inspector and click on the Filters tab. Change the Angle of the shadow to 315.

This will effectively create a mirror image of the original logo's shadow. Now the reflection looks as it should. You can move the reflection a few pixels down so that its and the logo's shadow don't overlap.

41. Select the reflection again if you have unselected it (like me :). Go to the Property inspector once again and click on the Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

The logo reflection movie clip has become completely transparent, in other words — invisible. This makes sense, because if you want to make a fade-in animation, it is logical that the logo must appear from nothing - out of the blue, as they say :). 42. Insert a keyframe in frame 85 in this layer.

43. Select the mirrored movie clip in this keyframe. In the Property inspector, select again Alpha from the Color menu and set it to 19%. 44. Right-click between the two keyframes in this layer (reflection) and Create a Motion Tween.

Voila! You have just finished the fade-in animation for the logo reflection. And with that, you have completed this lesson. Applying the right amount of easing to an animation isn't difficult - it just takes some practice to find the right amount that will create a real-world effect, like gravitational pull, jumping etc.