Shape tweening—sometimes referred to as morphing—lets you create an effect that makes one object appear as though it's slowly turning into another object. Often, shape tweening is one job that can't be done easily by simply changing properties with the motion tween, so Flash has a special tween tool for the job.
To make a shape tween, you draw the beginning object and the ending object, and Flash does all the rest. For example, say you create a keyframe containing a yellow ball. Then, 24 frames along the timeline, you create another keyframe containing a green star. You then apply a shape tween to the frame span, and Flash generates all the incremental frames necessary to show the ball slowly—frame by frame—transforming itself into a star when you run the animation.
Tip
Shape tweens work only on editable graphics. If you want to tween a symbol (Making It Move with Motion Tweens), then you need to use a motion tween. If you want to tween a group of objects or reshape characters of text, then you need to ungroup the objects (Selecting part of a shape or object), or break apart the text (Modify→Break Apart) and then apply the shape tweens to the individual elements.
Shape tweening lets you change more than just an object's shape over a series of frames. Using a shape tween, you can also change an object's size, color, transparency, position, scale, and rotation.
To create a shape tween:
Select the frame where you want your tween to begin (for example, Frame 1).
Flash highlights the selected frame.
If the selected frame isn't a keyframe (if you don't see a dot in the frame), then turn it into a keyframe by selecting Insert→Timeline→Keyframe (or pressing F6).
Flash displays a dot in the frame to let you know it's a keyframe.
Note
Shape tweens use the standard keyframe (circle icon). They don't use property keyframes (diamond icons). Property keyframes are used exclusively with motion tweens (Making It Move with Motion Tweens).
On the stage, draw the shape you want to begin your tween.
In Figure 3-24, the beginning shape is a ball—a yellow fill with a black stroke.
Select the frame where you want your tween to end (for example, Frame 24).
Flash highlights the selected frame.
Insert an ending point for your tween (and a clean, fresh stage on which to draw your ending shape) by selecting Insert→Timeline→Blank Keyframe.
The stage clears, the playhead moves to the selected frame, and Flash displays a hollow dot in the selected frame to let you know it's a keyframe.
Tip
As explained on Test Your Frame-by-Frame Animation, you can carry over your beginning image from the first keyframe and make changes to it by choosing Insert→Timeline→Keyframe (instead of Insert→Timeline→Blank Keyframe).
6. On the stage, use Flash's drawing and painting tools to draw the shape you want to end your tween.
Your ending shape can differ from your first shape in terms of position, color, transparency, rotation, skew, and size—so feel free to go wild. In Figure 3-25, the ending shape is a green, five-pointed star.
On the timeline, right-click (Control-click) any frame in the middle of the frame span, and then choose Shape Tween from the shortcut menu.
When you right-click, Flash moves the playhead and highlights the frame you clicked. When you choose Shape Tween, the frame span changes to a nice lime color and inserts an arrow to let you know that you've successfully added a shape tween (Figure 3-26). A new tweening section appears in the Properties panel. (If the Properties panel isn't showing, choose Window→Properties.)
Note
If you have Tinted Frames turned off, then Flash doesn't change the color behind the tweened frames. To turn on Tinted Frames, click the Options menu (the tiny, striped icon on the far right of the timeline, just above the frame numbers, as shown in Figure 3-25); and then select the Tinted Frames option. A checkmark indicates that the option is turned on.
If you like, set the Ease and Blend shape tween options (Figure 3-27).
Ease tells Flash to speed up (or slow down) the tween. To change the Ease value, type a number or drag to change the number. If you want your tween to start out normally but speed up at the end, then set the Ease value to a negative number. To tell Flash to start your tween normally but slow down at the end, use a positive number. (Zero means that when you play your animation, the tween appears to be the same speed throughout.)
Blend tells Flash how picky you want it to be when it draws its in-between frames. If you want to preserve the hard angles of your original shape, click the Blend drop-down box and then select Angular; if you want Flash to smooth out the hard edges so that the tween appears softer, select Distributive.
Figure 3-27. Shape-related tweening options appear in the Properties panel: namely, Ease (to speed up or slow down your tween) and Blend (to tell Flash whether to preserve hard corners and angles from frame to frame or to smooth them out). To preview the in-between frames Flash generated for you, just select any frame in the frame span.
Test your shape by selecting Control→Play.
Flash plays your shape tween on the stage (Figure 3-28).
Want to see the finished example of the ball-morph-to-star shape tween? Go to www.missingmanuals.com/cds and download 03-4_Shape_Tween.fla.
Figure 3-28. When you run your animation, your beginning image appears to morph into your ending image, thanks to the in-between frames Flash generates when you create your shape tween. Because the pages of a book can't show motion, here onionskin outlines (page 126) represent the animated tween you'd see on the stage.
Flash does a bang-up job when it comes to tweening simple shapes: circles, squares, stars, raindrops. But the more complicated the images you want to tween, the harder Flash has to work to calculate how to generate the in-between images.
And if you think about it, that difficulty makes sense. Because complex beginning and ending images like a stylized acorn and tree (Figures 3-29 and Figure 3-30) contain a bunch of editable lines, shapes, and colors, Flash has to guess at which elements are most important and how you want the morph to progress from the first keyframe to the last.
Figure 3-29. Left: The original acorn drawing: So far, so good. Middle: Flash's first attempt at generating an in-between frame is a little scary. Right: Clearly, the acorn is changing and growing, but that's about all you can say for this generated image.
Figure 3-30. Left: You can almost make out the outline of a tree now. Middle: This one's getting there… Right: And finally, at the end of the tween, Flash makes it to your original ending image.
Sometimes Flash guesses correctly; other times, you need to give it a few hints. Adding shape hints to your tweens tells Flash how you want it to create each in-between frame. This makes your finished tween appear more realistic—more how you want it to be.
In short, shape hints give you more (but not complete, by any means) control over the shape-tweened sections of your animation.
Note
Shape hints are especially valuable when you're working on an animation that moves at a relatively slow frame rate—in other words, in situations when each separate frame will be visible to your audience's naked eye.
To add shape hints to a shape tween:
Select the first frame of your tween.
Flash highlights the selected frame.
Choose Modify→Shape→Add Shape Hint, or press Ctrl+Shift+H (Shift-⌘-H).
Flash displays a hint (a red circle containing a letter from A to Z) in the center of your shape, as shown in Figure 3-31 (top).
Figure 3-31. Top: When you add a shape hint, Flash places it at the center of your object. All you have to do is drag it to the edge of your object. Bottom: The more shape hints you use (and the more accurately you place them around the edge of your object), the more closely Flash attempts to preserve your shape as it generates the tween frames. Make sure you place the hints in alphabetical order as you outline your shape. If you find after several tries that Flash doesn't seem to be taking your hints, your shapes might be too complex or too dissimilar to tween effectively. In that case, you'll want to create additional keyframes or even consider replacing your tween with a frame-by-frame animation.
Drag the hint to the edge of your shape.
Figure 3-31 (bottom) shows the result of dragging several hints to the edge of your shape.
Repeat as many times as necessary, placing hints around the outline of the object in alphabetical order.
The bigger or more oddly shaped your object, the more hints you need. Placing a hint at each peak and valley of your object tells Flash to preserve the shape of your beginning object as much as possible as it morphs toward the shape of your ending object.
Go to the last frame of the shape tween and adjust the shape hints to match the final shape.
When the animation runs, Flash uses the hints in both the beginning and ending keyframe to control the shape of the morphing object.
Test your animation by clicking Control→Play.
The tweened frames of your animation conform, more or less, to the hints you provided. Figures 3-32 and Figure 3-33 show you an example.
Figure 3-32. Left: The original acorn is the same here as it was in Figure 3-29. Middle: Compare this attempt at generating a first in-between frame to the one in Figure 3-30. It's not exactly a prize pig, but it's better. Right: Already, you can see the form of the tree taking shape.
Figure 3-33. Left: Here, the already-pretty-well-shaped tree looks as though it's about to burst out of the acorn outline. Middle: Compared to tweening without shape hints (see Figure 3-29), this tween appears much smoother; you don't see the Flash-generated squiggly lines that you see in Figure 3-31. Right: The final frame of any tween appears the same whether or not you use shape hints.
It's easier for Flash to morph two simple shapes than one complex shape. So if shape hints don't help Flash solve shape tween confusion, then try tweening parts of your drawing separately. For example, put the cap of an acorn on a layer by itself, and put the bottom shell in a separate layer. Then you can shape tween the cap into the leaves of the tree and shape tween the shell into the trunk of the tree, with results as shown in Figure 3-34. There's an example of this technique on the Missing CD page (www.missingmanuals.com/cds). The file is called 03-5_Shape_Acorn.fla. You'll learn more about creating timeline layers in the next chapter.
Figure 3-34. If you add a shape tween to a layer with more than one object, the results usually aren't pretty. It's best to place objects on separate layers. Here the cap of the acorn tweens into the leaves of the tree, and the shell tweens into the trunk and branches. Using tweens on multiple layers gives you more control over your animation.
You may have noticed that Flash has a third type of tween listed on the Insert menu—Classic Tween. In the olden days, before Adobe developed the new and improved motion tween with its control of individual properties, the Classic tween was called Motion tween, and it was used to tween symbols. The new Motion tween is so much better and powerful that there aren't many reasons to use Classic tween on a new project. Here are the main two reasons you might want to use Classic tween:
You need to work on a project developed with an earlier version of Flash.
You're a Flash veteran and aren't ready to learn the newfangled motion tween.
In any case, Adobe wisely kept the Classic tween as part of Flash so you can use it if you need it. This book doesn't cover the Classic tween, but it was covered in Chapter 3 of Flash CS4: The Missing Manual. If you want, you can download a PDF of the chapter at www.missingmanuals.com/cds.