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 to 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 (see Figure 15).

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 15 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. Refer to the sample file shape_hints.fla, which is part of the animation_samples.zip archive that accompanies this article, or see Figure 16 to see where each shape hint was placed.

Figure 15. Displaying the default shape tween between two letters (top) and displaying an animation that uses shape hints to control how the letters morph (bottom)

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.

Figure 16. Shape hints added to control the morph between two letters (animation shown above)

For more information on shape hints, see Using Flash > Creating Motion > Using Shape Hints.