Mastering Drawing Tools
Basic Drawing Tools

These are the basic drawing tools.

Line ToolLine Tool

The 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!
  1. Click on the Line Tool in the Toolbox to select it.
  2. 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).
  3. Use the Color Chip in the Stroke Control area to select a color for your line.
  4. Now the fun part -- click on the title bar of the Properties Inspector to set your line's properties
Line Properties

These are the properties that you can set for your line. Notice that the Stroke Color Control is available here, also. The other properties are:
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.

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.

Custom Stroke 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.
Let's customize our Stroke Style!
  1. Change the Stroke Color to any Green (Hint: We're going to draw a line of grass.)
  2. Change the Stroke Height to 10.
  3. Change the Stroke Style to "Hatched" - it's the very last one in the list.
  4. Click on the Customize Button to access the properties we can customize for this style.

    Stroke Style

  5. 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.
  6. Drag out a straight line (90 degrees angle) near the bottom and all the way across the stage in your movie.
Instant GRASS! :-) 

Pen ToolPen Tool

The Pen Tool is a Bezier Point drawing tool.  

Oval ToolOval Tool

You 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:
  1. Click on the Oval Tool in the Toolbox.
  2. 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.
  3. You should see the last used stroke settings (green, customized hatched line) and whatever fill color was last selected displayed in the Inspector.
  4. 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.
  5. Click on the Fill Control Color Chip and select a nice bright yellow.
  6. 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.
Ah ha! Now we have a sun shining down on our grass! 

Rectangle ToolRectangle Tool

The 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 square.

Rectangle ModifierThe 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 Toolbox.)

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 square). 

Let's prepare to draw a rectangle:
  1. Click on the Rectangle Tool in the Toolbox.
  2. 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!
  3. Click on the Stroke Control Color Chip and then on a brown swatch, or type "#660000" in the Hex Edit box.
  4. Click on the Custom Stroke Style button to access more stroke customization options

    Custom Stroke

  5. 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.
  6. Click on the Fill Control Color Chip and set it to the same color you selected for the stroke.
  7. Make sure the Snap To feature is turned off (it should have a gray box around it on the main button bar).
  8. 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 trunk"). 

Brush ToolBrush Tool

The 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 Tool modifiers

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.

Use Pressure   This works only with Tablet pens. 

Brush Size   Use this modifier to set the width (thickness) of your brush stroke.

Brush Shape   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).
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!
  1. Click on the Brush Tool in the Toolbox to select it.
  2. Click on the Stroke Color Control and set the stroke color to No Color.
  3. Click on the Fill Color Control and set the fill color to a nice medium dark green.
  4. Leave the Brush Mode set to Normal (or return it to Normal if you changed it while reading about this tool).
  5. Change the Brush Size to the largest possible size.
  6. If the Brush Shape displayed is not the circle, change your brush shape to a circle.
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!

Ah... now things are taking shape!

Pencil ToolPencil Tool

The 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.

Pencil Tool modifiersThe Pencil 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.

Smooth   Using this mode smooths out freehand curved lines.

Ink   If you want the line to be exactly as drawn, no straightening or smoothing applied, choose this mode.
You should be feeling pretty comfortable using the Properties Inspector by now to set our drawing properties, so let's add some lines to our movie!
  1. Click on the Pencil Tool to select it and open the Properties Inspector.
  2. Set your Pencil Mode (in the Toolbox Modifier Area) to Ink.
  3. In the Properties Inspector, set your Stroke Color to the same yellow as your sun.

    Tip: Don't 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!

  4. Change your Stroke Style to Solid and set the Stroke Height to 2.
  5. Draw some wavy lines all around your sun (think "sun rays").

    Hang on - we're not quite done yet!

  6. Now set your Stroke color to black and your Stroke Style to Hairline.
  7. Change the Pencil Mode to Smooth.
  8. 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. :-)
So far so good! Just one more Drawing Tool to explore....

Text ToolText Tool

Like 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 setting margins.

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 on stage.

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
  • Alignment

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.

Let's add some text to our movie!
  1. Click on the Text Tool to select it.
  2. Open the Properties Inspector if it is not already open.
  3. From the pulldown list, select a Font face.
  4. In the Font Size box, type in 22.
  5. Click on the color chip and select a nice bright purple for your Text Fill Color.
  6. Set your alignment to Left or Centered.
  7. Make sure there is a checkmark next to AutoKern.
  8. If you made any changes to the other properties while exploring this Inspector (like Character Direction or Position, set them back to their defaults).
  9. 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 text box.

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 whirl.
  1. Change the Text Fill color shown in the Properties Inspector.
  2. Sign your movie by typing your name somewhere on the stage -- not too close to the other parts of the drawing!
  3. 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 individually!

  4. 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.
  5. 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.
  6. 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 is selected!
       
    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.

  7. 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 your name