Adobe Flash CS3 Tutorial: (Tutorial #2)

Creating an Animated Banner

Overview of the Animated Banner
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
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
1

CSA 221 Web Multimedia Authoring

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.

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 double-click on the rectangle you just
created. The double-click will select both the fill and outline of the
shape.

CSA 221 Web Multimedia Authoring

Your Stage and Properties panel should look similar to the one above. (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.

CSA 221 Web Multimedia Authoring

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. Using the Selection
Tool, double-click on the rectangle. Next. 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.

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. 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.
4

CSA 221 Web Multimedia Authoring

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.
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!
Save your file.
Configure the Shape Layer
Before beginning to work on the Shape layer, click the lock icon on the Background layer to
prevent accidentally changing it.

CSA 221 Web Multimedia Authoring

Now you are ready to get started with the Shape layer. You need to tell Flash what layer you
are working on. Click in Frame 1 in the Timeline on the same row as the Shape layer to select
this layer and frame. See the Figure below.

The Shape layer contains an oval shape that changes size and color. Use the Tools panel to
choose the color for the pencil (outline) and bucket (fill) of the oval shape you wil create. Click
on the color chooser next to each and select #003366.
Next, click on the Oval Tool (shown in the figure
at the right) to draw an oval shape on the Stage.
Your cursor will change to "+". Start at the upper
left corner and drag a small oval on the left side
of the stage. Don't worry if it is not perfect, you
can use the Properties panel to exactly set the
dimensions.

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

6

CSA 221 Web Multimedia Authoring

This configures the oval to be placed 25

different, type the following values in the

corresponding text boxes:
W: 15.0
H: 10.0

X: 28.0
Y: 25.0

pixels from the top (Y value) and 28 pixels

from the left (Y value) place on the Stage.
It also configures the oval to be 15 pixels
wide (W value) and 10 pixels high (H
value).

Next, you will add a keyframe on the Shape Layer in the Timeline Frame area. If necessary,
scroll the Timeline Frame area to the right so the frame labelled 25 is in view. Click in Frame 25
on the Shape Layer and press the F6 key. This places a keyframe in Frame 25. 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 and shape of the Oval. You will use the
Selection Tool in the Tools panel (see figure below).

Click on the Selection Tool. Click on the oval to display the Properties panel. Change the height
to 100.0. the width to 200.0 and the Y value to -10.0. Change both the outline and fill color to
#006666. rectangle. Click on the Stage to view the effect of the new values. The Properties and
Stage panels are shown below.

CSA 221 Web Multimedia Authoring

The Background Layer has 50 frames and the Shape Layer has 25 frames. Scroll the Frames
Timeline so that Frame 50 is visible. Click in Frame 50 of the Shape Layer and press the F5 key
to add frames to the timeline. See the figure below.

Add Animation to the Shape Layer

Next, you will use Flash to automatically change the color and shape of the oval in the Shape
layer using a Shape Tween. Click on a Frame between Frame 1 and Frame 25 in the Shape
layer. The Properties panel will display a Tween select menu. Select Shape as shown in the
figure below.

CSA 221 Web Multimedia Authoring

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

Test the Background and Shape 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
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 the top and bottom of the oval do not appear in the Flash .swf movie -- that is
because these portions of the oval are beyond the Stage. This is a common technique.
Save your file.
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 tell Flash what layer you are
working on. 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.

CSA 221 Web Multimedia Authoring

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 at the right. Your cursor will
change to

Use the Property panel to configure the font,

size, and color of your text. In the example, the
font is set to Broadway BT. Use this font face or
another font of your choice. The font size is set
to 40. 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 > Properties.)

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
10

CSA 221 Web Multimedia Authoring

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 CTRL-Z or 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 40.0. Your Stage should be similar to the figure
below.

11

CSA 221 Web Multimedia Authoring

The other layers have 50 frames and the Text layer has only 40 frames. Scroll the Frames
Timeline so that Frame 50 is visible. Click in Frame 50 of the Text Layer and press the F5 key to
add frames to the timeline. See 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 Motion 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 Motion as shown in the figure below.

12

CSA 221 Web Multimedia Authoring

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 Motion Tween is
indicated by a blue background color.

Test the Background, Shape, and Text 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
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. You are done designing your Flash
animation. The next step is to publish the movie (create a .swf) and test the movie in a web
page.
Save your file.
Publish Your Movie
Select File > Publish Settings to display the Publish Settings dialog box shown below. You will

13

CSA 221 Web Multimedia Authoring

work with the Formats tab, the Flash tab, and the HTML tab of this dialog box.

On the Formats tab, verify that the Flash and HTML checkboxes are checked.

On the Flash tab leave all settings at the default values except for the following:
1. Set the Version fo Flash Player 5 as the Version (provides maximum compatibility),
2. Check Protect from import.
3. Check Omit trace actions
On the HTML tag, verify that Loop is unchecked -- we only want the animation to play once.
Checking Loop will cause the animation to repeat over and over.

Click Publish. Click OK.

Flash has published your animation as a Flash Movie called banner.swf, has created a web
page file named banner.html that displays banner.swf, and created a JavaScript file
AC_RunActiveContent.js that is invoked by banner.html that prevents issues with Internet
Explorer.

14

CSA 221 Web Multimedia Authoring

Test the Web Page and Flash Movie

Launch a browser and open the banner.html file. Your result should be similar to the figure
below:

View the source code of the web page to see the HTML code automatically generated by
Adobe Macromedia Flash to display the Flash movie. You can copy and paste this code in your
own web pages as needed. Also be sure to save the JavaScript file ( AC_RunActiveContent.js) in
the same folder as your wb page.
Congratulations!
You've created your first animated banner using Flash!

15

CSA 221 Web Multimedia Authoring