Toxiclab.org

Bouncing text effect

9.7.2007, 1:31
Submited in: Flash | Total Views: 55355

This lesson will show you how to create bouncing text effect.This text effect I will be use for some phone advertising. To create this lesson, you don't have to use Action Script code. This effect is very simple for create, but in the same time very practical and useful.



Step 1

Create a new flash document.



Step 2


Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select any color as background color. Set your Flash movie's frame rate to 24 and click ok.



Step 3

Take the Text Tool (A) and type any text. For this example I will type Apple iPhone. See the picture below.



Step 4

While the text is still selected, choose Modify > Break Apart (Shortcut key: Ctrl+B). Now you have break apart the text and you have every letter apart. See the picture below.



Step 5

Press Esc key on the keyboard to deselect the letters. Then, take the Selection Tool (V) and select only the first letter (in my example it is letter "a"). See the picture below.



Step 6

After that, press F8 key (Convert to Symbol) to convert that letter into a Graphic Symbol. See the picture below.



Do that also for every other letter.

Step 7

Press Ctrl+A key (Select All) to select all letters (Graphic symbols).



Then,choose Modify > Timeline > Distribute to Layers (Shortcut key: Ctrl+Shift+D key). Now, you have placed every letter in separated layer. See the picture below.



Step 8

Take again the Selection Tool (V), select layer 1 and delete it, becaouse it is needless now.

Step 9

Click on frame 5 and after that on frame 10 of layer of the first letter (in my example letter "a") and press F6 key. See the picture below.



Step 10

Then, go back on frame 5, take the Free Transform Tool (Q) and enlarge the letter a little. See the picture below.



Step 11

Choose right-click anywhere on the gray area between the frame 1 and 5 and frame 5 and 10 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 12

Click on frame 3 of layer of the second letter (in my example letter "p") and press F6 key. See the picture below.



Step 13

After that, click on frame 8 and after that on frame 13 and press F6 key.



Step 14

Go back on frame 8, take the Free Transform Tool (Q) and enlarge the letter a little, like we have enlarged the first letter in step 10. See the picture below.



Step 15

Choose again right-click anywhere on the gray area between the frame 3 and 8 and frame 8 and 13 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Repeat this process for every other letters.In this example I have applied this effect on some phone advertisment.

We're done!

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