Recipe 4.11. Controlling Morphing

Problem

You want to control how Flash shape tweens a graphic, because Flash by itself does not morph it satisfactorily.

Solution

Use shape hints and/or add intermediary keyframes and manually redraw the shapes.

Discussion

When you employ a shape tween, Flash compares the starting and stopping state and does its best to correlate significant points in each state to each other to guide the tween. Unless you are working with primitive geometric shapes, such as squares and circles, Flash often struggles, and intervening frames look less like a natural transition between the two states, and more like a kaleidoscopic and quasi-random explosion of lines and shapes.

Figure 4-5 shows a shape tween of the letter A morphing into the letter B. Flash made some dubious decisions. Notice how the lower-left corner of the A morphs into the upper-left corner of the letter B rather than remaining where it is. Likewise, the upper-left corner of the A morphs around to the front of the letter B rather than staying where it is. This is a result of Flash guessing which points in the beginning of the animation should correspond to which points at the end of the animation.

Figure 4-5. Shape tweens look strange when Flash has to guess which points in the original correspond to certain points in the final graphic

Rather than forcing Flash to guess and living with the results, we can give Flash shape hints. Shape hints enable Flash developers to specify individual points that should correspond to one another before and after the tween. To use shape hints, follow these steps:

1. Select the first keyframe in the tween.

2. Add a new shape hint by choosing Modify Shape Add Shape Hint, or use the keyboard shortcut, Ctrl-Shift-H (Windows), or Command-Shift-H (Macintosh). A circle with the letter a also appears on the stage in the keyframe at the end of the tween. You use this pair of hints to designate a given point in both versions of the graphic.

3. Use the Arrow tool to drag the shape hint to a point on the shape. This task is usually easier if View Snapping Snap To Objects is toggled on.

4. If necessary, add several more shape hints by repeating steps 2 through 4. Each time you add a shape hint, it is given a new, unique letter; thus, the second shape hint you add is called b, and so on.

Using shape hints effectively often requires considerable trial and error. To determine how well the hints are working, you can scrub the playhead along the timeline between the starting and stopping frames of the tween.

You can remove a shape hint pair by right-clicking (Windows) or Control-clicking (Macintosh) on any shape hint and selecting Remove Hint from the context menu. When you remove a hint, its corresponding hint in the other keyframe is also removed, and the remaining keyframes are renamed (e.g., shape hint b becomes a when a is deleted), if necessary. You can remove all hints by choosing Remove All Hints from the context menu or by choosing Modify Shape Remove All Hints. For the Remove All Hints behavior to work properly, you must select the first frame of the tween.

Shape hints have limitations. Even after considerable trial and error, you may not obtain satisfactory results.

To improve the quality of a morphing animation beyond what is possible with shape tweens and shape hints, you'll need to draw intervening states of the animation by hand. That is, if you can't get a 12-frame segment to morph properly, try adding a new keyframe in the sixth frame and drawing or revising the graphic so that it appears as it should at the midpoint of the original shape tween. Then add shape tweens to the two new halves, applying shape hints as necessary.

See Also

Recipe 4.8, Recipe 4.10