• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint


The broadest and deepest areas of overlap relate to the editing tools in the Tools panel. Selection, Subselection, Line, Lasso, Pen, Pencil, Text, Rectangle, Ellipse, Eyedropper, and Eraser tools are all found in Flash, Fireworks, and FreeHand. (Refer to Figures 3.1, 3.2 and 3.4.)

Many of the basic concepts and techniques for using these tools are the same in all three programs. Common elements include the basics of strokes, fills, and gradients, as well as the workings of tools such as Selection, Subselection, Line, Lasso, Pen, Text, Rectangle, Ellipse, and Eyedropper. The Eraser, though it has the same basic function in all Studio MX programs—deleting objects or portions of objects—differs enough among programs to deserve separate treatment for each. The same is true of the Brush tool, common to Flash and Fireworks.

Strokes and Fills

Vector drawing tools create shapes consisting of strokes, fills, or both. Strokes are lines, and fills are areas. In shapes containing both, strokes and fills are independent of one another: You can set their attributes separately and move them independently.

Flash is unique in that overlapping shapes drawn on the same layer interact. For instance:

  • A shape drawn on top of another replaces any portions of the original shape that it obscures.

  • Shapes of the same color merge where they touch, whereas shapes of different colors remain distinct (although overlapped portions are replaced, as described in the preceding bullet).

  • New vertices are created where strokes intersect.

In Fireworks and FreeHand, no new vertices are created at stroke intersections, and overlapping shapes remain distinct and don't change one another.

Setting Stroke and Fill Colors

In Flash, Fireworks, and FreeHand, to set the stroke or fill color, first click in a Stroke or Fill box in one of two places:

  • The Colors section of the Tools panel.

  • A color box in the Property inspector, after you have selected a tool. (In FreeHand, you also have to click on the paint bucket icon in the Object tab in the Property inspector to add a fill property to the object, as shown in Figure 3.10.)

    Figure 3.10. Click on the paint bucket to add a fill in FreeHand.

This brings up a color-selection panel. The simplest of these panels is the Web-safe color picker, which contains swatches for the 216 generic colors common to the two major browsers, Netscape and Internet Explorer, and the two major operating systems, Macintosh and Windows. A colors mixer (Color Mixer in Flash, Colors in Fireworks, Color Mixer and Tints in FreeHand) enables you to go beyond the Web-safe colors by mixing your own custom colors. Toggle the colors mixer on or off with Shift+F9 in all three programs. (Color mixers are shown in Figures 3.1, 3.2 and 3.4.)

There are a number of systems or modes for mixing colors. All three programs support RGB (red-green-blue) and HSB (hue-saturation-brightness). (HSB is called HLS, for hue-luminance-saturation, in FreeHand.) FreeHand and Fireworks also support several other modes.

RGB is the standard additive color model created for graphics viewed on computer monitors. Unless you are accustomed to using HSB color, stick with the RGB default.

In Flash and Fireworks, if you click on the upper-right corner of the colors mixer, as shown in Figure 3.11, you get a pop-up menu offering various color-related functions, including selecting a color mode (RGB or HSB) and saving a custom color as a swatch, which you can later retrieve from the swatches panel. FreeHand includes buttons on the Mixer and Tints panel for these functions. (See Figure 3.12.)

Figure 3.11. Click on the upper-right corner of the colors mixer in Flash and Fireworks for a pop-up menu of color-related options.

Figure 3.12. FreeHand color options, with RGB mode selected.

Dreamweaver, not being a graphics editor, does not work with strokes and fills. It has a Color Picker, which pops up whenever you click a color box, generally to specify an HTML color attribute. (Refer to Figure 3.3.)

Figure 3.3. The FreeHand MX interface. The rectangle in the document window has a linear gradient fill.

Working with Fills

Any closed shape can have a fill. The two basic types of fills are solid colors and gradients. A gradient contains two or more colors, blending smoothly from one to the next. Linear gradients display colors in a striped pattern. Radial gradients display colors in a circular pattern from the center outward; they can add depth to circular objects, for instance, making them appear three-dimensional. Solid colors and gradients are available in Flash, Fireworks, and FreeHand. Flash and Fireworks also support a third type of fill: bitmaps.

The programs do have a number of minor differences when it comes to working with fills. For instance:

  • In all the programs, you select a gradient or solid fill by using a drop-down menu. In Flash, the drop-down menu and gradient definition bar are in the colors mixer. In Fireworks and FreeHand, they're in the Property inspector. In FreeHand, you have to click on the Fill property to get to the drop-down. (See Figure 3.13.)

    Figure 3.13. Selecting gradient fill mode in Flash.

  • In Flash and Fireworks, shapes such as rectangles and circles are filled by default. In FreeHand, the default is no fill, represented by a white box with a diagonal red line through it, as shown in Figure 3.4. The “no fill” option is available in Flash and Fireworks, too.

  • In Flash and Fireworks, you can edit a fill without first selecting the object, by clicking any enclosed area with the Paint Bucket tool. FreeHand doesn't have a Paint Bucket tool; you have to select the object before editing the fill.

Working with Gradients

