Masking Script Lettering in Flash CS5

Masking Script Lettering in Flash CS5
There are many uses for the script lettering masking technique in FlashR. One method that is very popular is the effect that reveals the script lettering as to appear as if it's being written on the stage. This animation can be created in several levels of realism. For our working example, let's take a look at a few ecards that I animated for Pamela Gladding.

The easiest but less realistic method would be to use masking to reveal one word or letter at a time. You often see this effect in advertising. It gives the impression that the words are being spoken instead of written. I used this type of masking for the "Greetings of the Season" message in the Poinsettia Scroll ecard (see link below to view ecard). I chose this method because the words are being "revealed" by the twinkling stars that move across the stage. Therefore the handwriting effect is less important to this animation.

But when we want to create a realistic hand script effect, we will need to mask small parts of each letter over many frames. I used this technique in two PG ecards. In the first example, a Thanksgiving ecard, the capital letter G in "Give Thanks" was masked over 52 frames. As you can see in the screenshot, I used the round brush to paint small dots along the curve of the G. This method can be a bit time consuming but the effect is worth the extra work. The entire Give Thanks animation took 341 frames.

For the Holiday Gilded Pear and the Seasons Greeting Sleigh ecards, I used this technique along with a small paint brush animation to give the illusion that the brush was writing the message. I imported a small bitmap image of a paint brush and converted it to a movie clip so that I could create a tween animation for the brush.

As you would expect, this requires the tweening for the paint brush to be sequenced with the script lettering. I first masked the script lettering which made it easier to match the movements of the paint brush to the letters. If you take a look at the screenshot, you can see the purple guidelines match the shape of the letters. This entire animation was created within one movie clip which I named "message". I placed a stop(); code on the last frame of this movie clip so that the animation would play only once. Then on the main timeline, I placed this message movie clip on the stage on the frame that I wish the animation to begin.

Poinsettia Scroll

Thanksgiving Wishes

Holiday Gilded Pear

Seasons Greeting Sleigh

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.