In this tutorial I take you step-by-step through the process of creating this Flash CS4 Professional

movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to
your movie.

Get Started

To begin, open Flash CS4 Professional. The window shown here appears:

Click Flash File (ActionScript 3.0). The window shown here appears:

Note: The window
shown is the default
layout and is named
Essentials. If your
window has a
different layout, click
the down-arrow to the
right of Help on the Menu
bar and then select
Essentials.
On the far right edge of the window, you see the Tools panel, which contains the tools you use to
create or modify drawings and text. You select a tool by clicking it. If there are multiple tools in a
single well, click the visible tool a second time and a popup menu appears. You can then choose the
tool you want. Wells with multiple tools have a small triangle in the bottom-right corner.

Tool modifiers for the selected tool are shown at the bottom of the Tools panel. You use modifiers to
set tool options.

When you hover your mouse pointer over a tool or display a tool menu, you will see that each tool
has a letter associated with it. You can choose a tool by pressing the letter. For example, when you
hover your mouse pointer over the Selection tool  , you see "Selection Tool (V)." Pressing "v"
activates the Selection tool.

The Property inspector and the Library panels appear to the left of the Tools panel. You use the
Property inspector to set object and tool properties. You store objects in the Library.

The Timeline appears in the bottom portion of the window. You use the Timeline to lay out the
sequence of your movie.

The Stage is in the center of the window. You create your movie on the Stage.

Set Document Properties

You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler
Units.

Frame Rate The speed of the movie. The

number of frames per
second.

Dimension The size of the Stage.

Background Color The color of the Stage.

Ruler Units The unit of measure shown

on the rulers. To display the
rulers, choose View >
Rulersfrom the menu.

You can set these properties in the Document Properties dialog box.

Set Document Properties

 1. Choose Modify > Document from the menu or press Ctrl+J. The Document Properties dialog
box appears.

2. Type 400 px in the Width field to set the width of the Stage to 400 pixels.
3. Type 400 px in the Height field to set the height of the Stage to 400 pixels.
4. Click the Background Color box and then choose white as the background color.
5. Type 12 in the Frame Rate field.
6. Choose Pixels from the drop-down menu in the Ruler Units field.
7. Click OK. Flash sets the document properties.

Display a Grid

In the exercises that follow, you will be drawing. Displaying a grid of horizontal and vertical lines is
often helpful when drawing.

Display a Grid

1. Choose View > Grid > Edit Grid from the menu or

press Ctrl+Alt+G. The Grid dialog box appears.

2. Click the Color box and then choose gray to make the grid lines gray.
3. Choose Show Grid to cause the grid to appear.
4. Choose Snap to Grid to cause the edges of your drawing to align with the grid lines.
5. Set the Horizontal field   to 20 px to separate horizontal lines by 20 pixels.
 6. Set the Vertical field   to 20 px to separate vertical lines by 20 pixels.
7. Set the Snap Accuracy to Normal to tell Flash how close your drawing has to be to the gridline
for Flash to use the gridline to determine where to place the drawing.
8. Click OK. Flash creates a grid on the Stage.

Work with the Property Inspector

The Property inspector, which is located on the Properties tab, is one of the most frequently used
panels in Flash. You use it to set the attributes of objects as you work. If the Property inspector is not
open:

 Choose Window > Properties from the menu. The Property inspector appears on the right side
of the window.

The Property inspector is one of many panels found in Flash. When you are not working in a panel,
you can collapse it. To collapse a panel, click the Collapse icon  . The Collapse icon turns into an
Expand icon  . To open the panel again, click the Expand icon  .

The Property inspector for a particular tool or object may be divided into several sections. Each
section heading is preceded by a triangle. Clicking the triangle toggles the section between open   
and closed  . When a section is open, you can set options.

Work with the Rectangle Tool

In the exercise that follows, you will use the Rectangle tool to draw a rectangle. Symbols are reusable
objects you store in the Library. Later in this tutorial you will turn the rectangle into the button symbol
that movie viewers press to start the movie.
After you choose the Rectangle tool, the Rectangle tool options appear in the Property inspector.
There are two color boxes. You use the color boxes to set the stroke and fill colors. The stroke color
outlines your drawing. The fill color fills the center of your drawing. Stroke lines can be thin, solid,
dashed, and so on. You choose the line style. You can also set the line thickness. The line thickness
can be any value from 1 to 200; the larger the number, the thicker the line.

