Adobe Flash CS5 Tutorial: Creating an Animated Banner Page 6
Configure the Text Layer
Before beginning to work on the Text layer, click the lock icon on the Shape layer to prevent accidentally changing it.
Now you are ready to get started with the Text layer. You need to extend the frames in the Text layer. Place your cursor in Frame 50 in the Text Layer and press the F5 key. Next, click in Frame 1 in the Timeline on the same row as the Text layer to select this layer and frame. See the Figure below.
The Text layer contains the name of the company "Acme Web Design" and move in from the right. Select the Text Tool from the Tools panel as shown above. Your cursor will change to a cross-hairs icon.
Use the Properties panel to configure the font, size, and color of your text. In the example, the font is set to Trebuchet MS. Use this font face or another font of your choice. The font size is set to 50pt. The font style is bold. The color is set to #FFFFFF. With the Text Tool selected, type "Acme Web Design".
Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties.
Click on the image to view a larger screen shot.
It's OK if your height, width, X and Y values may be slightly different. Next you will configure the "X"" value to place the text mostly off-stage to the right. Change the X value to 450.0. Your Stage should be similar to the figure below. Notice that the text begins near the right edge of the Stage.
Next, you will add a keyframe on the Text Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labeled 40 is in view. Click in Frame 40 on the Text Layer and press the F6 key. This places a keyframe in Frame 40. A keyframe tells Flash that a change occurs in this frame.
Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using Edit > Undo.
With this frame still selected, you will move the location of the text. Either drag the text object over to the left with your mouse, or use the Select Tool to click on the text object and modify the Properties panel — change the X value to 17. Your Stage should be similar to the figure below.
Add Animation to the Text Layer
Next, you will use Flash to automatically move the text from the right side of the stage (Frame 1) to the location on the Stage in Frame 40. You will configure a Classic Tween. Click on a Frame between Frame 1 and Frame 40 in the Text layer. The Properties panel will display a Tween select menu. Select Classic as shown in the figure below.
The Timeline will now show an arrow between Frame 1 and Frame 40. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again. View the Timeline and examine the background color of the frames. The Shape Tweens are indicated by a green background color and the Classic Tween is indicated by a blue background color.
Test the Background, Shape, and Text Tweens
You can "play" the animation with the Timeline. Scroll the Timeline to the left until Frame 1 is visible. Click on the red rectangle (called the "playhead") and drag it to the right to see the both the Shape and Background animations play! Another method for this playback is to select Control > Play from the menu.
You can also test the animation outside of the Timeline and Stage. Select Control > Test Movie. A new window will open with your Flash movie as shown below.
Notice that now the text moves in from right to left. However, notice that it repeats endlessly. If that's OK with you, continue right now with page 7, otherwise, let's configure the Flash banner to stop after it plays once.
Add Some ActionScript
If you would like the animation to stop, you'll need to add some ActionScript. Insert a keyframe in Frame 50 on the Text layer (Hint — click in Frame 50 and press F5).
Then, right-click in Frame 50. Select Actions from the context-sensitive menu to display the Actions - Frame dialog box.
Type the following ActionScript to stop the animation:
stop();
Close the dialog box. You'll see a tiny a in Frame 50. Test your animation again and this time notice that it will only play once — which is much less distracting for your web page visitors.
The next step is to publish the movie (create a .swf) and test the movie in a web page.
Save your file.
Continue to publish and test your animated banner.
