Handwriting

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.

 

images

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.

images

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.

images

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.

images

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.

images

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.

images

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.

 

images

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.

images

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.55.151