The Drawing Tools

---

The drawing tools are located in the top portion of the Toolbox. Most shapes you draw will probably have a fill and a stroke. In Flash once you draw a shape that has a stroke, you can then select the fill and the stroke separately.

Fill and stroke basics

You start by drawing geometric shapes using the Rectangle or Oval tools (the instructions work for either Oval or Rectangle tools).

1. Select the Rectangle tool from the Toolbox or press R. Notice the Property inspector shown in Figure 25-1.

   
   Figure 25-1: The Property inspector showing the properties for the Rectangle tool

2. In the Property inspector click the Stroke color box to select a color for the stroke. Select a number (pixels) for the stroke width. If you want a custom stroke, such as a dotted line, click the Custom button. You'll notice a lot of different options for the stroke's appearance.

3. Click the Fill color box to change the color of the fill. You can also choose one of the preset gradients at the bottom of the Swatch panel that opens. Later in this chapter you learn about using gradients and bitmap fills.

4. To edit a shape, select the Arrow tool, and click the rectangle's center. A dotted pattern indicates that the fill is selected. You can now change the fill or even delete it.

5. With the Arrow tool, click the edge of the rectangle and notice that a portion of the stroke is selected. On a rectangle there are four strokes not one. If you want to change them all, you need to Shift+select all four.

6. If you want to select the entire object, including fill and strokes, double-click the object. You can group the object to edit or move it as one item by choosing Modify ® Group, or Control (Command) +G.

Note 

You can also change fills and enter an RGB number in the Color Mixer (Window ® Color Mixer). This panel is one of the ones that opens by default when you first install Flash.

FreeHand

 FreeHand MX   In FreeHand and in Fireworks, when you place one object on top of the other, each object remains separate. One covers or obscures the other but both objects exist in their entirety. In Flash, if you place an object without a stroke on top of another object of the same color, they become one object when you deselect. If the objects are two different colors, the one you place on top cuts out the portion of the object below it, acting like a cookie cutter.

Rounded rectangles

Rounded rectangles are great for buttons and other interface objects and they are easy to make. But you need to set the options prior to drawing the shape. Select the Rectangle tool and in the Options area of the Toolbox; you see the Round Rectangle Radius option. When you click it a dialog box opens where you type the amount of the radius. Selecting 100 makes a pill shape, and selecting 30 makes a slightly curved corner.

Using the Pencil tool

The Pencil tool works much like a traditional pencil, a freeform line. But with the Pencil tool using a few tricks can make your drawing smoother or sharper. Select the Pencil tool and notice the Options area of the Toolbox. You can choose one of three options (Straighten, Smooth, Ink) prior to drawing. Or you can select the line and then apply one of the options, which are:

• Straighten straightens all the curves in a line.

• Smooth smoothes out angles, but you have no control over how much smoothing occurs. Practice with each setting to see how they respond.

• Ink leaves the line just as you drew it.

You can also select a line and change the stroke properties in the Property inspector.

Using the Brush tool

The Brush tool is similar to the Pencil tool in that it's freeform. The line you draw with the Brush tool is a stroke and as a stroke you can apply the different stroke attributes, such as dotted lines and so on, from the Property inspector.

Prior to using the Brush tool to affect an object already drawn, you had to select the object first. When you select the Brush tool in the Options area, you see the top icon for Paint Modes, which leads to the following options:

• Paint Normal — No selection is required and you use the Brush tool like a paint brush.

• Paint Fill — The stroke is applied to all areas of the selected fill.

• Paint Behind — The stroke is drawn behind the selected object.

• Paint Selection — Applies the stroke to only the selected fill area.

• Paint Inside — Doesn't paint over an existing object's border but remain inside the fill area.

The differences can be seen in Figure 25-2.

Figure 25-2: The different Brush tool options

The next icon in the Options area of the Toolbox is the Brush size; the last one is Brush Shape. You can also adjust the size by entering a pixel amount into the Property inspector.

Using the Pen tool

The Pen tool is what I'd consider the main drawing tool in Flash. It gives you the greatest control and flexibility. The Pen tool in Flash works like the one in FreeHand and in Fireworks. You place points, and they are connected by line segments. These line segments can then be altered or curved by adding and manipulating Bezier or tangent handles. For detailed instructions on using the Pen tool refer to Chapters 6 and 17.

On the CD-ROM 

In the Movie folder on the CD is a tutorial called Bezier curves, which shows you how to use the Pen tool and manipulate the curves. It's made using the Fireworks Pen tool, but it works the same way in Flash.

Using the Ink Bottle tool

The Ink Bottle tool affects only a stroke's color, width, and style. To use the Ink Bottle tool, follow these steps:

1. Draw a stroke.

2. Be sure nothing is selected on the Stage; then select the Ink Bottle tool from the Toolbox.

3. In the Property inspector, click the stroke color box and choose a new color. Change the stroke height and/or style.

4. Click over any stroke.

Using the Paint Bucket tool to fill an object

You saw a little bit about editing fills in the "Fill and stroke basics" section earlier in this chapter. In this section, you learn how to use and edit gradient and bit fills. To use the Paint Bucket tool, follow these steps:

1. Draw a rectangle. It fills with the currently selected color. It will have a stroke only if you currently have a stroke selected.

