Motion tweening text

31.12.2005, 14:9
Submited in: Flash | Total Views: 96747

This tutorial will show you how to create motion tweening text. You will also learn:

1. How to break apart the text,
2. How to convert every letter into a Graphic Symbol,
3. How to place every letter in separate layer,
4. How to enlarge every letter using the Free Transform Tool (Q),
5. How to apply on it Alpha effect and more.


Step 1

Click on  text toll(A) icon, set font, color, size and other  characteristics of text tool in Properties Pannel. After that click on stage and write some kind of a text, like "Tutorials".

Step 2

It's time to split the text. It is done by marking text with a mouse or by shortcut (Ctrl+A) and pressing (Ctrl+B) one time.

Now you have each letter for itself.

Step 3

Now deselect text by pressing Esc on the keyboard.

Step 4

Select just the T letter using selection tool (V) and clickin on the letter "T".

Step 5

After you have selected "T", press F8, and under Behavior choose Graphic, name whatever you like and press ok.

Step 6

Repeat step 5 for all of the letters.

Step 7

If you open the Library (Ctrl+L or F11), you'll se that all of the letters have been turned into graphic symbols.

Step 8

Select all of the letters by pressing (Ctrl+A) and clicking on Modify - Timeline - Distribute to layers, or press (Ctrl + Shift + D).
Now you have separate layer for each letter in Timeline.

Look at the picture bellow.

Step 9

Click on the layer tutorials and delete it becouse it is now useless.
Step 10

Choose first frame of the letter "U" and pull it on to the frame three.
Pay attention to the picture under the text.

Step 11

Click on the first frame of the letter "T" and pull it in the same manner on the frame six.
Repeat this for other letters and pull each further for three frames.
(frame of the letter o on frame nine, frame of r on frame twelve...)
Pay attention to the picture under the text.

Step 12

Click on the first frame of the letter "T" and then click on frame twenty of the same layer and press F6.

Step 13

Click on third frame of  letter "u", and after that click on  frame twenty three and press F6
Repeat for each letter.

Step 14

Click on the last frame of the last letter, in my example that's letter "s".
Select vertically all of the other frames of other letters in the level with letter "s" and press F5.
Look at the picture bellow.

Step 15

Click on the first frame of the letter "T" and then click once on letter "T" to select it.
Choose  Free Transform Tool (Q) and inlarge it, while you doing this, you must hold down shift key!

Step 16

After you have done that, select letter "T" and in Properties Pannel (Ctrl+F3) under color choose alpha and set it to 0 %.

Step 17

Repeat step 16 for each letter, but not to do so much work, there's an quicker way.

Open History Pannel (Ctrl+F10), or click on  windows - other pannels - History.

Step 18

Choose icons alpha and instances alpha, then click on preformances icon.

Step 19

Under preformances icon choose save as command, write a command name, like (motion_twenning text_alpha0) and press ok.

Step 20

Close History pannel.
If you choose Commands icon you'll see the command name that you have saved.

Step 21

Choose first frame of the u letter, select the letter "u" and then click on the  icon Commnads and choose name that you have saved in a History Pannel. After you have done that that Flash will iautomatically  inlarge letter "u" as it did the letter "T".
You practically glued the effect, size and alpha of the first letter on the second and saved you a lot of time.
Do this for all of the other letters.

Step 22

Click on the first frame of the letter "T" and in Properties Pannel(Ctrl+F3), under Tween, choose motion and set the Ease option to 100.

Step 23

Repeat step 23 for all of the other letters.

We're done!

Download example

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

Browse by category

Most popular tutorials

Resources Worth visiting