By tweening shapes, you can create an effect similar to morphing—making one shape appear to change into another shape over time—or color and gradient animations. 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. For more information on this kind of keyframing, read the next section.

Requirements

To make this most of this learning guide, you need to install the following software and files:

Flash CS4 Professional

• Try
• Buy

Sample files:

• motion-is-awesomer.zip (ZIP, 16 MB)

Prerequisite knowledge

A basic knowledge of the Flash workspace.

Creating shape tweens

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

Figure 62. Each shape tween is on its own layer, so the shapes animate separately.

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 information, see the next section, "Using shape hints with shape tweens."

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 reverts to distributive shape tweening.

Using shape hints with shape tweens

To control more complex or improbable shape changes, you can use shape hints. Shape hints 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 shift.

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 of a shape instead, and 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.0.

To use shape hints:

1. Create a shape tween (see the previous section, "Creating shape tweens").
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.

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.

Figure 64. Shape hints were added to control the morph between two letters. You can see the animation in Figure 63.

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 product documentation. For information on using IK for shape animations, read the "Animating with the Bone tool" section of Creating animation in ActionScript 3.0.

Where to go from here

Read other sections of the Animation Learning Guide for Flash.

About the authors