Sample Hands-On-Training™ Chapter – Review Copy Only

Copyright ©2000-2003 by lynda.com, Inc. All Rights Reserved.

Reproduction and Distribution Strictly Prohibited.

This electronically distributed Hands-On-Training™ document is for review purposes only and is intended
for on-screen viewing only. Any printing, reproduction, copying, distribution, and/or transmission of this
document are strictly prohibited without written consent from lynda.com, Inc.

Contact Information
Garo Green ([email protected])
Director, Publications
lynda.com, Inc.
PO Box 789
Ojai, California 93024
Phone: 805-646-7076
Fax: 805-640-9607

Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means,
electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the
lynda.com, Inc. For information on getting permission for reprints and excerpts, contact [email protected].

Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution
has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability
to any person or entity with respect to any loss or damage caused or alleged to be caused directly or
indirectly by the instructions contained in this book or by the computer software and hardware products
described in it.

Trademarks
Hands-On-Training is a registered trademark of lynda.com, Inc. Macromedia is a registered trademark.
Macromedia Dreamweaver and Dreamweaver, and Macromedia Fireworks and Fireworks are registered
trademarks of Macromedia, Inc., in the U.S. and/or other countries. QuickTime and the QuickTime logo are
trademarks used under license. The QuickTime logo is registered in the U.S. and other countries.
 3. Drawing and Color Tools | Macromedia Flash MX H•O•T

When most people think of Macromedia Flash,

3.
they think of one thing: animation. What many
people don’t know is that the program comes
complete with a good set of drawing and
color tools that can help you create art-
work for making cool and interactive

Drawing and animations.

It’s also possible to bring existing

Color Tools artwork into the program from other
illustration programs such as
| Drawing Tools Explained | Modifying Strokes and Fills | Freehand or Illustrator. Chapter 18
| Working with Multiple Objects | Grouping Objects | “Integration,” covers how to do this.
| Creating Gradients | Color Mixer Panel | For some types of artwork, however,
you will find it is more convenient to
| Drawing with the Pen Tool | Modifying Paths |
draw right within the program. This
chap_03
chapter introduces you to the distinct
characteristics and idiosyncrasies of
Macromedia Flash MX
H•O•T CD-ROM the native drawing and color tools within
Macromedia Flash MX.

| 38 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

Drawing Tools Explained

The drawing tools in Macromedia Flash MX are very powerful, but they can seem somewhat complex
as you try to understand their individual behaviors. Here’s a handy chart to use for reference. Don’t feel
compelled to read through everything here if you want to jump into the exercises right away. The key-
board shortcuts for the tools are given in parentheses after the tool name in the chart below and also
inside the project file when you move your mouse over a tool in the Toolbox.

Drawing Tools
Icon Name What Does It Do?

Line (N) The Line tool creates straight lines. Holding down the Shift key
with this tool will constrain the lines to 45-degree angles. The
lines drawn with the Line tool can be modified with the Ink
Bottle tool and/or by using the Property Inspector panel.

Lasso (L) The Lasso tool allows you to select artwork or even a specific
area of that artwork by drawing a freehand or straight selection
around it.

Pen (P) The Pen tool creates straight or curved lines. The Pen tool is
the only Macromedia Flash MX drawing tool capable of creating
Bézier curves.

Text (T) The Text tool allows you to add text or text fields to your movie.
The text or text field can be modified using the Property Inspector
panel. You will learn all about the Text tool in Chapter 12,
“Working with Text.”

Oval (O) The Oval tool creates circles and ovals composed of fills and
strokes, just fills, or just strokes. Holding down the Shift key
while using this tool will allow you to create perfect circles.

Rectangle (R) The Rectangle tool creates rectangles and squares composed of
strokes and fills, just strokes, or just fills. Holding down the Shift
key while using this tool will allow you to create perfect squares.

Pencil (Y) The Pencil tool creates lines in one of three different modes:
Straighten, Smooth, and Ink. Holding down the Shift key while
using this tool will enable you to create perfect horizontal and
vertical lines.
continues on next page

| 39 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

Drawing Tools continued

Icon Name What Does It Do?

Brush (B) The Brush tool creates shapes with fills only. You can adjust
the size and style of the brush by adjusting the tool options
in the Toolbox or by using the Property Inspector. As with the
Pencil tool, holding down the Shift key while using this tool
enables you to create perfect horizontal and vertical lines.

Free Transform (Q) The Free Transform tool allows you to modify objects. You
can use this tool to scale, rotate, flip, skew, or even change
the center point of an object. Use the Shift key to maintain
the aspect ratio while modifying the object.

Fill Transform (F) The Fill Transform tool allows you to change the size, direction,
or center of a gradient or bitmap fill.

Ink Bottle (S) The Ink Bottle tool can be used to change the color or width
of a line or to add a stroke to a shape. The Ink Bottle will not
change the fill of a shape.

Paint Bucket (K) Use the Paint Bucket tool to add a fill inside a shape or to
change the color of a fill. The Paint Bucket will never change
the stroke of a shape.

Eyedropper (I) The Eyedropper tool can be used to copy the fill or stroke
attributes of one object and then apply them to another object.
This tool is especially useful when you want to copy the exact
color of one object to another object.

Eraser (E) The Eraser tool can be used to remove any unwanted image
areas on the Stage. Holding down the Shift key permits you
to erase in perfect horizontal and vertical lines.

