| 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 No Color . -
Near the top of the Stage, draw a circle. This circle will be the ball. Make it fairly large. -
With Frame 1 still selected, from the Insert menu, choose Create Motion Tween (Figure 9.1). Figure 9.1. Choose Insert > Create Motion Tween to start the tweening 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 dotted 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. Then Flash updates the Timeline to give you information about the tween. In the in-between frames that contain the motion tween, Flash replaces the dotted line with an arrow, indicating that tweening takes place in these frames (Figure 9.4). 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 (top) causes Flash to create a new keyframe in the current frame and complete the tween (bottom).  -
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 (top). Flash creates a new keyframe for the repositioned ball (bottom).  -
From the Control menu, choose Play to preview the animation. You've created another simple bouncing ball. 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 in Chapter 8. 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. Which Frames Contain Tweening? As your road map of the movie, the Timeline provides visual cues about which frames contain tweens. Flash draws an arrow across a series of frames to indicate that those frames contain a tween. Flash color-codes frames in the Timeline to distinguish motion tweens from shape tweens. With Tinted Frames active (choose it from the Frame View pop-up menu at the right end of the Timeline), Flash applies a light bluish-purple shade to the frames that contain a motion tween. If Tinted Frames is inactive, the frames are white, but Flash changes the arrow that indicates the presence of a tween from black to red. Flash indicates shape tweens by tinting frames light green (if Tinted Frames is active) or by changing the tweening arrow to light green (if Tinted Frames is inactive). |  Tips -
When you choose Preview or Preview in Context from the Frame View pop-up menu (at the right end of the Timeline), you can't see the incremental steps Flash creates for the tween. But if you turn on onion skinning, you can see all the inbetween frames in position on the Stage (Figure 9.6). Figure 9.6. Turn on onion skinning to preview the positions of the tweened object on the Stage.  -
If you choose Insert > Keyframe in steps 7 and 10 of the preceding exercise, you will not see the broken-tween line in the Timeline. That's because that command duplicates the content of the preceding keyframe, and Flash considers the tween to be complete when it finds an ending keyframe with content. Nevertheless, your tween will still seem to be broken until you go into the ending keyframe of the sequence and change its content.
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, Property Inspector, or another 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 objectFlash must use shape tweening. Another important distinction between motion tweening and shape tweening is that motion tweening works only on groups and symbols, whereas 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 do that with the bouncing-ball example in the preceding section and in the next chapter.) If you want to tween a multipart graphic say, a robot constructed of many shapesand 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 effectstransforming a pumpkin into a magic coach, for exampleyou 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. | |
