Flash Explained

Learn Flash easily.

How to make a stylish bouncing logo animation

October 12th, 2008 | Author: Luka | Category: 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.

Increasing the playback speed of your movie.

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.

Choosing the settings for the text tool.

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.

The text field is ready to be modified now.

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

The text field was broken down into separate characters.

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

The vectorized characters.

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

The vector shape that forms the basis for the future logo.

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.

Choosing the properties for the fill in the Color Mixer panel.

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.

Making a vertical fill with the paint bucket tool.

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

The first letter of the logo is filled with a nice vertical gradient.

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.

Locking the fill in the Tools panel.

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

Filling up the remaining letters with the locked fill.

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.

Selecting the properties for the Ink Bottle tool.

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.

Adding the outline to each letter shape.

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!

Selecting all the graphics made so far.

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

Flash is clearly displaying the selected vector shapes.

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.

The Convert to Symbol window.

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

Opening the Filters option for the current movie clip.

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.

Setting the options for the Drop Shadow filter.

Your logo will have a nice shadow now:

The final aspect of the logo.

There! You have finished designing the logo.

Let's see how to animate this little gizmo now! What you are going to create now is a series of motion tweens with easing effects applied to them.

Top of page

Making the bouncing animation

19 Choose the Selection tool (V), which you will use up to the end of this lesson. Click on the logo once to select it.

20 Move the logo above the stage by holding Shift and pressing the Up arrow key on your keyboard repeatedly.

The logo is placed outside the stage now.

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:

A new keyframe has been added to the timeline.

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.

The logo's position on the second keyframe.

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.

A motion tween animation has just been created.

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.

Selecting the first keyframe.

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.

Modifying the easing option.

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.

A third keyframe has been added to the animation.

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.

The logo in the new position on the third keyframe.

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

The second segment of the animation is almost finished.

29 Select the second keyframe (frame 15).

Selecting the second keyframe in the animation.

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.

Modifying the Ease option for the second segment of the animation.

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:

This figure explains how the options in each keyframe should be adjusted.

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.

A frame was added to the current layer.

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.

A new layer, for fade-in animation, was added.

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

The starting keyframe for the fadi-in animation was just added.

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.

Selecting a keyframe for work.

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.

The new logo copy placed just underneath the original one.

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

Making a reflected image of an object in Flash is done in a snap!

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.

Changing the angle of the reflection's shadow.

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.

The reflection done properly.

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 Alpha property of the movie clip was set to the lowest possible value.

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.

The second keyframe has been inserted into the reflection 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.

The second animation has been finalized.

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.

Explore more animation techniques by browsing my Flash animation tutorials section. Have fun and don't forget that you can download the source file for this lesson below (in Flash 8 format).

Download the source FLA file for this lesson.

Be Sociable, Share!

Comments

Submit a comment

  • Joy Newman Oct 26, 2008 at 3:10 am

    I really am starting to learn flash and have really enjoyed the step by steps on how to create swf files. This site is awesome!

  • gulshan Oct 27, 2008 at 1:07 pm

    Very good tutorial
    I like it
    Tanks you

  • lyxstryk Nov 14, 2008 at 3:35 pm

    great tutorial! i love flash now..can i ask some favor?could you please help us in making zoom function in flash-example, zooming a map?like the one you did in moving and rotating..

  • Luka Nov 18, 2008 at 10:39 am

    Joy Newman: Keep on learning, come back and spread the word!

    gulshan: Thanks!

    lyxstryk: Go to the design tutorials section (you can see it in the main menu) and find the tutorial on the creation of an interactive country map. You will find a downloadable example of a zoomable map there.

  • Erwin Tan Dec 1, 2008 at 4:32 pm

    Awesome!

    I was looking for ways to make the bouncing effects.. Now I know how to.. Thanks!

  • zachary Jan 8, 2009 at 10:13 pm

    nice

  • […] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Tuesday, June 30th, 2009 at 7:55 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  • kuldeep Aug 15, 2009 at 2:11 am

    thanks…..i am fresher for flash ……thanks fo rthis awesome site.

  • HELP Nov 18, 2009 at 7:09 pm

    I NEED HELP

  • shyam Mar 29, 2010 at 4:36 am

    i learn create cool logo

  • evance kahwili Jul 15, 2010 at 1:38 pm

    it helped me one step toward understanding flash

  • zahid Aug 14, 2010 at 9:27 am

    very very nice!need more…………………

  • Amrit Sidhu Oct 4, 2010 at 9:15 pm

    VERY NICE 🙂 !

  • Irfan Dayan Oct 25, 2010 at 8:39 am

    I really appreciate the creator of this amzing work. Thank you very much.

  • Irfan Jun 25, 2012 at 1:17 pm

    Nice presentation !!

    Can you please mail me how to do a 3d animation in flash…. -:)

  • HIllary Aug 1, 2012 at 8:51 pm

    Thanks for the great tutorial. I find it hard sometimes to follow directions of other tutorials but you Luka have made these instructions very comprehensive.

  • Niko Oviedo Nov 29, 2012 at 1:44 pm

    The reflex is to go at the pace of the fall.

You must log in to post a comment.