Toxiclab.org

Advanced Blur Text Effect

11.3.2006, 15:5
Submited in: Flash | Total Views: 83136

Learn how to create blur text effect in flash using the Action Script. This text effect is very practical and you can use it for some flash banner or somewhere. In this lesson, you will also learn how to use Instance name, Align Panel, hwo to apply action script code on text to make it more powerful and more.



Example:



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 300 pixels and the height to 150 pixels. For Frame rate choose 30 fps (Frames per Second) and click ok.



Step 2

Take the Selection Tool (V) and double click on layer 1 to rename its name in text.

Step 3

Take the Text Tool (T), and type any text on the stage. For this example I'll type toxiclab.org. While the text is still selected, go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the text is still selected, do the following in the Align panel:

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 4

Using the arrow keys or by mouse, place the text at the top of background. See the picture below.



Step 5

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



After that, open the Properties Panel (Ctrl+F3) and for <instance name> type title.



Step 6

Double click on a new made movie clip or choose right click and choose Edit in place. You should now be inside the movie clip.

Step 7

After that, click on frame 15 and press F6. Then, using the arrow keys or by mouse, place the text at the center of background. After that, go back on frame 1, open the Preoperties Panel (Ctrl+F3) and for Tween choose Motion.



Step 8

Click on frame 55 and 70 and press F6 key.Then while you're still on frame 70, place the  text at the bottom of background. See the picture below.



After that, go back on frame 55, open the Properties Panel (Ctrl+F3) and for Tween choose Motion.



Now, we have Finished the first text which goes from overhead to the bottom.
If you now test your movie (Ctrl+Enter) you'll need to get something like this:

 

Step 9

Click on frame 15 of layer 1 and press Ctrl+C key (copy). After that create a new layer above layer 1, lock layer 1, click on layer 2 and press Ctrl+Shift+V key(Paste in place).



Step 10

After you have done that, place the text at the bottom of background. See the picture below.



Step 11

Click on frame 15 and press F6 key. After that set the text position at the ceneter of background. Then go back on the first frame, open the Properties Panel (Ctrl+F3) and for Tween choose Motion.

Step 12

After that click on frame 55 and after that on frame 70 and press F6 key. Then, place the text on  the top of background. See the picture below.



Step 13

Go back on frame 55, open the Properties Panel (Ctrl+F3), and for Tween choose Motion.

Now,we have finished the first and second text which goes from overhead to the bottom,and reverse.

Now, repeat this steps but for this time do that for others two text whic will goes from right to the left and reverse.

After you have done that, you'll need to get something like this:

 

Step 14

It's time for Action Script. Go back on the main scene (Scene1), create a new layer above text layer and name it Action. See the picture below.



Step 15

Lock text layer, click on the first frame of layer Action, open the Action Script Panel (F9) and paste this script:

i = 0;
amount = 6;

Step 16

Then, click on second frame of layer Action and press F6. After that, enter the following ActionScript code inside the Actions panel:

if (Number(i)<Number(Number(amount)+1)) {
duplicateMovieClip("title", "title" add i, i);
setProperty("title" add i, _alpha, 50-(i*(50/amount)));
i = Number(i)+1;
}

Click on frame 3 of layer Action, press F6 key, and in A.S. Panel enter the following script:

gotoAndPlay(2);

Only one thing, that we must to do is,  click on frame 3 of text layer and press F5.



We're done!

Have a nice day!

Download example (45 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials