• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 9. Animation with Motion Tweenin... > Creating a Bouncing Ball with Motion...

Creating a Bouncing Ball with Motion Tweening

Flash provides a special command, Create Motion Tween, that helps you through the steps of making a motion tween. The Create Motion Tween command makes sure that you have symbols in your tweens and a keyframe at both the beginning and end of the tween sequence.

To use the Create Motion Tween command:

Create a new Flash document, and name it something like Motion Tween Bounce.

By default, Flash creates a document with one layer and a keyframe at Frame 1.

In the Timeline, select Frame 1.

In the Toolbox, choose the oval tool and set the stroke to None.

Near the top of the Stage, draw a circle.

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

Motion Tweening or Shape Tweening?

The key to deciding whether to use motion tweening or shape tweening is to ask yourself whether you could make this change via a dialog box or a panel. If the answer is yes, Flash can make the change with motion tweening. If the answer is no—if the change requires redrawing the shape of a vector object—Flash must use shape tweening.

Another important distinction between motion tweening and shape tweening is that motion tweening works only on groups and symbols and shape tweening works only on editable shapes. Sometimes, you can arrive at the same tweening effect with either a motion tween or a shape tween. (In fact, you'll do that with the bouncing-ball example in the following section and in the next chapter.)

If you want to tween a multipart graphic— say, a robot constructed of many shapes—and you don't want to tween each shape separately, you'll need to make that graphic a group or symbol. When the graphic is a symbol, you can tween it only with motion tweening. If you want to create morphing effects—transforming a pumpkin into a magic coach, for example—you must use shape tweening. In addition, if you want Flash to move a tweened graphic around the Stage along a curving path (as opposed to a straight line), you must use motion tweening.

With Frame 1 still selected, from the Insert menu, choose Create Motion Tween (Figure 9.1).

Figure 9.1. Choose Insert > Create Motion Tween menu to start the tweeing process.

Flash creates a symbol from the graphics on the Stage. Flash gives the symbol a default name based on the number of tweening graphics already created in the movie. In this case, Flash turns the ball into a symbol named Tween 1 (Figure 9.2). You can rename the symbol by using the techniques described in Chapter 6.

Figure 9.2. The Create Motion Tween command turns an editable shape on the Stage in the selected frame into a symbol and names the symbol Tween 1, Tween 2, and so on.

In the Timeline, select Frame 5.

Choose Insert > Frame.

Flash adds frames containing a dotted line (Figure 9.3). The dotted line indicates that these frames are set to contain a motion tween but something is wrong and Flash cannot complete the tween. In this case, the keyframe that describes where the ball should be at the end of this animation sequence is missing.

Figure 9.3. Adding frames to the motion tween results in a temporarily broken tween, indicated by the dashed line in the Timeline.

In Frame 5, move the circle to the bottom of the Stage to create the downward bounce of the ball.

Flash creates a keyframe in Frame 5 with the symbol located at the bottom of the Stage. Flash then updates the Timeline to give you information about the tween. In the in-between frames that contain the motion tween (Figure 9.4), Flash replaces the dotted line with an arrow, indicating that tweening takes place in these frames. These in-between frames are still "empty," in the sense that they have no content on the Stage that you can edit. They no longer display the content of the preceding keyframe, but they display the incrementally changed content that Flash creates.

Figure 9.4. After you create a motion tween over a range of frames, repositioning the content of a frame causes Flash to create a new keyframe in the current frame and complete the tween.

In the Timeline, select Frame 10.

Choose Insert > Frame.

Flash extends the motion-tween tinting to Frame 10. A dotted line indicating an incomplete tween appears in Frames 6 through 10.

In Frame 10, move the circle to the top of the Stage to create the upward bounce of the ball.

Flash creates a new keyframe to contain the changed content and puts the tweening arrow over the in-between frames (Figure 9.5).

Figure 9.5. Adding frames to the end of a motion tween extends the tween. Repositioning the ball in the last frame of the tween completes the tween. Flash creates a new keyframe for the repositioned ball.

From the Control menu, choose Play to preview the animation.

You've created another version of the simple bouncing ball. As in the frame-by-frame animation you created in Chapter 8, you created new content for just three frames, yet this tweened animation is much smoother than the three-keyframe animation you created with the frame-by-frame technique. That's because you've actually created a 10-frame animation;

you're just letting Flash do the work of repositioning the ball in the in-between frames.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint