|
|
Text writing animation:
In this tutorial I will show you how to create an pen writing animation
which looks as if the the text is written real time as shown below, if
anyone knows a shortcut to this please let me know. There is one using
flash though which I will come up with in my later tutorials ;)
First let me tell you the basic tools and the minimum criteria you will
need to start off and understand this tutorial:
1. You will need Macromedia Fireworks ver. 3.0 or 4.0,
I have used ver. 4.0
2. Basic concepts clear about Fireworks 3.0
Though I wont't say that knowing fireworks is compulsory for this
tutorial but some prior knowledge will surely help, anyway lets start off
with it ;)
- After starting of with Fireworks create a new file with dimension
W: 125 X H: 80 with background transparent and
resolution 72, save it & keep saving if your computer hangs
you will lose all your work
- Now lets type some text, select the text tool, click on the
icon with the letter 'A' on it on the toolbar, click on the canvas,
you will get a text editor, set size to 100 and type some text,
I am using the word 'ten' to keep the animation short. Make sure the
you choose a font that continues between each letter like the one I
am using - Bush Script MT.
- The text is in vector format we need to rasterize (convert
to bitmap) as we will be using the earaser tool on it, press ctrl
alt shift Z or convert it to bitmap or by using the modify menu
> convert to bitmap as shown below.
- Now after converting the text to bitmap we need to use the frames
pallete, press shift F2 or go to the window menu > frames.
Now here is from where the real thing starts i.e: animation, now attentively
follow the steps from here.
- Now go to the frames pallete, click on the small black triangle facing
to the right to bring the out the frame pallete fly-out and select Duplicate
Frame.
- After doing this you will get a pop query asking how many frames to
add leave it to one and select the radio button namely - At
the beginning.
- Now go to the frame you just created i.e: frame number 1 it
will always be frame number 1 as u will be duplicating the last layer
created and put it in the beginning. Select the eraser tool from the
tool bar or by pressing 'E' on your keyboard. Now what you have
to do is start erasing from the end of the word 'ten' little by little
and at the same time move on to the earlier frame one by one, select
a round brush with size 13, to do this double click on
the eraser tool icon on the toolbar to open the eraser options
pallete, make sure 'erase to transparent' is selected in the drop down
selection.
- Now erase a little part of the letter 'N' in the sequence shown below
at the same time keep adjusting the size of the eraser (double click
on the eraser tool icon on the toolbox) as per the curves.
Frame 28 
Frame 27 
Frame 26 
Frame 25 
Frame 24 
- Now save your animation, to test the animation click on the small
white play button at the bottom of the document window. Your
aniamtion should start playing in the document window itself.
- Now the final part i.e rendering your animation or exporting it. Go
to the File menu selct Export Preview, You will get a
export preview window in the Format selection choose Animated GIF,
If you want to control the speed of ur animation go to the Animation
tab select all the frames from top to bottom by pressing shift
and simultaneously clicking on the top and the bottom frames and putting
a number in the input box with a small clock above it shown below.
- Click on Export, save ur GIF animation wherever u want
to on your Hard drive or your Floppy and..............VOILA your pen
writing animation is ready. Similarly before you save your animation
you can save it in SWF (flash) format just change the
file type in the 'Save As' window to Macromedia Flas SWF. It
should look something like shown below
|
