to Create a Banner in Flash, Part 2
Basic Tasks: Creating a banner, Part 2
Welcome to Part 2 of this
three-part introduction to Macromedia Flash Basic 8 or Macromedia Flash
Professional 8. You successfully completed Part 1 of this tutorial,
where you created, set up, and imported content into an FLA file.
Because you're reading Part 2, you're probably ready to learn more about
Flash. That's good, because you will create symbols, animation, and even
write some simple ActionScript to make the banner function in this
continuation tutorial. Following this part, you'll add the banner to a
website using Dreamweaver (or, you can optionally upload the banner to a
website using any tool).
Examine the completed FLA file
As you examine the
finished version of an application that you'll create, you'll also
look at the Flash workspace.
In this section, you
will complete the following tasks:
Open the authoring
Review the completed
Close the completed FLA
In subsequent sections
you'll go through the steps to create the application yourself
starting with a brand new FLA file.
Open the finished
The files for this
tutorial are located in the Samples and Tutorials folder in the
Flash installation folder. For many users, particularly in
educational settings, this folder is read-only. Before proceeding
with the tutorial, you should copy the entire FlashBanner tutorial
folder to the writable location of your choice. In Part 1, you might
have already copied the FlashBanner source files to another location
of your hard disk.
On most computers, you
will find the Flash Banner tutorial folder in the following
boot drive\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
On the Macintosh:
Macintosh HD/Applications/Macromedia Flash 8/Samples and
Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
Copy the FlashBanner
folder to another location on your hard disk to which you have
access. Inside this folder are three directories for each part of
this tutorial: Part1, Part2, and Part3. In the FlashBanner/Part2
folder, you will find a Flash file called banner2_complete.fla.
Double-click the file to open it in Flash. You now see the completed
tutorial file in the Flash authoring environment.
Review the completed FLA file
In the completed FLA file, you will see the structure that makes up
the finished SWF file for Part 2 of this tutorial. The application,
a Flash banner for a gnome website, looks like this at the end of
The completed banner for Part 2.
This file contains an
animation in a movie clip, text, an invisible button, and the assets
that you imported in Part 1 of this tutorial.
The movie clip instance
contains a graphical instance that you animate.
Text fields contain
static, stylized text that you display on the Stage.
The invisible button
covers the entire Stage, and it lets your visitors click the banner
and open a new web site.
The graphic assets
include a bitmap background image (the gnome), and the star graphic
that you animate in an upcoming exercise.
By the end of Part 3 of
this tutorial, you will add the graphics, animation, and
interactivity to the banner. Then, you'll insert the banner on a
website using Dreamweaver.
Close the completed FLA file
To close the document, select File > Close.
If you prefer to keep the finished file open as a reference while
working with your banner file, be careful not to edit it or save any
changes to it.
Now you're ready to start creating your own banner file in the next
section, Adding text.
You need to add some additional text to your banner for decorative
purposes. You can add several types of text to a Flash document:
static text, dynamic text, or input text. Static text is useful when
you need to add decorative text to the Stage, or any text that
doesn't need to change or load from an external source. Use dynamic
text when you need to load text from a file, database, or change the
text when the SWF file plays in Flash Player. Use input text when
you want the user to type into a text field. You can take that text
and send it to a database, have it manipulate something in the SWF
file, and more.
You can add any of these types of text using the Text tool. For this
exercise, you will add some static text to the Stage for decorative
purposes. To add static text, follow these steps:
Open the banner.fla file you created in Part 1 of this tutorial, and
rename the file banner2.fla.
NOTE If you didn't finish Part 1 of this tutorial, or lost
your file, open the source files ZIP archive that accompanies this
tutorial. Inside the start folder, find banner2.fla and use this
file to begin the tutorial.
Select Insert > Timeline > Layer to insert a new layer.
Double-click the layer's name and type text to rename the layer.
Select the Text tool in the Tools panel, which looks like a
large letter A button.
Click near the top of the Stage, and type Overworked? into the
field that's on the Stage.
Select the text field (a bounding box appears around the text
when you select it).
Open the Property inspector (Window > Properties >
Properties), and make sure Static Text appears in the Text type
Change the font of the text to whatever font you prefer.
You change the font using the Font pop-up menu (next to the A
icon, seen in the following figure).
Select Bitmap text (no anti-alias) in the Font rendering
method pop-up menu.
Anti-alias options help small text appear clearly in your
applications, but it makes large text look jagged. Because you're
creating large text for the banner, you should use bitmap text
which appears smooth when you create large text.
Change the size of the font to 20 points using the Font size
Then you will need to change the font size so the text fits on
Change text settings in the Property inspector.
When you finish, the text should be similar in size and in
position to the text in the following figure.
Add some static text to the banner. Select any font you want
Select the Text tool again, and type Underpaid? below the text
you added previously.
Select the text field, and open the Property inspector, and
then change the text to the same font you selected in the earlier
Select a font size so the text is large but still fits on the
Repeat steps 9 through 11 to add the phrase Gnome? below the
previous two lines of text. When you finish, your banner will
resemble the first figure in this tutorial that displays the
complete file for Part 2.
(Optional) Open the Align panel (Window > Align) to align the
text to the center of the Stage. Select a text block on the Stage,
click To stage in the Align panel, and then click Align Horizontal
center. (Move the mouse over a button in the panel to see what its
Select File > Save to save your progress before moving on.
After you finish saving the file, proceed to the following
exercise, Creating a symbol.
NOTE For advanced text effects, you can create text in
FreeHand, save the file, and import it. Also, if you're using Adobe
Illustrator, you can export the text as a PNG or SWF file. You can
then import this text into Flash. You might also investigate
FlashType advanced anti-alias options. See About FlashType for
A symbol is an object
that you create in Flash. As you discovered in Part 1, a symbol can
be a graphic, button, or movie clip, and you can then reuse it
throughout the current FLA or other FLA files. Any symbol that you
create is automatically added to the document's library (Window >
Library), so you can use it many times within a document.
When you add animation, you should always animate symbols in Flash,
instead of animating raw graphics (graphics that you draw) or raw
assets that you import (such as a PNG file). For example, if you
draw a circle using the Oval tool in Flash, you should convert that
circle graphic into a movie clip before you animate it. This helps
you reduce the SWF file size, and makes it easier to create an
animation in Flash.
You will create a movie clip symbol in the following exercise. You
will animate this movie clip in later exercises.
select the star.png image (imported in Part 1) and select Modify
> Convert to Symbol from the main menu.
The Convert to
Symbol dialog box opens (see the following figure), where you can
name a symbol and select which type of symbol you want it to be.
Type join us in the
Name text box (see the following figure).
You will see the
name of the symbol, join us, in the Library panel after you
create the symbol. You will also see an icon that represents
movie clips next to the symbol's name.
Remember that the
symbol's name is different than its instance name, because you
can have numerous instances of a single symbol on the Stage. For
example, you can set an instance name for the join us symbol
using the Property inspector after you drag it to the Stage from
the Library panel. If you drag another instance of the join us
symbol to the Stage, assign it a different instance name. You use
the instance name in your ActionScript to reference and
manipulate the instance with code. There are some naming
guidelines you must follow when you assign an instance name.
(This is discussed in Writing simple actions).
Use the Convert to
Symbol dialog box to convert selected content into a symbol, give
it a name, and click OK (shown above) add it to the document's
library. You might see a smaller dialog box without the advanced
linkage and source information when you convert a symbol.
Select the Movie
clip option, and click OK.
This means that you
will convert the graphic image into a movie clip symbol. Movie
clip symbols have their own timelines. This means you can animate
each movie clip instance on its own timeline, and on the main
timeline of the document. This is unique to movie clip instances.
Select File > Save
to save your progress before moving on.
After you finish
saving the file, proceed to the following exercise, Adding
animation to a timeline. In this exercise you will animate the
Adding animation to a timeline
You have already used the Timeline
in Part 1 of this tutorial (Basic Tasks: Creating a banner, Part 1) to insert
new layers and add content onto those layers. In Part 1 you added assets to a
frame on the Timeline. You might have noticed that after you add content on a
frame, a filled circle appears on the frame to signify content on that frame.
Whenever there's new or changed content on a frame, it's called a keyframe and
has a filled black dot on the frame. A keyframe is a frame where you define
changes in the animation, or a frame that has content on it. An empty keyframe
has a hollow circle.
You create an animation in a Flash
document by adding content to a timeline, such as the main timeline, or a
timeline inside a movie clip. When the playhead moves across the Timeline, those
individual frames play and when played in quick succession (like a flipbook or
succession of frames on a reel of film), you can create an animation.
When you create a frame-by-frame
animation, every frame is a keyframe. In a tweened animation, you define
keyframes at significant points in the animation and let Flash create the
contents of frames in between. Flash displays the interpolated frames of a
tweened animation as light blue or light green with an arrow drawn between
keyframes. Because Flash documents save the shapes in each keyframe, you should
create keyframes only at the points in the animation where something changes.
Select Modify > Document.
The Document Properties dialog box
opens. This is the dialog box you used to change the dimensions of the banner in
Part 1 of this tutorial. Now you want to change the frame rate for the banner.
Change the number in the frame rate
text box to 18, and then click OK to apply the new setting.
A higher frame rate means that your
animation plays smoothly, more so than when you had it set to 12 frames per
second (fps). Changing the fps setting means that the main timeline and movie
clip timelines all play at the specified frame rate.
NOTE An increased frame rate
also means that there is a slightly increased demand on the user's computer (or
CPU) to render the extra frames each second.
Double-click the join us symbol
instance on the Stage.
This opens the symbol in
symbol-editing mode (see the following figure). In this mode, you see the movie
clip symbol's timeline, which runs independently of the timeline for the main
FLA file (the one you saw before double-clicking the symbol). This means you can
have animations that play and stop independently from animations on the main
timeline. Remember that a movie clip still plays at the document's frame rate
In symbol-editing mode, the symbol
that you're editing appears normal, while other items on the Stage are dimmed.
Changes that you make in this mode apply to every instance of the symbol in your
FLA file. Notice how the edit bar (above the Timeline in this figure) changes to
show you what you're editing, and its relation to the main Stage.
When you enter this mode, it means
you edit the symbol itself, not just the single instance on the Stage. Any
changes you make on this timeline (which is the movie clip's timeline) apply to
every instance of the symbol that you use in the FLA file.
You can tell that you're editing a
symbol by looking at the edit bar (see the top of the previous image). Use the
edit bar to navigate throughout a document. The edit bar might be above or below
the Timeline, depending on how you have the workspace set up.
Scene 1 refers to the main timeline
of the FLA file. You can click this button on the edit bar to return to the main
timeline. The names after it point to the symbol that you're editing. If the
symbol is nested within other symbols, this path might contain several names. In
the previous figure, you can see that you're editing the join us symbol that's
on the main timeline (Scene 1).
Select the PNG file that's inside
the movie clip, and then press F8 to convert it into another symbol.
In the Convert to Symbol dialog
box, type the name nested mc in the Name text box, select Movie clip, and click
Select Frame 15 and select Insert >
Timeline > Keyframe.
NOTE Press F6 to quickly
insert a new keyframe.
This command inserts a new keyframe,
which means you can modify the content on that frame to create animation.
Currently, the content on Frame 15 is duplicated from the content on Frame 1.
When you modify Frame 15 in a future step, the modifications won't change the
content on Frame 1.
Select Frame 30 and press F6 to
insert a new keyframe.
The keyframe duplicates the content
from Frame 15. That means the content on all three frames is the same.
Select the movie clip instance on
Frame 15, and open the Property inspector (Window > Properties > Properties).
NOTE Make sure you select
the instance on Frame 15, not just the frame. You can first select the frame on
the Timeline (or move the playhead to Frame 15), and then select the movie clip
instance on the Stage in order to see the correct context of the Property
inspector, as shown in the following figure.
Select Brightness from the Color
pop-up menu (the following figure).
Change the slider value to 75% (see
the following figure).
Change the brightness of the movie
The brightness changes for the
instance on Frame 15. The instances on Frames 1 and 30 do not change. This means
that you can now add a motion tween that animates the brightness value between
Frames 1 and 15, and then from Frames 15 to 30. After playing Frame 30, the
playhead loops back to Frame 1 and the animation starts again.
NOTE You could also change
the alpha or tint values using the same procedure. Alpha tweens are more
processor intensive than tweens that change the brightness or tint of your
animation. Try to avoid processor-intensive procedures whenever possible.
Select the instance on the Stage at
Frame 15 again, and then select the Free Transform tool in the Tools panel.
Select the lower right handle and drag it towards the center of the image to
make it smaller (see the following figure).
Resize the instance using the Free
Transform tool. As shown in this figure, you can also rotate the image using the
Free Transform tool.
You can create several kinds of
animation in an FLA file, such as motion tweens, shape tweens, and
frame-by-frame animation. In this tutorial, you will create a motion tween. A
motion tween is an animation where you define properties such as position, size,
and rotation for an instance at one point in time, and then you change those
properties at another point in time. In this animation, you change the
brightness and size of the instance.
Select any frame between Frames 1
and 15, and then select Motion from the Tween pop-up menu in the Property
The span of frames changes color
and an arrow appears between Frames 1 and 15 (see the following figure). Notice
how the options in the Property inspector are different when you select a frame
compared to when you select a movie clip instance.
Create a motion tween between
Frames 1 and 15 on the movie clip's timeline.
NOTE You can also right-click (Windows) or option-click (Macintosh) the
frame and select Create Motion Tween from the context menu instead.
Select any frame between Frames 15
and 30, and then select Motion from the Tween pop-up menu in the Property
inspector to create a second animation.
Click the playhead and drag it
across the movie clip's timeline to test (or scrub) the animation.
Select Control > Test Movie.
NOTE A quicker way to test
your SWF file is to use keyboard shortcuts. Press Control + Enter (Windows) or
Command + Return (Macintosh) to test the file
The test environment opens where
you can see the animation. Notice how it loops, appearing to fade in and out
because of the change in brightness. By default, the playhead returns to Frame 1
and replays the animation after it reaches the final frame on the Timeline. This
means the animation loops repeatedly, unless you tell it to stop. You will find
out how to do this below in the exercise called Writing simple actions.
Select File > Save to save your
progress before moving on.
When you create a
banner, you need to let your user click anywhere in the banner area
and open a new browser window. You can create buttons very easily in
Flash. Your button can either have a graphic with rollover graphics,
sounds, and even animations of their own. Or, you can create an
invisible button. Invisible buttons are useful when you want to
create "hot spots" on your website, or make the entire banner
clickable without obscuring your graphics. In the following
exercise, you'll add an invisible button over your banner graphics.
NOTE For more information on creating visible buttons with
graphics and rollover effects, search creating buttons in the Flash
Help panel (F1).
Click Scene 1 in the
edit bar to make sure that you're on the main Stage.
Select Insert >
Timeline > Layer to create a new layer, and rename the new layer to
Select the Rectangle
tool in the Tools panel (the button's icon looks like a square).
Find the Colors section
of the Tools panel (see the following figure), and click the pencil
icon to select the Stroke color control.
Select No Color, as
shown in the following figure. Doing so disables the rectangle's
Select No Color for the
stroke color control.
Drag the mouse
diagonally across the Stage to create a rectangle.
The size of the
rectangle does not matter--you'll resize it later using the Property
Click the Selection
tool in the Tools panel, and click the rectangle on the Stage to
A cross-hatch pattern
appears over the rectangle when you select it.
Open the Property
inspector (Window > Properties > Properties).
Change the value in the
W (width) text box to 160 and the H (height) text box to 600. Then
change the X text box and the Y text box both to 0 (see the
Change the width and
height of the rectangle, and then set the location of the rectangle
to cover the Stage.
With the rectangle
still selected on the Stage, press F8 to change the rectangle into a
In the Convert to
Symbol dialog box, type inv btn in the Name text box, select Button,
and then click OK.
Double-click the new
button on the Stage to enter the Symbol-editing mode.
The rectangle is
currently on the first Up frame of the button you created. This is
the Up state of the button--what users see when the button sits on
the Stage. Instead, you want the button not to have anything visible
on the Stage. Therefore, you need to move the rectangle to the Hit
frame, which is the hit area of the button (the active region that a
user can click to activate the button's actions).
Click the keyframe at
the Up frame, and hold down the mouse button while you drag the
keyframe to the Hit frame (see the following figure).
Drag the rectangle
keyframe from the Up frame to the Hit frame on the Timeline.
Now the entire area of
the banner is clickable, but there is no visual appearance of the
button on your banner.
Click Scene 1 to return
to the main Timeline.
Now there is a teal
rectangle over the banner area. This refers to the invisible
button's Hit area. If it's distracting to you, you can hide the
button layer in the authoring environment.
(Optional) On the
Timeline, click the dot that's under the Eye icon on the button
layer to hide the contents of that layer.
Select File > Save to
save your progress before moving on.
Writing simple actions
You need to add some
simple ActionScript to your banner in order for the invisible button
to open a website or send information about how many clicks the
banner has received.
There are several different places you can add ActionScript in a
Flash document. You can select an instance, and add ActionScript
that attaches directly to that instance. To access the code, you
would need to find and select that instance again. You can also add
ActionScript to a frame (or multiple frames) on the Timeline. It's a
good idea to add all of your code to a single frame on the Timeline,
because it's much easier to find, update, and organize when you're
working on a file. Do not attach your ActionScript to instances.
NOTE You can also keep your ActionScript in external class
files that import into the FLA file you're working on. This is
sometimes the best way to organize your ActionScript, particularly when you work on larger projects. This topic goes beyond the scope
of this tutorial.
Notice how your Join Us motion tween continually loops when you test
it. By default, the playhead on the Timeline loops if you have
content on more than one frame. Therefore, if you have content on
several frames in a movie clip or on the main Timeline, it will play
and loop forever. You can stop the playhead from looping by adding a
single line of ActionScript. If you add this ActionScript to a
frame, the playhead stops when it reaches that frame:
You don't need to add this ActionScript to your banner. However, you
will need to add this ActionScript to other FLA files that you
create. The stop action is ActionScript you need to know about when
you start using Flash so you can stop looping SWF files when
Before you add the code, you need to give the button a unique
instance name. The instance name enables you to target the button
with ActionScript code. If you don't name the button, your code
doesn't have a way of targeting the button from the timeline. The
first step is to assign the invisible button an instance name, and
then you add code that targets that button using its name.
Select the invisible
button on the Stage.
Open the Property
inspector (Window > Properties), and find the Instance Name text box
in the Property inspector.
Type inv_btn into the
Instance Name text box.
NOTE An instance
name is different from the symbols name (which is what you type in
the Name text box in the Convert to Symbol dialog box). An instance
name cannot have spaces or special characters, but you can use
underscores. Also, your instance names are case-sensitive.
Select Insert >
Timeline > Layer to insert a new layer, and then rename the new
layer to actions.
Open the Actions panel
(Window > Actions), and then select Frame 1 of the actions layer.
Type the following
ActionScript into the script pane (the editable text field) in the
Notice how you target
the inv_btn instance in the first line of code. The event is the
onRelease event in your ActionScript code, which refers to the
action when a user clicks and then releases the mouse over the
inv_btn instance. Then you tell the button to open a particular web
page (http://gnome.deseloper.com) in a new window (_blank) using the
getURL() method.Obviously, you would replace this URL with whatever
website you want the banner to open. If you want the banner to open
the website in the current page, replace _blank with _self.
This is a simple piece
of ActionScript code that reacts to a button click. There is a lot
of additional information on learning the ActionScript language in
the Flash 8 documentation. Refer to the documentation's Table of
Contents, and find Learning ActionScript 2.0 in Flash.
Select File > Save to
save your progress before moving on.
After you finish saving
the file, proceed to the following exercise, Test the application.
Now you have a Flash
banner, with graphics and animation, which also reacts to button
clicks. You have completed your first interactive and animated Flash
document. Let's take a look at it in action, within a browser
Return to your banner2
document, and then select File > Publish Preview (HTML).
The default browser on
your computer opens and displays the banner. By default, the banner
appears at the upper-left corner of the HTML document.
Click the banner to
open the web page. A new browser window should open and display the
Close both browser
windows and return to the Flash authoring environment.
If you are happy with
your document, then save your changes and stay posted for Part 3 of
this tutorial. You might want to change the animation or text, or
modify the code as necessary.
NOTE If you want
to compare your results to the tutorial source file, open the
banner2_complete.fla from the FlashBanner/Part2 folder that you
saved on your hard disk in Open the authoring document.
completing the next step of creating a banner in Flash. You used the
Flash authoring tool to add text, create symbols, animate on a
timeline, and add interactivity to your application. In Part 2 of
this tutorial, you learned how to use the Flash workspace to
accomplish the following tasks:
Create an animation.
You now have a banner
that you can export and add to a web page. In Part 3 of this
tutorial, you will publish your work, and take the file and add it
to a Dreamweaver website.
To continue building this application, go to the Part 3 of this
tutorial: Basic Tasks: Creating a banner, Part 3.