Making a Simple Frame-by-Frame Animation

I l @ ve RuBoard

In traditional cel animation or flip-book animation, you create the illusion of movement by showing a series of images, each slightly different from the rest, simulating snapshots of the movement. When you create each of these drawings and place them in a series of keyframes, that process is called frame-by-frame animation . When you create only the most crucial snapshots and allow Flash to interpolate the minor changes that take place between those changes, you're creating tweened animation . You learn more about tweening in Chapters 9 and 10.

A classic example of frame-by-frame animation is a bouncing ball. You can create a crude bouncing ball in just three frames .

To set up the initial keyframe:

1. Create a new Flash document, and name it something like Frame-by-Frame Bounce.

   By default, Flash creates a document with one layer and a keyframe at Frame 1. Choose View > Grid > Show Grid to help you reposition your graphics in this exercise.

2. In the Timeline, select Frame 1.

   Use the Frame View pop-up menu to set the Timeline to Preview in Context mode. This setting makes it easy to keep track of what you do in the example.

3. In the Toolbox, select the oval tool.

4. Set stroke color to No Color .

5. Near the top of the Stage, draw a circle (Figure 8.22).

   Figure 8.22. In Keyframe 1, draw a circle near the top of the Stage. This circle will become a bouncing ball.

   

   This circle will be your ball. Make it fairly large.

To create the second keyframe:

1. In the Timeline, select Frame 2.

2. Choose Insert > Keyframe.

   Flash creates a keyframe in Frame 2 that duplicates your ball from Frame 1.

3. In Frame 2, select the ball and reposition it at the bottom of the Stage (Figure 8.23).

   Figure 8.23. Use the Insert > Keyframe command to duplicate the ball from Frame 1 in Frame 2. Then you can drag the ball to reposition it.

   

To create the third keyframe:

1. In the Timeline, select Frame 3.

2. Choose Insert > Keyframe.

   Flash creates a keyframe in Frame 3 that duplicates your ball from Frame 2.

3. In Frame 3, select the ball and reposition it in the middle of the Stage (Figure 8.24).

   Figure 8.24. Use the Insert > Keyframe command to duplicate the ball from Frame 2 in Frame 3. Drag the ball to reposition it again.

   

   That's it. Believe it or not, you have just created all the content you need to animate a bouncing ball. To see how it works, in the Timeline, click Frames 1, 2, and 3 in turn . As Flash changes the content of the Stage at each click, you see a very crude animation.

I l @ ve RuBoard