Twitter text banner animation

Twitter is a free social networking and micro-blogging service that enables its users to send and read messages known as tweets. Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced and attractive twitter text banner animation. You don't have to use action script code to make this lesson. Using this lesson, you will see how to type any text, convert it into a Movie Clip Symbol, animate it and much more. Let's start!

Example:



Step 1

First, save the image of twitter below that we will use for this lesson.





Step 2

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

Step 3

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

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the image of twitter that you just saved in step 1 into a flash stage. While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Create a new layer above the layer Titter Background and name it Text Animation.

Step 6

Select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustments as follow:



Step 7

After that, type follow like it is shown on the picture below!



Step 8

While the text is still selected, choose Modify > Break Apart (Ctrl+B) to break apart this text.



Step 9

Choose now Modify > Timeline > Distribute to Layers (Ctrl+Shift+D).



Step 10

Now, you're place every latter in a separate layer. See the picture below!



Step 11

Delete now text animation layer, select just first letter and hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. See the picture below!



Step 12

Click now on frame 5 and 10 and hit F6 key. Go back now on frame 5, select the Free Transform Tool (Q), press and hold down Shift key and enlarge the first letter like it is show on the picture below!





Step 13

After that, select the Selection Tool (V) and click once on the letter to select it. Then, go 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 0%.



Step 14

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



Step 15

Select now the Selection Tool (V) and using the drag and drop technique, move the second letter on frame 5. See the picture below!



Step 16

While the letter is still selected, hit again F8 key (Convert to Symbol) to convert the second letter into a Movie Clip Symbol.



Step 17

Click now on frame 10 and 15 and hit F6 key.

Step 18

Go back now on frame 10 and repeat steps 12 and 13.

Step 19

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

Step 20

Click now on frame 15 of layer of the first letter and hit F5 key.

We're done now with the first two letters. Repeat this process also for every other letters.

Have a nice day!

Download example