Chapter 2:
Drawing Objects in Adobe Flash
© 2010 Delmar, Cengage Learning
Chapter 2 Lessons
1.
2.
3.
4.
5.
Use the Flash drawing tools
Select objects and apply colors
Work with drawn objects
Work with text and text objects
Work with layers and objects
© 2010 Delmar Cengage Learning
Drawing Objects in Adobe Flash
• Flash creates and manipulates vector
graphics
• Vector format vs. bitmap format
– Bitmap graphics are based on pixels
– Altering pixels can result in jagged edges
© 2010 Delmar Cengage Learning
Vector Graphics
•
•
•
•
Represent images using lines, curves
Can resize without losing image quality
Generally smaller than bitmap images
Not as effective at bitmaps for photo-realistic
images
© 2010 Delmar Cengage Learning
Modifying Vectors
• Objects created using Flash drawing tools
have a stroke, a fill, or both
• Strokes can be segmented into smaller lines
• You can modify the size, shape, rotation,
and color of each stroke, fill and segment
© 2010 Delmar Cengage Learning
Flash Drawing Modes
• Merge Drawing Model
• Object Drawing Model
© 2010 Delmar Cengage Learning
Flash Drawing Tools
• Selection
– Used to select an object or parts of an object such as
the stroke or fill, and to reshape objects
• Subselection
– Used to select, drag, and reshape
• Free Transform
– Used to transform objects by rotating, scaling,
skewing, and distorting
• Gradient Transform
– Used to transform a gradient fill by adjusting the size,
direction, or center of the fill
© 2010 Delmar Cengage Learning
The Drawing Tools
• Lasso
– Used to select objects or parts of objects
• Pen
– Used to draw lines and curves by creating
a series of dots
• Text
– Used to create and edit text
© 2010 Delmar Cengage Learning
The Drawing Tools
• Line
– Used to draw straight lines
• Oval
– Used to draw oval and circular shapes
• Rectangle
– Used to draw rectangular and square shapes
• Polystar
– Used to draw polygons and stars
© 2010 Delmar Cengage Learning
The Drawing Tools
• Pencil
– Used to draw freehand lines
• Brush
– Used to paint with brush-like strokes
• Ink Bottle
– Used to apply line colors and thickness to
a stroke
© 2010 Delmar Cengage Learning
The Drawing Tools
• Paint Bucket
– Used to fill enclosed areas of a drawing
with color
• Eyedropper
– Used to copy stroke, fill and text attribute
from one object to another
• Eraser
– Used to erase lines and fills
© 2010 Delmar Cengage Learning
Fig. 1: Flash Tools
© 2010 Delmar Cengage Learning
Working with Grouped Tools
• To display a list of grouped tools, you click
the tool and hold the mouse button until the
menu opens.
• You know a tool is a grouped tool if you see
an arrow in the lower-right corner of the tool
icon.
© 2010 Delmar Cengage Learning
Working with Tool Options
• Some tools have additional options that
allow you to modify their use.
• If additional options for a tool are available,
they appear at the bottom of the Tools panel
in the Options area when the tool is
selected.
• If the option has a menu associated with it,
then the option icon will have an arrow in the
lower-right corner.
© 2010 Delmar Cengage Learning
Positioning Objects on the Stage
• Position objects using rulers, gridlines, and
guides found on the View menu.
• In addition to using rulers and guides to help
place objects, you can create a new layer as
a Guide layer that you use to position
objects on the Stage.
• Position objects using Align options.
© 2010 Delmar Cengage Learning
Fig. 2: Using Rulers to Position
an Object
© 2010 Delmar Cengage Learning
Fig. 3: Using Gridlines to
Position an Object
© 2010 Delmar Cengage Learning
Fig. 5: Tool Name on the Tools
Panel
Your settings
may vary
Point to a tool to
display its name
Stroke Color tool
(red selected)
Fill Color tool
(blue selected)
© 2010 Delmar Cengage Learning
Fig. 8: Setting Anchor Points to Draw
an Arrow
© 2010 Delmar Cengage Learning
Fig. 10: Images Drawn Using
Drawing Tools
© 2010 Delmar Cengage Learning
Fig. 11: Dot Pattern Indicating
Object Is Selected
© 2010 Delmar Cengage Learning
Selecting Objects
• Before you can edit a drawing, you first must
select the object, or part of the objects
– Objects are made up of stroke(s) and a fill
– Strokes and fills can be selected
independently
• Strokes can have several segments
© 2010 Delmar Cengage Learning
Using the Selection Tool
• To select only the fill, click just the fill
• To select only the stroke, click just the stroke
• To select both the fill and the stroke, doubleclick the object or draw a marquee around it
• To select part of an object, drag a marquee
that defines the area you wish to select
• To deselect an item(s), click a blank area of
the stage
© 2010 Delmar Cengage Learning
Fig. 14: Selected Objects
Unselected
Stroke and Fill
Stroke
Group
Fill selected selected selected selected
© 2010 Delmar Cengage Learning
Part of object
selected
Using the Lasso Tool
• Provides more flexibility when selecting an
area of the stage
• Use the tool in a freehand manner to select
any size and shape of area
• Use the Polygon Mode option to draw
straight lines and connect them
© 2010 Delmar Cengage Learning
Drawing Model Modes
• Merge Drawing Model mode
– Stroke and fill are separate
– Stroke and fill can be individually selected
• Object Drawing Model mode
– Stroke and fill are combined and cannot
be selected individually
– Use the Break Apart option from the
Modify menu to separate the stroke and
fill
© 2010 Delmar Cengage Learning
Object Drawing Model
• In either mode you can turn off the fill or the
stroke when drawing an object
• You can toggle between the two modes
using the Object Drawing icon in the options
section of the Tool panel
© 2010 Delmar Cengage Learning
Working with Colors
• Change color of the stroke or fill
• Stroke Color and Fill Color tool
– Located on colors section of Tool panel
– Click and select a color swatch on the
color palette
• The Color palette
– Can type in a six character code that
represents the RGB values
© 2010 Delmar Cengage Learning
Fig. 16: Color Palette Showing
the Hexadecimal Number
Hexadecimal
number for
shade of gold
color
© 2010 Delmar Cengage Learning
Working with Gradients
• A gradient is a color fill that makes a gradual
transition from one color to another
• Apply a gradient with the Paint Bucket Tool
• The position of the Paint Bucket Tool
determines the direction of the gradient fill
© 2010 Delmar Cengage Learning
Fig. 24: Gradient Transform
Handles
Handles are
used to adjust
the gradient
effect
© 2010 Delmar Cengage Learning
Copying and Moving Objects
• Objects can be copied and pasted
• You move an object by:
– selecting it and dragging it to a new location
– You precisely position an object by selecting it
and then pressing the arrow keys, which move
the selection up, down, left, and right in small
increments
– In addition, the X and Y coordinates in the
Property inspector can be used to position an
object exactly on the stage
© 2010 Delmar Cengage Learning
Transforming Objects
• Objects can be transformed with the Free
Transform Tool
– Select the object, then the tool to display
the eight square-shaped handles and
center circular transformation point
– Rotate and Skew, Scale, Distort,
Envelope
© 2010 Delmar Cengage Learning
Resizing an Object
• Objects can be enlarged or reduced in size
• Use the Scale option of the Free Transform
tool
– Drag corner handles to resize the object
without changing its proportions
– If you drag one of the middle handles, the
object will be reshaped as taller, shorter,
wider, or narrower
© 2010 Delmar Cengage Learning
Rotating and Skewing an Object
• Select the object, click the Free Transform
tool, click the Rotate and Skew option
• Use the Distort and Envelope options to
reshape an object by dragging its handles
© 2010 Delmar Cengage Learning
Fig. 26: Using Handles to Manipulate
an Object
Drag corner
handle to
rotate an
object
© 2010 Delmar Cengage Learning
Drag middle
handle to skew
an object
Reshaping a Segment of an Object
• The Sub-selection tool can be used to reshape a
segment of an object
• The Selection tool can be used to reshape the edge
of an object
– When you point to the edge, the pointer displays
an arc symbol
– You can drag the edge of an object by using the
Arc pointer
– If the selection tool points to a corner of an
object, the pointer displays an L-shaped symbol
© 2010 Delmar Cengage Learning
Fig. 27: Using the Selection Tool
to Distort an Object
© 2010 Delmar Cengage Learning
Flipping an Object
• You can use a Flip option on the Transform
menu to flip an object horizontally or
vertically
• The Remove Transform Command allows
you to restore an object to its original state
© 2010 Delmar Cengage Learning
Fig. 32: Using the Transform
Panel to Rotate an Object
© 2010 Delmar Cengage Learning
Fig. 35: Using the Selection Tool
to Drag an Edge to Reshape an
Object
Click here, then drag
© 2010 Delmar Cengage Learning
Fig. 37: Setting the Corner
Radius of Two Corners
Your values
will differ
Type the values
Use the slider to
quickly change
the radius of the
corners
© 2010 Delmar Cengage Learning
Work with Text
• Flash provides a lot of flexibility when
formatting text
– Typeface (font)
– Size
– Style (bold, italic)
– Color (including gradients)
– Transformation
© 2010 Delmar Cengage Learning
Entering Text and Changing the
Text Block
• Text is entered into “Text Blocks”
• Text Blocks expand as more text is entered
and may extend beyond the edge of the
stage
• You can adjust the size to a fixed width by
dragging the handle in the upper right corner
© 2010 Delmar Cengage Learning
Fig. 41: Using the Text Tool
Text tool pointer
on the Stage
Empty text block
created by clicking the
Text tool
Text block before
resizing
Text block after
resizing
Handle indicating
a fixed width for
the text block
© 2010 Delmar Cengage Learning
Handle used to
resize the text
block
Changing Text Attributes
• The Properties panel allows you to change
the font, size, and style of a single character
or an entire text block
© 2010 Delmar Cengage Learning
Fig. 47: The Filters Option in the
Property Panel
© 2010 Delmar Cengage Learning
Working with Paragraphs
• Flash acts similar to a word processor
• You can align paragraphs
– Left, Right, Center, Justified
• Use the Properties panel to:
– Set margins, indents, and line spacing
© 2010 Delmar Cengage Learning
Transforming Text
• Text is an object, and can therefore be
transformed like other objects in Flash
– The entire text block gets transformed
• Use “Break Apart” command to transform
individual letters
© 2010 Delmar Cengage Learning
Fig. 48: Skewing the Text
© 2010 Delmar Cengage Learning
Fig. 49: Reshaping a Letter
Drag this handle; notice the
lines are drawn from the anchor
points on either side of the
anchor point being dragged
© 2010 Delmar Cengage Learning
Learning about Layers
• Two types of spatial organization
– Position of objects on the stage
– Stacking order of objects that overlap
• Layers are used on a timeline as a way to
organize objects
• Placing objects on their own layer makes
them easier to work with
© 2010 Delmar Cengage Learning
Five Types of Layers
• Normal (default layer type)
– All objects on these layers appear in the
movie
• Guide (Standard and Motion)
– Standard guide layers serve as a
reference point for positioning objects on
the stage
– Motion guide layers are used to create a
path for animated objects to follow
© 2010 Delmar Cengage Learning
Six Types of Layers
• Mask
– A layer that contains and reveals portions of another
layer
• Masked
– A layer that contains the objects that are hidden and
revealed by a Mask layer
• Folder
– A layer that can contain other layers
© 2010 Delmar Cengage Learning
Working with Layers
• Using the Layer Properties dialog box allows
you to:
– Specify the type of a layer
– Name a layer
– Show/Hide a layer
– Lock a layer
– View layers as outlines
© 2010 Delmar Cengage Learning
Fig. 51: Layer Properties Dialog Box
© 2010 Delmar Cengage Learning
Fig. 52: Layers Section of the
Timeline
Show or Hide All
Layers
Show All Layers as
Outlines
Lock or
Unlock All
Layers
Lock or Unlock
This Layer
Padlock
indicates this
layer is locked
New Layer icon
Icon indicates
that the layer
has been
selected but it
cannot be
edited
Show or hide
this layer
© 2010 Delmar Cengage Learning
Using a Guide Layer
• Used to align objects on the stage
– Use the Layer Properties Dialog box to set
the layer as a guide
– Turn on “Snap to Guides”
– Drag the desired object to the guide line
© 2010 Delmar Cengage Learning
Fig. 53: A Guide Layer
Line drawn on a
Guide layer
© 2010 Delmar Cengage Learning
Distributing Text to Layers
• Used when text blocks are made up of more
than one character
• Distributes text to its own respective layer
© 2010 Delmar Cengage Learning
Fig. 55: Distributing Text to Layers
© 2010 Delmar Cengage Learning
Using Folder Layers
• Allows you to organize layers by creating
folders and grouping other layers in them
© 2010 Delmar Cengage Learning
Fig. 56: A Folder Layer
© 2010 Delmar Cengage Learning
Chapter 2 Summary
1.
2.
3.
4.
5.
Use the Flash drawing tools
Select objects and apply colors
Work with drawn objects
Work with text and text objects
Work with layers and objects
© 2010 Delmar Cengage Learning