Smoothing the Animation by Adding Keyframes

I l @ ve RuBoard

The three-frame bouncing ball you created in the preceding exercise is crude; it's herky and jerky and much too fast. To smooth out the movement, you need to create more snapshots that define the ball's position in the air as it moves up and down. This means adding more keyframes and repositioning the ball slightly in each one.

In the preceding exercise, the ball moves from the top of the stage to the bottom in one step. In the following exercise, you expand that first bounce movement to three steps.

To add keyframes within an existing animation:

1. In the Timeline of the three-frame bouncing ball animation, select Frame 1.

2. Choose Insert > Frame; then choose Insert > Frame again.

   Flash creates new in-between frames at frames 2 and 3, and relocates the keyframes that show the ball at the bottom and middle of the stage to frames 4 and 5 (Figure 8.30).

   Figure 8.30. With Frame 1 selected, invoking the Insert Frame command twice inserts two new in-between frames after the first frame and pushes the original Keyframe 2 (the ball at the bottom of the Stage) to Frame 4.

   

3. In the Timeline, select frames 2 and 3.

4. Choose Modify > Frames > Convert to Keyframes.

   Flash converts the in-between frames to keyframes that duplicate the content of Keyframe 1 (Figure 8.31).

   Figure 8.31. Modify > Frames > Convert to Keyframes changes the in-between frames to keyframes containing the content of the preceding keyframe.

   

5. In the Timeline, select Frame 2 and reposition the ball on the Stage.

   You can use the grid line to help you visu-alize where to place the ball; you want to position it about a third of the distance between the top and bottom of the Stage.

6. In the Timeline, select Frame 3 and reposition the ball on the Stage (Figure 8.32).

   Figure 8.32. You can reposition the ball in keyframes 2 and 3 to make the first bounce smoother. Position the ball about two- thirds of the distance between the top and bottom of the Stage.

   

7. Preview the animation, using any of the methods described in the preceding section.

   The initial bounce movement is smoother. You can repeat these steps to add even more frames with incremental movement to the first half of the bounce. You can also add frames to make the second half of the bounce smoother.

The Pitfall of Frame-by-Frame Animation

With frame-by-frame animation, the more frames you add, the smaller you can make the differences between frames and the smoother the action will be. Adding keyframes, however, also adds to your final movie's file size , which in turn affects the download time for people viewing your movie over the Web. Your goal is to strike a happy medium.

I l @ ve RuBoard