Shape Tweening (Morphing)

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:

  1. Select the frame where you want your tween to begin (for example, Frame 1).

    Flash highlights the selected frame.

  2. 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.

  3. 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.

  4. Select the frame where you want your tween to end (for example, Frame 24).

    Flash highlights the selected frame.

  5. 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. 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.

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

  8. If you like, set the Ease and Blend shape tween options (Figure 3-27).

  9. 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.

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.

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.

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.

To add shape hints to a shape tween:

  1. Select the first frame of your tween.

    Flash highlights the selected frame.

  2. 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).

  3. 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.

  4. 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.

  5. 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.

  6. 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.

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.

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:

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.