| 40 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

Lines, Strokes, and Fills Explained

In addition to learning how each of the drawing tools behave, you need to know the difference between
fills, strokes, lines, and shapes. These differences can be understandably confusing because the
interface refers to both lines and strokes. The chart below gives an example and brief explanation of each.

Lines, Strokes, and Fills

Lines and Lines are created with the Pencil, Pen, and Line
Strokes tools. Strokes are the outlines that are created
using the Rectangle and Oval tools. It is important
to note that these terms are used interchange-
ably in the Macromedia documentation. We will
also use both of these terms, since they both
can be modified using the same tools. Lines and
strokes are independent of any fills, and they
are modified using the Ink Bottle, the Color and
Tool Modifiers in the Toolbox, the Color Mixer
panel, or using the Stroke Color in the Property
Inspector.

Fills Fills are created using the Brush, Paint Bucket,

Rectangle and Oval tools. Fills can be created
with or without strokes around them. They are
modified using the Paint Bucket, the Color and
Tool Modifiers in the Toolbox, the Color Mixer
panel, or using the Property Inspector.

Strokes, Strokes and lines can be attached to fills, as in

Lines, the pictures on the left, or they can be by them-
Fills, and selves, as in the images in the top row. Strokes
Shapes and lines are added to fills with the Ink Bottle
and are modified using the Ink Bottle, the Color
and Tool Modifiers in the Toolbox, the Color
Mixer panel, or using the Property Inspector.
Macromedia Flash MX refers to strokes, lines,
fills, or a combination thereof as “shapes” when
you select the artwork and view the selection in
the Property Inspector.

| 41 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

When you select a line, a stroke, a fill, or a combination thereof, the Property Inspector displays the
word “Shape.” This is how Macromedia Flash MX collectively refers to lines, strokes, and fills.

| 42 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

1. Drawing with the Pencil Tool

The Pencil tool is one of the easiest drawing tools to use. It behaves much as you would expect a
pencil to behave, drawing a line whenever you click and drag the mouse. By selecting one of the three
modes (Straighten, Smooth, or Ink), you can control how the lines are created. In this exercise, you
will draw a circle using each of the three modes, so you can better understand how each one works.

1. Copy the chap_03 folder from the Macromedia Flash MX H•O•T CD-ROM to your hard
drive. You must copy the files to your hard drive if you want to save changes to them.

2. Open the pencil.fla file from the chap_03 folder. This is just a blank file with the Stage
dimensions set to 400 × 200 pixels. This should be enough space for you to draw some
shapes.

The Pencil tool The Pencil Mode button appears at the bottom
of the Toolbox when the Pencil tool is selected

3. Select the Pencil tool from the Toolbox. By default, the Pencil tool is in Straighten mode.
Tip: If you leave your mouse over the tool long enough, a small ToolTip will appear, with the
keyboard shortcut for that tool in parentheses.

| 43 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

NOTE | About the Pencil Modes

In Macromedia Flash MX, the Pencil tool works much the same as the pencil tools in other graphics
programs. There are, however, some special drawing modes that can help you control the line’s
appearance: Straighten, Smooth, and Ink. For example, drawing a perfect circle might be really
difficult for some of you (especially after that morning coffee!), but with Straighten mode, it’s
much easier to create perfect geometric circles.

Perfect look Smooth look Hand-drawn

look

This example shows the result of a circle drawn with the Pencil tool, using each of the three modes.

| 44 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

The circle as you draw in Straighten mode The circle when you release the mouse button

4. On the Stage, click and drag with the Pencil tool to create a circle. Release the mouse button
when you are finished. Notice that the shape snaps to a perfect circle when you release the mouse
button. This is the effect of the Straighten mode as it tries to guess what shape you are trying to create.

5. In the Toolbox, click the Pencil Mode drop-down menu and select Smooth. This changes the
mode of the Pencil tool to Smooth.

The circle as you draw in Smooth mode The circle when you release the mouse button

6. Using the Pencil tool, draw another circle next to the one you just created. When you release the
mouse button, notice that the circle gets smoother, but that the change is less significant than when
you used Straighten mode.

| 45 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

7. Click the Pencil Mode drop-down menu and select Ink. This changes the mode of the Pencil tool
to Ink.

The circle as you draw in Ink mode The circle when you release the mouse button

8. Using the Pencil tool, draw a third circle next to the one you just created. When you release the
mouse button, notice that there is very little change in the circle.

9. Enough circles already. Go ahead and try drawing other simple shapes, such as squares, triangles,
polygons, etc., with each of the different Pencil modes. This will give you an even better idea of how
each of them works and how they can help you create artwork in Macromedia Flash MX.

Tip: If you want to clear the Stage area for more experimenting, press Ctrl+A (Windows) or Cmd+A
(Mac) to select everything on the Stage. Then press the Delete key to delete the contents of the Stage.

10. When you are done playing with the Pencil tool, save and close this file—you won’t be needing
it again.

| 46 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

2. Modifying Lines
Now that you know how to use the Pencil tool, you need to know how to make changes to the lines
you create. In this exercise, you will learn how to use the Property Inspector as well as the Ink Bottle
to modify the appearance of lines. Both of these tools let you change an object either by adding a line
or by modifying the existing line. In addition, you will learn some of the nuances involved in selecting
lines and the reason why you would use the Ink Bottle versus the Property Inspector.

1. Open the strokes.fla file from the chap_03 folder. This file contains some shapes created
with lines and fills. You will use these shapes to learn to modify lines and add strokes to shapes.

Arrow (v) tool

2. Select the Arrow tool from the Toolbox, and then click on the squiggle drawing to
select it. The line gets a bit thicker, and a dotted pattern appears over it, indicating that
the line is selected.

| 47 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

Fill Color Stroke Color Stroke Style

Shape Dimensions Stroke Height Custom Stroke Style

and Coordinates

3. Make sure the Property Inspector is visible. If it’s not, choose Window > Properties to make it visible.
You must first select a line if you are going to use the Property Inspector to modify the stroke settings.

NOTE | The Property Inspector

One panel that you will become quite familiar with throughout this book is the Property Inspector.
It is new to Macromedia Flash MX and is a great addition because it displays and allows you to
change features associated with whatever is currently selected, including text, symbols, video,
frames, and even tools. The Property Inspector appears in the interface just under the Actions
panel below the Stage.

The beauty of the Property Inspector is that this panel allows you to make many different types of
changes to the current selection from one easy-to-use panel.

| 48 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

4. With the line still selected, click to see the Stroke Style drop-down menu. Select the fourth style
from the top, the dotted line style, to change the style of the line from a solid line to a dotted line.
Deselect the line by clicking on a blank area of the Stage to clearly see the changes.

You can use the Property Inspector as an easy way to modify artwork you select on the Stage. When
you have a line selected, the Property Inspector displays the current settings for that line. This is help-
ful when you need to know what the line settings are for a particular object. The default stroke settings
are for a 1-point, solid black line.

TIP | Hiding Selections

When lines are selected, it can be very difficult to see the changes you’ve made. Press Ctrl+H
(Windows) or Cmd+H (Mac) to temporarily hide the selection mesh so you can see the changes
better. Press the keyboard shortcut again to see the selection mesh.

Line deselected to show the changes

5. Make sure the line is selected on the Stage and, in the Property Inspector, click on the arrow next
to the Stroke Height to reveal the slider. Click and drag up on the slider until you reach a setting of 4.
This increases the thickness of the line. The total range of choices is from 0.25 to 10. Deselect the line
by clicking on a blank area of the Stage to clearly see the changes.

| 49 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

6. Select the line on the Stage again, and from the Stroke Color box in the Property Inspector, click
and select another color. As you can probably guess, this will change the color of the line. Deselect
the line by clicking on a blank area of the Stage to clearly see the changes.

TIP | Creating Custom Line Styles

You might be wondering at this point if you can create your own custom line styles. Yes, you
can. With the line selected on the Stage, click the box named Custom in the Property Inspector
panel. This opens the Stroke Style dialog box, where you can create your own line style using a
number of different options. The changes you make to the settings here are temporary, and they
will return to their default settings once you quit the program.

| 50 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

7. Using the Arrow tool, move the cursor over the bottom line of the arrow shape in the middle of
the Stage. (Don’t click just yet.) Notice that as you move the cursor over the line, a small, curved
line appears next to the Arrow tool. This indicates that you are over a line, not a fill.

Clicking once selects a single

line segment of the arrow shape

8. Using the Arrow tool, click on the right lower line segment. Notice that a white selection mesh
appears over that line segment only.

9. In the Property Inspector, use the Stroke Height slider to change the line width to 5. Notice that
only the one selected line segment is changed. In order for a line to be modified, it must be selected
before you change the settings in the Stroke panel, and in this case, only one of the six lines of this
arrow shape was selected.

10. With the line still selected, change the line width back to 2.75, the line’s original width.
If you know the exact value you want to use, you can change the width of a line by entering a
specific numeric value in the small box to the left of the slider.

| 51 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

The white mesh indicates

that the stroke is selected

11. Click away from the line to deselect it. Double-click on any part of the object and the entire shape
will become selected. This shortcut is essential when you need to select entire shapes that are com-
posed of multisegmented lines.

TIP | Selecting Lines in Macromedia Flash MX

Unlike other drawing programs, Macromedia Flash MX breaks lines with hard angles into separate
line objects. For example, clicking on the bottom line of the arrow shape selects only the bottom
portion of the shape. That’s because the shape has six hard angles, which have created six sepa-
rate lines for this object. Double-clicking on one of the lines will select the entire arrow shape.

12. In the Property Inspector, change the style, width, and color of the selected lines. You can choose
any settings you like—the point here is to become more comfortable with selecting line styles and
changing line preferences using the Property Inspector.

Now you know how to modify an existing line using the Property Inspector, but what do you do when
your object doesn’t have a line? You add one using the Ink Bottle tool. You will learn how to do this
in the following steps.

| 52 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

13. In the Toolbox, click to select the Ink Bottle tool. The Ink Bottle lets you either add a stroke around
a fill object that has no stroke or make changes to the color, width, and texture of existing lines.

Once you select the Ink Bottle tool, you can set the stroke color using the Property Inspector or the
Stroke Color options in the Toolbox. Since you have used the Property Inspector quite a bit in this
exercise, you will have a chance to use the Toolbox color settings next.

NOTE | Property Inspector or Toolbox?

