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 Modify
Break 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.