All the Studio MX programs except Dreamweaver can create gradient fills, with Fireworks offering a dozen varieties, FreeHand half a dozen, and Flash just the basic linear and radial gradients. You can also create custom gradients, specifying how many and which colors are used, by using a gradient definition bar and gradient pointers. (Refer to Figure 3.13.) Each pointer marks the spot where a particular color occurs in its non-blended form. To change the colors in the gradient, click on gradient pointers and assign new colors to them. To move a pointer, click and drag it.

Again, the programs show some minor differences in the interface. For instance, to create new gradient pointers in Flash and Fireworks, you click just below the definition bar, between the two original pointers. In FreeHand, you drag one of the end pointers into the middle; the original end pointer remains where it was, and a new pointer is created in the middle.

To change a gradient color, click on a pointer. In Fireworks and FreeHand, the Web-safe color picker pops up automatically. In Flash, access the color picker by clicking the color box at the top left of the Colors Mixer.

→For more on gradients in Fireworks, seeGradients,” page 710, in Chapter 25.

→For more on colors in FreeHand, seeMixer Panel,” page 790, in Chapter 29.


The basic purpose of the Eyedropper tool is the same throughout Studio MX: It speeds up color selection by enabling you to copy stroke or fill attributes from one object in the workspace to another. (Dreamweaver can pick up colors from anywhere on the screen, even outside its own windows.) If you click on a bitmap with the Eyedropper tool, it picks up the color of the individual pixel you click on.

The Eyedropper is temporarily activated whenever you click on a color box. (This is the only way to activate the Eyedropper in Dreamweaver.) So throughout Studio MX, you can use the following procedure: Select the object or objects whose stroke or fill color you want to change. Click a Stroke or Fill color box. Click on a swatch or on an object to select the color you want.

It's possible to select the color before selecting the object or objects you want to edit. In FreeHand, you can do this simply by selecting the Eyedropper tool and dragging and dropping a color from one object to another. You can drag a stroke color to a fill, and vice versa. It's marvelously flexible and easy to use.

The Flash procedure is less flexible, in that it's only convenient for fill-to-fill or stroke-to-stroke copies. In Flash, instead of dragging and dropping, use the Eyedropper to click on the first object and then on the second. When you click on the stroke or fill that you want to copy, the Eyedropper changes to the Ink Bottle (for a stroke) or Paint Bucket (for a fill). When you click on the second object, its fill or stroke changes to that of the first object.

To do a stroke-to-fill copy in Flash, for instance, you can follow this procedure: Click on the fill color box in the Colors section of the Tools panel. Select the Eyedropper. Click on a stroke in the workspace. This changes the color in the fill color box to the color of the object's stroke. Finally, select the Paint Bucket and click the object or objects you want to change.

Fireworks doesn't have an Ink Bottle tool, and the most convenient way to change a stroke is just to click on the stroke first and then change the stroke color in the Colors section of the Tools panel.


The Line tool is the most basic of the drawing tools. It draws straight lines (strokes). Simply select the Line tool; then click and drag to create lines. Shift+dragging draws lines that are vertical, horizontal, or on a 45° slant.

You can, of course, use the Line tool to draw closed shapes such as squares or rectangles that can have fills applied to them. However, you must manually add a fill, using the Paint Bucket tool, after you have closed a shape. In FreeHand, join the lines (Modify, Join) and the fill will automatically be applied.


The Pencil tool enables you to draw freeform lines and shapes. Select the Pencil tool and then click and drag to sketch lines with the mouse. As with the Line tool, Shift+dragging constrains the angle to multiples of 45°. In Flash and Fireworks, after creating a closed shape, you can manually fill it by using the Paint Bucket tool. FreeHand automatically fills even open shapes created with the Pencil tool.

Flash has a unique feature in the three pencil modes in the Options section of the Toolbox: straighten, smooth, and Ink (maintain rough shapes).

Rectangle and Ellipse Tools

The Rectangle and Ellipse (“Oval” in Flash) tools enable you to draw these simple shapes just by clicking and dragging. Use Shift+drag to draw perfect circles or squares.

In Fireworks, click and hold on the Rectangle to bring up a fly-out with the Ellipse tool, as well as a Polygon tool and a number of Auto Shapes such as a spiral, an arrow, a star and a doughnut.

→For more on Auto shapes, see Chapter 24, “What's New in Fireworks MX 2004?,” page 686.

You can draw rectangles with rounded corners. The interfaces are slightly different for each program, but the result is the same. In Flash, after selecting the Rectangle tool, select the Round Rectangle Radius modifier at the bottom of the Tools panel. Enter a number in the corner radius field; the higher the number, the rounder the corners. In Fireworks, click and hold on the Rectangle tool and select the Rounded Rectangle smart shape from the fly-out that appears. (See Figure 3.14.) In FreeHand, enter a number in the Corners section of the Object tab in the Property inspector. The higher the number, the more rounding. In Figure 3.4, the number in the Corners section is zero, so there is no rounding.

Figure 3.14. The Fireworks Rounded Rectangle feature.

