15 August 2011
By tweening shapes in Adobe Flash Professional CS5 you can create an effect similar to morphing—making one shape appear to change into another shape over time—or animate color and gradient changes. Flash can also tween the location, size, color, and opacity of shapes. For example, you would use shape tweens to make a circle turn into a square, or make a line wiggle.
Note: Shape tweens do not share the concept of property keyframes or object-based tweening. A shape tween creates an animation by interpolating between two separate shapes that are each on keyframes.
Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, and want them to morph together, all the shapes must be on the same layer. Otherwise, for some effects, you should shape-tween each shape on separate layers (if you do not want them to affect one another). In Figure 62, each rectangle—the curtain effect in the background and the rectangle on top—tweens on its own separate layer (see shape-tween.fla in the source files).
To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart (Modify > Break Apart). To apply shape tweening to text, you must break the text apart twice to convert the text to objects.
Note: To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape. For more information, see the next section.
To tween a shape:
Note: Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash Professionl reverts to distributive shape tweening.
To control more complex or improbable shape changes, you can use shape hints. These identify points that should correspond in starting and ending shapes. For example, if you are tweening the letter M into the letter N, you can use a shape hint to mark corner of the letter's shape. Then, instead of the letters becoming a jumble of lines while the shape change takes place, each letter remains recognizable and changes separately during the transition.
Tip: Sometimes shape hints can produce unexpected results, or you might not be able to achieve the effect you want even with shape hints. You might want to try using inverse kinematics (IK) inside a shape instead and then use the bone structure to animate your object. To learn how to do this, read the "Animating with the Bone tool" section of Creating animation in ActionScript 3. See also the IK section of the Graphic Effects Learning Guide for Flash.
To use shape hints:
Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).
The SWF files in Figure 63 animate the letter M into the letter N. The top SWF file does not use shape hints to morph the two letters, while the bottom SWF file uses shape hints to improve the morphing. See Figure 64 (and shape-hints.fla in the source files) to see where each shape hint was placed.
Figure 63. The top SWF file displays the default shape tween between two letters. The bottom SWF file displays an animation that uses shape hints to control how the letters morph.
Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints. Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when within a fill area or outside the shape (Flash ignores red shape hints).
For best results when tweening shapes, follow these guidelines:
For more information on using shape hints and shape tweens, see the Shape tweening section of the Flash Professional online help. For information on using IK for shape animations, read the "Animating with the Bone tool" section of Creating animation in ActionScript 3 and also Character animation with the Bone tool by Chris Georgenes.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.