Adobe Flash CS3 Tutorial:

Creating an Animated Banner

Note: Apply Rotating Text in animated
banner
This tutorial introduces you to working with Flash as you create an animated banner.
You will find this tutorial easier if you have already completed the Adobe Fireworks
CS3 Tutorial -- since some of the menu options and tools are similar.

Begin by launching Adobe Flash from the application program menu:

Select Start > Programs > Adobe Web Premium CS3 > Adobe Flash CS3.

Your screen should look similar to the image shown below (click on the image to view
a larger screenshot).

Don't worry if you feel a little intimidated by all the windows and panels that appear.
We will focus on the functions needed to create a company logo banner. When you
want to learn more about Flash, try out the Getting Started with Flash option found
under "Help" on the top menu bar or consider taking a course on Flash multimedia.
When you are ready,continue with the tutorial.

Create a New Flash Movie

To create a new Flash movie, select File > New. The New Document dialog box will
display. Select "Flash File (ActionScript 3.0)" and click OK.

Flash is now ready for you to create your new document. Your display should be
similar to the one below. (Click the image below to see a larger version).
Take a minute to familiarize yourself with it.

The "Untitled-1*" in the Title Bar is the name of the file at this point. (Don't
worry if your file has a different number after "Untitled-" than 1.)
Notice that there are a number of panels and menus. You will work with some
of them in this tutorial.
View the center area of the Flash window and note the "Timeline". This is used
to configure animations frame by frame as well as configuring layers and
adding animation effects.
The white rectange is called the Stage. This is a very important area. The Stage
is your Flash animation. The dimensions of the Stage are the dimensions of
your Flash animation.

Setting the Size of the Stage

The IAB publishes voluntary guidelines for banner and ad sizes. In this tutorial you
will create a banner with the dimensions 468x60. To set the Stage to these
dimensions, select Modify > Document to display the Document Properties dialog
box shown below.
Configure the Title, Description, and Dimensions text boxes as shown above. Notice
that the Background color is set to white but could be changed in this dialog box.
Leave the Frame rate and Ruler units at their default values. Click OK.

The Flash window should display as shown below click on the image to view a larger
screenshot). You may need to use the scroll bars around the Stage area to display your
banner rectangle.

Save the File

It's a good idea to save your file often when using Flash. Select File > Save. The Save
As dialog box opens. Create a new folder called FlashBanner and save the file with
the name "banner.fla". The file extension, ".fla" (usually pronounced "flah") is used
for Flash movie source files. The title bar in the Flash window should now display
"banner.fla".

Continue with the next page to become more familiar with the panels used in Flash.
Flash Tool Panel
Notice the Tools Panel in your Flash application. The currently
selected tool is the "Selection Tool" -- the standard cursor pointer.
Place your mouse over the other tool icons for a brief description
of each.

You will be using the "Text Tool" icon on the Tools Panel during
this tutorial. Take a moment and find it. (Hint: Look for the letter
T" in the Vector area on the Tools Panel.)

You will also be using the Stroke Color and the Fill color
Tools. These are used to change the color of the object
you are working with.

Flash Timeline

Take a look at the Timeline which is located above the Stage and
under the Menu bar.

As you can see, there are many features on the Timeline. A few of
the most commonly used features are discussed below.

The left side of the Timeline (see Layer 1) is where you place
your layers. Typically each layer holds one object in a Flash
movie. You will be creating several layers to create the animated
banner. It is good practice to assign each layer a meaningful
name.

The icon (InsertLayer icon) in the lower left corner is used to

add a new layer to the Timeline.

The "eye" icon can be used to make layers visible or invisble

 while you are working. Sometimes this is helpful as you are
working on animations.

The "lock" icon is used to temporarily freeze or lock layers you

do not wish to accidentally change while you are working.

The area at the left side of the Timeline shows

the frames in the animation. This area is used
to configure keyframes which indicate where
the animation changes. The Timeline can also be used to
automatically create tweens (more on this later). The transparent
red rectangle indicates the frame that is currently displayed on the
Stage.

It is handy to know how to undo an action when using Flash --

just in case you make a mistake. Pressing the Ctrl and Z keys at
the same time will undo your most recent action. There also is an
Undo option located on the Menu Bar (Edit > Undo).

Continue to actually create the 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
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 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.)
If your "W", "H", "X", and "Y" This configures the rectangle to be placed at the
values are different, type the topmost (Y value) and leftmost (Y value) place on
following values in the the Stage. It also configures the rectangle to be 468
corresponding text boxes: pixels wide (W value) and 60 pixels high (H
value).
W: 468.0 X: 0.0
H: 60.0 Y: 0.0

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

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.

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

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.

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 different, type This configures the oval to
the following values in the corresponding text boxes: be placed 25 pixels from
the top (Y value) and 28
W: 15.0 X: 28.0 pixels from the left (Y
H: 10.0 Y: 25.0 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.
The Background Layer has 50 frames and the Shape Layer has 25 frames. Srcoll 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.

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.

Continue to animate the Text layer of your animated banner.

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

Continue to publish and test your animated banner..

Publish Your Movie

Select File > Publish Settings to display the Publish Settings dialog box shown below.
You will 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.

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!

You have completed the Flash Animated Banner Tutorial. As you may have noticed,
we have barely scratched the surface of what Flash is capable of. Consider further
study by taking courses. There are also many other online Flash tutorials available on
the Web.

Optional Tutorial: Making your Animated Banner Clickable

Most ad banners are clickable -- when the visitor clicks on them a new web page is
displayed. You will learn about this technique in the optional tutorial, Making your
Animated Banner Clickable.