→For more on drawing rectangles with rounded corners, seeSizing Shapes Precisely,” page 355 (Flash), in Chapter 16, “Working with Vector Graphics and Bitmaps”; and “Rounded Rectangle,” page 717 (Fireworks) in Chapter 25.

The Pen Tool

The Pen tool is an extremely powerful drawing tool. If you haven't used an illustration program before, the Pen tool will take some getting used to, particularly the way it draws curves. You'll be rewarded with precisely drawn curves and irregular shapes that cannot be achieved with any other tool.

The Pen tool draws by connecting anchor points. A straight line or curve connecting two anchor points is a segment. A path consists of one or more connected segments.

Select the Pen tool and move your mouse pointer onto the Stage. A small x appears to the right of the pen, as shown in Figure 3.15, indicating that you are placing the first anchor.

Figure 3.15. The Pen tool displays a small x as you place the first anchor point of a shape.

Drawing Straight Line Segments

To draw a straight line segment, just click and release, move the mouse, and click again. Shift+clicking draws vertical, horizontal, or diagonal (45°) lines. To end an open path, double-click the final anchor point, or select a different tool. You can also Cmd-click (Mac) or Ctrl+click (Windows) off the path. To end a closed path, hold the Pen over the first anchor point. A small dot appears to the right of the Pen, indicating that you can close the path, as shown in Figure 3.16. Then click just once.

Figure 3.16. The Pen tool displays a small circle if you are correctly positioned to close a path.

Drawing Curved Segments

The Pen tool creates Bezier curves, controlled by control handles, as shown in Figure 3.17. The length and angle of the control handles determine the shape of the curve.

Figure 3.17. The anatomy of a curve: two anchor points, each with two control handles.

One simple way to create a curve segment is to click and release at the point where you want the segment to start, move to the point where you want it to end, and click and drag. Whichever way you drag, the curve is created in the opposite direction. To create another curve on the same path, move again, and click and drag again. Or you could make the next segment a straight line by just clicking, rather than clicking and dragging. Points created by clicking are corner points and do not have control handles. Points created by clicking and dragging are curve points and do have control handles. To end the path, move off the path and Cmd-click (Mac) or Ctrl+click (Windows). To convert a corner point to a curve point, and create curvature in the straight line segments, select the point with the Subselection tool, and Option-click (Mac) or Alt+click (Windows) and drag. To convert a curve point to a corner point, click on the point with the Pen tool. Clicking on a corner point with the Pen tool deletes the point.

To close a curved path, just click on the initial anchor point, or else click on the initial anchor point and drag away from the curve, as shown in Figure 3.18.

Figure 3.18. Click on the initial anchor point and drag away from the curve to close a curved path.

Adjusting Anchor Points and Handles

The easiest way to work with the Pen tool is to complete a path and then move, add, and delete anchor points and adjust handles.

To adjust anchor points, you must first select them. Use the Subselection tool and click on a path to reveal the anchor points, as shown in Figure 3.19.

Figure 3.19. Click on a path with the Subselection tool to reveal anchor points.

If you click directly on an anchor, you both select that point and reveal all others in the path. If you click on a path but not directly on an anchor point, you simply reveal the anchor points in the path and must then click directly on one to select it. Shift+click additional anchor points to add them to the selection. You can then click directly on an anchor to reveal any control handles. Click and drag anchor points to move them, as shown in Figure 3.20. You can also select an anchor point and use the arrow keys to nudge it.

Figure 3.20. Click and drag a control handle to alter the shape of a curve.

You can also add anchor points. Position the Pen tool on the path. A small plus sign appears next to the Pen tool. Click to create the anchor point.

You can delete anchor points by selecting them with the Subselection tool and hitting the Delete key.

Adjusting Curved Segments

To adjust the size and angle of a curve without moving anchor points, use the Subselection tool to select the path, select the anchor point, and click and drag its control handles. Where two curved segments intersect, two control handles extend away from a common anchor point. Each handle controls a curve on either side of a common anchor point. Dragging one end of a double control handle changes the curves on both sides of the anchor point, which stays in place, as shown in Figure 3.21.

Figure 3.21. Dragging one end of a double control handle changes curves on both sides of the shared anchor point.

To adjust just the curved segment on just one side, rather than both, Option-drag (Mac) or Alt+drag (Windows) just one end of a double-control handle.

If a curve segment intersects a straight segment, you'll see a control handle just on the curve side of the anchor. Click and drag this handle with the Subselection tool to change the arc, or click and drag the anchor point to move the curve.

In Flash, you can also click and drag with the Selection tool to move segments. In Fireworks and FreeHand, clicking on a segment with the Selection tool selects the whole path, and dragging moves it.

Optimizing Curves

After you have created a curve, you can reduce the number of points that define it, keeping the same basic shape but smoothing it out. This is called optimizing or simplifying the curve. To do this in Fireworks and FreeHand, use Modify, Alter Path, Simplify. In Flash, use Modify, Shape, Optimize. You can set a slider to maximize or minimize optimization. In Fireworks and FreeHand, you can also set the optimization amount numerically. Flash gives you the option of running several smoothing passes in one operation.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint