Wobble Text Animation

6.4.2010, 20:30
Submited in: Flash | Total Views: 12989

Read this thoroughly explained, detailed flash lesson and see how to create advanced wobble text animation using some special flash tips and tricks and Adobe After Effects. You can use this animation for any text banner, for some text presentation... Using this lesson, you will also learn how to create text animation in Adobe After Effects and after that, how to export that animation into a flash, how to use Free Transform Tool (Q) to Enlarge and Decrease text animation, how to rotate it, create motion tween, Movie Clip and much much more. Let's go!


Step 1

First open Adobe After Effects CS3 Professional.

Step 2

Choose Composition > New Composition (Ctrl+N). For Composition Name type WobbleText, for Preset set Custom, for Pixel Aspect Ratio set Square Pixel, for Width set 300, for Height 200 px and for Frame Rate set 30 fps and click ok. See the picture below!

Step 3

Select the Horizontal Type Tool (Ctrl+T) and type any text on the Stage. See the picture below!

Step 4

Choose Window > Effects&Presets (Ctrl+5).

Step 5

In the Effects&Presets Panel choose Animation Presets > Text > Organic > Wobble. See the picture below!

Step 6

Using the Selection Tool (V) and drag and drop technique, move Wobble Effect from Effects&Presets panel on the text on the stage. See the picture below!

Step 7

Go now to the Timeline and and reduce the length of the film to the length of the animation. See the picture below!

Step 8

After that, choose Composition > Trim Comp To Work Area. See the picture below!

Step 9

Select the Region of Interest button and crop just text. See the picture below!

After that choose Crop Comp to Region of Interest.

Step 10

Choose now File > Export > Adobe Flash (Swf).

Step 11

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 200 pixels. Select black color as background color. Set your Flash movie's frame rate to 30 and click ok.

Step 12

Create a new Movie Clip (Ctrl+F8) and name it TextAnimation.

Step 13

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

Step 14

Choose now File > Import > Import to Stage (Ctrl+R) and Import a swf file that we just made in After Effects.

Step 15

Select now the Last Keyframe and go to the AS panel (F9). Then, enter this code inside the actions panel:


Step 16

Go back on the main stage (Scene 1). After that, drag the Text Movie Clip from the Flash Library on the Flash Stage using the Selection Tool (V) and drag and drop technique.

Step 17

Click now on frame 92 (as the movie length) and hit F6 key. 

Step 18

While you're still on frame 92, select the Free Transform Tool (Q) and enlarge the Movie Clip like it is shown on the picture below!

Step 19

Go back now on the first frame, select again the Free Transform Tool (Q) and reduce movie clip a little bit. See the picture below!

Step 20

Right-click anywhere on the gray area between frame 1 and 92 on the timeline and choose Create Motion Tween from the menu that appears.

Step 21

Go back now on the Properties Panle (Ctrl+F3) below the stage and make the adjustments as follows.

We're done!

Test Your animation and enjoy!

Download example

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

Browse by category

Most popular tutorials