Drawing and Painting in Flash

About Drawing

The drawing tools in Adobe Flash let you

create and modify lines and shapes for the
artwork in your documents. The lines and
shapes you create in Flash are all lightweight
vector graphics, which help keep your FA file
si!e small.

"efore you draw and paint in Flash, it is

important to understand how Flash creates
artwork, and how drawing, painting, and
modifying shapes can affect other shapes on
the same layer.

#ector and "itmap $raphic

#ector graphics describe

images by using lines and
curves, called vectors, that also
include color and position
properties. For e%ample, the
image of a leaf is described by
points through which lines
pass, creating the leaf&s
outline. The color of the leaf is
determined by the color of the
outline and the color of the
area enclosed by the outline.

"itmap graphics describe

images using colored dots,
called pi%els, arranged in a
grid. For e%ample, the image of
a leaf is described by the
specific location and color
value of each pi%el in the grid,
creating an image in much the
same manner as a mosaic.

difference

#ector
'hen you edit a vector
graphic, you modify the
properties of the lines and
curves that describe its
shape. (ove, resi!e, reshape,
and change the color of a
vector graphic without
changing the )uality of its
appearance. #ector graphics
are resolution independent*
that is, they can be displayed
on output devices of varying
resolutions without losing any
)uality.

"itmap
'hen you edit a bitmap graphic,
you modify pi%els rather than lines
and curves. "itmap graphics are
resolution dependent, because the
data describing the image is fi%ed
to a grid of a particular si!e.
+diting a bitmap graphic can
change the )uality of its
appearance. ,n particular, resi!ing
a bitmap graphic can make the
edges of the image ragged as
pi%els are redistributed within the
grid. Displaying a bitmap graphic
on an output device that has a
lower resolution than the image
itself also degrades its )uality.

Drawing tools in flash

Pen tool

Te%t tool

ine tool

-ectangle tool .also /val, rectangle

primitive. /val primitive and polystar0

Pencil tool

"rush tool .also spray tool0

Deco tool

Paths

'henever you draw a line or shape in Flash,

you create a line called a path. A path is made
up of one or more straight or curved segments.
The beginning and end of each segment is
denoted by anchor points, which work like pins
holding a wire in place. A path can be closed
.for e%ample, a circle0, or open, with distinct
endpoints .for e%ample, a wavy line0.

1ou change the shape of a path by dragging its anchor points, the
direction points at the end of direction lines that appear at anchor
points, or the path segment itself.
2omponents of a path
A. 3elected .solid0 endpoint
". 3elected anchor point
2. 4nselected anchor point
D. 2urved path segment
+. Direction point
F. Direction line.

Paths can have two kinds of anchor points5 corner points and smooth
points. At a corner point, a path abruptly changes direction. At a smooth
point, path segments are connected as a continuous curve. 1ou can
draw a path using any combination of corner and smooth points. ,f you
draw the wrong type of point, you can always change it.
Points on a path
A. Four corner points
". Four smooth points
2. 2ombination of corner and smooth points.

A corner point can connect any two straight or curved segments,
while a smooth point always connects two curved segments.
A corner point can connect both straight segments
and curved segments

2reating $radient

To paint in flash, we need a drawing. 'e can start with a rectangle.

'hen you click a color bo%, the color dialog bo% shown here appears.

$radients show changes in color. They are located on the bottom row
of the 2olor dialog bo%. 1ou will use a gradient to create the movie6s
sky. "ut first, you must create the gradient you will use.

2hoose 'indow 7 2olor from the menu or press 3hift8F9. The 2olor
panel appears

2hoose inear in the Type field.

:ear the bottom of the panel, double;click on

the first +dit $radient -ange icon . 2olor
bo%es appear.

2lick the color blue to select blue.

Double;click the second +dit $radient

-ange icon and then click the color
white to select white.

2lick and drag the second Fill

$radient -ange icon to the three;
)uarter point on the $radient -ange
slider to increase the amount of white
in your gradient.

2lick the (enu /ptions button to

open the menu.

2lick Add 3watch.

2lose the 2olor panel. Flash adds the

gradient you created to the color bo%

Pencil tool < Paint bucket tool

'hen working in Flash, you can use the Pencil

tool to draw freehand shapes and the Paint
"ucket tool to fill enclosed areas with color. ,n
this e%ercise, you will use both of these tools to
draw the tree trunk and treetop you will use
later to create a tree.

2hoose #iew 7 $rid 7 +dit $rid from the menu.

Deselect 3nap to $rid. This will enable you to draw freely.

2lick /=.

2hoose the Pencil tool .

Activate the Property inspector.

2lick the 3troke color bo% and then choose brown as the stroke
color.

/n the (odifier panel, if /b>ect Drawing is selected,

deselect it.

/n the (odifier panel, choose the 3mooth option. This option

rounds the corners of your drawing.

Draw the tree trunk. (ake sure the starting and 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 Shae modi!ier that is located in the modi!ier area o! the
"ool anel to select the si#e and shae o! your eraser. $ake sure
the Eraser $ode is set to Normal, and then wie over the area you
want to erase.

%hoose the &aint 'ucket tool.

%lick the (ill color bo) in the &roerty insector

and then choose brown as the !ill color.

%lick inside the trunk to !ill the trunk with color.

Note: *! your tree trunk does not !ill with color, you robably have
gas. "o close the gas, click on the +a Si#e modi!ier that is
located in the modi!ier area o! the "ool anel and then choose
%lose ,arge +as.

Create the Treetop

2hoose the Pencil tool .

2lick the 3troke color bo% and then choose green as the stroke
color.

Draw a treetop like the one shown here.

2hoose the Paint "ucket tool .

2lick the Fill color bo% in the Property inspector and then choose
green as the fill color.

2lick inside the treetop to fill the treetop with color.

Create a tree

2hoose the 3election tool.

Double;click the treetop fill. Double;clicking the treetop fill selects

both the treetop stroke and the treetop fill.

Drag the treetop over the tree trunk

Grouping object

Flash 23? Professional views the tree as two ob>ects, the treetop and
the tree trunk. :e%t, we will group the treetop and the tree trunk to
cause Flash to view the tree as a single ob>ect. Then you will turn the
tree into a symbol.

2hoose the 3election tool.

2lick and drag to create a rectangle around the tree. This selects the
tree.

2hoose (odify 7 $roup from the menu or press 2trl8 $ to make the
treetop and the tree trunk a single ob>ect.

2hoose (odify 7 2onvert to 3ymbol from the menu. The 2onvert to

3ymbol dialog bo% appears.

Type Tree in the :ame field.

2hoose $raphic as the type.

2lick /=. Flash places a copy of the tree in the ibrary.

Press the Delete key to remove the tree from the 3tage.