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)
0 comments:
Post a Comment