The corners of a rectangle can be squared-off or rounded. For squared-off corners, set the Rectangle
Corner Radius fields   to 0. For rounded corners, set the field values to any value between -100
and +100. Negative numbers round inward; positive numbers round outward. The further the number
is from 0, the rounder the corner.

Draw a Rectangle

1. Choose the Rectangle tool  .

2. Activate the Property inspector (click the Properties tab).

 3. Click the Stroke Color box   and then click the color white to choose white as your stroke
color.
4. Click the Fill Color box   and then click the color blue to choose blue as your fill color.
5. Type 3.00 in the Stroke Height field to set the line thickness.
6. Choose Solid from the drop-down menu in the Style field to select the Stroke line style.
7. Under Rectangle Options, type 10.00 in the first Rectangle Corners Radius field  to set the
corner radius. Flash sets the values for the other Rectangle Corners Radius fields to the same
value.
8. Click on the Stage and drag diagonally to draw the rectangle. Make the rectangle two grid
boxes high and five grid boxes wide.

Note: You can also use the Modifiers area of the Tools panel to set the stroke and fill colors.

Create a Symbol

You are now ready to turn the drawing (the rectangle) you created into a button and store the drawing
as a button in the Library. In Flash, a symbol is defined as a graphic, button, or movie clip. A graphic
symbol is a static image. You can use a graphic when creating an animation. A button symbol
responds when you click the mouse, roll over it, or perform some other action. A movie clip symbol is
a static image or a piece of animation. Symbols and other items stored in the Library can be used
more than once.

Create a Button Symbol

1. Choose the Selection tool  .

2. Click and drag around the rectangle you drew to
select it.
3. Choose Modify > Convert to Symbolfrom the menu
or press F8. The Convert to Symbol dialog box
appears.
 4. Type Start Button in the Name field.
5. Choose Button as the type.
6. Click OK.
7. Activate the Library, which is located to the right of the Properties tab. The Librarypanel
opens. You should see the Start Button in the Library panel.

Note: If the Library tab is not available, choose Window > Library from the menu. The Library opens.

If you do not see the Start Button, click and drag downward to open the viewing area.
 8. Press the Delete key to delete the rectangle from the Stage. Don't worry. You have a copy of
the Start Button in the Library.

Create a Gradient

When you click a color box, the color dialog box shown here appears.

Gradients show changes in color. They are located on the bottom row of the Color dialog box. You
will use a gradient to create the movie's sky. But first, you must create the gradient you will use.

Create a Gradient

1. Choose Window > Color from the menu or press Shift+F9. The Color panel appears.

2. Choose Linear in the Type field.

3. Near the bottom of the panel, double-click on the first Edit Gradient Range icon  .Color boxes
appear.
 4. Click the color blue to select blue.
5. Double-click the second Edit Gradient Range icon and then click the color white to select
white.

6. Click and drag the second Fill Gradient Range icon to the three-quarter point on the Gradient
Range slider to increase the amount of white in your gradient.
7. Click the Menu Options button   to open the menu.
8. Click Add Swatch.
9. Close the Color panel. Flash adds the gradient you created to the color box.

Use a Gradient

In this exercise you will create a rectangle and fill it with the gradient you just created. You will then
turn the resulting drawing into a symbol and use it later to create the sky.

Use a Gradient

1. Choose the Rectangle tool  .

2. Activate the Property inspector.
 3. Click the Stroke color box   and then click No Color so the stroke will not have a color.
4. Click the Fill color box   and then click the gradient you created.
5. Type 0 in the Rectangle Corners Radius field  .
6. Click the Stage and drag diagonally to create a rectangle.

Later you will use the drawing you just created. For now, turn it into a graphic symbol.

Create a Graphic Symbol

1. Choose the Selection tool.

2. Click and drag to create a rectangle around the drawing to select it.
3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
4. Type Sky in the Name field.
5. Choose Graphic as the Type.
6. Click OK.
7. Activate the Library to view the graphic in the Library.
8. Press the Delete key to remove the graphic from the Stage.
Work with the Pencil Tool and the Paint Bucket Tool

When working in Flash, you can use the Pencil tool to draw freehand shapes and the Paint Bucket
tool to fill enclosed areas with color. In this exercise, you will use both of these tools to draw the tree
trunk and treetop you will use later to create a tree.

