Hack 34 Shape Tweening Complex Shapes

Shape tweening is underutilized due to the difficulty in getting predictable morphs. Create better shape tweens by simplifying your shapes into "single perimeters."

One of the easiest (and most used) applications of shape tweening is morphing text. To create such a shape tween, use the Text tool to type a letter, such as "e" in frame 1. Insert a keyframe (F6) in frame 10 and, in frame 10, delete the "e" and replace it with the letter "c". In each keyframe, select the letter and choose ModifyBreak Apart to convert the text to a vector shape (if you have multi-letter text, you need to choose ModifyBreak Apart twice). Then select one of the tween frames (frames 2-9) and choose Shape from the Tween pop-up menu in the Properties panel. Scrub the playhead across the timeline to see Flash perform the shape tween.

Although a shape tween between an "e" and a "c" seems as if it should be easy, Flash gets totally confused and adds odd intermediate swirls, as shown in Figure 4-22.

Figure 4-22. A really bad shape tween from an "e" to a "c" caused by shapes with different numbers of perimeters

Flash's shape tweening algorithm doesn't like it if one of your shapes has enclosed areas (such as the eye of the lowercase letter "e") and the other (such as the letter "c") does not. The problem cannot be fixed even if you add shape hints, because one shape (the "e") has one more continuous perimeter than the other (the "c").

You can see what Flash is trying to do here if you think in terms of perimeters. Flash correctly tries to tween the outer perimeter in the "e" to the outer perimeter in the "c." But Flash doesn't know what to do with the inner perimeter (the one around the eye of the "e") because the "c" doesn't have a second perimeter. So Flash does nothing much with this extra set of lines.

Earlier we looked at how to cut gaps in shapes [Hack #20] to fool Flash into thinking that a complex shape (one with one or more enclosed spaces) is a simpler shape. You can use the same trick to force dissimilar shapes to look more similar, which is required for smooth shape tweening.

Applying the same technique here, we simply add a hairline gap in the eye of the "e" to ensure that both letters have a single perimeter. Pick the location for the hairline gap (break) that makes it easiest for Flash to morph one shape into the other. This may take experimentation, but you'll develop an intuitive feel with practice. In this case, the best location is anywhere along the horizontal line that forms the lower edge of the eye of the "e." Using a hairline stroke (by setting the hairline option for the Line tool using the Properties panel), draw a line at the required point. Then, convert the stroke to a fill using ModifyShapeConvert Lines to Fills and delete it, which opens up the enclosed area and results in a single perimeter.

If you test the shape tween again, you will see much better results, as shown in Figure 4-23. The swirls immediately disappear and Flash makes more sensible decisions in controlling the tween transition. Flash can now correctly map the outlines between the "e" and the "c" because they both have one perimeter.

Figure 4-23. An improved shape tween from an "e" to a "c" enabled by having two shapes with the same number of perimeters

The mismatched perimeters problem explains why Flash doesn't like to tween letters with disconnected areas (like "i" and "j") to contiguous letters (such as a "t"). The problem is depicted in Figure 4-24.

Figure 4-24. A bad tween from an "i" to a "t"

One hacky way around this is to remove the dot over the "i" just before you perform the shape tween, as shown in Figure 4-25.

Figure 4-25. An improved tween from an "i" to a "t" enabled by removing the dot before performing the tween

However, if you are tweening from a "t" to an "i," you'll need to either use the hairline trick to break the "t" into two perimeters or wait until the tween finishes before adding the dot over the "i."

Final Thoughts

Vectors are cool for low-bandwidth delivery, but because they are computationally expensive, Flash has a number of limitations in their use, such as assuming that the start and end of a shape tween have the same number of perimeters. As we have seen, understanding these limitations is the key to overcoming them. As soon as you realize that Flash is looking at not only matching points between the start and end of a shape tween but also the perimeters, you can set about finding ways to fix the problem.