Animating
text to write itself (2)
written by Chris Georgenes
This tutorial shows how to make text write itself
in a more realistic way. It requires a little frame-by-frame
animation that anybody with a little patience can accomplish.
File size is a little bit bigger compared to the animated mask
technique but the end result is very cool. By the end of this
tutorial you will have made the following animation:
Type out your text on it’s own layer. Break it apart
(Ctrl + B) twice until all text has been converted to actual
vector shapes. Create a 2nd keyframe (F6). Grab the eraser
tool and, starting from the very end of the text, erase a small
portion of the last letter.
2. Create another keyframe and erase a little bit
more. Repeat step 5 until you reach the beginning of the text
and eventually
erasing your text completely. Playback your movie and you will see
your text begin to slowly erase itself – since we want the opposite – simply
select all the keyframes in this layer (click and drag from 1st keyframe
to the last highlighting them all in black), and go to Modify > Frames > Reverse.
Now playback your movie again to see your text
write itself.
The 2nd method is my personal preference as it lends to a more natural/realistic
writing feel since you can erase along the contour(s) of each letter.
*note: The masked method yields
much smaller file sizes than the frame-by-frame method. My
1st example weighs in at only 2k, while my 2nd method is a
whopping 30k. No big deal if you’re animating for offline
use, but for the web it’s something to consider if you
have a lot of text and/or your audience includes dial-up users.
I hope this lesson helps you. I have provided the source file for you to download
and play around with. If you have any questions feel free to drop me an email
or IM me:
