Creating bouncing effect in FlashMX 2004

Learn 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.

Kindly note:

You should install Flash Player 7.0 to view the Flash animation.

TO CREATE MOTION TWEEN

Steps to Follow :

Create a Symbol

Draw an object for Motion Tween.
Like in the above demonstration
Select the object you have drawn and press F8 to convert it to Symbol.
In the Symbol window. Name this object and slect Movie clip behavior and bottom center square for registration, then press OK.

Create a Motion Tween

Double click on the Layer and name it "symbol"
CHoose 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 symbol in a straight line, and drag it up.
Choose any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in the Property inspector.
Choose 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.

Create a Shape Tween

Insert a new Layer and name it "Shadow".
Select the first frame in the Shadow Layer, draw borderless shadow to the symbol.
Press Shift+F9 to open Color Mixture Window .
Choose Eyedropper tool from Tool box. Click it on your shadow and go to Color Mixture Window and type 25% for Alpha value.

color mixture

Choose 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. Reduce the size of the Shadow slightly.
With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on shadow. Then go to Color Mixture Window and change Alpha value to 12%.
Choose any frame between Frames 2 and 14 on the Shadow layer. select Shape from the Tween pop-up menu in the Property inspector.
Choose any frame between Frames 16 and 29 on the Shadow layer. select Shape from the Tween pop-up menu in the Property inspector.

For a final touch up

Choose Frame 1 of the symbol layer. Press F6 to add a keyframe. A new keyframe is added, and the playhead moves to Frame 2.
Go back to frame 1, choose Free Transform tool from toolbox.
Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the symbol. On the Stage, drag the upper middle transform handle down to slightly compress the shape.
Right-click Frame 1 of the symbol 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 the Property inspector window.
On the symbol layer, select any frame between Frames 2 and 14. And in the Property inspector, in the Ease text box, type 100. Same way choose 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. Repeat the same thing to the Shadow layer also.

Press (Ctrl+Enter) to view the results.

Back to Tutorials Home Page

Maa Design Services
MAA offers high-quality website design services at affordable prices and fast turnaround time. We provide ready-made & custom website design solutions to global clients from London, UK. Take a look at our client testimonials from clients all over the world. Contact us today to get started on your website!

Client Testimonials

"If you want the QUICKEST service, the BEST web design, Logo and the FRIENDLIEST communication, DezineHub is the ONLY business to turn to. They far exceeded my expectations! I give them the HIGHEST recommendation! "
Dilip, Chemmen Ltd UK

Maa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>