H  10  11  12  13  14 

Hands-On: Flash MX 2004 Basic Animation

Exercise 11: Make an Animation Finish Where It Starts

  1. Simple shapes. In a new file, change the fill color swatch to Blue.
  2. Using the Oval tool, draw a circle. (Hold down the [Shift] key to draw a perfect circle.)
  3. Next you’ll add a few small different colored circles as decoration on the circle ball, but before drawing the circles, change the swatch color and save some steps.
  4. Select the circle and convert it to a symbol [F8]. Name it bounceBall, leave the default Movie Clip behavior, and click OK.
    Convert to Symbol dialog box.
  5. Position the bounceball in its starting position, near the top of the screen.
  6. Click the Timeline on frame 10 and insert a keyframe [F6].
  7. Before you move anything , click the Timeline on frame 20 and insert anotherkeyframe [F6]. At this point you should have three identical keyframes.
    Timeline for layer 1.
  8. Position the red current frame marker on frame 10 and move the bounceball down to the bottom of the stage.
  9. Set the Motion Tween for frame 1 through frame 10 and for frame 10 through frame 20. (You can save time by doing both at the same time, hold the Shift key down and select frame 1 and frame 10.) Access the Properties panel and you can set tweening for both keyframes. Select Motion.
    Timeline set to Motion.
  10. Select Control > Test Movie [Ctrl] + [Enter]. Save the animation because we will add to it next.
  11. Click on the first keyframe and from the Properties panel set the Ease slider to -80, this will cause the bounceBall to start slowly and speed up at the end.

    The Timeline, Stage and Properties Inspector for the Motion Tween.
  12. Select the keyframe in frame 10 and from the Properties panel set Ease to 80. Test the movie again; you'll see that the bounceBall slows down before it stops at the top, making it look more natural!

Rotating a Motion Tween

Perhaps if the bounceBall animation rotated on its way down and back it might look a bit more realistic. Follow these simple steps to add a bit of realism.

  1. Click on the first Keyframe and then in the Properties Inspector panel, set the Rotate: drop-down to CW (clockwise), and then use a rotation of 1 times.
    Properties Inspector to Rotate a Tween.
  2. Click on the Keyframe in frame 10 and choose CCW (counterclockwise), and 1 rotation.
  3. Test and save your animation if you wish. Now you can see why I had you add those extra little circles on the ball, it makes the rotation easier to notice on the way down and back.

 
Back to Top