THIS IS ONE of my favorite animated effects because I am asked frequently how it can be achieved, yet it is quite simple in technique. Every time I demonstrate how to make text “write” itself, the reaction is almost always the same: “Oh wow! That’s all there is to it?” The example here uses an animated mask which yields a very small file size, ideal for large blocks of text.
1The first step is to type some text on the stage. It doesn’t matter what it says; just choose a font and start typing. By default, text fields in Flash are set to Dynamic. In some situations this may be fine but when an effect is added to the text field, the text may not render correctly in the Flash player. Such effects include masking, alpha, rotation and scaling. If you need to use Dynamic text, embed the font outlines.
2 If you choose to change the behavior of your text field to Static, the font will be embedded in the compiled SWF and the Flash player will render it correctly – even with an effect added to it. Another option is to break apart the text until it becomes raw shapes. This will insure the text renders correctly but also creates a larger file size and it will be harder to edit the text if need be in the future.
3Add a new layer above your text layer and convert it to a mask layer. The text layer will automatically be linked to it as a “masked” layer. In frame one, draw a rectangle just to the left of your text, making sure it is as tall as the text itself.
4In this same layer, create a keyframe further down the timeline and scale the shape horizontally so that it spans the entire width of your text.
5Now just apply a shape tween in between these two keyframes. Lock all layers and play your movie or test your movie to see the effect of your text writing itself.
6If you need to use Dynamic text, you must include the font outlines so that the text renders correctly in the Flash player. To do this, select the Dynamic text field and then click the “Embed…” button in the Properties panel. The Character Embedding panel will appear, allowing you to choose the range of characters used in your animation. Try to select the minimum number of characters because embedding all characters can increase file size significantly.
Hot Tip
If you want a more realistic technique to make text look like it is writing itself, check out the frame-by-frame method in Chapter 10.
18.225.55.151