| In this Flash tutorial,
we will show how easy it is to create a typing text
effect. The final output is as follow:
Step 1 (The Text Layer)
First of all, you need to put the main
content, i.e. the text string that you want to animate,
on a layer. In our example, we used the text "Flash-here.com".
Just use the text tool to put your text on the first
key frame on the stage. Name the layer as "text".
Then insert a number of frames after it. The total number
of frames should equal to the (no. of characters + 1)
times 4. (In our case the total no. of frames is 60).
Step 2 (The Mask Layer)
The Typing Text effect in our example
is done by gradually increasing the size of the mask
over the text string, such that one character appears
after the other.
First, create a separate layer above the
text layer, name it as "mask". On the first
key frame draw a rectangle that covers all the characters
on the text layer. Then insert frames to the layer so
that it has the same no. of frames as the text layer.
Now, convert every other 4 frames into
a key frame. You timeline should look similar to the
following:
Then you have to change the width of rectangle on each
key frame, so that it covers one more character as compared
to the mask in the previous key frame.
Lets start with the first key frame. On this frame,
no character (of your text) should be shown, so just
reduce the width of the rectangle to 1. For the second
key frame, set the width of the rectangle so that it
covers the first character. Do the same procedure such
that the rectangle on the next key frame covers one
more character.
After you are done, right click on the mask layer and
convert it into a mask. Your timeline should look similar
to:
Up to this point, you've done the basic
typing text effect. Test your movie and you should see
the character appears one by one. If you are satisfy
with it, you can stop here. However, In our example,
we've added a blinking cursor on top the text effect,
which is done in the following step.
Step 3 (Blinking cursor Layer)
Create another layer above the mask layer
and name it as "cursor". To make the cursor
animate, we need to create 2 extra movie clip symbol.
First, insert a new symbol (cursor). The
symbol will simply hold the cursor image, which is just
a grey vertical line in our example. Adjust the line
width and height as you like...
Then create another symbol (cursor_clip). Drag the
"cursor" symbol from your libraray to the
frist key frame. Insert 4 more frames after it. Convert
the 3rd and the last frame into key frames. On the 3rd
frame, select the vertical line and set the alpha to
0%. Apply motion tween for the 1st and 3rd frame.
On the last frame, add the following actionscript:
This ensure the blinking animation will loop forever.
Your timeline should look like:
Ok, you are done with the cursor animation, go back
to the main stage and put the "cursor_clip"
on the 1st frame of the cursor layer.
Then do similar procedure as in the mask layer....
add frames, key frames.... and adjust the cursor position
for each key frame, such that the cursor advance with
the mask. For details, please refer to the fla source
code.
< Tutorials
Index - Download
this tutorial - Post
suggestions >
|
