Shape tweens don't always come out the way you expect. The tips we just covered are really more like rules and cautions. Even if you heed all the warnings, you still might have shape tweening results that are anything but what you expect. Flash has a feature especially for shape tweening that helps you tell Flash what you really want. It's called the Shape Hint feature, and it can make the difference between a shape tween that looks like a mess and one that looks like what you had in mind.
Using Shape Hints
A shape hint gives you a way to tell Flash exactly how to map one point in the beginning shape to another point at the end of the shape tween. You'll want to use shape hints when Flash doesn't create a shape tween that matches what you had in mind.
Points inside a shape are mapped during any tween. The term map refers to how one point in the starting shape corresponds to a specific point in the ending shape. Consider how every point on a printed map corresponds to a real location. A point on the map can be mapped to a real location. When Flash motion tweens a box from small to large, one corner of the small box is mapped to the same corner in the large box. Every point is mapped. Mapping points in a shape tween is more complex, so there's a feature called Shape Hints that lets you control how Flash maps individual points. In the following task you'll step through how to use shape hints.
Try It Yourself: Use Shape Hints for a Better Shape Tween
In this task you'll use the Shape Hints feature to create a more controlled shape tween:
In a new file, select the Rectangle tool and ensure Object Drawing in the options portion of the Tools is turned off. Draw a perfect square by using the Rectangle tool (just hold Shift while you drag).
In Frame 25 of the Timeline, insert a keyframe (by clicking in the Timeline at Frame 25 and then pressing F6 or selecting Insert, Timeline, Keyframe).
Change the shape in Frame 25 to a triangle. There are many ways to do this, including starting from scratch and using the Onion Skin tools to help line up the triangle with the square. You should make the triangle as similar as possible to the square by following the next steps.
In Frame 25, draw a vertical line that doesn't touch the square.
Select the Selection tool (make sure Snap to Objects is turned on under View, Options), click once on the line to select it, and click and hold in the center of the line. (Make sure you have the solid circle, indicating that you've grabbed the center; if you don't, try grabbing the line again.) Now drag the line so it snaps in the center of the horizontal top of the square (as in Figure 9.5).
Figure 9.5. Dragging a vertical line while Snap to Objects is turned on lets you perfectly position the line at the center of the square.
Click off the line and grab the top-left corner of the square. Drag it until it snaps to this bisecting line. Do the same for the top-right corner of the square.
Select and delete the excess portions of the vertical line.
Select the first keyframe and use the Properties panel to set Tween to Shape. Scrub, and you see that the results are probably not what you expected. Now is your chance to use the Shape Hints feature.
Under the View menu, ensure that Show Shape Hints has a checkmark (select it if not).
Place the red current-frame marker in Frame 1 and select Modify, Shape, Add Shape Hint (or press Ctrl+Shift+H).
Notice a little red circle with the letter a (a shape hint). Temporarily move the red current-frame marker to Frame 25 and notice that there's also an a shape hint in this frame.
Make sure you're back in Frame 1 and that Snap to Objects is turned on (by selecting View, Snapping, Snap to Objects). Use the Selection tool to drag the shape hint so that it snaps to the top-left corner of the square. (Notice in Figure 9.6 that it's still red, indicating that you haven't really mapped this point to an end point yet.)
Figure 9.6. Although you've added a shape hint in the first keyframe and even attached it to the shape, it's still colored red because you haven't added a shape hint for the ending keyframe.
Go to Frame 25 and position Shape Hint a so that it snaps to the middle of the left side of the triangle. Notice that the shape hint turns green, indicating that it's been mapped. Also, when you return to Frame 1, the shape hint is colored yellow to indicate that it's been mapped.
Scrub to see the results so far. If it looks good, you don't need to add any more shape hints. (For this exercise, however, it will likely not look very good.)
In Frame 1, add another shape hint (by pressing Ctrl+Shift+H), and the new hint is automatically given the name b. Position it in the top-right corner of the square.
In Frame 25, map Shape Hint b to snap to the middle of the right side of the triangle (similarly to how Shape Hint a was mapped). See Figure 9.7.
Figure 9.7. Shape Hint b is snapped to the middle of the right side of the triangle in the second keyframe.
At this point, the results should be much better than before you added any hints. Use Test Movie to see.
Understanding Shape Hints
The time-consuming part of the preceding task was creating the triangle to match the square perfectly (and that should have been a review). Adding the shape hints was fairly simple. Granted, I told you where to place the hints. However, figuring out logical positions for shape hints is usually pretty easy. Think of it this way: You're telling Flash "this point in the starting shape goes with that point in the ending shape."
You should notice that after you add one shape hint, you can see how the point under the hint in the first keyframe hurries to the corresponding point (under the hint) in the end keyframe. Carefully watch the points while you slowly scrub.
Did you Know?: Less Is More
Don't use more Shape Hints than necessary. Don't add 10 shape hints to the first frame and then map them all. Rather, add one shape hint and map it, and then evaluate the results; one might be enough. Feel free to continue adding shape hints all day long, but realize that sometimes less work is necessary. There's no reason to add more hints than you really need.
A few more details about shape hints are worth understanding:
You can't add shape hints unless you are currently in the first keyframe of a span with shape tweening already set. In other words, you have to have a shape tween already and be in the first frame in order to add a shape hint.
You can use the menu selection View, Show Shape Hints to make the shape hints you have invisible (but they will still be used).
Shape hints are recognized only after they've been mapped that is, snapped to a point on the shape in both the first keyframe and the last keyframe. They change color after they are mapped. This means you still have to snap both the start and end hint, even if their default positions seem acceptable as is.
You can remove one hint at a time by right-clicking (or using Control+click on a Macintosh). In addition, you can remove them all by selecting Modify, Shape, Remove All Hints.
Shape hints can be used only with a pair of keyframes! Just as tweening occurs between only two keyframes at a time, a shape hint works between only two keyframes at a time. However, shape hints can't be used from one keyframe to a second and then to a third. In the previous task, you might want to add a third keyframe where the shape turns into a square again. If you want to use shape hints from one keyframe to another and then a third, you must have four keyframes. Use a shape hint from the first to the second and then use another from the third to the fourth (see Figure 9.8).
Figure 9.8. A shape hint requires that you have only two keyframes. To continue from one tween to the next, put two identical keyframes right next to each other. You're left with two pairs of keyframes and now you can use shape hints on the second pair.