Bouncing Effect in Flash

Demonstration This tutorial will teach you how to create a bouncing effect animation using Motion Tween and Shape Tween in Flash MX 2004. The .fla download file is included at the end of the tutorial. Please note: 1. You need to have Flash Player 7.0 installed to view the Flash animation. 2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

In the demonstration, the bouncing heart animation is created using motion tween and the shadow effect using shape tween.

TO CREATE MOTION TWEEN

Steps to Follow :

Create a Symbol

• First draw an object for Motion Tween.
  Like in the above demonstration I used heart.
• Select the object you have drawn and press F8 to convert this object to a Symbol.
• In the Symbol window which appears now. Name this object heart_mc, choose Movie clip behavior and bottom center square for registration. Press OK.
  

Create a Motion Tween

• Double click on the Layer and type "Heart".
• Select Frame 30 and press F6 to insert a keyframe.
• Select Frame 15 and press F6 to add another keyframe.
• With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight line, and drag the heart_mc up.
• Select any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in the Property inspector.
• Select any frame between Frames 16 and 29 and select Motion from the tween pop-up menu in the Property inspector.
• Press Ctrl+S to save your changes.

Create a Shape Tween

• Insert a new Layer and call it "Shadow".
• Select the first frame in the Shadow Layer, draw borderless shadow relevant to your Symbol.
• If your Color Mixture Window is not open, press Shift+F9 to open it.
• Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color Mixture Window and type 25% for Alpha value.
  
  
• Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to insert a keyframe.
• With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size of the Shadow.
• With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on your shadow object. Now go to Color Mixture Window and change Alpha value to 10%.
• Select any frame between Frames 2 and 14 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu.
• Select any frame between Frames 16 and 29 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu.

Now its time for Final touch up

• Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added, and the playhead moves to Frame 2.
• Go back to frame 1, select the Free Transform tool from your toolbox.
• Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the heart. On the Stage, drag the upper middle transform handle down to slightly compress the heart shape.
• Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go to 29th frame and press F8 to insert a new keyframe. Right-click 29th frame and choose Paste Frame from the context menu.
• Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your Property inspector window.
• On the heart layer, select any frame between Frames 2 and 14. Then in the Property inspector, in the Ease text box, type 100. Similarly select any frame between Frames 16 and 29 in the same layer, then go back to Property inspector window and type -100 in the Ease text box. Do the same thing to the Shadow layer.

Press Ctrl+Enter to view your animation.

Download the .fla file

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!