Create the Tree Trunk

1. Choose View > Grid > Edit Grid from the menu.

2. Deselect Snap to Grid. This will enable you to draw
freely.
3. Click OK.
4. Choose the Pencil tool  .
5. Activate the Property inspector.
6. Click the Stroke color box   and then choose
brown as the stroke color.
7. On the Modifier panel, if Object Drawing   is
selected, deselect it.
8. On the Modifier panel, choose the Smooth option.
This option rounds the corners of your drawing.
 9. Draw the tree trunk. Make sure the starting point and the ending point connect.

Note: While drawing, you may want to use the Eraser tool  . Double-click the Eraser tool to erase
everything on the Stage. Use the Eraser Shape modifier that is located in the modifier area of the
Tool panel to select the size and shape of your eraser. Make sure the Eraser Mode is set to Normal,
and then wipe over the area you want to erase.

10. Choose the Paint Bucket tool.

11. Click the Fill color box   in the Property inspector and then choose brown as the fill color.
12. Click inside the trunk to fill the trunk with color.
Note: If your tree trunk does not fill with color, you probably have gaps. To close the gaps, click on
the Gap Size modifier that is located in the modifier area of the Tool panel and then choose Close
Large Gaps.

Create the Treetop

1. Choose the Pencil tool  .

2. Click the Stroke color box   and then choose green as the stroke color.
3. Draw a treetop like the one shown here.

5. Choose the Paint Bucket tool  .

6. Click the Fill color box   in the Property inspector and then choose green as the fill color.
7. Click inside the treetop to fill the treetop with color.

Create the Tree

 1. Choose the Selection tool.
2. Double-click the treetop fill. Double-clicking the treetop fill selects both the treetop stroke and
the treetop fill.
3. Drag the treetop over the tree trunk.

Group Objects

Flash CS4 Professional views the tree as two objects, the treetop and the tree trunk. In the next
exercise you will group the treetop and the tree trunk to cause Flash CS4 Professional to view the
tree as a single object. Then you will turn the tree into a symbol.

Group Objects

1. Choose the Selection tool.

2. Click and drag to create a rectangle around the tree. This selects the tree.
3. Choose Modify > Group from the menu or press Ctrl+ G to make the treetop and the tree trunk
a single object.
4. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
5. Type Tree in the Name field.
6. Choose Graphic as the type.
7. Click OK. Flash places a copy of the tree in the Library.
8. Press the Delete key to remove the tree from the Stage.
Work with the Oval Tool

You can use the Oval tool to draw circles and ovals. In this exercise you will create a car. You'll start
by using the Oval tool to draw a hubcap.

Create a Hubcap

1. Choose View > Snapping > Snap to Gridfrom the

menu.

2. Choose the Oval tool.

3. Activate the Property inspector.
4. Click the Stroke color box   and then choose gray as the stroke color.
5. Click the Fill color box   and then choose gray as the fill color.
6. Click in the upper corner of a square on the grid, hold down the Shift key, and drag diagonally
to draw a circle. Holding down the Shift key as you drag creates a perfect circle when you are
using the Oval tool.

Convert the Hubcap to a Symbol

Converting the hubcap to a symbol places the hubcap in the Library. Later you will take two copies of
the hubcap out of the Library and place one copy on each tire.

1. Choose the Selection tool.

2. Double-click the circle's fill. Double-clicking the circle's fill selects the fill and the stroke.
3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
4. Type Cap in the Name field.
5. Choose Graphic as the type.
6. Click OK. Flash places a copy of the hubcap in the Library.
7. Press the Delete key to remove the hubcap from the Stage.

Draw the Tires

Draw two tires. Look at the graphic below and place the tires on the grid exactly as
shown.Remember: When using the Oval tool, holding down the Shift key as you click and drag
creates a perfect circle.

1. Choose the Oval tool.

2. Activate the Property inspector.
3. Click the Stroke color box   and then choose black as the stroke color.
4. Click the Fill color box   and then choose black as the fill color.
5. If selected, deselect Object Drawing mode  .
6. Click and drag while holding down the Shift key to draw the two tires as shown in the graphic.

Work with the Line Tool

You can use the Line tool to draw straight lines. In this exercise you use the Line tool to draw the car
chassis.

Draw the Chassis

1. Choose the Line tool.

