How to Create a Banner in Flash, Part 1
Basic Tasks: Creating a banner, Part 1
Macromedia Flash Basic 8 or
Macromedia Flash Professional 8 can seem like a very complex programs to
learn. One reason for this seeming complexity is that you can use it for
so many different things, such as cartoon animations, media players, and
sophisticated software. This tutorial is suitable for you if you're
opening Flash 8 for the first time. This tutorial shows you some of the
fundamental aspects of the program, and how to get started using them to
build a real project. You don't need to know anything about Flash or
animation to complete this tutorial; in fact, you'll discover how easy
it is to start using Flash 8 to add elements to your web pages.
This is Part 1 of a three-part tutorial on how to build a simple
animated banner in Flash and add it to a web page using Macromedia
Dreamweaver. You'll learn how to create a file and modify its settings,
import and add graphics to the Stage from the library, and create layers
in Part 1. In Part 2 and Part 3, you'll add an animation and create a
button that opens a browser window. Then you'll specify publish
settings, and add the banner to a web page.
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
It's helpful to analyze the completed authoring document, which is a
FLA file, to see how the author designed the application. You should
examine what kinds of scripts were used to add interactivity, and
understand what you are going to create.
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.
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/Part1
folder, you will find a Flash file called banner1_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
In the completed FLA
file, you will see the structure that makes up the finished SWF file
for Part 1 of this tutorial. The application, a Flash banner for a
gnome website, looks like this at the end of Part 1:
The completed banner at the end of Part 1.
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, Creating a new document.
Creating a new document
You can create all
kinds of different elements for the web or for CD-ROMs and devices
using Flash 8. First, you create a file in the Flash authoring tool,
which you use to output SWF files.
files are the files that you can put online when you embed it in a
web page. The Macromedia Flash Player plug-in then displays the SWF
file, so your website visitors can view or interact with the
Your SWF file can contain video, MP3 sound, animations, images,
data, and so forth. The benefit of using an SWF file over other
formats is that the Flash Player plug-in is incredibly common. Let's
start building a banner.
Open the Flash
By default, Flash
displays the Start Page (see the following figure), which enables
you to select a recently edited document, create a new Flash
document or ActionScript file, or create a new document using a
pre-built template. If you use Flash Professional 8, you can create
additional kinds of files.
By default, Flash displays the Start Page when it's started. This
figure shows the options available in Flash Professional 8.
Click Flash Document from the Create New column on the Start Page
to create a blank document.
NOTE If Flash
doesn't display the Start Page (the feature might have been disabled
earlier if you share a computer) you can select File > New from the
main menu to create a new document.
Make sure the
General tab is active, select Flash document, and click OK.
Select File > Save As
from the main menu.
Name the file
banner.fla, find or create a new directory to save your project in,
and click Save when you're done.
Flash saves editable
documents as FLA files. From the FLA file, you export (or compile)
SWF files that you can embed in an HTML page. Flash Player,
installed on most computers, plays the SWF files that you export
NOTE It's a good
idea to save a new document when you start working with it (and
often thereafter) so you don't lose any of your hard work.
After you finish saving
the file, proceed to the following exercise, Changing document
Changing document properties
At this point you're
looking at a blank canvas surrounded by many controls (see the next
figure). The large white square is called the Stage, and it's where
you place assets you want to display in the SWF file, such as
images, buttons, text, or animations. The Stage and panels are
commonly called the Flash workspace or authoring environment. The
Flash environment consists of the Stage and a variety of panels,
tools, and the Timeline above the Stage.
Around the Stage you see a variety of panels. The panel on the left
is called the Tools panel (see the following figure). This panel
includes tools you can use to create and modify documents, such as
tools you use to draw and make selections.
Use the Tools panel to draw and make selections. You use the
Selection tool (the black arrow) to make selections in these
A panel near the bottom of the Flash application is titled
Properties. (Select Window > Properties > Properties if you don't
see the panel.) This panel is called the Property inspector (see
the following figure). This panel lets you change various
properties of whatever is currently selected in your document (such
as an image or a frame), or set properties for the entire SWF file
(such as the frame rate or dimensions).
If you don't have any
objects or frames selected, the Property inspector allows you to
modify properties for the document itself.
Open the Property
inspector (Window > Properties > Properties) and click the button
next to the text that says Size to open the Document Properties
NOTE Make sure
that you don't have a frame selected. Click the Stage if you do not
see the button mentioned in the previous step.
Click this button in
the Property inspector to open the Document properties dialog box.
You can then change the size and color of the Stage.
The button displays
the current dimensions of the FLA file (550 x 400 pixels). By
default the Stage size in a new Flash document is 550 pixels wide
by 400 pixels high. When you click Size, you open a dialog box
where you can change several document-wide properties (such as the
Stage dimensions, color, and document frame rate).
Type 160 into the
Width text box, and 600 into the Height text box.
When you type new
values into these text boxes, you resize the dimensions of your FLA
file. You need to use these specific dimensions because you're
creating a banner and you should use a standard banner size. In
this tutorial, you're creating a "wide skyscraper.
NOTE You can
also create banners from a Macromedia template by selecting File >
New from the main menu. Select the Templates tab and select the
Click OK when you
finish entering the new dimensions to return to the authoring
When you return to the
authoring environment, notice how the dimensions of your document
change. You can also change the current document's background color
and frame rate directly in the Property inspector, without going to
the Document Properties dialog box.
Select File > Save to
save the document before you proceed to the next section (Importing
When you work with Flash, you'll
often import assets into a document. Perhaps you have a company logo, or
graphics that a designer has provided for your work. You can import a variety of
assets into Flash, including sound, video, bitmap images, and other graphic
formats (such as PNG, JPEG, AI, and PSD).
Imported graphics are stored in the document's library. The library stores both
the assets that you import into the document, and symbols that you create within
Flash. A symbol is a vector graphic, button, font, component, or movie clip that
you create once and can reuse multiple times.
So you don't have to draw your own graphics in Flash, you can import an image of
a pre-drawn gnome from the tutorial source file. Before you proceed, make sure
that you save the source files for this tutorial as described in Open the
finished FLA file, and save the images to the same directory as your banner.fla
Select File > Import > Import to Library to import an image into the current
You'll see the Import dialog box (see the following figure), which enables you
to browse to the file you want to import.
Browse to the folder on your hard disk that contains an image to import into
your Flash document.
Navigate to the directory where you saved the tutorial's source files, and
locate the bitmap image saved in the FlashBanner/Part1 directory.
Select the gnome.png image, and click Open (Windows) or Import (Macintosh).
The image is imported into the document's library.
NOTE You can drag assets from the library onto the Stage several times if you want to
see several instances of the artwork. Your file size doesn't increase if you use
several instances on the Stage. The SWF file only stores the information of the
original symbol or asset from the library, and treats each instance like a
Select Window > Library to open the Library panel.
You'll see the image you just imported, gnome.png, in the document's library.
Select the imported image in the library and drag it onto the Stage.
Don't worry about where you put the image on the Stage, because you'll set the
coordinates for the image later. When you drag something onto the Stage, you
will see it in the SWF file when the file plays.
Click the Selection tool, and select the instance on the Stage.
If you look at the Property inspector you'll notice that you can modify the
image's width and height, as well as the image's X and Y position on the Stage.
When you select an object on the Stage, you can see and modify the current
coordinates in the Property inspector (see the following figure).
The X and Y coordinates match the registration point, which is the upper left
corner of this movie clip symbol.
Type 0 into the X text box, and type 0 into the Y text box.
Typing these values in sets the X and Y coordinates both to 0, as shown in the
Set the X and Y coordinates using the Property inspector. Set the X and Y values
Setting new coordinates moves the upper-left corner of the image to the
upper-left corner of the Stage. You can drag the bitmap image around the Stage
using the Selection tool instead of changing coordinates in the Property
inspector. Use the Property inspector when you need to set a specific position
for an object, like you did in this step.
Select File > Save to save the document before you proceed to the next section
(Introducing layers and the timeline).
NOTE You can also import sound files into your FLA files. This isn't covered in this
tutorial, but you can find out more information Working with Sound.
The Timeline is above
the Stage in the Flash workspace. The Timeline, which contains
layers and frames, helps you organize assets in your document, and
also controls a document's content over time.
Flash documents can
play over a length of time, like movies or sound, which is measured
using frames. Layers are like transparencies that stack on top of
one another, and each layer can contain images, text, or animations
that display on the Stage.
The FLA file you're
working on has one layer (Layer 1) with contents on a single frame
(Frame 1). This is the default way that a Flash document opens.
In this exercise, you
lock and rename Layer 1. Often you'll want to place objects in a
particular position on the Stage. To help you keep those objects in
place, Flash enables you to lock layers, so you cannot select the
items on a layer and accidentally move them.
In this section, you
will complete the following tasks:
Creating a new layer
Importing to a layer
Select Layer 1 in the
Timeline and click the dot below the lock icon, as shown in the
Lock a layer so its
contents aren't accidentily moved or deleted from the Stage. You can
also prevent inadvertently adding other assets to that layer.
With your only layer
locked, you need to add new layers before you can add any other
objects to the Stage. You cannot add new objects to a locked layer.
Select the Selection
tool in the Tools panel, and double-click the name Layer 1.
When you double-click a
layer name, you can modify the name of the layer.
Type background into
the layer name to rename the layer. Then save your file.
When you start building
projects with many layers, layer names like Layer 1 and Layer 14
don't help you determine what's on that layer. Giving layers a
descriptive name is a good practice to adopt.
Select File > Save
before you proceed to the next exercise (Creating a new layer).
NOTE You can
also organize layers into layer folders.
In just about any Flash
project where you use imported graphics and animation, you'll need
to create at least a few layers. You need to separate certain
elements onto their own layers, particularly when you start to
animate objects. You can also stack graphics on top of each other,
and even create a sense of depth or overlapping by using multiple
Select the background
layer on the Timeline, and click Insert Layer to create a new, empty
The new layer is
created above the background layer (see the following figure).
Click Insert Layer to
insert a new layer above the currently selected layer.
Double-click the name
of the new layer so the layer's name becomes editable.
Type animation to
rename the new layer.
Graphics on the Stage
stack according to the layers on the Timeline. For example, anything
that you put on the animation layer will appear above the image on
the background layer. You will add animation to this second layer in
Part 2 of this tutorial.
Select File > Save
before you proceed to the next exercise (Importing to a layer).
In an earlier exercise,
Importing graphics, you imported the gnome.png image directly into
the document's library. Then you dragged the image onto a selected
layer on the Stage. You can also import assets directly to the Stage
instead of into the library. First you need to select the frame into
which you want to import the image on the Timeline. Then you can
import the image onto that frame, which displays on the Stage. You
use this technique to import an image in the following exercise.
Select frame 1 of the
You need to import
star.png image to the animation layer.
Select File > Import >
Import to Stage.
The Open dialog box
appears where you can select an image from your hard disk. Find the
folder of this tutorial's source files on your hard disk.
Select star.png in the
tutorial's source files, and click Open (Windows) or Import
The image imports to
the animation layer (see the following figure), and then it appears
on the Stage.
The image imports to
the frame on the layer that you select on the Timeline. You will
learn more about the Timeline and layers in Part 2 of this tutorial,
Basic Tasks: Creating a banner, Part 2.
Open the Library panel
(Window > Library).
The image you just
imported to the Stage also appears as an asset in the library. Even
if you import an asset directly to the Stage, Flash always stores
the assets you import in the library as well.
Click the Selection
tool in the Tools panel.
Move the star.png file
on the Stage to just above the gnome's head in the image, as shown
in the following figure
Move the star.png image
just above the gnome's head.
Select File > Save to
save your document before moving on to Test the application.
To finish, you can test
your document using Flash. Doing so tests the SWF file in Flash
Player. For example, you can see how your code works in Flash
Player, how animations play on the Timeline, test user
interactivity, and more. It's much faster than uploading your work
to a server each time you want to see the SWF file in action.
Select Control > Test
Movie from the main menu.
The test environment
opens and plays your document in Flash Player. You can now see the
compiled SWF file version of your FLA file. You will often use the
Test Movie command to view your progress when you work on an FLA
Click the close button
of the window that contains the SWF file to return to the authoring
Find the folder on your
hard disk where you saved banner.fla at the beginning of this
tutorial in Creating a new document.
When you open this
folder, you should see an additional SWF file called banner.swf.
This is the compiled version of the banner.fla file. When you want
to create a finished version of your file to upload, you'll want to
make additional publish settings in Flash before you compile your
SWF file. You'll look at these settings in Part 3 (Basic Tasks:
Creating a banner, Part 3) of this tutorial.
NOTE If you want
to compare your results to the tutorial source file, open the
banner1_complete.fla from the FlashBanner/Part1 folder that you
saved on your hard disk in Open the authoring document.
completing your first step of creating a banner in Flash. You used
the Flash authoring tool to create a new document, add assets, and
manipulate the file using a variety of tools.
In a very short
period of time, you learned how to use the Flash workspace to
accomplish the following tasks:
Set up a FLA file.
into the FLA file.
Arrange assets in a
Create and modify
Test a SWF file.
You're on your way to
creating a banner in Flash so you can embed it in an HTML page
using Dreamweaver. In the next two parts of this tutorial, you
will create and modify symbols, create an animation, add some
simple ActionScript for a button that opens a web page, and add
the banner to a website.