Recipe 4.10. Morphing Graphics with Shape Tweens

Problem

You want to morph a graphic into a different shape.

Solution

Draw the beginning and ending states of the graphic using Flash vector art, and insert a shape tween. To morph text, convert it to vector shapes (Modify Break Apart) before inserting the shape tween.

Discussion

You can use shape tweens to morph elements from one shape to another. Like motion tweens, you apply them by defining a beginning and ending state of the element in two different keyframes of a single layer, and insert a tween, using the Tween drop-down menu of the Property inspector. Unlike motion tweens, shape tweens work only with drawn vector art. That is, symbols and text must be broken apart (Modify Break Apart) before they can be shape tweened. When broken apart, of course, instances are no longer associated with symbols, and text is no longer editable as text. You can apply shape tweens to bitmaps only after you've traced the bitmap.

Shape tweens also have different available settings than motion tweens. Shape tweens lack a Rotation setting, although easing is still available. And shape tweens have a setting called Blend, which contains two options:

Distributive

The default option, distributive morphs the first graphic element into the second using smooth curves.

Angular

With this setting active, Flash attempts to preserve corners and straight lines during the tween. Use only for elements that have sharp corners and straight lines.

Shape tweens work best when morphing from one simple element into another. For example, morphing a circle into a square usually works quite well. Morphing more complex art often has undesirable results with some bizarre intermediary stages. Thanks to shape hints, which enable you to guide Flash as it morphs one element into another, you are not altogether without recourse; shape hints are discussed in the next recipe.

You are not limited to single lines or shapes, and you can shape-tween as many lines and/or shapes as you like. Of course, the more lines and shapes, and the more geometrically irregular they are, the less likely the results will be satisfactory.

An oft-overlooked feature of shape tweens is that they are capable of every kind of tween that a motion tween is. That is, you can position the starting and stopping states in different locations, and a shape tween will animate the motion of the artwork from one state to the next, even as it morphs the shape. Likewise, you can animate transformations, such as rotation and scaling, and you can also animate changes in color or alpha. Unless you are also morphing elements during the transition, you should use motion tweens rather than shape tweens, because they add less to the overall file size and demand less of the processor to render. However, if you are morphing an element, bear in mind that you can shape-tween more than its shape.

Although shape tweens can allow for some interesting and creative effects, they have been largely overused. If you want to use a shape-tween effect in your Flash movie, take the time to hone the result using techniques such as shape hints.

See Also

Recipe 4.11