animated banner tutorial

8/13/2019 Animated Banner Tutorial

1/15

Adobe Flash CS5 Tutorial: Creating an Animated Banner

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 yourfile 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 inthis tutorial.

View the lower center area of the Flash window and note the "Timeline". This is used toconfigure 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 yourFlash animation. The dimensions of the Stage are the dimensions of your Flash animation.

Setting the Size of the Stage

The IAB publishes voluntaryguidelines 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.
http://www.iab.net/standards/adunits.asphttp://www.iab.net/standards/adunits.asphttp://www.iab.net/standards/adunits.asphttp://webdevfoundations.net/flashcs5/p2.jpghttp://www.iab.net/standards/adunits.asp


2/15

Configure the Dimensions text boxes as shown above. Notice that the Background color is set to

white but could be changed in this dialog box. Set the Frame rate to 12. Click OK.

The Flash window should display as shown below (click on the image to view a largerscreenshot). You may need to use the scroll bars around the Stage area to display your bannerrectangle.

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. Thetitle bar in the Flash window should now display "banner.fla".

Continue with thenext pageto become more familiar with the panels used in Flash.
http://webdevfoundations.net/flashcs5/page3.htmhttp://webdevfoundations.net/flashcs5/page3.htmhttp://webdevfoundations.net/flashcs5/page3.htmhttp://webdevfoundations.net/flashcs5/p2b.jpghttp://webdevfoundations.net/flashcs5/p2b.jpghttp://webdevfoundations.net/flashcs5/page3.htm


3/15

Flash Tools 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 amoment and find it.(Hint: Look for the letter T" in the Vector area on the Tools Panel.)

It is handy to know how to undo an action when using Fireworks just in case you make amistake. You can quickly undo you most recent action Windows users press the CtrlandZkeys at the same time; Mac users press the CommandandZ keys at the same time.

There also is an Undo option located under the Edit Option on the Main Tool Bar.

Flash Timeline

Take a look at the Timeline which is located below the Stage.

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 eachlayer 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 "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 Timelinecan also be used to automatically create tweens (more on

this later). The transparent red rectangle indicates theframe that is currently displayed on the Stage.

The New Layer icon in the lower left corner is used to add a new layer to theTimeline.
http://webdevfoundations.net/flashcs5/p3b.jpghttp://webdevfoundations.net/flashcs5/p3b.jpghttp://webdevfoundations.net/flashcs5/p3b.jpghttp://webdevfoundations.net/flashcs5/p3b.jpg


4/15

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 controlsthe 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 overthe label "Layer 1" and doubleclick. A text box will display asshown at the right.

Type "Background" and press enter to rename the layer. Next, adda 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". YourTimeline should be similar to the display at the right.

In a similar manner, add a new layer above the Shape layer andname 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 willappear over objects on the Background layer. Objects on the Textlayer 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 color chooser icons located in the lower portion of the Tools Panel to choosethe 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).


5/15

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

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 upperleft corner and drag a rectangle across the stage. Don't worry if it is notperfect, you can use the Properties panel to exactly set the dimensions.

Click on the Selection Tool and dougle-click on the rectangle you justcreated. 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.
http://webdevfoundations.net/flashcs5/p4i.jpghttp://webdevfoundations.net/flashcs5/p4i.jpghttp://webdevfoundations.net/flashcs5/p4i.jpghttp://webdevfoundations.net/flashcs5/p4i.jpg


6/15

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

W: 468.0 X: 0.0H: 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. Ifnecessary, scroll the Timeline Frame area to the right so the frame labeled 50 is in view. Click inFrame 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 thisframe.

Your Timeline should be similar to the one shown above. If you accidentally click on a differentlayer 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 SelectionTool, 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.

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


7/15

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

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

Save your file.


8/15

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 areworking on. Click in Frame 1 in the Timeline on the same row as the Shape layer to select thislayer 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 (stroke) and bucket (fill) of the oval shape you wil create. Clickon the color chooser next to each and select #003366.

Next, select the Oval Tool by clicking on the tinydownward arrow on the Rectangle Tool and selecting Oval

Tool from the menu (shown in the figure at the right). Usethe Oval Tool to draw an oval shape on the Stage. Yourcursor 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 panelto exactly set the dimensions.

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

