Mystic Text Animation

30.10.2006, 21:21
Submited in: Flash | Total Views: 81373

Read this tutorial and see how to create advanced mystic text animation in flash 8, using the Action Script. This tutorial is so hard for explain, but I'll try on, to explain it on the best way I can. You will also learn how to use Align Panel (Ctrl+K), how to use instane name, how to use Info Panel and more.

Step 1

Create a new flash document, choose Modify > Document (Ctrl+J), and set Width to 300 and Height to 224px. Frame rate set to 35 fps (Frames per Second).

Step 2

Double click on layer 1 to rename its name in background. Insert a new layer and name it text.

Step 3

Lock background layer, select the text layer, take the Text Tool (A), and type any text.

Step 4

Insert a new layer and name it Action.

Step 5

Find any picture the same dimension like it is the flash document (in our example 300x224px) and import it (Ctrl+R) in flash.

Step 6

While your picture is still selected, press Ctrl+K on the keyboard (Align Panel) and then click on Align to stage icon, after that on Align horizontal center and Align vertical center icon, to precisely center your picture with background. See the picture below.

Step 7

Choose Modify > Break Apart (Ctrl+B), to break apart the picture.

Step 8

Take the Selection Tool (V), and select the part of picture. Look at the picture below!

Step 9

Then, press F8 key  (Convert to Symbol) to Convert it into a Movie Clip.

Step 10

While your new made Movie Clip (part of picture) is still selected, open the Properties Panel (Ctrl+F3), and under <Instance Name> type part1.

Step 11

Double click on a new made Movie Clip, or choose right click and Edit in Place.

Step 12

Click on frame 1, open the Action Script Panel (F9), and paste this script:


Step 13

Click on frame 30, and press F6. Then, click on frame 10, take the Free Transform Tool (Q), and decrease the part of picture like it is shown on the picture below.

Step 14

Click on frame 15, and do this:

Step 15

Go back on the main scene (Scene 1), and repeat this process for all other parts of picture.

Step 16

Insert a new layer and name it Invisible Button.

Step 17

Go back on action layer, select the first part of picture (part 1), open the Info Panel (Ctrl+I) and see what are the dimension and position of that part. After that, remember that information, select the Invisible Button layer, take the Rectangle Tool (R), and create the Invisible Buuton with the same dimension and position like it is the first part ore below.

Step 18

Select the Invisble Button, open the Action Script Panel (F9), and paste this scritp:

on (rollOver) {
tellTarget ("/part1") {

We're done!

Create for all other parts of picture Invisible Button like we have done for the first part.

Have a nice day!

Download example

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

Browse by category

Most popular tutorials