2. Activate the Property inspector.
3. Choose Solid from the Style drop-down menu.
4. Type 3.00 in the Stroke height field to set the line thickness.
5. Draw the chassis as shown in this graphic. To draw a perfectly straight line, hold down the
Shift key as you draw with the Line tool.
Fill the Car with the Color Red

1. Choose the Paint Bucket tool  .

2. Click the Fill color box   and then choose red as the fill color.
3. Click inside the lines that outline the car to apply the fill color.

Fill the Headlights with the Color White

1. Choose the Paint Bucket tool.

2. Click the Fill color box and then choose white as the fill color.
3. Click inside the headlight area.

Add the Hubcaps

1. Choose the Selection tool  .

2. Activate the Library panel.
3. Click the icon next to Cap and drag an instance of the Cap to the center of a tire. When you
drag a copy of an object from the Library onto the Stage, each copy of the object is called an
instance.
 4. Click the icon next to Cap again and drag an instance to the center of the other tire.
5. Use the arrow keys on the keyboard to adjust the location of the hubcaps. Your car should look
like the one shown here.

Group the Car

You want Flash to view the car as a single object. You need to group the car.

1. Choose the Selection tool  .

2. Create a rectangle around the car to select the car.
3. Choose Modify > Group from the menu. Flash groups the car.

Convert the Car to a Symbol

1. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
2. Type Car in the Name field.
3. Choose Graphic as the type.
4. Click OK. Flash stores the graphic in the Library.
 5. Press Delete to remove the car from the Stage.

Import an Image

You can use pre-existing graphics in your Flash movies. Simply import them. In this exercise you are
going to import a driver for the car.

Import an Image

1. Click here to download the driver and the horn sound zip file.
2. Open the Zip file.
3. Place the driver.wmf file and the shorthrn.wav file in a folder. You will use the shorthrn.wav file
later.
4. Choose File > Import > Import to Stage from the menu. The Import dialog box appears.
5. Find and select driver.wmf and then click Open. Flash places driver.wmf on the Stage. The
image is ungrouped.

6. Choose the Selection tool  .

7. Create a rectangle around the driver to select the driver.
8. Choose Modify > Group from the menu. Flash groups the driver.

Convert the Driver to a Symbol

1. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
2. Type Driver in the Name field.
3. Choose Graphic as the type.
4. Click OK. Flash stores the graphic in the Library.

Put the Driver in the Car

 1. Drag an instance of the car from the Library onto the Stage.
2. Place the car over the driver.
3. Choose the Selection tool.
4. Draw a rectangle around the car and driver to select them both.
5. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box
appears.
6. Type Car and Driver in the Name field.
7. Choose Graphic as the type.
8. Click OK. Flash stores the graphic in the Library.
9. Press the Delete key to remove the car and driver from the Stage.

Note: If your car and driver look like the one shown here:

1. Click the driver to select him. Do not select the car (a rectangle should not surround the car).
2. Choose Modify > Arrange > Send to Back from the menu. Flash places the driver behind the
car.
Draw the Buildings

You have created all your graphics and have stored them as symbols. You are now ready to create
your movie. Start by drawing buildings.

1. Choose the Line tool.

2. Activate the Property inspector.
3. Choose Solid from the Style drop-down menu.
4. Type 3.00 in the Stroke height field to set the line thickness.
5. Move to the Stage and draw buildings as shown in the illustration. Remember: To draw a
perfectly straight line, hold down the Shift key as you draw with the Line tool.

Add Color to the Buildings

Fill the first building with color:

1. Choose the Paint Bucket tool.

2. Click on the Fill color box and then choose tan as the fill color.
3. Click in the first building to fill the building with color.

Fill the next building with color:

1. Click the Fill color box and then choose blue-green as the fill color.
2. Click in the second building to fill the building with color.

Fill the last building with color:

1. Click the Fill color box and then choose pink as the fill color.
2. Click in the last building to fill the building with color.

Use the Paint Bucket tool to fill the doors with brown and the windows with light yellow.

Understand Layers

Think of a layer as a transparent sheet on which you paint. You can see through each layer to the
layers under it until you add color. You can add layers, delete layers, and change the position of
layers. Each layer is independent of all other layers. The layer you are currently working on is called
the active layer. You can view layer information on the Timeline.
Rename a Layer

When working in Flash you should give your layers relevant names. You can use the Layer
Properties dialog box to rename a layer.

