Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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.
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.
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 :).
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.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
