| To create a motion tween, you must place the appropriate type of content in the beginning and end of a keyframe span and then set the span's Tween property to Motion. The graphic element in a motion tween must be a graphic-object (a drawing-object, group, symbol, or text box). You set the Tween property in the Frame Properties tab of the Property inspector. You can get assistance in making motion tweens from the Create Motion Tween command, which you'll learn about later in this chapter. You can use motion tweening to create the same bouncing ball you made in Chapter 8, but in a slightly different way. To prepare keyframes for motion tweening 1. | Create a new Flash document, and name it something like MotionTweenBounce.
Flash creates a document with one layer and a keyframe at frame 1.
| 2. | In the Timeline, select keyframe 1.
| 3. | In the Tools panel, choose the oval tool, and set the stroke to No Color.
| 4. | Near the top of the Stage, draw a circle.
This circle will be the ball. Make it fairly large.
| 5. | Select the circle, and choose Modify > Convert to Symbol.
The Convert to Symbol dialog appears. The symbol can be any type, but for this task, choose Graphic.
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 shade of light bluish-purple (Mac) or bluish-gray (Win) to the frames that contain a motion tween. If Tinted Frames is inactive, the frames are white (Mac) or patterned (Windows), and 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). Frames containing a dotted line are set to contain a tween (either Motion or Shape), but something is wrong and Flash can't complete the tween. Such tweens are called broken tweens. |
| 6. | Enter a name for your symbolfor example, Balland click OK.
| 7. | In the Timeline, select frame 5, and choose Insert > Timeline > Keyframe.
The Insert > Timeline > Keyframe command makes a new keyframe that duplicates the contents of the preceding keyframe.
| 8. | Select frame 10, and choose Insert > Timeline > Keyframe.
| 9. | Select keyframe 5, and drag the ball to the bottom of the Stage.
You have just set up a frame-by-frame animation quite like the one you did in Chapter 8. In keyframe 1, the ball is at the top of its bounce; in keyframe 5, the ball is at the bottom of its bounce; and in keyframe 10, the ball is back up at the top (Figure 9.1). To complete a tweened animation, you must set the tween property for the in-between frames in each keyframe span.
Figure 9.1. The initial keyframes for a motion tween are similar to those of a frame-by-frame animation. The difference is that you must use a graphic-object (a drawing-object, symbol, group, or text box) and set the keyframe span's Tween property to Motion. 
|
 Tip
You could create the oval for this task as a drawing-object (or create it as a merge-shape and then group it) and then skip steps 5 and 6. The most efficient practice for creating graphic elements for motion tweens, however, is to use symbols. Symbols help to keep final file sizes small; you can name the symbols, reuse them, find them in the library to modify, and so on. You can also animate changes in color when you use symbols, whereas with drawing-objects and groups, you can't (see "Animating Color Effects," later in this chapter).
To set the span's property to Motion Tween 1. | To define a motion tween for the first half of the ball's bounce, in the Timeline, select any of the frames in the first keyframe span (1, 2, 3, or 4).
Note that Flash automatically selects the ball symbol. When you define a motion tween, the item to be tweened must be selected.
| 2. | In the Frame Properties tab of the Property inspector, from the Tween pop-up menu, choose Motion (Figure 9.2).
Figure 9.2. To access the settings for motion tweens, in the Frame Properties tab of the Property inspector, choose Motion from Tween pop-up menu. 
The settings for motion tweens appear. You learn more about using these settings in the following tasks.
Flash defines frames 14 as a motion tween, updating the Timeline to give you information about the tween (see the sidebar "Which Frames Contain Tweening?") (Figure 9.3). These in-between frames no longer display the content of the preceding keyframe, instead they display the incrementally changed content that Flash creates. This tween content is shielded so you can't select it (clicking a graphic-object on an in-between frame set to tween is just like clicking a blank area of the Stage). You can, however, drag tween content, but doing so transforms the in-between frame into a keyframe.
Figure 9.3. Flash adds information to the Timeline to indicate when frames contain motion tweens. Here, a blue tint and an arrow mean a completed motion tween. 
| 3. | To define the motion tween for the second half of the ball's bounce, in the Timeline, select any of the frames in the second keyframe span (5, 6, 7, 8, or 9).
| 4. | Repeat step 2.
Flash creates the second half of the ball's bounce with another motion tween (Figure 9.4).
Figure 9.4. With two motion-tween sequences, you can create a bouncing ball: One sequence shows the downward motion, and the other shows the rebound. 
|
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 in-between frames in position on the Stage (Figure 9.5). Figure 9.5. Turn on onion skinning to preview the positions of a tweened object on the Stage.  Oddly enough, although you can't select a symbol on an in-between frame, you can edit it. Double-clicking a symbol on an in-between frame opens that symbol in symbol-editing mode. This trick doesn't work for drawing-objects or groups, however; you must be in a keyframe to edit those graphic-objects. And you must be careful when you double-click; if you drag the symbol even a tiny bit, Flash creates a new keyframe.
|
