Flash Essential

Flash Handwriting Effect Tutorial

Apr 30th 2008
10 Comments
respond
trackback

In this tutorial I’ll be showing you how to do a simple but powerful handwriting effect (shown below) in flash using a Shape Tween on the timeline. So lets open up Flash and get started.

Step 1

Go to the first key frame on the timeline and select the Text Tool, choose a font that looks like someones handwriting in this case I used Nueva Std Cond. Go ahead and type what you want on the stage.

Step 2

Select the first keyframe on the timeline and press Crtl B twice to break your text apart into vectors.

Step 3

Select the Eraser Tool and go to the last letter of the word. Press F6 and then delete a small portion of the letter working our way backwards. Repeat this until you have erased every letter of the word.

Tip: You might want to zoom in to make it easier to erase the portions of the letters.

Step 4

Select the last keyframe on your timeline hold down Shift, with Shift held down select the very first keyframe that should select every frame on your timeline. Now Right Click and select Create Shape Tween.

Step 5

Repeat Step 4 but this time I want you to select Reverse Frames in the dialog box when you right click.

Step 6

Press Ctrl Enter to see how that looks, not bad but it could be a lot smoother. So click outside the stage area and go to the bottom of the page and change the Frame Rate to 30 fps. Much better now don’t you think?

Conclusion

This is the easiest way I find to create this type of effect, it may create a slightly bigger file size but it is pretty accurate. You've probably noticed this technique could be used for other things such as a plant growing or a smoke effect, just use the same techniques shown above and Hey Presto! You've got yourself a plant growing or smoke coming out of a cigar.


This post is tagged



Sponsors

Explore Recent





Monthly Archives



Friends and Affiliates



10 Comments

  1. Chandrashekar

    I used the same procedure as you have described byt the out put is not as the same as yours,
    My out put was like blinking the text please help me where did i go wrong

  2. admin

    Hi Chandrashekar,

    Did you use a shape tween?

    If you could send me through the .fla file so I can get a better idea of where you're going wrong.

    Thanks

    Matt

  3. Luis

    Hi, im having problems when it comes into setting the shape tween: it just displays the option for MOTION TWEEN…what´s wrong? Heeeelp!

  4. admin

    Hi Luis,

    That's a new one!

    instead of right clicking go down to the properties panel and select shape tween from the drop down box.

    thanks

  5. hi there guys, i have tried to do this tutorial but whenever i use the eraser tool, the bit i have erased just pops right back up again. its really frustrating!!

    does anyone know why??

  6. admin

    Hi Fiona,

    I think the problem is you haven't broken the text into Vectors. Repeat step 2 again and see if that works.

  7. your tutorial is nice and simple to follow. I thought I should let you know that on Step 2 you actually need to press Ctrl+B twice really; once for the text to brake into letters and twice to brake the letters into graphics.

    My question however is: what if you have several sentences (say 5 of them) and each is taking you about 250 frames to complete?

    At the beginning I thought that nesting the symbols would be a good idea, but it doesn't seem to help much.

    Have you an idea maybe?

  8. Despellanion

    This doesn't work at all for me. The letters just appear one by one instead of creating the "drawing effect" like yours. I followed all the steps correctly. I'm using Flash MX 2004.

  9. admin

    Calliope, It does actually say press Ctrl B twice on Step 2. The "twice" part just isn't highlighted I should probably sort that.

    I'll look into the nesting symbols and get back to you.

    Despellanion, send me through the .fla file at Matt@FlashEssential.com so I can see where you are going wrong.

Leave a Reply