Fine-Tuning a Motion Tween

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):

1.	In a new file, draw a circle.
2.	Select the circle and convert it to a symbol (by selecting Modify, Convert to Symbol or pressing F8). Call it Yo-Yo, leave the behavior set to the default Movie Clip, and click OK.
3.	Position the yo-yo in its starting position, near the top of the screen.
4.	Click Frame 20 in the Timeline and insert a keyframe (by selecting Insert, Timeline, Keyframe or pressing F6).
5.	Before you move anything, click Frame 10 in the Timeline and insert another keyframe. At this point you should have three identical keyframes.
6.	Make sure the red current-frame marker is on Frame 10 and move the yo-yo down to the bottom of the Stage. (Clicking the keyframe in Frame 10 to add the keyframe not only moves the current-frame marker but also selects all the contents of this frame that are on the Stage.)
7.	Set motion tweening for Frame 1 (which specifies how to tween to Frame 10) and for Frame 10 (which specifies how to tween to Frame 20). To do this, you can use the right-click method if you want. To set tweening for two keyframes (Frames 1 and 10) at the same time, click the keyframe in Frame 1, hold Shift, and then click the keyframe in Frame 10. Then access the Properties panel and set tweening for both keyframes (see Figure 8.8). Select Motion. Figure 8.8. The Properties panel affects every keyframe selected.
8.	Select Control, Test Movie (or press Ctrl+Enter). Save the animation. (You'll add to it in a minute.)

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.

Custom Easing

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 graph area displays a line to show how much of the tween has completed (0% 100% on the vertical scale) over time (that is, the number of frames between the two keyframes shown on the horizontal scale). A tween with no easing is a straight 45° line going from 0% in the first frame to 100% at the last frame. You can see some finished examples of custom tweening in Figure 8.13 later in this hour.

  Figure 8.13. Compare this variety of custom easing graphs.

  
  
  

• You can click right on the graph line to control. These control points include Bézier handles (like the Pen tool) to modify the exact shape of the graph. You're initially given a control point at the beginning and end of the tween. You can make a tween ease in and out with just these two points (as you'll do in the next task). Add more control points only when you need the easing behavior to change in the middle of a tween.

• By default, one graph applies to all properties that are changing within the tween. That is, if you uncheck the Use One Setting for All Properties option, you can make a separate graph for each property listed in the Property drop-down list. You select a property (say, Position) and then make a graph for how the changing position (in the tween) will ease. Then you select another property (say, Scale) and control how the changing scale will ease. Remember that a difference in any property (position, scale, rotation, color effect, and filters) will animate during the tween. Here you're just controlling how quickly it reaches 100% of those changes.

• The Play preview button is helpful because you can make lots of adjustments without closing the dialog box and returning to it.

• Your cursor changes to communicate what will happen if you click. There are five things you can do while modifying a graph: add a control point, select a control point, move a control point, modify the graph shape before or after a control point, or deselect all control points. The cursor for each is shown in Figure 8.11. Note that you can remove control points by simply selecting one and then pressing Delete.

  Figure 8.11. The cursor changes to tell you how you'll modify a graph.

  

  
  

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:

1.	In a new file, draw any shape and make it a symbol. Place the symbol somewhere on the left side of the Stage.
2.	Click Frame 50 in the Timeline and insert a keyframe (by selecting Insert, Timeline, Keyframe or pressing F6).
3.	While the red current-frame marker is in Frame 50, move the instance of the symbol to the right side of the Stage.
4.	Go back to the keyframe in Frame 1 and create a motion tween (by right-clicking and selecting Create Motion Tween).
5.	Test the movie (by selecting Control, Test Movie) and remember how it looks.
6.	Now we'll use custom easing. Click the keyframe in frame 1 and click the Edit button adjacent to the Easing slider.
7.	Interestingly, we won't actually add any control points there is already one at the beginning and one at the end. Select the first control point by clicking right on the black box at the bottom left of the graph. Grab the handle (it should appear on the graph line) and drag it down to the base of the graph and about 3/4 of the way across (that is, nearly to the bottom-right corner).
8.	Select the control point at the end (upper right) and then drag the handle up to the top and over to the left about 3/4 of the way to the left (almost to the upper-left corner). Your graph should look like Figure 8.12. Test the movie and watch how it behaves. Figure 8.12. This S-curve graph makes a single tween that eases in and eases out.

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.

Watch Out!: Avoid Gratuitous Effects

There is such a thing as too much of a good thing, and gratuitous animation is a fine example. There's no harm in playing with all the bells and whistles available in Flash. In fact, I encourage it while you learn. Just realize that to effectively communicate an idea or tell a story (which, after all, is what animation really is for), you should refrain from superfluous animation, which can ultimately detract from your message. For every effect you want to add, ask yourself: "Does this help clarify my message or not?"