Animations and Interaction - Using Shape Hints to Morph Fonts
(Page 4 of 11 )
One option available to create better morphing in Flash Pro is to use shape hints. Shape hints serve as guides for morphing from one shape to another. Using shape hints, a drawing is less likely to display outlines or irregular changes while it changes progressively as the playhead moves along the Timeline.
The following simple example shows how to use shape hints and what differences they can make in creating transitions:
You Need Rulers to Get Guides - In this next example, you'll find it useful to use the rulers and guides. Select View, Rulers. Then, once the rulers appear at the top and left sides of the Stage, you can drag guides onto the Stage from the bottom and sides of the rulers to help precisely position your drawings.
Open a new document and add a keyframe to Frame 30. In Frame 1, type the letter E in a 96-point black Verdana font. Select the letter and press Ctrl+B to change it into a drawing.
In Frame 30, type the letter B in a 96-point black Verdana font. Select the letter and press Ctrl+B to change it into a drawing. Use your guides and rulers to position the second letter so that it's exactly where the letter E has been placed in Frame 1.
Move the playhead to Frame 1, select the E drawing, and then select Modify, Shape, Add Shape Hint from the menu. Create a total of three shape hints and place them as shown in Figure 4.9.
Move the playhead to Frame 30, select the B drawing, and position the shape hints as shown in Figure 4.10. (Initially you'll see only a single shape hint because the other two are beneath the one that's visible.)
Click Frame 1. In the Property Inspector, select Shape from the Tween pop-up menu.
Figure 4.9 - Frame 1 with shape hints.
Figure 4.10- Frame 30 with shape hints.
By examining the tween images created midway in the 30-frame movie, you can see the differences. Figure 4.11 shows how the mid-frame appears with no shape hints.
Figure 4.11- Frame 15 of a morph with no shape hints.
Using the shape hints, as shown in Figure 4.12, you can see that the image doesn't break up into outlines and irregular shapes. The mid-frame image shows a solid image that "grows" into a B.
Figure 4.12 - Frame 15 of a morph with shape hints.
For the hobbyist, morphs are a lot of fun, but for professional work, they must be used with care. Large amorphous dynamic images such as clouds and liquid motion can be created effectively using shape tweens and morphing techniques. However, they tend to be a special-case use in most applications. Although they're interesting, you should use them only where they do the best job. As you'll see in the next section, motion tweens are a better choice in most cases.
Motion Tweens Motion tweens are the primary type used in animation. Rather than tweening shapes or creating morphs, motion tweens have a more complex array of tweens, as shown in Table 4.2.
No matter what type of format is used, none of the changes have the morphing characteristics seen in shape tweens. When the size of any of the formats changes, the change is continuous. For example, if you tween an instance of a movie clip so that in the first keyframe the instance is small and in the second it's large, the effect is a smooth change in size with no outlines or other morphing effects.
Table 4.2 Motion Tweens
Format/Property | Instance | Type | Group |
Position | Y | Y | Y |
Size | Y | Y | Y |
Rotation | Y | Y | Y |
Skew | Y | Y | Y |
Color | Y | I* | I* |
* Reformatted as instance.
Tweening a Point Size Change The changes to be tweened need to be done in certain ways, especially with groups and type. For example, if you want to change the size of type and then tween the changes using a motion tween, you can't use the Text tool to change the size from, say, 24 to 48 points in the second frame. If you do, the change won't be a gradual tween. Instead, it will jump to the larger size when the playhead reaches the second frame. To effect a tween change, you can use either the Transform panel or the Free Transform tool. Try the following:
Open a new document and add 30 frames. Using a 24-point Arial font, type Resize This in Frame 1.
Insert a keyframe in Frame 30. Select the type block in Frame 30. In the Transform panel, check the Constrain check box and type 200% in either of the top text windows.
Click the first frame. In the Property Inspector, select Motion in the Tween pop-up menu. Test the movie, and you'll see the text change progressively from 24 to 48 points.
If you try to achieve the same effect by changing the font size in the second keyframe to 48 using the Text tool, the size change will be abrupt as the playhead enters the second keyframe.
 This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Tweening Imported Vector Graphics >>
More Flash Articles
More By Bill Sanders