http://webdevfoundations.net/flashcs5/p5c.jpghttp://webdevfoundations.net/flashcs5/p5c.jpghttp://webdevfoundations.net/flashcs5/p5c.jpg


9/15

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

W: 15.0 X: 28.0H: 10.0 Y: 25.0

This configures the oval to be placed 25 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 25on 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 differentlayer or frame --remember you can back out your changes using CTRL+Z, Command + (if

using a Mac), 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 stroke 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.
http://webdevfoundations.net/flashcs5/p5g.jpghttp://webdevfoundations.net/flashcs5/p5g.jpghttp://webdevfoundations.net/flashcs5/p5g.jpg


10/15

The Background Layer has 50 frames and the Shape Layer has 25 frames. Srcoll the FramesTimeline 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 Shapelayer 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.


version of banner.fla to try again.

Test the Background and Shape Animation


visible. Click on the red rectangle (called the "playhead") and drag it to the right to see the boththe 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.


11/15

Notice that the top and bottom of the oval do not appear in the Flash .swf movie that isbecause 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 extend the frames in the Textlayer. Place your cursor in Frame 50 in the Text Layer and press the F5 key. Next, click in Frame1 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 theright. 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 setto 50pt. The font style is bold. The color is set to #FFFFFF. With the Text Tool selected, type"Acme Web Design".


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 configurethe "X"" value to place the text mostly off-stage to the right. Change the X value to 450.0. Your
http://webdevfoundations.net/flashcs5/p6c.jpghttp://webdevfoundations.net/flashcs5/p6c.jpghttp://webdevfoundations.net/flashcs5/p6c.jpg


12/15

Stage should be similar to the figure below. Notice that the text begins near the right edge ofthe Stage.

Next, you will add a keyframe on the Text Layer in the Timeline Frame area. If necessary, scrollthe 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 Flashthat 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 modifythe Properties panel change the X value to 17. Your Stage should be similar to the figurebelow.

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


13/15


version of banner.fla to try again. View the Timeline and examine the background color of theframes. 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


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 selectControl > 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. Ifthat's OK with you, continue right now withpage 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 keyframein 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 theActions - Frame dialog box.
http://webdevfoundations.net/flashcs5/page7.htmhttp://webdevfoundations.net/flashcs5/page7.htmhttp://webdevfoundations.net/flashcs5/page7.htmhttp://webdevfoundations.net/flashcs5/page7.htm


14/15

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.

Continueto publish and test your animated banner.

Configure the Text Layer

Publish Your Movie

Select File > Publish Settings to display the Publish Settings dialog box shown below. You will

work with the Formats tab, theFlash tab, and the HTML tab ofthis dialog box.

On the Formats tab, verify thatthe Flash and HTML

checkboxes are checked.

On the Flash tab leave all settings at the default values exceptfor the following:

1. Check Protect from import.

2. Check Omit trace actions.
http://webdevfoundations.net/flashcs5/page7.htmhttp://webdevfoundations.net/flashcs5/page7.htmhttp://webdevfoundations.net/flashcs5/p7b.jpghttp://webdevfoundations.net/flashcs5/p7b.jpghttp://webdevfoundations.net/flashcs5/page7.htm


15/15

On the HTML tag, verify that

Loop is unchecked we onlywant the animation to play

once. Checking Loop willcause the animation to repeat

over and over.

Click Publish. Click OK.

Flash has published youranimation as a Flash Movie

called banner.swf, has createda web page file namedbanner.html that displays

banner.swf, and created a

JavaScript fileAC_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 theweb pageto see the HTML code automatically generated by Adobe

Flash to display the Flash movie. You can copy and paste this code in your own web pages as

needed.

Or, you can use the code below which will pass W3C XHTML validation:

Acme Web Design

Congratulations!You've created your first animated banner using Flash!
http://webdevfoundations.net/flashcs5/banner.htmlhttp://webdevfoundations.net/flashcs5/banner.htmlhttp://webdevfoundations.net/flashcs5/banner.htmlhttp://webdevfoundations.net/flashcs5/banner.html

animated banner tutorial

Documents