FAKULTI PENDIDIKAN TEKNIKAL DAN VOKASIONAL

PRACTICAL LAB SHEET 10

Course : ANIMATION TECHNOLOGY

Course Code : BBU 30303

Semester/Session : 3/2020/2021

DENGAN HIKMAH, KITA MENEROKA

WITH WISDOM, WE EXPLORE
TASK 1: TUTORIAL ADOBE FLASH HOW TO MAKE CAR MOVING AND ADD
CAR SOUND

OBJECTIVE:
After completing this lab sheet, students will be able to make car moving and add car
sound using Adobe Flash.

EQUIPMENT LIST
1. Adobe Flash software
2. Computer / Notebook
3. Practical Lab Sheet 10

PROCEDURES/ STEP BY STEP TUTORIAL

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
appear. 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
function
are enclosed in curly braces.
playMovie The name of the function. You name the function.
The event object and data type. In this case, an
event:MouseEvent
event that 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
startButton detect an event. You use the Property inspector to
name the instance.
Command that tells ActionScript to detect (listen
addEventListener
for) a specific event.
The event you want to detect. In this example, a
MouseEvent.CLICK
mouse click on the startButton.
The function you want to execute when the
playMovie viewer clicks 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.

Click the Start Movie button. The movie plays.