In Macromedia Flash MX there are often several ways to access and work with the same tools.
There is not one right way. However, you may find that using the Property Inspector will stream-
line your workflow, since it gives you quick access to the attributes of the object or tool selected,
all in one panel.

| 53 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

Stroke Color

14. In the Toolbox, click the Stroke Color icon, and in the color palette that pops up, choose a light
gray color.

15. Using the Ink Bottle, click on the outer edge of the snowboard shape. This adds a stroke to the
outside of the shape.

NOTE | The Ink Bottle

The Ink Bottle serves several very important purposes. First, it lets you add a stroke to an object,
as you just did in step 15. Second, by Shift+clicking on multiple objects, you can use it to modify
the line settings for those objects all at once, rather than having to select each object and change
its settings individually. This can save you a lot of time when you have several lines to add or modify.

| 54 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

16. Using the Arrow tool, double-click to select the stroke around the snowboard shape. The gray
selection mesh will appear to confirm that you have selected the stroke. Press the Delete key. This
will remove the selected stroke. Now you know how to add strokes to objects and remove them in
Macromedia Flash MX.

NOTE | Complex Artwork

Complex artwork
with many lines

Objects with a lot of complexity add to the file size of your final movie. For this reason, use complex
artwork sparingly, if your design allows.

17. Save and close this file—you won’t be needing it again.

| 55 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

3. Using the Oval and Rectangle Tools

The Pencil and Pen tools can be really useful for creating irregular shapes. Sometimes, however, those
tools can become somewhat tedious or inefficient for creating simple geometric shapes, such as circles
and squares. The Oval tool and Rectangle tool are good for creating simple shapes, with lines and/or
fills that are independent of each other, quickly and effortlessly. In this exercise, you will learn how to
use these tools.

1. Open the shapes.fla file located inside the chap_03 folder. This is nothing more than a
blank file that has been created for you.

No options

2. In the Toolbox, select the Oval tool. At the bottom of the Toolbox, notice that there are no
options for this tool.

3. Press and hold down the Shift key. On the Stage, click and then drag the crosshair cursor
to the lower right corner with the Shift key held down. As you do this, a large, thick circle will
appear next to the crosshair. This indicates that you are drawing a perfect circle. Release the
mouse button to draw the circle. Notice that Macromedia Flash MX uses the current fill and
stroke colors to create the circle.

| 56 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

TIP | Easy Perfect Shapes

When you are using the Oval or Rectangle tools, holding the Shift key down while you draw the
shapes will force the tool to draw only perfect circles or squares.

4. Draw another circle, this time in the shape of an oval, but do not use the Shift key. Notice that the
small circle around the crosshair is smaller and thinner. This indicates that you are drawing an oval, not
a perfect circle.

5. In the Toolbox, select the Rectangle tool. At the bottom of the Toolbox, notice that there is one
option for this tool. You’ll learn about this option in a bit.

| 57 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

6. Hold down the Shift key and click and drag toward the lower right corner of the Stage. As you do
this, a rectangle preview will appear. Notice the “perfect shape” indicator. It’s the same as the one you
saw on the Oval tool. In this instance, it indicates that you are drawing a perfect square. Release the
mouse button to create the shape. Again, Macromedia Flash MX uses the selected fill and line colors.

7. At the bottom of the Toolbox, click the Round Rectangle Radius button. This opens the Rectangle
Settings dialog box.

| 58 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

8. Enter 25 for the Corner Radius setting. Click OK. This will add rounded corners with a 25-point
radius to the next rectangle you draw.

Tip: You can enter any value between 0 and 999.

9. Using the Rectangle tool, draw another rectangle on the Stage. Notice that the corners of the
rectangle are rounded now. Sweet.

TIP | Round Before You Draw

You can’t use the Round Rectangle Radius option to round the corners of a rectangle you have
already drawn. So creating rounded rectangles does require some forethought. However, you can
adjust the points as you draw the rectangle. Pressing the Up Arrow key as you draw will decrease
the corner radius points, while pressing the Down Arrow key will increase the corner radius points.
This is a very cool little shortcut.

10. Save and close this file; you won’t be using it anymore.

| 59 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

4. Using the Brush Tool

The Brush tool is used to paint shapes. You can create shapes with solid colors, gradients, and even
bitmaps as fills. The Brush tool has several painting modes that are unique to Macromedia Flash MX,
such as Paint Fills, Paint Selections, Paint Behind, and Paint Inside. These modes are covered in
detail in the brushmodes.mov movie mentioned at the end of this exercise. For now, you will learn to
use the Brush tool to create and modify shapes.

1. Open the paint.fla file located inside the chap_03 folder. Once again, this is just a blank
file that has been saved for you.

2. In the Toolbox, click to select the Brush tool. Notice that there are several options for this
tool. You will learn about these options as you complete this exercise.

3. On the Stage, draw a circle with the Brush. Notice that it uses the fill color for this shape,
rather than the stroke color. The Brush tool always uses the fill color, as the kind of shape it
creates is considered a fill, not a stroke.

| 60 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

4. At the bottom of the Toolbox, click on the Brush Size pop-up menu. Select the fourth size from the
bottom. This will decrease the size of the next fill that you draw.

5. Draw a smaller circle inside the large one. Notice that the smaller brush size creates a fill shape that
is narrower than the first one.

| 61 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

6. At the bottom of the Toolbox, click on the Brush Shape pop-up menu. Select the fifth shape from
the bottom. This will change the shape of the next fill that you draw.

7. Draw another circle on the Stage. Notice that it uses the new shape to create the circle. You can
produce some pretty cool calligraphy effects using these shapes.

| 62 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

TIP | Using Tablets

Macromedia Flash MX offers support for most pressure-sensitive graphics tablets. Using a
tablet can help you create natural-looking shapes that have a hand-drawn look. As you increase
pressure on the tablet, the width of the shape will increase, whereas less pressure will create
a thinner shape.

8. Go ahead and experiment with the other brush shapes and sizes. If you have a graphics tablet, you
might want to use it.

TIP | Adding Lines to Brush Shapes

Because the Brush tool creates shapes that are fills, you can use the Ink Bottle to easily add a
stroke to the shapes you create with the Brush.

9. When you are done experimenting with the Brush, save and close this file—you won’t need it again.

MOVIE | Brush Modes

If you want to learn about the different Brush modes in Macromedia Flash MX, be sure to check
out the brushmodes.mov movie, located inside the movies folder on the H•O•T CD-ROM.

| 63 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

5. Modifying Strokes and Fills

There are several ways to change the fill of a shape. You can specify the fill color before you create the
shape, or you can use the Paint Bucket to fill uncolored areas of a shape or to change an existing fill
color. The Paint Bucket can also be used to modify bitmap and gradient fills. In addition, the Color Mixer
panel lets you create solid, gradient, and bitmap fills, which you can then apply to the shapes you cre-
ate. In this exercise, you will learn how to use the Paint Bucket tool and the Fill color palette to modify
the fill of a shape.

1. Open the modifyFills.fla file located inside the chap_03 folder. This file contains a vector
graphic of a snowboard.

| 64 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

2. Using the Arrow tool, select the blue background of the snowboard. When an object is selected,
a white dotted selection mesh will appear over it. In this case, it’s the background color of the
snowboard.

3. Make sure the Property Inspector panel is visible. If it’s not, choose Window > Properties, or use
the shortcut Ctrl+F3 (Windows) or Cmd+F3 (Mac) to make it visible.

4. In the Property Inspector, click on the Fill Color box and select a shade of red you like from the
Fill color palette. This changes the background color of the snowboard to red.

Notice that some areas of the snowboard are still blue, like the insides of the letters. You will fix
this next.

| 65 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

NOTE | Why Didn’t Everything Turn to the Color I Selected?

Macromedia Flash MX treats shapes that are one continuous color as one shape. Each time a
new color appears, that is a new shape, which means it must be modified individually. In step 4
of this exercise, the middle parts of the letters were treated as separate shapes because they
were surrounded by white. You will learn how to quickly fill these remaining blue shapes next.

5. In the Toolbox, select the Paint Bucket tool and click on each of the blue shapes inside the letters
to change the color to match the red background color you selected.

Unlike the Property Inspector method, you do not need to select the artwork before you color it with
the Paint Bucket tool. If you are having trouble clicking on the small blue regions inside the type, you
may want to use the zoom feature. You can use the shortcut keys to zoom in and out by pressing
Ctrl+plus or Ctrl+hyphen (Windows) or Cmd+plus or Cmd+hyphen (Mac) on the keyboard.

Tip: As a safeguard, you can always press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo any mistakes
you make.

| 66 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

TIP | Applying Fills

Using the Fill Color box in the Property Inspector and using the Paint Bucket in the Toolbox are
two ways to change the solid fill of an object. Either method will yield the same results; although
using the Property Inspector can help speed up your workflow, since you can change and access
many features of the selected object using only one panel. It is important to note that you must
have the object selected first if you want to change the fill using Property Inspector. However, you
can Shift+click to select multiple objects and change them all at once; this is a great way to make
several changes quickly.

6. In the Toolbox, select the Arrow tool and click on the letter B on the snowboard. A black dotted
mesh will appear indicating the area you have selected.

Rather than fill one letter at a time, you will fill all the letters at once next.

| 67 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

7. Shift+click on each of the remaining letters in the word boarding so that all the letters are selected
at one time. If you make a mistake and want to start over, you can press the Esc key, which will clear
all selections.

8. In the Property Inspector, choose a new color for the letters by selecting the Fill Color box and
selecting a new color from the Fill color palette. All the letters will change to the new color you selected!

Up to this point, you have been modifying the fills on the snowboard shape. You will modify the
strokes on the snowboard shape next.

| 68 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

9. Using the Arrow tool, double-click to select the entire outline of the snowboard.

10. Using the Property Inspector, choose a new stroke color and stroke style for the outline of the
snowboard. Pretty quick and easy, huh?

| 69 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

11. Using the Arrow tool, double-click on the outline of the yin and yang design on the snowboard
to select the entire outline of the design. Back in the Property Inspector, choose a new stroke color
and stroke height for the outline of the design. This snowboard has come a long way since you
started this exercise!

12. Save and close this file—you won’t need it again.

| 70 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

6. Working with Multiple Objects

By now you should have a pretty good idea of how to draw in Macromedia Flash MX. In this exercise, I
want to point out some of the nuances involved in drawing, because Macromedia Flash MX behaves
differently than most other drawing programs. You will learn how it handles multiple and overlapping
objects and you will learn how to protect artwork from being unintentionally modified.

1. Open the multiple.fla file located inside the chap_03 folder. This file contains some
simple shapes that you will use to understand the unique drawing behaviors of Macromedia
Flash MX.

2. Select the Arrow tool, and then move the cursor over the line of the glove. Notice that a
small curved line appears at the end of the cursor. This line indicates that you will select the
line (rather than the fill) if you click.

| 71 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

3. Double-click to select the entire line around the glove. A gray mesh will appear over the line once it
has been selected. Shift+double-click on the black strap to select that also.

4. Click again on the line and drag to the right. This will pull the line off the glove. As I mentioned
earlier, Macromedia Flash MX treats the line and fill as separate objects. Because of this, you can
easily separate the two.

5. Press Delete to permanently remove the line.

6. Move the cursor over the long line between the glove and the boot. Again, that little curve will
appear at the bottom of the cursor. Click once to select the line.

| 72 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

7. Click again on the line and drag it over the boot.

8. Click in the right section of the boot and drag to the right. Notice how the line you dragged on top
of the boot has cut the fill into different objects?

Since the fill color of the boot is gray and the line is a different color (black), the line will cut the
color beneath it into separate sections.

9. Click on one of the lines to the right of the boot to select it.

| 73 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

10. Click and drag that same line over so that it lies across the other line, then click in a blank area of
the Stage to deselect the line.

11. Click to select the top right line segment.

12. Click and drag to the right. Notice that the line was split into four segments simply by having two
lines intersect. While this might seem somewhat counterintuitive, it’s a great way to create interesting
shapes in Macromedia Flash MX.

13. Click and drag the small light blue circle into the middle of the glove.

| 74 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

14. Click on any blank area of the Stage to deselect the circle.

15. Click and drag the small circle back to its original location. Notice that it has left a hole in the fill of
the glove. Note: If this circle were exactly the same turquoise color as the glove, it would not have cut
through the circle and made a hole. Instead, it would have combined with the glove into one shape.

16. Save your file, but leave it open; you’ll need it for the next exercise.

| 75 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

7. Grouping Objects
Now that you have a good idea of how the drawing features behave in Macromedia Flash MX, this
exercise will show you how to create shapes that overlap without cutting into or combining with one
another. The following steps will also show you how to create a grouped object.

1. Using the Arrow tool, click to select the half of the boot you separated.

2. Choose Modify > Group. When you do this, a thin blue rectangle appears around the
object, indicating that this is a grouped object, which protects it from intersecting with other
objects on the Stage.

3. Click and drag the gray half of the boot on top of the blue glove.

4. Deselect the gray half of the boot by clicking on any blank area of the Stage.

| 76 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

5. Click and drag the gray half of the boot off of the blue glove. Nothing happens. Phew! As you can
see, grouping objects, even single objects, is a quick way of protecting them from being affected by
or affecting other objects.

6. With the gray half of the boot still selected, choose Modify > Ungroup. This will ungroup the
selected object. You can tell that this has been done because the thin blue line goes away and
the gray selection mesh returns, both telltale signs that this is a shape in its most primitive form.

7. Now drag that ungrouped gray shape onto the blue glove, deselect it, and then drag it off again.
Yikes! Look ma, no fingers! Grouping objects can be a quick and easy way to protect them from
unwanted editing.

8. Save and close this file—you won’t be needing it again.

| 77 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

What Is the Color Mixer Panel?

Fill Style

Stroke Color
Color
Fill Color

Alpha
Swap Stroke
and Fill

Default Stroke and Fill

None

Color
Brightness

Hex Edit text

Color

The Color Mixer panel gives you precise control over color, all in one panel. This panel is open by
default; if you’ve closed it, you can access it again by choosing Window > Color Mixer. The following
exercise will show you how to use the Color Mixer panel to create gradient fills.

| 78 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

8. Creating Gradients
Gradients can help you create lots of cool and interesting effects, such as glows and photorealistic
spheres, which you will learn more about in Chapter 5, “Shape Tweening.” Macromedia Flash MX lets
you create two types of gradient fills: linear and radial. In this exercise, you will learn how to use the
Color Mixer and Color Swatches panels to create, apply, and change the color of a linear and radial
gradient with some shapes in Macromedia Flash MX.

1. Open the newGradient.fla file in the chap_03 folder. This file contains two snowboards.
You will be applying gradients to both of these shapes in this exercise.

2. Using the Arrow tool, click the blue fill on the snowboard on the left to select it.

| 79 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

3. Make sure the Color Mixer panel is open; if it is not, choose Window > Color Mixer to open it.
Click the small down arrow to see the Fill Style drop-down menu. This menu displays the different
types of available fills. Choose Radial. This fills the selected shape with a radial gradient, using black
and white.

Tip: A radial gradient radiates outward from the center.

Color box

Black pointer

4. Click the black pointer in the Color Mixer panel. This selects the black color point of the gradient
and causes the Fill Color box to display the color of the pointer. This box defines the fill color for the
selected pointer.

| 80 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

5. Click the Fill Color box and select a shade of red from the palette. This changes the appearance
of the radial gradient—instead of ranging from black to white, it ranges from to red to white.

You have just created your first custom gradient! Next you will make a linear gradient, in which the
colors change horizontally or vertically.

6. Using the Arrow tool, select the snowboard on the right side of the Stage.

| 81 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

7. In the Color Mixer panel, choose Linear from the Fill Style menu. This creates a linear gradient,
using the same color you used for the previous gradient.

New gradient

8. Click in the top right corner of the Color Mixer panel to reveal the Color Mixer pop-up menu, and
choose Add Swatch. This saves the selected gradient in the Color Swatches panel so that you can
access it easily. Note: Your Color Swatches panel should be open by default and located under the
Color Mixer panel. If it is not, choose Window > Color Swatches to open that panel.

9. Save and close this file—you won’t need it again.

| 82 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

9. Drawing with the Pen Tool

The Pen tool is found in many other vector graphics applications, including Macromedia Freehand and
Adobe Illustrator. If you are familiar with how the tool works in those programs, you’ll know how to use
it in Macromedia Flash MX.

However, if you haven’t used it before, the Pen tool can take a little getting used to and will require a
good amount of practice before you become really comfortable with it. In this exercise, you will learn to
use the Pen tool to draw a few basic geometric shapes. When you are finished with this exercise, you
should be a bit more comfortable working with the Pen tool—not only in this program, but in other pro-
grams as well.

1. Open the pen.fla file located inside the chap_03 folder. This file contains an outline of
two separate geometric shapes.

Note: Since you will be using the Pen tool in this exercise, it will be easier to see the
results if you use the default settings for this tool. If you just completed the previous
exercise, set the stroke settings back to their default values (black, solid, 1 point) using
the Property Inspector.

This document has two layers: one for the shape outlines, titled “patterns,” and another
titled “draw here,” which is where you will draw these shapes using the Pen tool. The
“patterns” layer is locked so you can’t do any damage to the outlines. But have fun
drawing on the “draw here” layer.

| 83 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

2. Make sure the draw here layer is selected in the Timeline. If the patterns layer is selected and you
try to draw on that layer, you will get an error message asking you to unlock and show that layer. To
select the draw here layer, click in the first frame, or click where it says “draw here.” A pencil appears
next to the name of the layer, indicating that it is selected.

Pen tool

3. In the Toolbox, select the Pen tool.

| 84 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

Small, round dot is

an anchor point

4. Move your mouse to the bottom left corner of the triangle outline and click. A small circle appears.
This is the first anchor point, indicating the beginning of your line. Line segments are created between
pairs of anchor points to create shapes.

Line segment
with two
anchor points

5. Click the top corner of the triangle to add the second anchor point, thus creating a line segment,
which appears only after you click. The line segment will appear as a red line with two square anchor
points. The line segment is the color currently set as the stroke color in the Property Inspector and in
the Toolbox.

6. Click the lower right corner of the triangle. This will create a second line segment between the
upper and lower right anchor points.

| 85 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

7. Move the cursor to the lower left corner. A small circle appears at the end of the cursor. This indi-
cates that you will close the path if you click. Click to close the path and complete the shape. When
you close a path, the shape automatically fills with whatever color you currently have selected for the
fill color in the Property Inspector or the Toolbox.

TIP | Pen Preferences

As you learn to work with the Pen tool, there are some preferences you should be aware of that
might make your life a bit easier. If you choose Edit > Preferences, you can access the Preferences
dialog box. Click the Editing tab to see the Pen preferences, in the top left corner. There are
three preferences you should consider here:

Show Pen Preview (off by default) lets you preview the line segments as you draw with the Pen
tool. A stretchy line will appear as a preview of the line segment you will create when you click.

Show Solid Points (off by default) displays unselected anchor points as solid points and
selected anchor points as hollow points when you use the Subselection tool.

Show Precise Cursors (off by default) causes the Pen cursor to appear as a crosshair. This can
be helpful for precise drawing and works great with the grid feature.

| 86 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

Next you’ll learn to draw a circle with the Pen tool. This is a bit more complicated than drawing
a triangle and will probably take some time to master. Don’t worry if you have to do this exercise
a few times before you get the hang of things.

8. Using the Pen tool, click at the top center of the circle outline. This will place the first anchor point.

Click here

Tangent
handles

9. Click on the middle right edge of the circle and drag down to add another control point. As you
drag, you will see two tangent handles appear. Move the mouse around and watch how the angle
of the line changes as you do this. Don’t release the mouse button just yet.

10. Drag down toward the bottom right until the line segment seems to match the outline of the circle.
Now release the mouse button. Note: The circle you draw doesn’t have to be perfect here; just try to
get comfortable working with the Pen tool.

| 87 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

11. Click on the middle bottom edge of the circle to add another control point. The line will curve auto-
matically when you add the third control point and this will complete half of the circle shape.

12. Click and drag up on the middle left edge of the circle to add another control point. As you drag,
you will see two tangent handles appear. Don’t release the mouse just yet.

13. Drag up toward the top left until the line segment seems to match the outline of the circle. Release
the mouse button.

| 88 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

14. Move the cursor to the top of the circle. Click on the first anchor point you created. This will com-
plete the circle and fill it with whatever color you have selected for the fill color.

15. Save the changes you made to this file. After all that hard work, who wants to lose it? Go ahead
and leave this file open for the next exercise. Don’t worry if it isn’t perfect because next you will learn
how to modify lines using the shapes you just made.

MOVIE | morepen.mov