Rename a Layer

1. Click the layer you want to rename. In this case, you will rename Layer 1.
2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box
appears.
3. Type Buildings in the Name field.
4. Click OK. Flash changes the name of the layer.

Note: You can also change the layer name by double-clicking the current layer name and then typing
the new layer name.
Create a New Layer

You use layers to organize the artwork in your movie. You can draw on each layer without affecting
the other layers. If a portion of a layer has nothing on it, you can see through to the layer below.

Create a new Layer for the Sky

1. Choose Insert > Timeline > Layer from the menu

to create a new layer above the active layer.
2. Choose Modify > Timeline > Layer Properties from
the menu. The Layer Properties dialog box
appears.
3. Type Sky in the Name field.
4. Click OK. Flash renames the layer Sky.

Note: You can also create a new layer by clicking the New Layer button   in the bottom left corner of
the Timeline.

Create the Sky

1. Make sure Sky is the active layer. When a layer is active, it is highlighted and designated by a
pencil icon  . You click on the layer name to make a layer active.
2. Choose the Selection tool  .
3. Activate the Library panel.
4. Click the icon next to Sky and drag an instance of Sky onto the Stage.

Rotate an Object

You can use a Modify menu option to rotate an object. You need to rotate the Sky instance 90
degrees clockwise.
Rotate an Object

1. Click the Sky instance to select it.

2. Choose Modify > Transform > Rotate 90 CW from the menu. Flash rotates the Sky instance 90
degrees clockwise.

Resize an Object

You need the sky to fill the top part of the Stage. You must resize the Sky instance. You can use the
Property inspector to resize an object.

Resize an Object

1. Activate the Property inspector.

2. Choose the Selection tool.
3. Click the Sky instance to select it.
4. Click the Lock Width and Height icon in the Property inspector to deselect   it. When the
Lock Width and Height option is selected  , adjusting the width changes the height
proportionally, and vice versa.

5. Set the W field to 400. That is the width of the stage.

6. Set the H field to 240.
7. Click and drag until the sky is over the buildings.
Change the Order of Layers

Objects that are on higher layers appear to be in front of objects on lower layers. You can change the
order of layers. You want to place the sky behind the buildings.

Change the Order of Layers

1. Click the Sky layer on the Timeline.

2. Drag the Sky layer downward to place it below the Buildings layer. The sky appears behind the
buildings.
Add Grass

1. Choose the Selection tool.

2. Click the Buildings layer name to make the Buildings layer the active layer.
3. Click anywhere outside the Stage to deselect the buildings.
4. Choose the Rectangle tool.
5. Activate the Property inspector.
6. Click the Stroke color box and then choose no color as the stroke color.
7. Click the Fill color box and then choose bright green as the fill color.
8. Draw a rectangle below the buildings for the grass.

Add a Road

1. Click the Fill color box and choose bright gray as the fill color.
2. Draw a second rectangle below the green rectangle. The second rectangle is a road.

Add a Title Area

 1. Click the Fill color box and choose purple as the fill color.
2. Draw the last rectangle, as shown.

Create a Trees Layer

Now you will add two trees to your movie. Make sure Buildings is the active layer. (You click on the
layer name to make a layer active.)

1. Choose Insert > Timeline > Layer from the menu. A new layer appears at the top of the
Timeline.
2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box
appears.
3. Type Trees in the Name field.
4. Click OK. Flash names the layer Trees.

Take an Object out of the Library

Items stored in the Library can be used at anytime. Simply click the icon next to the Library object and
drag the object into the Stage.

Take an Object out of the Library

1. Activate the Library panel.

2. Click the icon next to Tree and drag a tree onto the Stage.
Work with the Free Transform Tool

You can use the Free Transform tool along with the Scale modifier to change the size of an object.
The Free Transform tool places a rectangle around the selected object. To change the width of the
object, click and drag the side handles of the rectangle. To change the height of the object, click and
drag the top or bottom handles of the rectangle. To change the size proportionately, click and drag
the corner handles.

Use the Free Transform Tool

1. Choose the Free Transform tool  . Handles appear around the tree.
2. Choose the Scale Modifier  .
3. Drag a corner handle until the tree is the appropriate size.
4. Use the Selection tool to place the tree in front of a building.
5. Drag another tree onto the Stage and repeat the process.
Work with Frames

