Animation Learning Guide for Flash: Shape tweens

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:

1. Create a new file and name it shapetween.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. For best results when you're starting out, the frame should contain only one drawing (such as a single oval shape).
4. Select Frame 10 of Layer 1 and create a second keyframe (F6).
5. Select the artwork on the Stage at Frame 10 and do one of the following:
   • Modify the shape, color, opacity, or position of the artwork
   • Delete the artwork and place new artwork in the second keyframe (it should be a raw graphic drawing as well)
6. Right-click any frame in the Timeline between frames 1 and 10 and select Create Shape Tween from the context menu.
7. Select an option for Blend from the Property inspector (Window > Properties):
   • Distributive creates an animation in which the intermediate shapes are smoother and more irregular
   • Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes

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:

1. Create a shape tween (see the previous section).
2. Select Frame 1 of the layer with the animation on the Timeline.
3. Select Modify > Shape > Add Shape Hint.
4. Move the shape hint to an edge or corner that you want to mark.
5. Select the next keyframe in the tweening sequence.
6. Move the shape hint to the edge or corner in the ending shape that should correspond to the first location you marked.

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.

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:

• In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.
• Make sure that shape hints are logical. For example, if you're using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.
• Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape.

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.