AIM Your Project with Flash: Chapter 2 - The Basics 33
After completing this module, you’ll be able to:
• create and save a new Flash document.
• create simple graphics using the draw tools.
• group and resize images.
• import images.
• create, rename, and lock layers.
• use and add symbols to the Library.
• add text using the text tools.
Although Flash has a steep learning curve, you only need to know a few
tools to build simple projects. Once you know the basics, you can explore
additional tools, resources, and the scripting language called ActionScript.
Flash is a vector-based tool. This means that you’ll be using draw-
ing tools such as lines, rectangles, and ovals to create objects that you can
manipulate. Like drawing tools you’ve probably used in the past, you can
fill shapes and adjust the thickness of lines. If you want to work with pho-
tographs or make adjustments in clipart, you’ll want to do that in another
program such as Fireworks then import them into Flash. Adobe
Before using Flash, you’ll need to install the software from the CD
you’ve purchased. Or, download the trial version or full version from the
Adobe’s website or your school’s website. The directions in this tutorial are
written for use with Adobe’s Flash CS4 for both Windows and Macintosh.
However they can be adapted for use with earlier versions. Before being
purchased by Adobe, Flash was owned by Macromedia so older versions
had Macromedia in the title such as Macromedia Flash 8.
34 AIM Your Project with Flash: Chapter 2 - The Basics
Figure 2-A. Flash Start Screens.
Begin by opening the Flash application.
To open Flash:
Windows - Click the Start menu, select Programs > Adobe > Flash.
Macintosh - Open the Applications folder, double-click Adobe Flash
CS4, double-click Flash.
Flash will load. A Welcome window will appear (shown above).
To create a new Flash document:
Select Flash Document under Create New on the Welcome window.
Or, pull down the File menu, select New.
A blank Flash document will appear on the screen.
To open an existing Flash document:
Pull down the File menu, select Open.
Browse for your document.
Exploring the Flash Screen
Flash uses an IDE (Integrated Development Environment) where devel-
opers work with the Stage, Timeline, Media Objects, ActionScript code, and
other elements. You’ll notice that the Flash screen looks different from most
of the applications you probably use.
Stage Area. Your main work area is called the Stage. This is the area
where you will be working with the visual aspects of your project. The
stage area is used to draw, write, and create objects and movement for dif-
AIM Your Project with Flash: Chapter 2 - The Basics 35
ferent layers of your project. Think of it as a screen where you can organize
resources and try out animation ideas. The gray area around the stage is
called the Pasteboard. You can temporarily store things like graphics here.
These objects won’t show when you play your movie.
Timeline. Like an electronic spreadsheet, the Timeline is set up in rows
representing layers and columns representing time by individual frames.
A project could have thousands of frames, each containing slightly differ-
ent information depending on the layer and the placement on the timeline.
This is the part of Flash that causes the most confusion, so spend some time
thinking about this.
The timeline is used to coordinate different layers which contain objects
such as graphics, text, audio, and video. When you create a new movie,
you’ll see the visible layers. Think of a layer as a clear transparency contain-
ing objects you create. You may have many layers as you wish such as one
for a title, a runway, another for a cloud, and yet another for an airplane.
You want separate layers because you may only want the title and runway
for the first few seconds, but you’ll need the airplane throughout. The time-
line area can be adjusted to make room for more layers as needed.
Figure 2-B. Flash Document.
36 AIM Your Project with Flash: Chapter 2 - The Basics
Quick Reference Playhead Timeline
folder delete frame rate
insert new layer
Property Panel Library Panel options
tool Action Script Used
Draw/Paint item name
tools Stage size
Figure 2-C. Quick Reference.
AIM Your Project with Flash: Chapter 2 - The Basics 37
The timeline is also used to control when and how these objects will ap-
pear on the screen. The window divides your movie into individual frames.
Most movies show 12 frames per second. A scroll bar is used to see addi-
tional frames. A keyframe is used to define a change in your animation.
Tools. The choices on the tools palette (right side of screen) will prob-
ably look familiar from working with other software packages. It’s always a
good idea to go back to the selection tool (arrow) between using tools. This
way, you don’t accidently create or modify an object.
Property Panel. Across the right side of the screen to the left of the tools,
you’ll see panels that provide information about a variety of topics. The
default panel is the property panel showing information about the project.
If you’re working with a graphic, the property panel will show information
about the line thickness and colors being used. It’s context specific, so it will
show different information depending on whether the object selected is a
graphic, text, or other item. The property inspector is an easy way to made
an adjustment in color, line thickness, or font size without needing to go to
the menu. You can expand or collapse selections by using the triangle next
to the selection title such as PUBLISH.
Library Panel. You can easily move between panels by clicking on the
panel tabs. The Library Panel will show a list of the available graphics, but-
tons, and movie clips.
Planning a Simple Project
Let’s begin with by creating the objects for a simple animation (see
Figure 2-D). We’ll move an airplane down a runaway and take off into the
clouds. You don’t need to make exactly what I do, however it’s often help-
ful to start with an example you can recreate. If you’d like to see my version
of this animation, go to
There are many ways to plan for animation. Some people like to care-
fully organize all their materials, while others prefer to jump right in. If
you’re a concrete thinker, it’s helpful to begin with a list of the objects you’ll
need as layers for the animation and a sketch showing the keyframes where
important movement will occur.
Although it’s suggested that you follow our example, feel free to try
your own animation. Here’s a list of some good “starter projects”:
• shoot a basketball into a basket
• build a snowperson
• throw a baseball at a batter
• drive a car on a highway
• move a wagon over the prairie
38 AIM Your Project with Flash: Chapter 2 - The Basics
Figure 2-D. Plan for Airplane Project.
Drawing in Flash
There are two kinds of graphics used in Flash projects: bitmaps and vec-
Bitmaps are made of many dots that form a picture. Photos and many
of the clipart files you see are bitmap. They take up lots of space and don’t
enlarge very well. However it’s okay to import these if they’re important to
Vector graphics are made of individual lines, shapes, and locations.
They are infinitely scalable and look good reduced or enlarged. They also
don’t take up much space. Flash creates vector-based graphics.
Let’s start with something simple and creative. You don’t need to cre-
ate the airplane or house. However you’re going to use draw tools to create
some clouds, the runway, and grass. The pictures are called graphic assets
and will become part of our library.
At first, creating a cloud may seem tough. However it’s actually quite
easy using the Flash draw tools. We’ll simple create a bunch of overlapping
circles, delete extra lines, group the pieces together, and adjust the thickness
of the line (see Figure 2-E).
AIM Your Project with Flash: Chapter 2 - The Basics 39
To use the oval tool to make a cloud:
Click the shapes tool and chose the oval tool on the
Go to the Colors section of the Tools palette, click the color
next to the pencil tool, and choose the color black.
Go to the Colors section of the Tools palette, click the color
next to the paint bucket, and choose the blank fill .
Move your cursor over the stage area.
Press and drag diagonally to create an oval. If you want a perfect
circle, hold down the shift key while you drag.
Create a bunch of overlapping ovals and circles.
Click the selection (pointer) tool. Click on a curve inside the group of
ovals. Press the delete key to remove the line.
Remove the rest of the lines so you’re left with the outline of a cloud.
Note: You can also use the eraser tool to take out a line section.
Pull down the Edit menu, choose Select All.
Pull down the Modify menu, choose Group.
The cloud is now one object.
Double-click on a line in your cloud.
Notice that the Properties panel
changes. If you don’t see the
Properties panel, pull down the
Window menu and choose Proper-
Change the line thickness by chang-
ing the number from 1 to 3.
To resize, right-click on a line of the
cloud. Choose Free Transform.
Drag from handles to resize.
Figure 2-E. Cloud made from ovals.
40 AIM Your Project with Flash: Chapter 2 - The Basics
Figure 2-F. Explore draw tools.
Once you’ve created your cloud, you may want to spend some time
exploring the drag tools. You’ll notice some differences from other draw
software you’ve used (see Figure 2-F).
Below are some things to try:
Draw a filled rectangle. Drag away the filling and you’ve got an empty
rectangle and a filled rectangle. Drag the individual lines. They are
all individual pieces.
Draw small circle inside your rectangle. Then, try dragging it away. No-
tice that it leaves an imprint of the circle.
Choose the selection tool. Mouse over an unselected line. Then, drag
from that line.
Saving Our Work
It’s important to constantly save your work. It’s a good idea to maintain
a separate folder for each of your Flash projects where you can store the
project itself along with any graphics, audio, or video elements you might
To save your work:
Pull down the File menu and choose Save.
You’ll see a window with a default location for saving your file.
Choose the location where you wish to save your work such as your
Click the New Folder button, name your new folder such as project1.
Note: Mac users need to expand the Save Window to see the
New Folder option.
Name your project such as takeoff.
Your filename should be one word and keep it short. The file will
be save with the .fla file extension such as takeoff.fla.
Click the Save button.
AIM Your Project with Flash: Chapter 2 - The Basics 41
Like other graphics software, Flash uses layers as a way to organize
project content such as text, graphics, audio, and video. These elements are
all stacked on top of each other. The top layers cover the lower levels. These
layers allow the developer to show and animate different elements at differ-
You’ve created one layer of your project. We’ll call it cloud. Next, we
need to create other layers for other content in our project. Our project will
have six layers: cloud, airplane, runway, house, grass, and welcome. We’ll
create the layers, then add the elements to each layer.
To rename Layer 1:
Double-click the word Layer 1 in
the upper left corner of the
Type in the word cloud.
To create a new layer:
Click the new layer button in
the bottom-left corner of the
A new layer will appear under
Layer 1. It is called Layer 2. New layers will appear above previ-
Double-click the word Layer 2 and rename it airplane.
Create additional layers for runway, house, grass, and welcome.
If you need more room to see all the layers you can drag from the
area below the scroll bar as show by the arrow below.
You might want to save your project again.
select unfill to turn objects into outlines
layer fill to show objects
As you work with layers, you’ll notice that when you click on a layer it
becomes selected and a pencil tool appears. Each layer also contains three
columns with options that can be chosen. You can make individual selec-
tions within the column, so you can lock some layers and not others.
42 AIM Your Project with Flash: Chapter 2 - The Basics
You’ll probably want to use other programs to create complex graphics,
audio, and video elements. Flash provides an easy way to import these as-
sets. Before you import an asset, be sure to select the layer where you want
it to appear.
Our next layer is the airplane. Rather than trying to create an airplane
from scratch, we’re going to use a piece of clipart. You’ll find this graphic
on the web (.gif file). Then, import the graphic.
To download graphics from the web:
Open a web browser and go to the following web address.
Pull down the File menu and choose Save.
Save the graphic in your project folder.
Also, download the house graphic at the following web address:
To import graphics into Flash:
Click on the airplane layer in your Timeline.
This will also select the first frame of the airplane layer. Your
cloud graphic will appear in the Stage.
Pull down the File menu, choose Import, select Import to Stage.
You’ll see an Import dialog box.
Locate your project folder and choose the airplane.gif file.
The graphic will appear on the screen and in your Library.
Click on the selection tool (arrow/pointer) tool from the Tools palette.
Move the airplane graphic to the lower left area of the Stage.
The graphic is too large for our project. It needs to be resized.
Right-click on the graphic and choose Free Transform.
Eight small dots/handles will appear around the graphic.
Hold down the Shift key and drag from a dot/handle to proportionally
resize the image.
Click on the house layer in your Timeline.
Import the house graphic and drag it to the lower center area of the
Resize the house so that it is much smaller than the airplane.
AIM Your Project with Flash: Chapter 2 - The Basics 43
As you create and move elements around on the screen, it’s easy to ac-
cidently move your graphics. It’s a good idea to lock graphics at each layer.
You can always unlock them later.
To lock and unlock a layer:
Click the lock dot in the layer.
A lock icon will appear.
Click the lock icon in the layer.
The lock icon will disappear.
Flash contains some fun tools for creating lines. We’ll use lines to create
the illusion of a runway and grass.
To create a line for a runway:
Choose the runway layer.
Choose the Line tool in the Tools palette.
Click and drag across the bottom of the entire Stage.
A line will appear across the Stage.
Choose the selection tool (arrow/pointer).
Click on the line.
In the Properties panel, choose the black color and a line thickness
of 10. Change the line type to a long uneven line (option 5 down).
It looks like a rural runway.
Lock this layer by clicking on the lock icon in the runway layer.
To create a line for grass:
Choose the grass layer.
Create a line across the bottom of the screen (slightly higher than
the runway) and select the line.
In the Properties panel, choose the green color and a line thickness
of 20. Change the line type to the uneven dots (option 6).
In the Properties panel, click the pencil tool next to the Style options
and have some fun! Adjust the different elements to make it look
Lock this layer.
44 AIM Your Project with Flash: Chapter 2 - The Basics
Using the Library
We’ve spent lots of time working with
graphics. What makes Flash exciting is the
ability to animate this static artwork. The
graphics you’ve created and imported will
be used over and over again throughout
the movie. Sometimes they will be visible
and at other times they’ll be hidden from
view. The Timeline is used to manage these
assets, however the Library is used to store
reusable elements for easy access.
Use the Library to store any element
that will be used multiple times within
your project. Each graphic takes space.
When images are stored in the Library, the
user only has to download the element
once even if it is used many times. This reduces the size of the project and
saves download time. Each time you drag a copy of an item off the Library
and onto the Stage, it’s called an instance of that object.
Elements in the Library are stored as three types of symbols: graphic
symbols, button symbols, or movie clips. These symbols can be dragged
onto the Stage whenever they are needed.
Graphic symbols are vector graphics such as the cloud you made and
the airplane you imported.
Button symbols are used for interactive activities and respond to user
events such as “up” and “over.”
Movie clips can be entire Flash movies inside other Flash movies.
You can also incorporate sounds, imported bitmap graphics, and im-
ported video clips.
Your Library is easy to view and expand. The two graphics you im-
ported are already in the Library. Let’s add the graphics we created to the
AIM Your Project with Flash: Chapter 2 - The Basics 45
To explore the Library:
Look on the right side of your screen, your Library panel may
already be available. If not, you’ll need to show it.
Pull down the Window menu, choose Library.
You’ll see the two graphics you already imported.
Click on your airplane or house to see a preview.
To add symbols to the Library:
Choose the selection (pointer/arrow) tool.
Click on the cloud layer and unlock the layer.
Click on the cloud to select it. You may need to shift-click on the indi-
vidual elements to put up your entire cloud.
The selected cloud should appear to have little dots on it.
Pull down the Modify menu, choose Convert to Symbol.
A dialog box appears.
Type the name: cloud.
Pull down the Type option and choose Graphic.
The system will track your new system by it’s name, type, and
registration point (a tiny dot within the symbol used to record it’s
The cloud will now show in the Library.
Add the runway and grass graphics to your Library.
Remember, you’ll need to unlock the graphics to add as symbols.
Although we’ve spent much of our time working with graphics, it’s
also possible to add words to your project. Although we’ll just be adding
a welcome message, it’s possible to create paragraphs of text. Text is cre-
ated inside a text box that can be resized. The text will automatically wrap
around and adjust to the size of the text box. We’ll create a text box and add
a welcome statement.
To add text:
Choose the welcome layer.
Choose the Text tool in the Tools palette.
Click anywhere on the Stage.
Type: Have you ever wondered how airplanes fly?
Choose the selection/point tool and click in the text box.
46 AIM Your Project with Flash: Chapter 2 - The Basics
In the Properties panel, choose the font
face: Arial; font size: 24; font color:
red; and font style: bold.
Click and drag the text box so it ap-
pears across the center of the
Lock this layer.
At this point you have all the assets you
need to create a great animation. Right now
your stage looks a little strange. However,
soon you’ll be creating an exciting animation.
Be sure to save your work before you con-
Now, try your own project. Create a new
document, create and image, import and im-
age and practice using the paint and draw tools.