Each layer of a Flash movie is divided into frames. Frame numbers appear along the top of the
Timeline. You can create motion by changing the placement of an object in successive frames.

Each layer in your movie is one frame long.Inserting a frame at Frame 60 will cause each layer to
remain on the screen until Frame 60.

Extend the Sky Layer

1. Click in Frame 60 of the Sky layer.

2. Choose Insert > Timeline > Frame from the menu.

Extend the Buildings Layer

1. Click in Frame 60 of the Buildings layer.

2. Choose Insert > Timeline > Frame from the menu.

Extend the Trees Layer

1. Click in Frame 60 of the Trees layer.

2. Choose Insert > Timeline > Frame from the menu.

Create a Motion Tween

In Flash, you create motion by changing the position of an object in successive frames. You can use
a motion tween to create motion. With a motion tween, you tell Flash the starting position and the
ending position of an object. Flash interpolates all the positions in between. In this exercise, you are
going to use a tween to move the car across the Stage.

You are ready to add the car to the Stage. Create a new layer. Name the layer Car.

Create a Layer Named Car

1. Make the Trees layer the active layer by clicking on the Trees layer name.
2. Choose Insert > Timeline > Layer from the menu to create a new layer above the Trees layer.
3. Choose Modify > Timeline > Layer Properties from the menu to open the Layer Properties
dialog box.
4. Type Car in the Name field.
5. Click OK. Flash names the new layer Car.

Add the Car and Driver to the Stage

 1. Click in the first frame of the Car layer.
2. Activate the Library panel.
3. Click the icon next to Car and Driver and drag a copy of Car and Driver onto the Stage.
4. Choose the Free Transform tool  .
5. Choose the Scale modifier  .
6. Click and drag a corner handle until the car is the appropriate size. Corner handles resize the
selected object proportionally.

Create a Tween

1. Choose the Selection tool.

2. Click and drag the car to the right side of the Stage as shown here.

3. Choose Insert > Motion Tween from the menu.

4. Click in Frame 60 of the Car layer to select it.
5. Hold down the Shift key and drag the car to the other side of the Stage. Flash creates a motion
tween. Holding down the Shift key ensures that the car moves in a straight line.

6. Choose Control > Play from the menu or press Enter to play the movie. The car moves across
the Stage.
Add Sound

To have a horn honk as the car rolls through town, you need to add the horn sound. You should have
downloaded a Zip file that contains the horn sound earlier in this tutorial. If you didn't, click here to
download it now. Open the Zip file and place the contents in a folder.

Import the Sound

1. Choose File > Import > Import to Library from the menu.

2. Find and select shorthrn.wav and then click Open. The file shorthrm.wav appears in the
Library.

Create and Name a New Layer

1. Click the Car layer name to make the Car layer the active layer.
2. Choose Insert > Timeline> Layer from the menu to create a new layer. The new layer appears
above the Car layer.
3. Choose Modify > Timeline > Layer Properties from the menu and type Horn in the Name field.
4. Click OK. Flash names the layer Horn.

Add Sound

1. Click in Frame 30 on the Horn layer.

2. Choose Insert > Timeline > Keyframe from the menu to make Frame 30 a keyframe. You use a
keyframe when a new symbol or instance appears on the Timeline.
3. Activate the Library.
4. Drag shorthrn.wav from the Library onto the Stage. You will not be able to see it on the Stage.
5. Click in Frame 30.
6. Activate the Property inspector.
7. Choose Event from the drop-down menu in the Sync field. This causes your sound to begin
playing in Frame 30 and continue playing until it is finished.
8. Choose Control > Play from the menu to play the movie. You hear the horn.

Add ActionScript

If you published your movie now, the car would start moving as soon as the viewer opened the Web
page or started Flash player. You want the viewer to click on a button to make the car move across
the Stage.

ActionScript is a programming language you can use to send instructions to a Flash movie. Each
instruction is known as a statement. Statements can include commands. A statement must follow a
particular syntax or set of rules. You use the stop() command to stop a movie.
 Explanation of stop();

stop The command you are issuing. It stops the Timeline.

Parentheses indicate that you are instructing the command to

perform an action. They sometimes enclose parameters.
()
Parameters are additional information needed to perform the
command. Parameters are separated by commas.

; Marks the end of a statement.