If you want to see the Pen tool in action and learn how to create more complicated shapes, make
sure you check out the morepen.mov movie inside the movies folder on the H•O•T CD-ROM.

| 89 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

10. Modifying Paths

Now that you know how to create shapes using the Pencil and Pen tools, it’s a good time to learn how
to reshape them. In this exercise, you’ll use the Subselection tool to modify paths using their anchor
points or tangent handles. The following steps will expose you to using both the Arrow tool and the
Subselection tool to give you a better understanding of how each of these tools works.

1. The file from the previous exercise should still be open. If it’s not, open the pen.fla file.

2. In the Toolbox, select the Arrow tool.

| 90 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

3. Move your cursor over the right side of the triangle. Notice that a small curved line appears at the
end of the cursor. This line indicates that you are over a line segment.

4. Click and drag the mouse to the right. The shape will start to distort and stretch as you continue to
drag the mouse. (Hey, remember Silly Putty?) Release the mouse button. Notice that both the line and
the fill have changed their shape.

The Arrow tool offers a free-form way of transforming shapes, and while it can be fun, it can also lack
the precision you sometimes need when creating complex shapes. When you do want pinpoint preci-
sion, you can use the Subselection tool, which lets you manipulate the anchor points and tangent
handles of paths after you have added them.

5. In the Toolbox, select the Subselection tool.

| 91 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

6. Move the cursor over the edge of the circle shape. A small black square will appear indicating that
you are over a line.

Anchor

7. Click on the edge of the circle to select it. Notice that once the shape is selected, the anchor points
become visible. The anchor points are represented by small red squares along the line of the circle.
Note: Macromedia Flash MX adds anchor points, if necessary, to create the curve. That is why you
might see more than the four anchor points you added when drawing the circle.

8. Using the Subselection tool, move the cursor over the middle right anchor point. A small white
square will appear next to the cursor when you are over the anchor point.

| 92 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

Tangent handles

9. Click to select the middle right anchor point. When you do, the tangent handles for that anchor
point and the ones above and below it appear. Why? Because all three anchor points work together
to create this part of the circle’s curve. Note: If you don’t have as many anchor points as I do in this
example, you may not see the three anchor points working together.

10. Click and drag the top tangent handle of the middle right anchor point over to the right. Release
the mouse button. Notice that the top and bottom portions of the curve change together. This is the
normal behavior of tangent handles.

11. Click to select the middle left anchor point.

| 93 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

Single tangent handle being modified

12. Press and hold the Alt key (Windows) or Option key (Mac) as you click and drag the top tangent
handle of the middle left anchor point over to the left. Release the mouse button. Notice that only the
top portion changes. This is how you modify one part of a curve without changing the other.

13. Using the Subselection tool, click on the anchor point on the middle right of the circle and drag
down to try to match the circle image in the background. You can click and drag an anchor point to
make the circle more perfect in shape.

Now you know how to use the Arrow and Subselection tools to modify the lines you create in
Macromedia Flash MX. With the Arrow tool, you can reshape straight or curved lines by dragging
the lines themselves. The Subselection tool lets you reshape objects by clicking on and moving the
tangent handles and anchor points in an object. Next you will learn how to add, remove, and convert
anchor points. Knowing how to do this will give you more control when you are creating shapes in
Macromedia Flash MX.

| 94 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

14. In the Toolbox, select the Pen tool. In addition to drawing shapes, the Pen tool lets you add
anchor points to a line.

New anchor point

15. Move the cursor over the rounded side of the triangle shape. Notice that when you move over the
edge, a small ^ symbol appears next to the cursor. This symbol indicates that a new anchor point will
be created if you click. Click to add a new anchor point here.

Converting curves to straight lines is a rather simple process and one you should know how to do.
That’s exactly what you will do in the following steps.

16. With the Pen tool still selected, move the cursor over the newly added anchor point and notice
that the small ^ symbol appears again. This indicates that you will convert the curve point to a corner
point if you click.

| 95 |
3. Drawing and Color Tools | Macromedia Flash MX H•O•T

17. Click the anchor point. The curve point is converted to a corner point. This transforms the curve
into a straight-edged shape, and it will look less like a curve. You will no longer have access to any
tangent handles for this anchor point.

Converting a corner point to a curve point is even easier to do.

18. Using the Subselection tool, click on the anchor point to select it. Now Alt+click (Windows) or
Option+click (Mac) and drag the anchor point you just modified up a bit. When you do this, you will
convert that corner point back to an anchor point.

Note: Make sure the anchor point is still selected before you drag it. Selected anchor points are red.

Tip: You can delete anchor points in a number of different ways. One of the easiest ways is to select
the anchor point with the Subselection tool and press the Delete key.

| 96 |
 Macromedia Flash MX H•O•T | 3. Drawing and Color Tools

19. With the anchor point still selected, press Delete. This removes the anchor point.

20. Save and close this file—you won’t be needing it again.

By now, you should feel pretty comfortable working with the drawing and color tools inside Macromedia
Flash MX. If you aren’t quite there yet, please feel free to take some time to play with the different
tools and color settings. You might try drawing some artwork for a project you want to create in
Macromedia Flash MX. Nothing will ever replace good old-fashioned practice. It might not make
you perfect, but it can make you one heck of an efficient Macromedia Flash designer.

| 97 |