Bouncing Effect in Flash

Bouncing Effect in Flash

This time we will create a bouncing effect animation using Shape Tween and Motion Tween in Flash MX 2004.
Download the .fla format, it is given in the end of the article.
Please, remember that for a successful work you should have Flash Player 7.0 and Flash MX 2004  installed in the computer.

As you see in the example, the bouncing animation of the image is created using motion tween. The shadow effect is created using shape tween.
Here are steps to follow:

1.Create a symbol.

• draw an object or take already existed object for Motion Tween. This is a heart in our example.
• Select this object and Press F8 in order to convert this object to a Symbol.
• You will have an object in the Symbol window, which will appear automatically. Give the object the name heart_mc. Select Movie clip behavior and bottom center square for registration. Then press OK.

2.Create a Motion Tween.

• Make a double click on the Layer, type there “Heart”.
• Choose Frame 30 and press F6 in order to put in a keyframe.
• Choose Frame 15. Press F6, this will add another keyframe.
• still keeping your playhead on Frame 15, hold the Shift key in order to move the hearrt_mc in a right line. Drag the heart_mc up.
• Choose any frame from Frame 2 up to Frame 14. Then select Motion from the tween pop-up menu, which you can find in a Property inspector.
• Choose any frame from Frame 16 up to Frame 29. Then select Motion from the tween pop-up menu, which you can find in a Property inspector.
•  Press Ctrl+S for saving your changes.

3. Create a Shape Tween

• This time insert a new layer and give it the name “Shadow”.
• Chose the first frame in the Shadow Layer, draw shadow with no borders, which will be relevant to your Symbol.
• Press Shift+F9 to open Color Mixture Window, if it is not open.
• Select Eyedropper tool from the Tool Box. Click it on your object's shadow.
• Open Color Mixture Window and choose 25% for Alpha value.
  
• Choose Frame 30, press F6 in order to insert a keyframe. Then do the same with Frame 15.
• With the palyhead on Frame 15, choose the Free Transformation tool. Make a little reduction of the Shadow size.
• Still selecting Frame 15, choose the Eyedropper tool in the toolbar, after this make a click on your shadow object. Now return to Color mixture Window and change Alpha value down to 10%.
• Choose any frame from 2 till 14 on the Shadow layer. Go to Property inspector and  select Shape in the Tween pop-up menu.
• Select any frame from Frame 16 till Frame 29 on the Shadow layer. Go to Property inspector and  select Shape in the Tween pop-up menu.

4.Final actions

• Choose Frame 1 of the Heart layer. Press F6 for adding a keyframe. A new keyframe will be added, and the playhead will move to Frame 2.
• Return to Frame 1 and select the Free Transform tool from the toolbox.
• Choose the transformation center point (this is the small-sized near the center of the movie clip.) Drag this point to the bottom of the heart. Drag the upper middle transform handle down on the Stage, this will compress a bit the heart shape.
• make a right click on Frame 1 of the heart layer and select Copy Frames in the context menu. Select Frame 29 and press F8 in order to insert a new keyframe. Make a right click on Frame 29 and select Paste Frame from the context menu.
• Click on the Stage, anywhere but not on the objects. Type “28” in the Frame Rate text box of the property inspector window.
• Select any frame of the heart layer between Frame 2 and Frame 14. Then type 100 in the Ease text box. Type 100 in the Property inspector. Do exactly the same with any Frame between Frames 16 and 29. Go to the Shadow layer and repeat the previous actions.

Enjoy the result!