Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Typewriting text animation

23.2.2010, 12:55    Total views: 44564

In this thoroughly explained, detailed flash lesson, I will show you how to create typewriting text animation using the action script code and some special flash tricks. You can use this animation for some text banner or for some text presentation. Let's start!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 200 pixels. Select black color as background color. Set your Flash movie's frame rate to 18 and click ok.





Step 2


Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Select the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose black and draw a rectangle shape 300x200 px (as the dimensions of background.

Step 4

While the rectangle shape is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 6

Click now on frame 60 of layer background and hit F5.

Step 7

Create a new layer above the layer background and name it text.

Step 8

Click now on frame 30 of layer text and hit F6 key.

Step 9

While you're still on frame 30, select the Text Tool (A), for text color choose white, for text size 14px and type some text on the flash stage.



Step 10

Create a new layer above the layer text and name it typewriting.

Step 11

Click on frame 50 of layer typewriting and hit F6 key.

Step 12

While you're still on frame 15 and 30 and hit F6 key.

Step 13

While you're still on frame 30, select the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose black and draw a rectangle shape about 150x20 px and place it on the position like it is shown on the picture below!



Step 14

Select again the Rectangle Tool (R).  In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #CCCCCC and draw a rectangle shape about 10x15 px and place it on the position like it is shown on the picture below!



Step 15

Select the rectangles and hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.





Step 16

Click now on frame 50 and hit F6 key. After that, place the rectangle shape on the position like it is shown on the picture below!



Step 17

Select again frame 50 and go to the AS panel (F9). Then, enter this code inside the actions panel:

stop();

Step 18

Right-click anywhere on the gray area between frame 30 and 50 on the timeline and choose Create Motion Tween from the menu that appears.



Step 19

Go back on frame 30 and hit Ctrl+C key (Copy).

Step 20

Select now frame 15 and hit Ctrl+Shift+V key (Paste in Place).

Step 21

While you're still on frame 30, double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 22

Click now on frame 4 and 8 and hit F6 key.

Step 23

While you're still on frame 8, go to the AS panel (F9) and enter this code inside the actions panel:

gotoAndPlay(1);

Step 24

Go back on frame 4 and change the color of rectangle shape that we created in step 14 into a black.

That's it!

Test your text animation and enjoy!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 309605

2. High-tech city animation
Total views: 271883

3. Water effect
Total views: 236709

4. Photo slide show
Total views: 219571

5. Special Picture Effect
Total views: 190546



Related links