Web Development & Design Foundations with HTML5

Skip to Content 8th Edition

Adobe Flash CS5 Tutorial: Creating an Animated Banner Page 4

Overview of the Animated Banner

Acme Web Design

The animated banner you will create is shown above. This banner plays once when the page is loaded. If you would like to see the banner play again, click the refresh button on the browser window (or press F5 to refresh the page).

This banner contains three layers: Background, Shape, and Text. The Background layer controls the color changes in the background of the movie. The Shape layer configures the way the oval shape changes or morphs as the animation plays. The Text layer controls the animation of the company name.

Configure the Layers

Rename the layerRecall from the previous page that is is recommended to assign meaningful names to layers in a Flash movie. Now you will rename "Layer 1" to "Background". Place your cursor in the Timeline over the label "Layer 1" and doubleclick. A text box will display as shown at the right.

 

Background and Shape LayersType "Background" and press enter to rename the layer. Next, add a new layer by clicking the Add New Layer icon in the lower left corner of the Timeline. A new layer called "Layer 2" will appear above the Background layer. Name this layer "Shape". Your Timeline should be similar to the display at the right.

 

Add the Text LayerIn a similar manner, add a new layer above the Shape layer and name it "Text". Your Timeline should be similar to the display at the right. The order of the layers is important. The layers will display in bottom-up order. So —objects on the Shape layer will appear over objects on the Background layer. Objects on the Text layer will appear over objects on both the Shape and Background layers

 

Save your file.

Configure the Background Layer

The Background layer contains a rectangle with the same dimensions as the Flash movie.

You need to tell Flash what layer you are working on. Click in Frame 1 in the Timeline on the same row as the Background layer select this layer and frame.

Color panelUse the color chooser icons located in the lower portion of the Tools Panel to choose the color for the pencil (stroke) and bucket (fill) of the rectangle you will create.

Click on the color chooser below the pencil icon. Select #99CCFF (the fifth color swatch in the bottom row in the color chooser dialog box).

Click on the color chooser below the bucket icon. Select #99CCFF (the fifth color swatch in the bottom row in the color chooser dialog box).

Color chooser

 

Rectangle ToolNext, click on the Rectangle Tool (shown in the figure at the right) to draw a rectangle on the Stage. Your cursor will change to "+". Start at the upper left corner and drag a rectangle across the stage. Don't worry if it is not perfect, you can use the Properties panel to exactly set the dimensions.

 

Selection ToolClick on the Selection Tool and dougle-click on the rectangle you just created. The double-click will select both the fill and outline of the shape.

 

Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties > Properties.

Stage and Properties Panel

If your "W", "H", "X", and "Y" values are different, type the following values in the corresponding text boxes:

W: 468.0        X: 0.0
H: 60.0           Y: 0.0

This configures the rectangle to be placed at the topmost (Y value) and leftmost (Y value) place on the Stage. It also configures the rectangle to be 468 pixels wide (W value) and 60 pixels high (H value).

Next, you will add a keyframe on the Background Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labeled 50 is in view. Click in Frame 50 on the Background Layer and press the F6 key (or Fn +F6 keys if you are using a Mac). This places a keyframe in Frame 50. A keyframe tells Flash that a change occurs in this frame.

Keyframe in Frame 50

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 CTRL + Z (Command ⌘ + Z if you are using a Mac) or Edit > Undo.

With this frame still selected, you will change the color of your rectangle. Using the Selection Tool, double-click on the rectangle. Next. use the Color Chooser to choose the color #00CCCC for both the pencil (stroke) and bucket (fill) colors. The rectangle on the Stage should be a shade of turquoise as shown below.

Stage in Frame 50

Add Animation to the Background Layer

Next, you will use Flash to automatically change the color in from blue to turquoise on the Background layer by using a Shape Tween. (The term "tween" is short for "between" — Flash will create all the frames between Frame 1 and Frame 50 for you!

Click on a Frame between Frame 1 and Frame 50 in the Background layer. Then, using the Main Menu, select Insert > Shape Tween as shown in the figure below.

Adding a Tween

The Timeline will now show an arrow between Frame 1 and Frame 50. 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.

Timeline with the Tween

Test the Background Animation

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 color of the rectangle change automatically! 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 > Test. A new window will open with your Flash movie as shown below.

Testing the Animation

Flash has created a .swf of your file. If you look closely, the background color of the animation will change from light blue to turquoise. Not much is happening yet, but you have two other layers of animation to configure!

Save your file.

Continue to animate the Shape and Text layers of your animated banner.

Page 5Next Page