2. To change the fill, deselect the rectangle by clicking anywhere on the blank part of the Stage.

3. Select the Paint Brush tool from the Toolbox.

4. Click the area to fill.

Tip 

You can also change the fill and stroke of a solid fill (not gradient or bitmap) in the Property inspector after you select the object.

Using gradient fills

A gradient fill changes from one color to another gradually. You can have two or more colors and you can adjust the position of the colors. Gradients are mixed in the Color Mixer panel (Window ® Color Mixer). To use a gradient fill, follow these steps:

1. Click the expander arrow to open the Color Mixer (Window ® Color Mixer).

2. Select an object to which to add the gradient fill.

3. In the Color Mixer, open the Fill Style drop-down menu, and choose Linear or Radial. Figure 25-3 shows the Color Mixer with Linear selected. Notice the color ramp that appears with two color markers. The one on the left is white and the one on the right is black by default.

   
   Figure 25-3: The Color Mixer with Linear fill style being selected

4. The default gradient of white to black is added. You can easily change the color by clicking either of the color markers. When you select one, the Color Proxy icon below the color box is activated. You click the color box to choose a new color for the selected marker.

   Tip 

   If you don't want to make a new gradient but use one in the Swatches panel, instead of using the Color Mixer you can choose any preset gradient or one you've saved from the Fill color box on the Toolbox.

5. To add another color, place your cursor below the ramp and you'll see a plus (+) sign near your cursor. Click to add another marker. Choose your color and add as many markers as you want. Move the markers around by dragging them.

   Tip 

   If you choose the gradient fill prior to drawing your shape, it will be filled automatically with the gradient you selected.

6. To save a custom gradient to the Swatches panel, click the Color Mixer Options pop-up menu and choose Add Swatch. Now you can choose this gradient directly from any color fill box when the Swatches panel opens.

7. A feature unique to Flash is the ability to lock the gradient fill. This means you can have multiple objects filled with a continuous gradient. To fill continuous objects with a gradient, follow these steps:

   1. Choose a gradient or make your own.

   2. Select the Paint Bucket tool.

   3. In the Toolbox, click the Lock Fill icon in the Options area of the Toolbox.

   4. Fill one object, then the next. Notice how the gradient continues into the second object (Figure 25-4).

      
      Figure 25-4: The gradient is filled in the left rectangle and continues into the right rectangle.

 Fireworks MX   Fireworks has an additional ramp in the Gradient editor for transparency. In Fireworks you see the transparency only if the object is exported over the object it sits above. But you can import the Fireworks PNG into Flash and the transparency is true. In other words, you can move the object with Fireworks transparency settings around your stage and see through to underlying objects.

Filling with bitmap

In the Fill Style drop-down menu of the Color Mixer along with the Linear and Radial options for the Gradient there is a Bitmap option. This option enables you to fill with an image. To fill with an image, follow these steps:

1. Select an object.

2. Choose Bitmap from the Fill Style drop-down menu in the Color Mixer.

3. Navigate to the location of the image you want saved. Select it and open it. This image is added to your Library and shows up in the Color Mixers Bitmap Fill window. You can select any image from this window to use as a fill. To get additional images into your Library use the File ® Import to Library method of adding images to use as fills.

    Fireworks MX   It's a good idea to optimize your images in Fireworks prior to using them in Flash. Flash applies optimization but Fireworks is more robust and offers you much more control.

4. With a bitmap selected from the Bitmap Fill window you can use the Paint Bucket tool to fill.

5. To edit the fill's appearance you can use the Fill Transform tool, which you learn about in the next section of this chapter.

   Cross-Reference 

   For more information about using Web-safe colors and a more detailed description of using the Swatches panel, refer to Chapter 16.

Using the Fill Transform tool

The Fill Transform tool is new to Flash MX. In previous versions it was a Paint Brush tool option; now it's a tool on its own. The Fill Transform tool is used to adjust the position and size of gradients and bitmap fills. To use the Fill Transform tool, follow these steps:

1. Select the Fill Transform tool.

2. Click an object with a gradient or bitmap fill. After you click the object, you see a bounding box. Figure 25-5 shows a bitmap, linear, and radial fill with the various Fill Transform handles. As you pass your cursor over each square around the box cursor tips indicate the function. You can perform any of the following functions:

   • Rotate the fill

   • Adjust the fill's width

   • Adjust the fill's height

   • Skewing the image

   • Scale proportionately

   • Enlarge or make smaller a linear gradient by dragging the square handle in the center

   • Change a radial gradient's position by dragging the first circular handle just below the square one

   
   Figure 25-5: Different Fill transform options

Using the Eraser tool

Using the Eraser tool is easy enough; you select the tool and drag it over the areas you want to erase. Several options control how the eraser performs. When you select the Eraser tool from the Toolbox, these additional options are available in the Options portion of the Toolbox:

• The Eraser Mode drop-down menu includes

  • Erase Normal — Erases any fill or style

  • Erase Fills — Erases only fills

  • Erase Lines — Erases only strokes and lines

  • Erase Inside — Erases within a shape

  • Erase Selected Fills — Erases only fills that are selected first

• Faucet deletes any fill and/or stroke selected.

• Eraser Shapes offers shapes and sizes from which to choose.

---