You can use the Actions panel to add ActionScript to a movie. You open the Actions panel by
choosing Window > Actions from the menu or by pressing F9. You can use the Actions panel by
using either the Script pane or Script Assist. In the exercise that follows, use the Script pane. You
toggle between Script Assist and and the Script pane by clicking the Script Assist button. When you
are using Script Assist, the Actions panel looks like this:

When you are using the Script pane, the Actions panel looks like this:
When using ActionScript 3.0, it is a good practice to put all of your ActionScript on the top layer, by
itself, in frame1, to make it easy to find. Flash places a small a in the frame.

Add a New Layer

1. Click the Horn layer to make it the active layer.

2. Choose Insert > Timeline > Layer from the menu to add a new layer.
3. Choose Modify > Timeline > Layer Properties from the menu. The Layer Propertiesdialog box
appears.
4. Type Actions in the Name field.
5. Click OK. Flash names the layer Actions.

Add ActionScript

1. Click in Frame 1 on the Actions layer.

2. Choose Window > Actions from the menu or press F9 to open the Actions panel.
3. If you are not in the Script pane, click ScriptAssist.
4. Type stop();
5. Close the Actions panel. Flash saves the ActionScript you wrote.

Test the Movie

Thus far, you have been selecting Control > Play from the menu to view your movie. This option
starts in Frame 1 and moves sequentially through each frame. However, it does not read your
ActionScript. To test your movie including the ActionScript, you must use the Test Movie option on
the Control menu.

Test the Movie

1. Choose Control > Test Movie from the menu to test the movie. Your car should notmove.
2. Click the Close button to return to Flash.

Add a Button

You need to add a button to your movie. When the viewer presses the button, the movie starts.
Buttons have four states: up, over, down, and hit and have their own Timelines. The Timelines have
four frames: Up, Over, Down, and Hit. You can set each frame's properties.

The Four Button States

Up The appearance of the

button when the pointer is
not over it

Over The appearance of the

button when you place the
pointer over it

Down The appearance of the

button when you click it

Hit Defines the area that will

respond to a click of the
mouse

You want to add a button that reads "Start Movie" and is blue in the up state, green in the over state,
gold in the down state and responds when you click it.

Create a New Layer

1. Click the Horn layer to make the Horn layer the active layer.
2. Choose Insert > Timeline > Layer from the menu to create a new layer.
3. Choose Modify > Timeline > Layer Properties from the menu.
4. Type Button in the Name field to name the layer Button.
5. Click OK.

Take the Button from the Library

 1. Activate the Library.
2. Click on the icon next to Start Button and drag the Start Button onto the Stage.

Edit the Symbol

1. Choose Edit > Edit Symbols from the menu or press Ctrl+E to change to the symbol-editing
mode. You can now see the button's Timeline.
2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box
appears.
3. Type State in the Name field.
4. Click OK. Flash changes the name of the layer to State.

Add a Text Layer

1. Choose Insert > Timeline > Layer from the menu to create a new layer.
2. Choose Modify > Timeline > Layer Properties from the menu. The Layer Properties dialog box
appears.
3. Type Text in the Name Field.
4. Click OK. Flash changes the name of the layer to Text.

Work with the Text Tool

In Flash, you use the Text tool to add text.

Add Text to the Button

1. Select the Text tool  .

2. Choose Text > Font from the menu and select a font. I used Arial Black.
3. Choose Text > Size > 12 from the menu to set the font size to 12.
4. Activate the Property inspector.
5. Click the Color box and then select white as the color.
6. Click on the button.
7. Type Start Movie.
8. Click anywhere outside the button.
9. Use the Selection tool and the arrows on the keyboard to adjust the placement of the text.
10. Click in the Hit field on the Text layer.
11. Choose Insert > TimeLine > Frame from the menu. Flash extends the number of frames in
which the text appears.
12. Click the dot under the Lock icon   on the Text layer. This locks the layer and prevents you
from inadvertantly making a change to it. If later you want to make a change, click the lock that
appears when you click the dot to unlock the layer.
The Over Frame

1. Choose the Selection tool.

2. Click in the Over frame to select it.
3. Choose Insert > Timeline > Keyframe from the menu. The Over frame becomes a keyframe.
4. Click outside the button to deselect it.
5. Click the fill color to select it.
6. Activate the Property inspector.
7. Click the Fill color box and then select green to change the fill color to green.

The Down Frame

