Practical Lab Sheet 10: Fakulti Pendidikan Teknikal Dan Vokasional
Practical Lab Sheet 10: Fakulti Pendidikan Teknikal Dan Vokasional
Practical Lab Sheet 10: Fakulti Pendidikan Teknikal Dan Vokasional
Semester/Session : 3/2020/2021
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
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.
You can set these properties in the Document Properties dialog box.
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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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
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.
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.
You can use the Line tool to draw straight lines. In this exercise you use the Line tool
to draw the car chassis.
You want Flash to view the car as a single object. You need to group the car.
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.
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.
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.
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.
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.
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.
Note: You can also create a new layer by clicking the New Layer button in the
bottom left corner of the Timeline.
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
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
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.
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.
1. Click the Fill color box and choose purple as the fill color.
2. Draw the last rectangle, as shown.
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.
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.
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.
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.
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.
You are ready to add the car to the Stage. Create a new layer. Name the layer 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.
Create a Tween
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.
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
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.
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 ActionScript
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.
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.
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.
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.
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.
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.
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.
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. 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
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
Add a Filter
1. Choose Control > Test Movie from the menu. The Test Movie window
appears.