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

Advanced Text banner without action script

9.9.2009, 16:34    Total views: 17040

Read this thoroughly explained, detailed flash lesson and see how to create advanced Text animation without using some special flash tricks. You don't have to use action script code to make this lesson. You can use this text animation for any text banner, presentation or for some other flash components. Using this lesson, you will also learn how to design text banner, how to animate it and much more!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select #3D9600 color as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 2


Take 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 8cd000 and draw a rectangle shape about 100x5 px. See the picture below!



Step 3

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



Step 4

Click now on frame 20 and 35 and hit F6 key. While you're still on frame 35, select the Free Transform Tool (Q) and enlarge rectangle shape like it is shown on the picture below!



Step 5

Go back now on frame 20, select again Free Transform Tool (Q) and decrease this time a little rectangle shape like it is shown on the picture below!



Step 6

Right-click anywhere on the gray area between frame 1 and 20 and frame 20 and 35 on the timeline and choose Create Shape Tween from the menu that appears. See the picture below.



Step 7

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

Step 8

Create a new layer above the layer rectangle and name it white rectangle.

Step 9

Select white rectangle layer and using the Rectangle Tool (R), draw a white rectangle about 100x5 px and place it on the position like it is shown on the picture below!



Step 10

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



Step 11

After that, click on frame 20 and 35 and hit F6 key. While you're still on frame 30, place the white rectangle shape on the position like it is shown on the picture below!



Step 12

Go back now on frame 20 and place the rectangle on the position like it is shown on the picture below!



Step 13

Right-click anywhere on the gray area between frame 1 and 20 and frame 20 and 35 on the timeline and choose Create Shape Tween from the menu that appears. See the picture below.

Step 14

It's time for text, so create a new layer above the layer white rectangle and name it text.

Step 15

Select the Text Tool (A), choose any font, any size, for color choose black and type any text and place it on the position like it is shown on the picture below!



Step 16

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



Step 17

Click now on frame 35 and hit F6 key. While you're still on frame 35, place the text on the position like it is shown on the picture below!



Step 18

Go back now on the first frame, select the Selection Tool (V) and click once on the text to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 19

Click on the Properties button on the left side. After that, on the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 20

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Shape Tween from the menu that appear.



We're done now!

Test your movie 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: 225064

2. Water effect
Total views: 169137

3. Photo slide show
Total views: 156961

4. High-tech city animation
Total views: 154359

5. Special Picture Effect
Total views: 148419

Related links