HNDIT1210

Graphics &
Multimedia

Week 1 & 2 – Flash basics

 Working with tools
• Animation Basics
• Motion tween
 Draw oval
• Choose the Oval tool. There are two color boxes on the
Modifier panel. These color boxes are used to set the stroke
and fill colors. The stroke color outlines your drawing. The
fill color fills the center of your drawing.
• Click the Stroke Color box and then click the color black to
choose black as your stroke color.
• Click the Fill Color box and then click the Rainbow colors to
choose rainbow as your fill color.
• If selected, click to deselect the Object Drawing option. The
Object Drawing option enables you to draw your ellipse as
a grouped object that will not merge with other objects you
draw. You want this option turned off.
• You set the thickness of the Stroke line in the
Property inspector. To set the thickness of the
Stroke line:

• Increase the stroke by dragging stroke

• Select the style from the drop down list
 Creating a symbol
• Select a oval
• Right click on oval and select convert to
symbol
• Once you select convert to symbol it will give
below window
• Type name as “my button”
• Select button from
drop down list in type
• Now you can delete your
button from the stage
because it is stored in a
library and you can use
it later
 Gradients
• When you click a Fill Color box, the Fill dialog
box shown here opens.

• Gradients show gradations of color

 Create gradient color
• From the color you can select
– Solid color
– Linear colors
– Radial gradient
– Bitmap fill
• By changing paint bucket colors you can create
your own gradient color
 Pencil tool
• B

Straighten

Smooth
Pencil Mode

Ink
 Draw the tree trunk.
• Make sure the starting point and the ending
point connect.
• Choose the Paint Bucket tool. You use the Paint Bucket
tool to fill enclosed areas with color.
• Click inside the trunk to fill the trunk with color

• Note: If your tree trunk does not fill with color, you
might have gaps. To close the gaps, click on the Gap
Size modifier and choose Close Large Gaps.
 Create tree top
• Choose the Pencil tool.
• Click the Stroke color box and choose green as the
stroke color.
• Click the Fill color box and choose green as the fill
color.

• Draw a treetop like the one shown above.

• Choose the Paint Bucket tool.
• Click inside the treetop to fill the treetop with
color.
 Convert the tree to a Symbol

• Choose Modify > Convert to Symbol from the

menu. The Convert to Symbol dialog box opens.
• Type tree in the Name field.
• Choose Graphic as the Behavior.
• Click OK. Flash stores the graphic in the Library.
• Press Delete to remove the tree from the Stage.
Draw the Tires Drawing a Car
• 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.
• Choose the Oval tool.
• Click the Stroke color box and choose black as the
stroke color.
• Click the Fill color box and choose black as the fill
color.
• If selected, deselect Obect Drawing mode.
• Click and drag while holding down the Shift key to
draw the two tires as show in the graphic.
Draw the Chassis
• Choose the Line tool.
• Move to the Property inspector. If the Property
inspector is not open, choose Window >
Properties > Properties from the menu to open
it.
• Choose Solid from the drop-down menu.
• Type 3 in the Stroke height field to set the line
thickness.
• Draw the chassis as shown in this graphic
• Choose the Paint Bucket tool.
• Click the Fill color box and choose Orange as
the fill color.
• Click the car to apply the fill color.
You want Flash to view the car as a single object.
You need to group the car.
• Choose the Selection tool.
• Create a rectangle around the car to select the
car. 3. Choose Modify > Group from the menu.

Convert the Car to a Symbol

• Choose Modify > Convert to Symbol from the
menu. The Convert to Symbol dialog box opens.
• Type Car in the Name field.
• Choose Graphic as the Behavior.
• Click OK. Flash stores the graphic in the Library.
• Press Delete to remove the car from the Stage.
 Creating Your Movie
Draw the Buildings
• Select deco tool

• Go to the properties
• Select drawing effect  Building tool
• Select advanced options
• Draw different buildings by changing
advanced options
 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.
 Renaming a Layer
Change the name of the current layer:
• Click the layer you want to rename.

Double click here

• Choose Modify > Timeline > Layer Properties

from the menu. The Layer Properties dialog box
opens.
• Type Buildings in the name field.
• Click OK.
 Adding New Layers
