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
Share This Post
Jobs
37 Comments
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
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
Hi, im having problems when it comes into setting the shape tween: it just displays the option for MOTION TWEEN…what´s wrong? Heeeelp!
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
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??
Hi Fiona,
I think the problem is you haven't broken the text into Vectors. Repeat step 2 again and see if that works.
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?
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.
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.
Very nice effect! I'm using it on my site for the roll over for Menu Items. Very Hot!
Great tutorial have been wondering how to do this, will have to give this a go
Thanks for the great tutorial! Easy to follow and worked great for me!
I m so happy before very confuse but ur tutorial better than. my work very easy sir…………so so thanks.
and How I can create vector graphic from text in FLASH 5 application ? sorry i do not know where
ErceSamuels last blog post..[Novinky] Malé krátke news okolo mňa
I'm not getting an option for the shape tween when I right click…. also when I use the drop down on the bottom I am told that "shape tweening will not occur on layers containing symbols or grouped objects"…. please advise…
I have followed your steps exactly…. I have done the ctrl b twice and it seems as if the letters are now vectors…. I'm stumped…
thanks for your tutorial…it helps…thanks ^^
Thank you! It works like you said! Good tutorial! Keep it up!
Hey there really nice tutorial. Easy to follow and great effect.
But like usual in my case it didn't went that smooth… As i tried
to convert my clip into a .gif file some mysterious squares appear
around the first letter for about a second or so.. The rest of the Text is
displayed correctly
Is this a failure of mine when i tried to convert it?
may be this is happened without create motion tween
yes i have done it without create motion tween
I done it all correctly, Ctrl+B twice, erased in portions backwards but its not letting me select shape tween?!? I have Flash CS4 and I have no idea where the drop down menu is.
Nevermind done it forgot the shift bit. Thanks works great!
your tutorial it's very nice and i'm using in my new web site. thanks
Hi, thank you very much. It helps a lot. But I wonder how can I make the shape tweened objects move in motion tweening way? It seems like they arent moving in the animation like motion tween
how do get it to stop after writing once. My file keeps going and going and going…LOL Help! Thanks
is there anyway to turn this into a gif ?
Great stuff man(or woman, I do not know), it was very helpfull.
Thank you, I've been wandering how to do this, really fast and easy! Great tutorial !
very nice effect indeed ! how to give "a pen" writing some text effect in flash cs3 pro please…..
I've made it, thax
Thanks. The tutorial helps me
a lot. At first I didnt notice that
"twice" of Ctrl B for making the
letters into graphic. So, I couldnt
erase jaja. But now, I can,
Want to use this in a college assignment but it writes the word too fast any chance of explaining how to slow the speed of writing down?
Oh and in answer to Corrine's question .. just put the word: stop(); in Actions window after selecting last keyframe. If you do it right you should see a little 'a' over keyframe. Then when you test it it will stop where you placed the Action.
cheers
Paul
Heya .. Your Tutorial is very straightforward and simple .. but I think as Im using a MAC and trying to follow your steps I'm not getting the intended result due to shortcut keys.
I understand that the 'Ctrl' key used with PC's is replaced with the 'Apple' key on my MAC. After following all your steps, I hit the 'Apple' & 'Enter' to view the movie but I get nothing but the slight outline faints that I missed out ..
i think the F6 command might have something to do with it .. can you please help?
This is awesome! you can use it for almost any animation you can imagine. i actually used it on a drawing. it seems like someone is actually drawing it right now. thank you very very much
Great dear!, it is easy as compare of masking….
thanks a lot man..its really good.
Incoming Links
Leave a Reply