Mastering Drawing Tools
These are the basic drawing tools.
Line Tool is a 'point to point' method of drawing a straight line. To
draw a line with this tool, click on the stage where you want to begin
your line and hold down the left mouse button while dragging out the
length of the line. You can change the angle of the line during this
process by moving your mouse around.
Trick: Want to position
your line at sharp right angles to another line or object? Flash has a
nifty little feature called "Snap To" that can help. It is located up on
your main Button Bar at the top of the Editor and looks like a magnet.
If it is turned on, it is surrounded by a white box; if not, it is
surrounded by gray. Turn on the Snap To function if necessary. Now drag
out a line. Notice when you are dragging out your line that cursor
crosshair has a small circle behind it when you are drawing a diagonal
line, and a dark circle behind it when the line is at 0, 90, 180 and 360
degrees? Once you've snapped the line and see the dark circle behind the
cursor you can continue to extend it or shrink the line to whatever
length you need knowing that it will be perfectly straight.
Before you draw anything you should set it's color and other properties. So let's
get ready to draw a line!
- Click on the Line Tool in the Toolbox to select it.
- Click on the Stroke Color Control in the Colors Area to select it
(even thought it looks like Fill could be used with this tool, it can't
- nothing you do to the Fill Control will impact your line, so it's not
even necessary to select No Color for the Fill Control).
- Use the Color Chip in the Stroke Control area to select a color for
- Now the fun part -- click on the title bar of the Properties
Inspector to set your line's properties
These are the properties that you can set for your line.
Notice that the Stroke Color Control is available here, also. The other
Stroke Height The default height
(thickness) of your line is 1. To set the width of your line, type in a
new number or use the slider bar (on the right) to select a thickness.
Your line can be any height between .25 and 10. Let's customize our Stroke Style!
The default style is Solid. Access the pulldown menu to see a
list of the various stroke styles built into Flash MX. Select any style
from the list by clicking on it.
Style Flash MX gives you the option to customize the
built-in Stroke Styles. The customization options depend on the type of
Stroke you are customizing.
Instant GRASS! :-)
- Change the Stroke Color to any Green (Hint: We're going to draw a
line of grass.)
- Change the Stroke Height to 10.
- Change the Stroke Style to "Hatched" - it's the very last one in the
- Click on the Customize Button to access the properties we can
customize for this style.
- Change the options for this style to those shown above. Be sure to
remove the checkmark in "Sharp Corners". Click OK when you are done to
save your changes.
- Drag out a straight line (90 degrees angle) near the bottom and all
the way across the stage in your movie.
Pen ToolThe Pen Tool is a Bezier Point drawing tool.
Oval ToolYou use
the Oval Tool to draw both filled and unfilled (stroke only) ovals and
circles. Remember how the Snap To feature helped us draw lines at perfect
right angles? When you are using the Oval Tool, the Snap To feature helps
us to draw perfect circles instead of ovals.
To draw an oval with
this tool, click on the stage where you want to begin your oval and hold
down the left mouse button while dragging out the shape. You can constrain
the oval to a perfect circle by holding down the [Shift] key while
dragging out the circle.
Let's prepare to draw a circle:
Ah ha! Now we have a sun shining down on
- Click on the Oval Tool in the Toolbox.
- If you did not close the Properties Inspector after drawing your
line(s), notice that the Inspector now shows the properties for the Oval
Tool instead of the Line Tool. If you did close the Properties
Inspector, open it now.
- You should see the last used stroke settings (green, customized
hatched line) and whatever fill color was last selected displayed in the
- Click on the Stroke Control Color Chip and then on the No Color
button -- we don't want an outline around our circle. Don't worry that a
Stroke Style is still shown as "selected", it won't actually be used.
- Click on the Fill Control Color Chip and select a nice bright
- Near the top right or left corner of your stage, drag out a perfect
circle -- remember, in order for it to be a perfect circle the dark
small circle must appear behind your cursor crosshair before you release
the left mouse button.
Rectangle Tool is used to draw.... you guessed it -- rectangles and
perfect squares! Like perfect circles, perfect squares are drawn using the
Snap To feature.
To draw a rectangle with this tool, click on the
stage where you want to begin your rectangle and hold down the left mouse
button while dragging out the shape. You can constrain the rectangle to a
perfect square by holding down the [Shift] key while dragging out the
Rectangle Tool differs from the Line Tool and the Oval Tool in that it has
an Option in the Modifier Area! (The Modifier Area is at the bottom of the
This modifier is called the "Round Rectangle Radius". A
lot of words for a simple concept -- it lets you give your rectangles and
squares rounded corners instead of sharp ones. To round the corners using
this modifier you specify a Corner Radius, where 0 is sharp corners and
100 is perfectly rounded (creates a circle instead of a rectangle or
Let's prepare to draw a rectangle:
- Click on the Rectangle Tool in the Toolbox.
- Open the Properties Inspector if it is not already open. You should
see the last used stroke/fill settings. We'll change them, of course!
- Click on the Stroke Control Color Chip and then on a brown swatch,
or type "#660000" in the Hex Edit box.
- Click on the Custom Stroke Style button to access more stroke
- Change the options for this style to those shown above. Be
sure to remove the checkmark in "Sharp Corners". Click OK when you are
done to save your changes.
- Click on the Fill Control Color Chip and set it to the same color
you selected for the stroke.
- Make sure the Snap To feature is turned off (it should have a gray
box around it on the main button bar).
- Near the side of the stage opposite where you drew your sun, drag
out a rectangle that is higher than it is wide (hint: think "tree
Brush Tool is used to paint swaths of color just like you would use a real
paint brush on canvas. To use this tool, select a starting position on the
stage and hold down your left mouse button while you drag out your paint
strokes. In addition, the Brush Tool can be used to paint inside existing
objects/shapes and behind them. Unlike the other tools we've discussed so
far, the Brush Tool is almost exclusively modified using the Toolbox
Modifiers instead of the Properties Inspector.
Click on the Brush
Tool to select it and let's see what the tool modifiers are:
Brush Mode The default mode is Normal. Other
options are Paint Fills, Paint Behind, Paint Selection and Paint Inside.
These all work with other shapes/objects already on stage. When using
the Brush to create something from scratch, use the Normal mode.
Alright, let's create something with
the Brush Tool - we'll keep it very simple. Remember, we will be working
directly with the modifiers in the Toolbox, not the Properties Inspector!
Use Pressure This works only with Tablet
Brush Size Use this modifier to set the
width (thickness) of your brush stroke.
You can select between a variety of brush shapes - round, square,
slanted, oval, etc.... 9 in all.
Lock Fill This
modifier works with gradient fills. It locks the angle, size and origin
of the selected gradient fill and will extend the gradient across
multiple objects when painting with this modifier. When you use this
modifier, you will also have selected a special brush mode (for
instance, Paint Inside).
We're going to use the Brush Tool to draw a
nice big fluffy looking top to our tree trunk. Pick a starting point on
the stage then hold down your left mouse button and begin painting in the
loopy areas of the tree. Be sure to come down just over the top of your
tree trunk. Fill in any areas that get missed as you go. Don't let up on
the mouse button until you are all done!
- Click on the Brush Tool in the Toolbox to select it.
- Click on the Stroke Color Control and set the stroke color to No
- Click on the Fill Color Control and set the fill color to a nice
medium dark green.
- Leave the Brush Mode set to Normal (or return it to Normal if you
changed it while reading about this tool).
- Change the Brush Size to the largest possible size.
- If the Brush Shape displayed is not the circle, change your brush
shape to a circle.
Ah... now things are
Pencil Tool is used to draw freehand lines versus the nice straight
structured lines drawn with the Line Tool. Again, to draw with this tool
you simply pick a starting point and hold down your left mouse button
while dragging out your line on the stage.
Tool has the same customizable properties as the Line Tool, and it also
has an additional modifier available in the Toolbox called "Pencil Mode".
Straighten This mode straightens your lines,
especially useful when drawing freehand geometric shapes like triangles.
You should be feeling pretty comfortable using the Properties
Inspector by now to set our drawing properties, so let's add some lines to
Smooth Using this mode smooths out freehand curved
Ink If you want the line to be exactly as
drawn, no straightening or smoothing applied, choose this mode.
So far so good! Just one more Drawing Tool to explore....
- Click on the Pencil Tool to select it and open the Properties
- Set your Pencil Mode (in the Toolbox Modifier Area) to Ink.
- In the Properties Inspector, set your Stroke Color to the same
yellow as your sun.
remember which yellow you chose? Click on the Color Chip to open the
palette, then run the eyedropper up over the sun on the movie stage and
click to select the exact color used!
- Change your Stroke Style to Solid and set the Stroke Height to 2.
- Draw some wavy lines all around your sun (think "sun rays").
Hang on - we're not quite done yet!
- Now set your Stroke color to black and your Stroke Style to
- Change the Pencil Mode to Smooth.
- Now draw out a few curves in your tree top to give it some "depth of
field", and a line or two in your tree trunk's bark just for fun. :-)
Text ToolLike the
objects you draw in Flash, text is vector-based. You can use just about
any font you have installed on your machine - including dingbats - though
you may want to avoid using Adobe Postscript fonts as some users have had
problems using them. Your audience does not have to have the fonts
installed on their machines because Flash includes the necessary font
information in the web-ready version of your published movie (File format:
SWF). Do keep in mind, however, that the more font information you have to
include in your movies by virtue of using non-standard fonts, the larger
the file and the longer it will take for your movie to be downloaded and
viewed on your audience's computers.
To insert Text into your
movie with this tool you simply click on the stage and start typing. Like
most of the other tools, Text has quite a few properties that need to be
set before you actually add your text. The properties can all be set or
modified in the Properties Inspector.
As you can see in the Figure above, Text has quite a few
properties that can be set. Not all are available with all types of text,
and some are not available until you have typed some text into your movie
-- in other words, they are used to modify existing text. Let's discuss a
few of the highlights:
Text Type There are 3 defined types of text -
Static, Dynamic and Input. In this class we will only use Static Text
(plain old text we type on the page).
Text Fill Color
Unlike other vector text programs, Flash does not allow you
to set a stroke outline. Letters are created with a fill only.
Edit Format Options This allows you to customize a
paragraph of text by setting an Indent, defining Line Spacing and
Change Direction of Text Allows
you to change the way your text is displayed in the movie -- Horizontal
(default), Vertical - left to right, Vertical - right to left. You can
set the direction of the text before you type it or after it is already
Rotate This property cannot be set
unless you have chosen to use one of the Vertical text directions.
The following properties are pretty standard in most graphics
and word processing programs, so we won't spend time on them here:
- Font List
- Font Size
- Character Spacing
- Character Position
- Auto Kern
- Bold & Italic
All remaining Text
properties shown above are a bit more advanced than we will be
using in this class and so beyond the scope of this lesson.
add some text to our movie!
- Click on the Text Tool to select it.
- Open the Properties Inspector if it is not already open.
- From the pulldown list, select a Font face.
- In the Font Size box, type in 22.
- Click on the color chip and select a nice bright purple for your
Text Fill Color.
- Set your alignment to Left or Centered.
- Make sure there is a checkmark next to AutoKern.
- If you made any changes to the other properties while exploring this
Inspector (like Character Direction or Position, set them back to their
- Now click on the stage, somewhere between the grass and the sky and
to the side of your tree. Type in "Flash MX is Cool!!!" or something
more interesting and then click off in the gray work area to close this
There you have it - your first finished drawing in
Flash MX -- a work of art! :-)
There is one more trick you
need to learn about Text - it's called Break Apart Text. When you first
type text into a Flash Movie it is all in one text box. Any changes or
modifications you make to the Text properties affect all the text in that
box. Because we are working with vector-based text, we can break apart the
text and modify the individual letters, too!
Let's give it a
- Change the Text Fill color shown in the Properties Inspector.
- Sign your movie by typing your name somewhere on the stage -- not
too close to the other parts of the drawing!
- Click on Modify > Break Apart
Notice that now the letters
in your name are all in their own little blue box instead of one box
containing them all? Now we can work with each letter
- Click on the Arrow Tool (upper left corner of the Toolbox - more
about this tool in Part 4). We will use this tool to select the first
letter of your name.
- Click on the first letter of your name -- now you should see a blue
box only around this first letter, signifying that this letter/object
has been selected.
- Change the Font Size to 32 and make it Bold. While you're at it,
change the color if you like. Your changes only affect the letter that
Tip: To select more than one letter before
making changes, hold down the [Shift] key while clicking on each letter.
Now let's reposition that letter a bit - you'll notice that the
changes we made caused this letter to run into the second letter and to
be a bit below the baseline.
- While it is still selected (has the blue box around it) you can use
the arrow keys on your keyboard to move it around. Use the Up and Left
arrows to move your modified letter back into position with the rest of