#36 Creating Shape Tweens
Thanks to a process called tweening, not all animation has to be drawn frame by frame. If you give Flash two keyframes—one showing the way an object looks at the start of a sequence, and the other showing what it looks like at the end—Flash can compare the keyframes, analyze all the differences between them, and gradually change one to the other by generating a series of in-between frames.
There are two kinds of tweens: shape and motion. Here and in #37 we'll be concentrating on shape tweens, but much of how you handle shape tweens will also apply to motion tweens, which are covered in #38.
These are the basic steps for setting up a shape tween:
- Draw an object on the Stage in an empty keyframe. Don't group the object or convert it to a symbol. Shape tweens work only with editable paths, primitive shapes, or Drawing Objects.
- Decide on a duration for the shape tween and calculate in which cell of the Timeline the last keyframe should fall. (For example, if your frame rate is 15 fps, and you want the tween to take 3 seconds, the last keyframe should be 45 frames after the first keyframe.) Select that cell.
- Press F6. Flash fills the in-between cells with regular frames, creates a new keyframe in the selected cell, and copies the object from the preceding keyframe into it.
- With the second keyframe still selected, modify the object. You can reshape it, move it to a different place on the Stage, transform it with the Free Transform tool, change its color or opacity, or do any combination of those things.
- Select the first keyframe again. (This will also work if you select one of the intermediate frames, but selecting the first frame is recommended.)
- In the Property inspector, choose Shape from the Tween menu (Figure 36a). The frames between the two keyframes turn green, and an arrow points from the first keyframe to the last. The arrow is your confirmation that you have a working shape tween.
Figure 36a Choosing Shape from the Tween menu causes the two keyframes to be connected by a rightward-pointing arrow on a green background.
- Scrub through or preview the movie. You'll see that in each tweened frame, the object in the first keyframe incrementally takes on the characteristics of the object in the second keyframe (Figure 36b).
Figure 36b Shape, location, transformation, color, and opacity can all be tweened at once.
Figure 36c was an example of a tame shape tween; here is an example of a wild one.
If wild shape tweens are what you want, here are some things to try:
- Make the object in the first keyframe and the object in the second keyframe as different as possible. In fact, instead of pressing F6 in step 3, you can press F7, draw an entirely new object in the second keyframe, and then watch how Flash tweens one into the other.
Have different numbers of objects in the two keyframes. This sort of tween is especially common with text—for example, morphing the word NO (two objects) into YES (three objects). Keep in mind, though, that if you want to shape-tween text, you first have to break it apart into editable paths (see #20).
If you prefer tame shape tweens—as most serious animators do—consider the following suggestions:
- Tween only one object per layer. Remember that Flash considers the stroke and the fill to be separate objects. If your path has both, move the stroke and the fill to different layers, and tween them separately but simultaneously (Figure 36d). Alternatively, you could use a Drawing Object, in which Flash considers the stroke and fill to be part of a single object.
Figure 36d It's fine to have several shape tweens happening simultaneously on different layers.
- Simplify each object as much as possible. The fewer anchor points there are, the smoother the tween will be.
- Use shape hints, which are explained in #37.