HNDIT1210

Graphics &
Multimedia

Week 1 & 2 – Flash basics

 Objectives
• Learn About Flash Basics
• Setting up a Flash Scene

2
Getting to Know Macromedia Flash
• Content produced with Flash
– Animation
– Synchronized sound
– Engaging interactivity
– Film-style transitions
– High-quality Web video
• Rich media is efficiently compressed
– Provides for fast downloads
Getting start….
 Time Line Click on action script 3.0

Workspace
Stage Workspace

Tool box Properties inspector Panels

• Stage: The rectangular area where you place
graphics, text boxes, buttons, imported graphics
or video clips, and so on when creating Flash
documents.
• Workspace: The gray area around the stage. Does
NOT appear in your final project, but can be used to
“store” your objects until you are ready to use them.

– Modifying the STAGE:

• Menu Bar --> “Modify” --> “Document”
• Change ‘width’, ‘height’, & ‘color’
• Property Inspector:
– Allows you to change different aspects of
the object you just drew. Color, Style, Width
of stroke / line…
 Movie Properties
• You start creating your movie by setting the Frame
Rate, Dimensions, Background Color, and Ruler Units.
Frame Rate The speed of the movie
Dimension The size of the Stage
Background Color The color of the Stage
Ruler Units The unit of measure the ruler
displays

• You set these properties in the Movie Properties dialog

box. To set the properties for the movie you are going
to create:
Changing stage properties

Click on Edit
 Stage properties
1. Choose Modify > Document from the menu. The
Document Properties dialog box opens.
2. Type 400 px in the Width field.
3. Type 400 px in the Height field.
4. Click the Background color box and 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.
 The Grid
• In the exercises that follow, you will be
creating graphics. When creating graphics, the
grid is often helpful. To turn on the grid:
 Edit grid
1. Choose View > Grid > Edit Grid from the menu. The
Grid dialog box opens.
2. Click the Color box and select gray to have the grid
lines display in gray.
3. Choose Show Grid to cause the grid to display.
4. Choose Snap to Grid to cause the edges of your
graphic to align with the grid lines.
5. Set the Horizontal field to 10 px to separate
horizontal lines by 10 pixels.
6. Set the Vertical field to 10 px to separate vertical
lines by 10 pixels.
7. Set the Snap Accuracy to Normal.
8. Click OK.
 Tool Box
Selection tool Sub Selection tool
Free transform Tool
3D rotation Tool
Lasso Tool
Pen Tool
Text Tool
Line Tool
Rectangle Tool
Pencil tool
Brush Tool
Deco Tool
Bone Tool Paint Bucket Tool
Eye Dropper Tool
Eraser Tool
Hand Tool
Zoom tool
Stroke Tool
Black & White Fill Color
Snap To Object Swap Colors
Smooth
Straighten
 Tool box Palette:
• Text tool
– Use Properties Palette to change color, size,and font
• Selection Tool (Black Arrow):
– Select parts or all of an object.
• Click once on outline to select the stroke only
• Click once in center of shape to select the fill only.
• Click TWICE to select the stroke and the fill.
• Drag marquee (square) around object to select all elements
(stroke and Fill).
– Select text and move it to another position on the
stage.
• Rectangle Tool:
– Makes rectangles and squares
• Press and hold down shift.
– Create 5 rectangles and 5 squares
– Save file as “rectangle tool exercise”
• Oval Tool:
– Makes ovals and Circles
• Press and hold down shift.
– Create 5 ovals and 5 circles
– Save file as “oval tool exercise”
• Sub-Selection Arrow (white arrow):
– Allows you to change the shape of the object
by moving their points/dots.
• Draw a rectangle
• Select the “Sub-selection arrow
• Click once on rectangle
• Select dots/points on any of the corners
• Move point to make another shape.
• Lasso Tool:
– Allows you to select all or parts of an object,
using curves.
• Line Tool:
– Allows you to create lines at an angle
• Use Shift to create perfect horizontal or vertical
lines.
– Draw 3 diagonal lines, 3 horizontal lines and 3 vertical
lines.
– Change the property to a “Dash” style.
– Make one more line.
– Save file as “Line tool exercise”

• Pen Tool:
– Allows you to make perfect curves.
– Uses the “Click, Move and Click” method
– Create 1 horizontal, 1 vertical and 1 curve line
– Create 1 closed shape
– Save file as “Pen tool exercise”
• Pencil Tool:
– Allows you to create free-form lines.
– Usually they are bumpy, imperfect, uncontrolled.
– Draw 2 free-form curvy lines
– Change property of pencil tool: width and style
– Draw 1 horizontal line and 1 vertical line
– Save file as “Pencil tool exercise”

• Paint Brush Tool:

– Similar to Pencil tool. Creates brush effect.
– You can change the options of the brush:
• Bottom section of the Tool Box: Square, circle,linear,
size of brush
– Draw 4 different lines/shapes using different brush
options for each line/shape.
– Save file as “Paint brush tool exercise.”
• Free Transform Tool:
– You can rotate, skew, scale, or distort the objects /
shapes / images.
– Draw 8 identical shapes and transform 4 of each shape:
» 1 rotated shape
» 1 skewed shape
» 1 scaled shape
» 1 distorted shape
– Save file as “Free transform exercise”

• Paint Bucket Tool:

– Fills enclosed areas with color. It can fill empty areas
and change the color of already painted areas.
• Hand Tool:
– Lets you move the Stage to change the view
without having to change the magnification.
• Zoom Tool:
– To view the entire Stage on the screen, or to view
a particular area of your drawing at high
magnification.

• Eraser Tool:

– Erases Flash shapes and lines. Will NOT erase

imported images.
• Timeline:
– The Timeline organizes and controls a
document's content / objects over time.
The major components of the Timeline
are layers, frames, and the playhead.
• Timeline (continued)
– Layers:
• It’s like invisible sheets of paper
stacked on top of each other.
• Each layer can have many objects on
it.
–Create 3 layers and label them.
– Frames:
• One section (rectangles) in the timeline.
• Adding frames increases the amount of
time the object is viewed.
• Extends the contents of the last keyframe.
– Keyframes:
• A frame where you define changes in the
animation.
– Position, shape, color…
• You will see a black dot in the frame
(rectangle).
• Creating another keyframe will copy the
objects from the previous keyframe.

– Blank keyframes:
• Creates a keyframe without the previous
objects on the stage.
• An empty keyframe.
• Playhead:
– The RED rectangle above the frames;
it moves through the Timeline to
indicate the current frame displayed
on the Stage.
– Shows you the objects at that
particular time.
• Frame Rate:
– determines the length and speed of a movie.
– The lower the frame rate, the less smooth /
slower the animation.
– The higher the frame rate, the smoother / faster
the animation.
Get familiar with Flash