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.
Recall 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.
Type "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.
In 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.
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.
Use the Colors panel to choose the color for the pencil (outline) and bucket (fill) of the rectangle you will create. Click on the color chooser next to each and select #99CCFF.
Next, 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.
Click on the Selection Tool and click on the rectangle you just created.
Your Stage and Properties panel should look similar to the one below. (If your Properties panel does not automatically display, select Window > Properties > Properties.)
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. This places a keyframe in Frame 50. 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 CTRL-Z or Edit > Undo.
With this frame still selected, you will change the color of your rectangle. Use the Color Chooser to choose the color #00CCCC for both the pencil (outline) and bucket (fill) colors.The rectangle on the Stage should be a shade of turquoise as shown below.
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. The Properties panel will display a Tween select menu. Select Shape as shown in the figure below.
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.
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. A new window will open with your Flash movie as shown below.
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!
Continue to animate the Shape and Text layers of your animated banner.
Page 5