|< Day Day Up >|
Making a motion tween is pretty easy when you know how. Making it look good is another matter. There are a few basic techniques for fine-tuning a motion tween that will make the results more natural and believable. Although we'll see even more techniques later (in Hour 22, "Advanced Animation Techniques"), the following sections cover concepts that specifically apply to motion tweens.
Using Multiple Keyframes
Every motion tween involves just two keyframes. In the first, you tell Flash how to tween to the next keyframe. But suppose you want a symbol to move up and then back down. In this case, you need three keyframes: one in the initial location, another in the upper location, and a third in the end location. However, in this case you have only two tweens: one going up from the first keyframe to the second keyframe, and one going down from the second keyframe to the third keyframe. The process will be easier if you can sort things out this simply.
Often, you want the end of a motion tween to correspond exactly with the beginning (like a yo-yo moving down and then back to where it started). In the following task you can try this.
Try It Yourself: Make an Animation Finish Where It Starts
In this task you'll make a circle return to exactly where it began (so that it loops seamlessly):
Step back and consider what you did in the preceding task. You made sure the first and last keyframes were identical before editing the middle keyframe. It's very common in animation to establish the ending keyframes first before editing the initial frames. You did it here so that the first and last keyframes contained the yo-yo in the same position; in Hour 22 there's a whole section dedicated to this technique of starting with the end point.
By the way, it might not hurt to remind you that Motion Tweens affect all the properties that vary between the instances in two keyframes not just position. You may think that with a name like "motion" tween it would only make things move.
Using Ease In and Ease Out
The only problem with letting the computer (or Flash) do tweening for you is that the result looks like a computer did it it's almost too perfect. For example, the yo-yo from the preceding task moves down at the same rate as it moves up, instead of going faster on the way down and slower on the way up.
Flash has a way to address the fact that some kinds of motion accelerate while others decelerate: It's called easing. Because every tween is between only two keyframes, you only have to think of two keyframes at a time. Ease in (think "ease into animation") means that the motion starts off slow and speeds up at the end. Ease out is the opposite the object starts by going fast and then slows down at the end of its motion.
You can see the effects of easing by opening the yo-yo animation you just created. Click the first keyframe and from the Properties panel set the Ease slider to 100 (by moving the slider down). Notice that the word "In" appears to the right of the slider. This causes the animation to start off slowly and then accelerate at the end (Figure 8.9 shows how the Properties panel looks). When you select Control, Test Movie, you'll see that the trip down should look pretty good.
Figure 8.9. The Ease setting in the Properties panel of a keyframe can affect acceleration or deceleration.
For the second tween (between Frames 10 and 20), you want to ease out as it reaches the peak, so select the keyframe in Frame 10 and from the Properties panel set Ease to 100 (by moving the slider up). Then select Control, Test Movie again. The result is that the yo-yo slows down before it reaches the top, making it look more natural. You'll find other ways to make your animation believable, and this quick experiment should spark some ideas.
Ease In and Ease Out are great; however, you can apply only one setting per tween (between two keyframes). That is, say you want an animation to ease in at the beginning and then ease out at the end. In the past you'd have had to add more keyframes, but in Flash 8 there's a custom easing option where you can fine-tune the easing behavior.
Let's take a quick tour of the Custom Easing dialog box and then use it in a task. Select a keyframe, use the Properties panel to add a Motion Tween if you don't already have one, and then click the Edit button adjacent to the Ease slider. The Custom Ease In / Ease Out dialog box appears like Figure 8.10.
Figure 8.10. You can fine-tune your tween's easing with the Custom Easing dialog box.
Here's a quick tour of the key features of the Custom Easing dialog box:
The Custom Easing dialog box makes the most sense after you give it a try. The next task explores a couple of typical uses for custom easing: easing in and easing out in the same animation.
Try It Yourself: Make an Animation Ease In and Ease Out
In this task you'll see how to combine Ease In and Ease Out in a single motion:
Notice that, as time passes at the beginning, the graph is mainly horizontal meaning it's not completing much of its tween. Then, in the middle it's nearly a vertical line, meaning it is doing most of its tween. Finally, it slows back down as it approaches the end. You can click anywhere between the two keyframes and press F5 many times to insert more frames. Also, you can crank up the frame rate to something like 50fps. Both of these edits should make the tween more obvious. I produced the following graphs in Figure 8.13 to show a few typical easing behaviors. See whether you can previsualize the animation's behavior and then read the description of each.
Rotating in a Motion Tween
If you manually rotate a symbol in one keyframe, Flash tweens the rotation appropriately. In addition, in a motion tween you can tell Flash to rotate a symbol a specific number of rotations. For example, you can use this option to make an animation of a wheel rotating. In the Properties panel when a keyframe set to motion tweening is selected, you can set the Rotate drop-down list to CW (for clockwise) or CCW (for counterclockwise), as in Figure 8.14. One rotation is usually plenty; any more will just cause the increments of rotation between frames to be greater. Also, notice that the default setting for Rotate is Automatic, meaning that Flash will tween rotation if you manually rotate the symbol in either keyframe. The None setting will leave a manually rotated symbol in its rotated position during the entire tween. Because perfectly round symbols are not interesting when rotated, if you want to try rotating the yo-yo, consider drawing a graphic off-center inside the master version of the yo-yo symbol.
Figure 8.14. By using the Properties panel while selecting a keyframe with motion tweening, you can make Flash rotate an exact number of turns, either clockwise or counterclockwise.
|< Day Day Up >|