Select Page

Flash course: Creating animated handwriting

tricky netre

 

This animated effect is one of my personal favorites, as I am regularly asked for help with this technique, even though it basically consists of simple steps. When I present the making of a “self-written” text, the question almost always arises in the audience: “Wow, is that all?” The example shown here was created using an animated mask with a fairly small file size, which is also suitable for creating larger blocks of text.

 

write 01

  1. As a first step, type something on the desktop. The nature of the text doesn’t matter here, just choose a font and start typing. By default, the Dynamic nature of text fields may be appropriate in some cases, but if you add effects (such as masking, alpha, rotation, resizing) to the text field, the Flash player may not be able to render the text perfectly. If you want to use Dynamic text, embed the outlines of the letters.

    write 02 
  2. If you want to change the behavior of the text box to Static, the font is embedded in the edited SWF, and the Flash player renders it perfectly even when you add an effect. This can also be achieved by breaking down the text into simple shapes; thus, the mapping is done without any problems, but the file size is larger and thus more difficult to edit later.

    write 03 

  3. Create a new layer above the text layer and convert it to a mask layer. The text layer automatically becomes a masked layer. In the first cube, draw a rectangle the same height as your text next to the text on the left.

    write 10
     

  4. Create a keyframe in the same layer, slightly below the timeline, and then resize the shape to cover the full width of the text.
     
    write 09

    write 09x

  5. Now apply Shape tween between the two keyframes. Close each layer, and then play or test the animation that creates the effect of the self-written text.

    write 12
    write 11 

  6. When using dynamic text, you must also embed the outlines of the letters for a perfect rendering in the Flash player. To do this, select the Dynamic text box and click the “Embed…” button in the Properties panel. The Font Embedding panel appears, where you can select the characters you want to use in the animation; select as few characters as possible, as embedding all the characters will significantly increase the file size. In the Options panel, you can type the characters you want to use on the desktop so that only they will be embedded and the file size will be as small as possible. 

 

For more Flash tips and tricks a Tricky techniques in Adobe Flash CS5in, in the publication from which the trick read in this article can also be found.

 

You can see a live Flash demo on our site on March 28th where you can learn more tricks!

 

On the day of the broadcast, a prize draw will also start on our site, where the Tricky techniques in Adobe Flash CS5We will draw three copies of the book in in among our readers.

 

 

 

 

 

About the Author

s3nki

Owner of the HOC.hu website. He is the author of hundreds of articles and thousands of news. In addition to various online interfaces, he has written for Chip Magazine and also for the PC Guru. For a time, he ran his own PC shop, working for years as a store manager, service manager, system administrator in addition to journalism.