Text dancing animation

Using this tutorial, you will see how to create advanced and very modern letters animation. This animation looks like letters dancing and that's the reason why I have called this animation that. ;) You don't have to use action script code to make it. You just have to use some special flash tips and tricks to make it. This tutorial is so easy for create, but in the same time very attractive. You can use this animation as some text banner, presentation... Let's go!

Step 1

Open a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 70 pixels. Select #153347 color as background color.Set your Flash movie's frame rate to 28 and click ok. See the picture below.



Step 2

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Tahoma as font and bold it.
3. Choose 16px as font size.
4. Select whitecolor as font color,
5. As the rendering option, select Use Anti-alias for readability.
6. As letter spacing choose 1.



Then, type any text on the stage. For this example, I have typed "Flashfridge.com":)



Step 3

While the text is still selected, press Ctrl+B key (Break Apart) to break apart this text. See the picture below.



Step 4

While the text is still selected, press Ctrl+C key (Copy). After that, press Ctrl+Shift+V key (Paste in Place). Then, place the new copide text on the position like it is shown on the picture below, using the Selection and Free Transform Tool (Q).



That text will represent shadow. If you don't understand how I've got that shadow text, see the aniamtion below!



Step 5

Select now the first text and choose Modify - Timeline - Distribute to Layers (Ctrl+Shift+D). Now, you have placed every letter in separated layer. See the picture below.



Step 6

After that, select layer 1 layer and delete it, becouse it is unneedless for now. Repeat this process also for shadow text.

Step 7

Take the Selection Tool (V) and select the first letter. In my example that is letter "F".Then, press F8 key (Convert to Symbol) to convert this letter into a Movie Clip Symbol.



Do that now, for every other letters.

Step 8

Click on frame 5 and 10 of layer of the first letter (in my example letter "F") and press F6 key. After that, go back on frame 5 and move this letter a little up using the arrows key, or by mouse.

Step 9

Then, go back on the first frame and go to the Properties Panel (shortcut key: Ctrl+F3) below the stage. After that, for Tween choose Motion, for Rotate CW and for Ease 100. See the picture below.



Step 10

Repeat the previouse step also for frame 5, but for this time, for Rotate choose CCW.

Step 11

Select now the first letter of shadow text and press F8 key (Convert to Symbol) to convert this letter also into a Movie Clip Symbol, like we have done for the first letter of text.



Step 12

Take the Selection Tool (V) and click once on that letter. Then, go again to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 33%.



Repeat now step 8,9 and 10 and apply it on this letter.

We're done!

Enjoy!

Download source file (.fla)

Copyright by : FlashFridge