1. Click in the Down frame to select it.

2. Choose Insert > Timeline > Keyframe from the menu.
3. Click outside the button to deselect it.
4. Click the fill color to select it.
5. Click the Fill color box and then select gold to change the fill color to gold.

The Hit Frame

1. Click in the Hit frame to select it.

2. Choose Insert > Timeline > Keyframe from the menu.
3. Choose Edit > Edit Document from the menu. You have created a button.

Add a Filter

You can use filters to apply visuals effects to buttons, movie clips, and text. To make your button look
more like a button, add a Gradient Bevel effect.

1. Choose the Selection tool.

2. Click the button to select it.
3. Activate the Property inspector.
 4. Open the Filters section.
5. Click the Add filter button   at the bottom on the section.
6. Click Gradient Bevel.
7. Set the Distance field to -2. Flash adds a gradient bevel effect to your button.

Test the Button

By default, Flash disables buttons. This give you the ability to move them around the Stage and
manipulate them in other ways. If you want to see the changes in your button's states, you must
enable it.

1. Use the Selection tool to place the button where you want it.
2. Choose Control > Enable Simple Buttons from the menu or press Ctrl+Alt+B.
3. Place your pointer over the button and then click it. The button is blue. When you place your
pointer over the button, it turns green. When you click it, it turns gold.
4. Choose Control > Enable Simple Buttons from the menu again to disable the button.

Add ActionScript

You want your movie to start when the viewer clicks the button. You must add the following
ActionScript:

function playMovie(event:MouseEvent):void
{
play();
}

startButton.addEventListener(MouseEvent.CLICK, playMovie);

Whenever you drag an object from the Library onto the Stage, you create an instance of the object.
You can use the Property inspector to name an instance. This allows you to discern one instance
from another instance. A function is a block of code that performs a specific task. This function and
line of code instruct Flash to play the movie when the viewer clicks the button with the instance
name startButton.

When you want Flash to respond to an action such as a mouse click, you must use a function and
the addEventListener() command. In this example, the function, which is named playMovie, executes
when the viewer clicks the startButton instance.

Code Explanation
Tells ActionScript to create a function. Functions are enclosed in
function
curly braces.
playMovie The name of the function. You name the function.
The event object and data type. In this case, an event that
event:MouseEvent
involves the mouse.
:void Indicates that the function cannot return a value.
play(); The command you want to execute.
The name of the instance for which you want to detect an event.
startButton
You use the Property inspector to name the instance.
Command that tells ActionScript to detect (listen for) a specific
addEventListener
event.
MouseEvent.CLIC The event you want to detect. In this example, a mouse click on
K the startButton.
The function you want to execute when the viewer clicks
playMovie the startButton. In this example, the function you created and
named playMovie.

Add ActionScript

1. Activate the Property inspector.

2. Choose the Selection tool.
3. Click the button to select it.
4. Type startButton in the instance Name field. Flash names the instance.
5. Click in frame 1 on the Actions panel.
6. Choose Window > Actions from the menu. The Actions panel appears.
7. Type the code under the stop(); statement.
8. Close the Actions panel. Flash saves your code.

Test the Movie

1. Choose Control > Test Movie from the menu. The Test Movie window appears.
 2. Click the Start Button. The car rolls across the screen.
3. Close the window.

Finish Up

You can finish up your movie by adding a title.

Add a Layer

1. Make the Button layer the active layer by clicking on the Button layer name.
2. Choose Insert > Timeline > Layer from the menu to create a new layer above the Button layer.
3. Choose Modify > Timeline > Layer Properties from the menu to open the Layer Properties
dialog box.
4. Type Title in the Name field.
5. Click OK. Flash names the new layer Title.

Add a Title

1. Choose the Text tool.

2. Activate the Property inspector.
3. Click the Color box and select white.
4. Choose Text > Size > 24 from the menu.
5. Click the lower-left corner of the Stage.
6. Type My First Movie.
7. Click anywhere outside the Stage.
8. Use the Selection tool and the arrow keys to place the text where you want it.

Add a Filter

1. Activate the Property inspector.

2. Open the Filters section.
3. Click the Add Filters button.
4. Click Drop Shadow. Flash adds a drop shadow to the text.

Test the Movie

1. Choose Control > Test Movie from the menu. The Test Movie window appears.
2. Click the Start Movie button. The movie plays.