Bouncing ball

In this tutorial, you will create a simple animation where a ball bounces on the screen by ...
 
» Drawing a simple shape
» Adding a radial gradient fill
» Adjusting the gradient fill using the fill transform tool 
» Creating two motion tweens
» Adjusting the frame rate

... and then make it look more realistic by ...

» Using 'easing' to simulate gravity
» Adding a squashing effect to the ball.
 
Step 1 - Create the layers
Create a new Flash document.  Double click the layer name for layer 1 and change it to 'Ball'.  Add a new layer and call it 'Ground'.
 
 
Step 2 - Choose a colour for the ball
In the color panel, select Radial from the 'Type' drop down box. Remove the fill stroke and choose a nice color from the colour chooser.  Lastly, swap the position of the color sliders. 
 
 
Step 3 - Draw the ball
Make sure that you have selected Frame 1 in the 'Ball' layer.  Create a small circle near the top of the Stage area. Do this by selecting the oval tool from the toolbox or pressing the letter 'O'. Draw the circle in the Stage area.  Hold down the shift key whilst you are drawing the circle to maintain the aspect ratio.
 
Step 4 - Adjust the fill of our ball
Select the 'Fill transform tool' from the toolbox or press the letter 'F'.  Click on the ball.  Adjust the center registration point and the fill diameter registration point to make the reflection on the ball look more realistic.
 

 

Step 5 - Create the Ball symbol
Now we have to convert the circle to a symbol. The animation will still work without this but it's good practice.  When the circle is converted to a symbol we can create multiple 'instances' of the circle.  Change back to the select tool by pressing 'V'.  Click on the ball to select it.  Choose 'Modify > Convert to Symbol' or press 'F8'. Name the symbol 'Ball', and click OK.  The ball appears in the libary panel. 
 
Step 6 - Create the Ground
Click into frame 1 in the Ground layer.  Create the ground by choosing the line tool from the toolbox or pressing the letter 'N' and drawing a straight line (hold shift to stop it going slanted) near the bottom of the stage.  Make sure the line is still selected and change the stroke height to 3 and choose a more suitable line pattern.
 
Step 7 - Create the Ground symbol
Convert the ground to a symbol by pressing F8.  Name the symbol 'Ground', and click OK.  The ground appears in the library panel.
 
Step 8 - Copy the ground
Go to Frame 100 in the Ground layer in the Timeline. Then right click in this field and choose 'Insert Frame', press 'F5' or choose 'Insert > Timeline > Frame'.  Flash will copy the Ground symbol to every frame between 1 and 100 so that it shows all the way through the animation.  Moving the ground in any frame will move the Ground symbol in all the frames in the animation. 
 
Step 9 - Create the end of the bounce
Now go to Frame 100 in the Ball layer.  Right click in the frame and choose 'Insert Keyframe', press 'F6' or choose 'Insert > Timeline > Keyframe'.  Keyframes appear as circles in a frame. A keyframe allows us to specify changes in an animation. You create keyframes at important points in the Timeline and let Flash create the frames in between.   
 
Step 10 - Create the bottom of the bounce
Now click in Frame 50 of the Ball layer and press 'F6' to insert a keyframe.  This is the point where the ball hit's the ground at the bottom of the fall.  Still in Frame 50, move the ball down until it just touches the Ground. 
 
Step 11 - Create the motion tweens
Right click on Frame 25 (say) in the Ball layer and choose 'Create motion tween'.   Right click in Frame 75 (say) and choose 'Create motion tween'.  Two arrows should appear in the Ball timeline indicating that Flash has created the tweens.
 
Step 12 - Change the frame rate
The animation will run quite slowly if we leave the default frame rate of 12fps.  Choose 'Modify > Document ...', press CTRL+J or double click on the timeline status bar.  Change the frame rate to 25 and click 'OK'.
 
Step 13 - Test the movie
Choose Control > Test Movie from the top menu to test your Flash movie. 
 
 
Moving on ...
 
To make the animation better, we can use the 'ease' property of the tween to make the motion more realistic and add a squashing effect when the ball hits the Ground.

Step 1 - Adding ease to the tweens
Click in frame 25 (say) in the Ball layer.  In the Properties panel, adjust the 'ease' property to -100.


Click on frame 75 (say) in the Ball layer.  In the Properties panel, adjust the 'ease' property to 100.


Step 2 - Adding extra keyframes for the squash effect and fixing the ease
Click on frame 45 and press F6 to add a keyframe.  Do the same on frame 55.  Unfortunately, this screws up the easing we just created in the second part of the bounce. Click on frame 52 in the ball layer and adjust the ease to '0'.  Click on frame 75 in the Ball layer and adjust the ease to 100.  Now we're back.

Step 3 - Moving the ball to the start of the squash
Click in frame 45 of the Ball layer.  Choose the 'Select' tool by pressing the 'V' key. Move the ball down to the ground.  

Step 4 - Adjust the shape of the ball at the bottom of the bounce
Click in Frame 50 of the Ball layer.  Choose the 'Free transform tool' from the toolbox or press 'Q'.  Hold down the ALT key and click and drag the top centre handle down a little to squash the ball.  Now, without the ALT key, click and drag the right centre handle out to make the ball a little wider.

Step 5 - Adjust the shape of the ball on it's way up.
Click in Frame 55 of the Ball layer.  Select the 'Free transform tool' by pressing 'Q'.  Drag the top centre handle up a little and the right centre handle in a little.

Step 6 - Test the movie
Choose Control > Test Movie from the top menu to test your Flash movie. Much better.