Flash 8 Cookbook

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