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.
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.
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.
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.
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.
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.
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!
Very good tutorial
I like it
Tanks you
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..
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.
Awesome!
I was looking for ways to make the bouncing effects.. Now I know how to.. Thanks!
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. […]
thanks…..i am fresher for flash ……thanks fo rthis awesome site.
I NEED HELP
i learn create cool logo
it helped me one step toward understanding flash
very very nice!need more…………………
VERY NICE 🙂 !
I really appreciate the creator of this amzing work. Thank you very much.
Nice presentation !!
Can you please mail me how to do a 3d animation in flash…. -:)
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.
The reflex is to go at the pace of the fall.