Create a new layer for the sky.
• Choose Insert > Timeline > Layer from the menu
to create a new layer above the active layer.
• Choose Modify > Timeline > Layer Properties
from the menu. The Layer Properties dialog box
opens.
• Type Sky in the Name field.
• Click OK.
 Create the Sky
• Make sure Sky is the active layer. When a layer
is active, it is highlighted and there is a pencil
icon on the layer. You click on the layer name
to make a layer active.
• Using rectangle tool draw the sky
• Using color gradient create sky color
 Send sky to back
• Change the level of layers to send the sky to
back

Building
layer send
to top for
given
priority
 Add Grass
• Choose the Selection tool.
• Click the Buildings layer name to make the
Buildings layer the active layer.
• Click anywhere outside the Stage to deselect the
buildings.
• Choose the Rectangle tool.
• Click the Stroke color box and choose no color as
the stroke color.
• Click the Fill color box and choose bright green as
the fill color.
• Draw a rectangle below the buildings for the
grass.
Add a Road
Add a Title Area
Create a new layer and name it Trees.
• Make sure Buildings is the active layer. (You
click on the layer name to make a layer active.)
• Choose Insert > Timeline > Layer from the
menu. A new layer appears at the top of the
Timeline.
• Choose Modify > Timeline > Layer Properties
from the menu. The Layer Properties dialog
box opens.
• Type Trees in the Name field.
• Click OK.
 Take a tree from the Library.
• Move to the Library. If the Library panel is not
open, choose Window > Library from the menu.
• Click the icon next to Tree and drag a tree onto
the Stage.
 Resize the Tree
• Choose the Free Transform tool. Handles
appear around the tree.
• Choose the Scale Modifier.
• Drag a corner handle until the tree is the
appropriate size.
• Place the tree in front of a building.
• Place another tree on the Stage and repeat
the process.
 Keyframes
• Each layer of a Flash movie is divided into
frames. Frame numbers appear along the top
of the Timeline. At the current time, each
layer in your movie is only one frame long. You
want your movie to last 60 frames. Inserting a
keyframe at Frame 60 will cause each layer to
remain on the screen until Frame 60. You use
keyframes to specify changes in the
animation.
Extend the Sky Layer
• 1. Click in Frame 60 of the Sky layer.
• 2. Choose Insert > Timeline > Keyframe from the
menu.
Extend the Buildings Layer
1. Click in Frame 60 of the Buildings layer.
2. 2. Choose Insert > Timeline > Keyframe from the
menu.
Extend the Trees Layer
1. Click in Frame 60 of the Trees layer.
2. 2. Choose Insert > Timeline > Keyframe from the
menu.
 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.
4. Type Car in the Name field.
5. Click OK.
 Add the Car to the Stage
1. Click the first frame of the Car layer.
2. Move to the Library panel.
3. Click the icon next to the car and drag a copy of
the car onto the Stage.
4. Choose the Free Transform tool. Handles appear
around the car.
5. Click and drag a corner handle until the car is
the appropriate size. Corner handles resize the
selected object proportionally.
 Motion Tween
Make the Car Move
1. Choose the Selection tool.
2. Click and drag the car to the right side of the
Stage as shown above
3. Click Frame 1 of the Car layer.
4. Click Frame 60 of the Car layer.
5. Insert frame
6. Right click on time line and select motion tween
7. Move the car to the left side of the stage shown
below
• Press enter for move the car
• Press control + Enter for view the show
 Adding Sound
Import the Sound
• Choose File  Import  Import to Library
from the menu. Find and select shorthrn.wav
and click Open. The Sound file now appears in
the Library.
• You can insert new layer called “horn” and
add sound in to layer
 Adding a Button
Buttons have four states: up, over, down, and
hit.
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
• Click the Horn layer to make the Horn layer the
active layer.
• Choose Insert > Timeline > Layer from the menu
to create a new layer.
• Choose Modify > Timeline > Layer Properties
from the menu.
• Type Button in the Name field to name the layer
button.
• Click OK.
 The Over Frame
1. Choose the Selection tool.
2. Click 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. Click the Fill color box and select green to
change the fill color to green.
 The Down Frame
1. Click 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 select brown to
change the fill color to brown.
 The Hit Frame
1. Click 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.