Understanding when to use the Flash tools

Creating shapes and text

Modifying shapes and text

Working with colors

T his chapter shows you how to use the drawing and editing tools in

Macromedia Flash MX 2004 to create graphics and text. To produce

Great animation, you need great graphics, so read on.

Choosing When to Use the Macromedia Flash Tools

Book V, Chapter 1 explains the difference between vector and bitmap graph -

Ics. You should use the Macromedia Flash drawing tools when you want to

Create vector graphics for fast download times.

To create more detailed graphics, you may want to use Fireworks MX 2004

Or FreeHand MX, because they have more advanced creation and editing

Tools. You may also want to use these programs to edit existing bitmaps. On

The other hand, you may have bitmaps, such as a photograph or complex

Logo, that’s only available as a bitmap. To use any bitmap, import it. (See

Book V, Chapter 3 for the scoop on importing graphics.)

Creating Shapes and Text

You use the Tools panel to create shapes and text in Macromedia Flash. See

Figure 2-1 for the details of the Tools panel. The Tools section of the Tools

Panel offers many tools for creating and editing images. Most tools have

Options that specify how the tool works. Creating Shapes and Text 508

When creating shapes in Macromedia Flash, you need to keep in mind what

Happens when two or more shapes touch, as follows:

✦ If the shapes are the same color, they combine. You can use this tech -

Nique to create complex shapes.

✦ If the shapes are different colors, the top shape replaces and cuts out

The bottom shape.

✦ If you use the Pencil or Line tool to intersect any other shape, the line

And other shape are cut at their intersection.

If you don’t see the Tools panel, choose Window➪Tools to make it visible.

Line tool

The Line tool draws straight lines. You can continue to draw connected lines

To create any shape you want.

To draw a line, follow these steps:

1. Choose the Line tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a color by clicking the Stroke

Color box.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

Subselection tool

Lasso tool

Text tool

Rectangle tool

Brush tool

Fill Transform tool

Paint Bucket tool

Eraser tool

Zoom tool

Stoke color

Fill color

Swap colors

Arrow tool

Line tool

Pen tool

Oval tool

Pencil tool

Free Transform tool

Ink Bottle tool

Eyedropper tool

Hand tool

Black and white

Figure 2-1:

The Tools

Panel

Contains

Graphic

Creation and

Editing

Tools. Book V

Chapter 2

Using the

Graphics Tools

Creating Shapes and Text 509

You can also find the Stroke Color box in the Colors section of the Tools

Panel. A stroke is another word for a line or the outline of any shape in

Macromedia Flash.

3. Type a stroke weight (width) in the Stroke Height box of the

Properties panel, or click the arrow next to the point size box and

Use the vertical slider to choose a stroke weight.

4. Choose a stroke style from the Stroke Style box of the Properties

Panel.

To create a custom stroke style, click the Custom button in the

Properties panel.

5. Click the Stage where you want to start the line and drag (while hold -

Ing the mouse button down) to the ending point.

6. Release the mouse button.

To constrain the line to multiples of 45 degrees, press Shift while dragging.

Oval tool

An oval has both a stroke (outline) and a fill color. Use the Oval tool to draw

Ovals and circles, as follows:

1. Choose the Oval tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a stroke color by clicking the

Stroke Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Stroke Color box in the Colors section of the Tools

Panel. As with the Line tool, you can also set a stroke weight and style.

3. From the Properties panel, choose a fill color by clicking the Fill

Color box.

4. Click the Stage where you want the upper-left portion of the oval to

Be, and drag (while holding the mouse button down) diagonally to

The lower right.

5. Release the mouse button.

To create a circle, press Shift as you drag the mouse.

Rectangle tool

Like an oval, a rectangle has both a stroke and a fill. You can draw rectan -

Gles and squares with the Rectangle tool as follows:Creating Shapes and Text 510

1. Choose the Rectangle tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a stroke color by clicking the

Stroke Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Stroke Color box in the Colors section of the Tools

Panel. As with the Line tool, you can also set a stroke weight and style.

3. From the Properties panel, choose a fill color by clicking the Fill

Color box.

4. To draw a rectangle with rounded corners, click the Rounded

Rectangle Radius button (the button with the curved black line and

The little blue semi-square underneath it) in the Options section of the

Tools panel, type a radius, and press Enter.

The larger the number entered in the Corner Radius field, the softer the

Curve in the rectangle’s edges.

5. Click the Stage where you want the upper-left corner of the rectangle

To be, and drag (while holding the mouse button down) diagonally to

The lower right.

6. Release the mouse button.

To create a square, press Shift as you drag the mouse.

Polystar tool

In addition to the Rectangle tool, Macromedia Flash MX 2004 includes a tool

For creating other kinds of polygons. To use the Polystar tool, follow these

Steps:

1. Click and hold down the Rectangle button in the Tools section of the

Tools panel.

2. Select the Polystar icon from the menu that appears.

3. In the Properties panel, click the Options button.

This opens the Tool Settings dialog box, as shown in Figure 2-2.

4. Select a style of polygon from the Style drop-down list.

The Polygon option creates a true polygon, while the Polystar option

Creates a multipointed star. Book V

Chapter 2

Using the

Graphics Tools

Creating Shapes and Text 511

5. Enter the number of sides for the polygon or polystar.

The larger the number of sides, the closer to a circle a polygon will be.

For the polystar, more points creates a starburst-like effect.

6. Enter a value for the star point size.

The larger the star point size, the more dull the polystar will be, making

It look closer to a circle.

Pencil tool

The Pencil tool is somewhat like a real pencil. You can draw artistic shapes

With it. To draw with the Pencil tool, follow these steps:

1. Choose the Pencil tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a stroke color by clicking the

Stroke Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Stroke Color box in the Colors section of the Tools

Panel. As with the Line tool, you can also set a stroke weight and style.

3. Click the Pencil Mode button in the Options section of the Tools

Panel, and from the pop-up menu, choose one of the following:

• Straighten: Straightens wiggly lines and changes sloppy rectangles,

Ovals, and triangles to perfect ones.

• Smooth: Smoothes out curved lines.

• Ink: Slightly smoothes and straightens, but mostly leaves your draw -

Ings the same.

Figure 2-2:

The Tool

Settings

Dialog box

Allows you

To customize

The look of

Your

Polygon. Creating Shapes and Text 512

4. Click the Stage where you want the drawing to start and drag on the

Stage.

You can draw angles and curves.

5. Release the mouse button.

To constrain each line segment to 90-degree angles, press Shift as you drag

The mouse. To refine how the options work, choose Edit➪Preferences and

Click the Editing tab. Use the Smooth Curves and Recognize Shapes drop -

Down lists. When you’re done, click OK.

Pen tool

You can use the Pen tool to draw straight lines and curves. The Pen tool

Offers the greatest editing control and the most control over curves. Using

The Pen tool takes some practice, but soon you’ll find it to be very flexible.

To better see how a Pen tool drawing will look, choose Edit➪Preferences

And click the Editing tab. Select the Show Pen Preview check box. Click OK.

Follow these steps to work with the Pen tool:

1. Choose the Pen tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a stroke color by clicking the

Stroke Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Stroke Color box in the Colors section of the Tools

Panel. As with the Line tool, you can set a stroke weight and style.

3. You can draw either straight segments or curves, as follows:

• To draw a straight segment: Click the start point, and click the end

Point. Do not drag. Click additional points to add segments. Double -

Click to finish.

• To draw a curve: Click the start point and move the mouse in the

Desired direction; then click and drag in the direction of the curve.

Continue clicking and dragging to create additional curves. Double -

Click to finish.

To close a figure, place the cursor near the start point until you see a small

Circle, and then click. Press Shift as you draw to constrain the lines or

Curves to 45-degree angles. Book V

Chapter 2

Using the

Graphics Tools

Creating Shapes and Text 513

Brush tool

The Brush tool fills areas with a brush-like effect. You can vary the shape

And width of the stroke. The Brush tool creates fills, so you use the Fill Color

Button to set the color. To draw with the Brush tool, follow these steps:

1. Choose the Brush tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a fill color by clicking the Fill

Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Fill Color box in the Colors section of the Tools

Panel.

3. Choose a brush mode by clicking the Brush Mode button in the

Options section of the Tools panel and choosing one of the following

Options:

• Paint Normal: Paints wherever you brush, including over other

Objects on the same layer. (See Book V, Chapter 4 for more details on

Layers.)

• Paint Fills: Fills enclosed and blank areas, but doesn’t cover strokes.

• Paint Behind: Paints blank areas of the Stage, but doesn’t cover fills

Or strokes.

• Paint Selection: Fills in a selected area.

• Paint Inside: Paints inside any enclosed area where you start your

Brush or on the Stage if you don’t start in an enclosed area. Doesn’t

Cover strokes.

4. Choose a brush size by clicking the Brush Size drop-down list in the

Options section of the Tools panel.

5. Choose a brush shape by clicking the Brush Shape drop-down list.

If you have a pressure-sensitive pen and tablet, you see a pressure

Button in the Options section. You can then dynamically vary the width

Of the brush according to how much pressure you put on the pen as you

Draw.

6. Click the start point, and then drag to draw with the brush.

Press Shift as you draw to constrain your shapes to 90-degree angles. Creating Shapes and Text 514

If you want your gradient fill to be independent of the background, make

Sure that the Lock Fill option button is not selected. If, however, you’re cre -

Ating more than one stroke and you want it to appear as if the gradient is in

The background and being applied to both strokes, select the Lock Fill

Option button.

Paint Bucket tool

The Paint Bucket tool fills enclosed shapes. You can create the enclosed

Shape with many of the other tools in the Tools panel. You can also use the

Paint Bucket tool to change the color of existing fills. To fill an enclosed

Area, follow these steps:

1. Choose the Paint Bucket tool from the Tools section of the Tools

Panel.

2. From the Properties panel, choose a fill color by clicking the Fill

Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Fill Color box in the Colors section of the Tools

Panel.

3. Click the Gap Size button in the Options section of the Tools panel,

And from the pop-up menu, select an option if you need to fill in a

Shape that is not completely enclosed.

You can choose from Don’t Close Gaps to Close Large Gaps.

4. Click inside the enclosed area to fill the shape.

Ink Bottle tool

The Ink Bottle tool outlines an existing shape or changes the color of an

Existing stroke (outline). Follow these steps to use the Ink Bottle tool:

1. Select the Ink Bottle tool from the Tools section of the Tools panel.

2. From the Properties panel, choose a stroke color by clicking the

Stroke Color box and choosing a color.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

You can also find the Stroke Color box in the Colors section of the Tools

Panel. You can set a stroke weight and style as well. Book V

Chapter 2

Using the

Graphics Tools

Creating Shapes and Text 515

3. Click anywhere on the shape.

If the shape has no stroke outline, Macromedia Flash adds a stroke.

Otherwise, Macromedia Flash changes the shape’s color, width, and

Style to the settings that you choose.

Text tool

Sooner or later, you may need to explain what all those animations you have

Created mean, so you’ll probably need some text. Macromedia Flash offers

Many text options, both simple and advanced. To create text, follow these

Steps:

1. Choose the Text tool from the Tools section of the Tools panel.

2. In the Properties panel, shown in Figure 2-3, specify the font, size,

Color, and other properties.

If the Properties panel is not visible, choose Window➪Properties to

Make it appear.

3. Click the Stage and start typing, as follows:

• To specify the width of the text (when creating a paragraph), click at

The upper-left corner where you want the text to start and drag to

The right margin.

• To create text that expands as you type (for a single line of text), just

Click.

You can specify the following text properties in the Properties panel:

✦ Text type: Use the Text Type drop-down list to specify one of the follow -

Ing types of text:

• Static: Regular text.

• Input: Text that users type in their browser. Input text is one way of

Making your Web site interactive. Use input text for forms or to

Enable users to set values that affect the animation.

Figure 2-3:

Use the

Properties

Panel to

Set the

Properties

Of your text. Modifying Shapes and Text 516

• Dynamic: Text that is displayed from another source, such as

Another Web site, another movie (SWF) file, or an external file. This

Is great for weather, sports scores, and so on.

✦ Font: The font or typeface. Select from the drop-down list.

✦ Font size: Type a number or use the vertical slider to choose a size.

✦ Color: Click the Text (fill) Color box to choose a color.

✦ Bold/Italic: Click the Bold button or the Italic button to make the text

Bold or italic.

✦ Justify: Click one of the Justify buttons to make the text justified to the

Left, center, or right, or full justified (justified to reach both the left and

Right margins).

✦ Character spacing: Adjust the tracking, which is the spacing between a

Series of letters.

✦ Character position: Select Superscript to create text above the normal

Position or Subscript to create text that is below the normal position.

For normal text, just keep it at Normal.

✦ Auto Kern: Kerning is the spacing between two specific letters. You may

Adjust the kerning of certain letters, such as A and V, that appear to be

Too far apart. Select the Auto Kern check box to turn kerning on; dese -

Lect it to turn kerning off.

✦ Aliasing: By default, all text is aliased, or smoothed. If you want the text

To appear anti-aliased, or jagged, click this button.

✦ Format: Click the Format button to open the Format Options dialog box,

Where you can set paragraph formatting, as follows:

• Indent: The indentation of the first line of a paragraph.

• Line Spacing: The spacing between lines, measured in points. If your

Text is 18 points, for example, set a line spacing of 18 points to

Double-space the text.

Click the Expand/Collapse arrow at the lower-right corner of the Properties

Panel for more advanced text options.

Modifying Shapes and Text

If you create something on a computer, you’ll inevitably have to change it.

Sometimes you change your mind, and other times you just need to make

Adjustments to get the effect that you want. Book V

Chapter 2

Using the

Graphics Tools

Modifying Shapes and Text 517

Selection tool

The first step in changing an object is to select it. To select an object or

Group of objects, choose the Selection tool (the dark arrow at the top left of

The Tools panel) and use one of the following techniques:

✦ To select one object, click the object.

✦ To select several graphic objects that touch each other, double-click

One of the objects. (This doesn’t work with symbols. See Book V,

Chapter 3 for more about symbols.) To select a rectangle’s stroke and

Fill, double-click the fill.

✦ To select several objects that do not touch, click away from the objects

And drag diagonally to create a bounding box around the objects that

You want to select. Macromedia Flash selects all objects that are com -

Pletely inside the box.

See the section, “Reshaping with the Selection tool,” later in this chapter, for

Information on reshaping objects using the Selection tool.

The Selection tool has a Snap button in the Options section of the Tools

Panel. When you click this button, objects that you move snap to other

Objects so that you can attach two objects precisely. The Snap option also

Snaps new objects that you create to existing objects.

Lasso tool

Another way to select your objects is to lasso ’em. Use the Lasso tool when

You want to select a number of objects but can’t get them in a rectangular

Bounding box. You can drag the mouse and create a free-form shape or use

Straight-line segments, as follows:

1. Choose the Lasso tool from the Tools panel.

2. Choose the type of lassoing you want, as follows:

• To lasso free-form: Click anywhere on the Stage, drag around the

Objects that you want to select, and then release the mouse button.

• To lasso with straight-line segments: Choose the Polygon button

From the Options section of the Tools panel. Click anywhere on the

Stage, and continue to click at each segment’s end point. Double -

Click to finish.

Moving and copying objects

You can move and copy objects on the Stage in many ways. The best

Method varies with the circumstances and your personal preferences. Move

And copy objects using the following methods:Modifying Shapes and Text 518

✦ Select and drag: Use the Selection tool to select an object. Then move

The cursor over the object until you see the four-arrow cursor. Click and

Drag to move the object. Press and hold Ctrl while you drag to copy the

Object.

✦ Arrow keys: Select an object and use the arrow keys to move the object

One pixel at a time in the direction of the arrow.

✦ Properties panel: Select an object and open the Properties panel.

Click the Expand/Collapse arrow at the lower-right corner to display

The expanded panel. Use the X and Y text fields to set a new location

For the object.

✦ Cut, copy, and paste: Select an object; then press Ctrl+X to move (cut)

It or Ctrl+C to copy it. If you want, click another layer or frame. Then

Press Ctrl+V to paste the object.

Eraser tool

To delete any object, select it and press Delete. However, to erase part of an

Object, use the Eraser tool, as follows:

1. Choose the Eraser tool from the Tools panel.

2. Select the eraser size and shape from the Eraser Shape pop-up menu

In the Options section of the Tools panel.

3. To specify how the Eraser tool works, choose an option from the

Eraser Mode pop-up menu:

• Erase Normal: Erases anything that you drag across.

• Erase Fills: Erases only fills.

• Erase Lines: Erases only strokes.

• Erase Selected Fills: Erases only selected fills.

• Erase Inside: Erases only fills where you first click. Use this option

To erase only fills inside an enclosed area, but leave other fills alone.

4. With the Faucet option (in the Options section of the Tools panel)

Deselected, click and drag to erase.

To erase an entire fill, select the Faucet option (in the Options section of the

Tools panel) and click the fill. This method is equivalent to selecting a fill

And pressing Delete, as if the faucet washed away all the color.

Reshaping with the Selection tool

You can reshape and modify objects using the Selection tool when the objects

Are not selected. You can reshape both end points (including corners) and

Middles (whether straight or curved), as shown in Figure 2-4, as follows:Book V

Chapter 2

Using the

Graphics Tools

Modifying Shapes and Text 519

✦ End points: Place the cursor over the end point of a line or curve seg -

Ment. You see a small corner shape near the cursor. Click and drag to

Change the location of the end point.

✦ Middles: Place the cursor over the middle of any line or curve segment.

You see a small curved shape near the cursor. Click and drag to reshape

The segment.

Subselect tool

The Subselect tool looks like the Selection tool, but the Subselect tool is a

White (instead of black) arrow. Both the Selection tool and the Subselect

Tool reshape objects, but the Subselect tool uses a more sophisticated tech -

Nique. When you are using the Subselect tool, the shape displays anchor

Points that you can move or delete. When you click an anchor point, tangent

Lines — lines that are parallel to the curve at the anchor point — appear and

Enable you to change the direction of the curve. You can reshape strokes or

Fills that were created with the following tools:

✦ Pen ✦ Oval

✦ Pencil ✦ Rectangle

✦ Line ✦ Brush

To reshape objects with the Subselect tool, follow these steps:

1. Choose the Subselect tool from the Tools panel.

2. Click a stroke or the edge of a fill to display the anchor points.

3. Drag any anchor point to modify the shape.

4. To change the direction of a curve, select its anchor curve and then

Drag the tangent line’s handles (the dots at either end of the tangent

Line).

Figure 2-4:

Reshape

End points

And middles

Of fills

And lines

With the

Selection

Tool. Modifying Shapes and Text 520

To delete an anchor, select the object and then click the desired anchor

Point. The anchor point then turns dark. Then press Delete.

Free Transform tool

The Free Transform tool is the heavyweight of editing tools — it can

Do almost anything. To use this tool, choose the Free Transform tool

From the Tools panel and select an object. The object displays a special

Bounding box that includes handles and a central transformation point, as

Shown in Figure 2-5.

You can use the Free Transform tool in the following ways:

✦ Move: Place the cursor over the object. When you see the four-arrow

Cursor, click and drag.

✦ Rotate: Place the cursor just outside (but not on) any corner handle.

When you see a circular arrow cursor, click and drag.

✦ Scale while maintaining proportion: Place the cursor on any corner

Handle. When you see a broken two-arrow cursor, click and drag inward

Or outward.

✦ Scale either the height or width: Place the cursor on any side handle.

When you see a two-arrow cursor, click and drag inward or outward.

✦ Skew (slant either horizontally or vertically): Place the cursor any -

Where on the bounding box, but not on a handle. When you see the par -

Allel line cursor, click and drag in any direction.

✦ Move the transformation point: Place the cursor on the transformation

Point at the center of the bounding box. When you see a small circle

Cursor, click and drag in any direction. The transformation point is used

As a base for rotation and scaling.

Figure 2-5:

The

Bounding

Box of

The Free

Transform

Tool. Book V

Chapter 2

Using the

Graphics Tools

Modifying Shapes and Text 521

✦ Taper: Choose the Distort option of the Free Transform tool from the

Options section of the Tools panel. Place the cursor on any corner

Handle, and press Shift as you click and drag inward or outward. (See

Figure 2-6 for an example of tapering.)

✦ Distort: Choose the Distort option of the Free Transform tool from the

Options section of the Tools panel. Click and drag any handle to distort

The bounding box. (See Figure 2-7 for an example of distortion.) Note:

The Distort option works on shapes, but not on symbols (see Book V,

Chapter 3 for more on symbols), text, or groups. (Groups are explained

In the “Grouping” section, later in this chapter.)

✦ Warp: Choose the Envelope option of the Free Transform tool from the

Options section of the Tools panel. Drag any anchor point or tangent

Line handle to warp the bounding box.

Figure 2-7:

Distort the

Upper-right

Corner of

The goldfish,

And it looks

More like a

Shark.

Figure 2-6:

Tapering the

Fish makes

Its back end

Wider. Modifying Shapes and Text 522

The Envelope option, shown in Figure 2-8, works on shapes, but not on sym -

Bols, text, or groups.

When you select an object — for example, a circle — with the Free

Transform tool, you’ll notice that the tool selects the object, but not the

Stroke around the object. To select both the object and its stroke, click the

Free Transform tool and drag it around the entire object. This creates one

Bounding box for both the fill and the stroke.

Straightening and smoothing with the Selection tool

You can straighten lines and smooth curves with the Selection tool. Both

Processes reduce the number of changes in direction. You can repeat the

Process until Macromedia Flash can’t straighten or smooth anymore. Follow

These steps to straighten lines and smooth curves:

1. Choose the Selection tool from the Tools panel.

2. Select the shape that you want to modify.

3. To straighten, click the Straighten button from the Options section of

The Tools panel. To smooth, click the Smooth button.

4. Continue to click the Straighten or Smooth button until you like the

Result.

Optimizing curves

A process called optimizing curves is similar to smoothing curves.

Optimizing a curve reduces the number of individual elements that the

Curve contains and can help reduce the size of your Flash document file.

Follow these steps to optimize curves:

Figure 2-8:

Fine-tune

Shapes

Using the

Envelope

Option of

The Free

Transform

Tool. Book V

Chapter 2

Using the

Graphics Tools

Modifying Shapes and Text 523

1. Choose the Selection tool from the Tools panel.

2. Using the Selection tool, select the object that you want to optimize.

3. Choose Modify➪Shape➪Optimize.

The Optimize Curves dialog box appears, as shown in Figure 2-9. You

Can select Use Multiple Passes for a slower, more thorough approach. If

You select the Show Totals Message check box, the amount of optimiza -

Tion displays after you close the dialog box.

4. Choose the amount of smoothing by using the slider in the dialog

Box.

5. Click OK.

Carefully check the results after optimizing. Sometimes small objects disap -

Pear! If you don’t like the results, choose Edit➪Undo and try again with a dif -

Ferent Smoothing setting.

Softening edges

To create a soft look around the edges of a shape, follow these steps:

1. Choose the Selection tool from the Tools panel.

2. Using the Selection tool, select a shape.

3. Choose Modify➪Shape➪Soften Fill Edges.

The Soften Fill Edges dialog box opens, as shown in Figure 2-10.

Figure 2-10:

The Soften

Fill Edges

Dialog box.

Figure 2-9:

The

Optimize

Curves

Dialog box. Modifying Shapes and Text 524

4. In the Soften Fill Edges dialog box, set the distance.

The distance is the width of the softened part of the edge, in pixels (by

Default).

Macromedia Flash uses the units that you set in the Document

Properties dialog box to measure the distance. Choose

Modify➪Document to change the measurement units.

5. Enter the number of steps, that is, the number of concentric rows in

The softened edge.

6. Select Expand or Inset.

The Expand option creates the softened edges outside the shape. The

Inset option creates the softened edges within the shape.

7. Click OK.

Flipping

A great way to make symmetric shapes is to draw half the shape, copy it, and

Flip the copy either vertically or horizontally. You can then move the two

Shapes together, as shown in Figure 2-11. To flip an object, follow these steps:

1. Choose the Selection tool from the Tools panel.

2. Using the Selection tool, select the object.

3. Choose Modify➪Transform➪Flip Vertical or Flip Horizontal.

Transferring properties with the Eyedropper tool

The Eyedropper tool transfers stroke and fill properties from one object to

Another. To transfer properties, follow these steps:

Figure 2-11:

Create this

Shape by

Copying the

Crescent,

Flipping it

Horizontally,

And then

Moving the

Two shapes

Together. Book V

Chapter 2

Using the

Graphics Tools

Modifying Shapes and Text 525

1. Choose the Eyedropper tool from the Tools panel.

2. Select a stroke or fill.

If you select a stroke, the Ink Bottle tool is activated. If you select a fill,

The Paint Bucket tool is activated.

3. Click another stroke or fill.

Macromedia Flash transfers the properties of the stroke or fill to the

Second object.

Grouping

You often want to work with several objects at one time. Instead of having to

Select all the objects each time you want to move or copy them, you can

Group them and work with them as one object. To group objects, select

Them and choose Modify➪Group.

You can edit one element of the group by following these steps:

1. Choose the Selection tool from the Tools panel.

2. Double-click the group.

Macromedia Flash dims other objects on the Stage.

3. Edit any element of the group.

4. To return to regular editing, double-click any blank area on the Stage

With the Selection tool.

Alternatively, you can choose Edit➪Edit All.

To ungroup objects, select the group and choose Modify➪Ungroup.

Breaking objects apart

You can break apart text into letters, and then break apart the letters into

Shapes. After letters are broken apart into shapes, you can edit them like

Any other shape. You can also break apart symbols (see Book V, Chapter 3),

Groups, and bitmaps. (See the section, “Working with bitmap fills,” later in

This chapter, for more information.)

Aligning objects

To get a professional look, you may want to make sure that objects are prop -

Erly aligned and equally distributed. To align and distribute objects, follow

These steps:Working with Colors 526

1. Choose the Selection tool from the Tools panel.

2. Using the Selection tool, select the objects.

3. Choose Window➪Align.

The Align panel, shown in Figure 2-12, appears.

4. Choose the options that you want in the Align panel, as follows:

• Use the top row to align the selected objects horizontally or vertically.

• Use the middle row to evenly distribute objects horizontally or verti -

Cally by their edges.

• Use the Match Size buttons to match the size of selected objects by

Width, height, or both.

• Use the Space buttons to distribute objects by the spaces between

Them.

• Use the To Stage button to align or distribute objects relative to the

Stage.

To center an object on the Stage, click the To Stage button on the Align

Panel. Then click the middle Align Vertical and Align Horizontal buttons.

However, if you haven’t panned or scrolled your display, you can use a

Quicker method — cut and paste the object. Macromedia Flash pastes the

Object at the center of the display.

Working with Colors

By default, Macromedia Flash works with a Web safe palette of 216 colors.

These colors are likely to appear the same in all browsers. However, you can

Figure 2-12:

Use the

Align panel

To align and

Equally

Space

Objects,

Such as

Buttons for

Your Web

Site. Book V

Chapter 2

Using the

Graphics Tools

Working with Colors 527

Create your own colors. You can also design gradients that vary from one

Color to another. Another technique is to fill objects with bitmap images.

This is explained in the “Working with bitmap fills” section, later in this

Chapter.

Creating solid colors

You can create a solid color when you need to take more artistic license

Than the standard Web safe palette allows. Follow these steps to create a

Solid color:

1. Choose Window➪Design Panels➪Color Mixer.

The Color Mixer panel, shown in Figure 2-13 with the Solid option active,

Opens.

You can specify colors using the RGB (Red, Green, Blue) or HSB (Hue,

Saturation, Brightness) systems. You can see the current system by the

Letters that are next to the text fields in the panel. In Figure 2-13, you can

Tell that the RGB system is active because the text fields are labeled R,

G, and B. To choose a different system, click the menu icon in the upper -

Right corner of the panel to open the panel’s Options menu and choose

The color system that you want. You can also use the color space in the

Panel to specify a color.

2. Select Solid from the Fill Style drop-down list.

3. Click the Stroke Color or Fill Color icon (to the left of the Stroke or

Fill box), depending on whether you want to change a stroke or a fill.

You can use this color later for either a stroke or a fill if you save the

Color as a swatch, as outlined in Step 6.

4. Type the color specifications in the text fields, or click a color in the

Color space and use the slider to make the color lighter or darker.

Figure 2-13:

The Color

Mixer panel

Is the place

To create

New colors. Working with Colors 528

5. Use the vertical slider next to the Alpha field or text field to set the

Transparency of the color.

A higher alpha percent is more opaque.

6. To save the color, create a color swatch by clicking the Options menu

Icon in the upper-right corner of the panel and choosing Add Swatch.

Your new color is now displayed in the Stroke Color or Fill Color box in the

Properties panel and in the Colors section of the Tools panel. You can use

Any of the tools to work with that color. If you add a color swatch, you can

Continue to use that color later by choosing it from the color palette that

Opens when you click the Stroke Color or Fill Color box.

Creating gradients

Gradients blend one color (lighter with darker) or many colors in either a

Linear or radial (circular) pattern. Gradients give the appearance of shading

And three dimensions. To create a gradient, follow these steps:

1. Choose Window➪Design Panels➪Color Mixer.

The Color Mixer panel opens.

2. From the Fill Style drop-down list, select Linear or Radial to specify

The type of gradient that you want to create, as shown in Figure 2-14.

3. Choose a pointer underneath the horizontal gradient bar.

The pointer becomes black when you select it so that you know it is

Active.

4. Use one of the following methods to select a color for that pointer:

• Click the Fill Color box and choose a color.

• Specify a color using one of the methods of creating a new color that

Were described in the previous section.

• Use the color space to specify a color.

Figure 2-14:

Use the

Color Mixer

Panel to

Create

Gradients. Book V

Chapter 2

Using the

Graphics Tools

Working with Colors 529

5. Repeat Steps 3 and 4 for all the pointers.

You add a pointer when you want to add a new color to the gradient.

Three pointers result in a three-color gradient. To add a pointer, click

Just beneath the gradient bar where you want the pointer to appear. To

Delete a pointer, drag it off the gradient bar.

6. To save the gradient, click the menu icon in the upper-right corner of

The Color Mixer panel and choose Add Swatch from the Options menu

That appears.

Editing fills

After you create your gradient or bitmap fills, you may decide that you want

To change them. (Bitmap fills are explained in the next section.) To edit a fill,

Follow these steps:

1. Choose the Fill Transform tool from the Tools panel.

2. Click a gradient or bitmap fill.

Macromedia Flash places a boundary and editing handles around the

Fill, which varies with the type of fill, as shown in Figure 2-15.

3. Make one or more of the following changes:

• Move the fill’s center: Drag the small circle at the center of the fill.

• Change the fill’s width or height: Drag the square handle inward or

Outward.

• Rotate a fill: Drag the circle on the editing boundary (the endmost

Circle for a radial gradient).

• Scale a bitmap fill: Drag the corner square boundary inward or

Outward.

Figure 2-15:

When you

Edit a fill,

You see

An editing

Boundary

Around

The fill. Working with Colors 530

• Scale a radial gradient: Drag the middle circular handle on the edit -

Ing boundary inward or outward.

• Skew a bitmap fill: Drag a circular handle on the top or side.

Working with bitmap fills

You can create a fill with a bitmap that you have imported. (See Book V,

Chapter 3 for more on importing bitmaps.) To create a fill with a bitmap

Image, follow these steps:

1. Choose File➪Import.

The Import dialog box appears.

2. Choose the bitmap file that you want, and click Open.

The bitmap appears on the Stage.

3. Choose Modify➪Break Apart.

This action selects the entire image as a fill rather than as a single color

When the eyedropper is used (in the next step).

4. Choose the Eyedropper tool from the Tools section of the Tools panel.

5. Click the bitmap image.

The Paint Bucket tool is activated, and the Fill Color button (in the

Colors section of the Tools panel and in the Properties panel) displays

The bitmap image.

6. Click the object that you want to fill.

You may have to move the bitmap image that you imported if it covered

Your object. Notice that the bitmap is tiled — that is, repeated through -

Out the filled area.

Working with color

Creating a color palette

Mixing a color

Using the Eyedropper tool

Modifying strokes and fills

W hen you create a FreeHand MX illustration, you can work with as

Much or as little color as you want. You can use color sparingly if

You’re creating an illustration for the Web, or you can use lots of color if

You’re creating illustrations for print. FreeHand gives you a wide variety of

Color tools to work with. You can mix colors, create color palettes, load

Color palettes, and more. If you like bright, vibrant objects that look three

Dimensional in your illustrations, you can use the Fill options in the Objects

Tab of the Properties panel to create a gradient fill (a gradual transition

Between two or more colors).

In this chapter, we show you how to use the FreeHand color tools to add

Vibrancy to every illustration you create. We explain how to work with the

Different color models to mix up colors, as well as how to use the Swatches

Tab of the Assets panel to create a color palette for your document. If you

Prefer to stick with a given color, but want lighter variations of it, we detail

How to do this with the Tints tab of the Mixer and Tints panel.

Before you begin creating an illustration, consider its final destination. Are

You creating an illustration for print or for the Web? If you’re creating an

Illustration for print, choose colors from the CMYK palette. If you are having

A service center print the illustration, find out what system they use for

Color matching and choose all your colors from that color system. We show

You how to choose from a color system in the section, “Using the Swatches

Tab of the Assets Panel.”

If you’re creating an illustration for viewing on a computer, use colors from

The RGB color model. If you’re creating a document for Web viewing, remem -

Ber the old Zen maxim: Less is more. If your viewing audience accesses the

Internet using dial-up modems, the fewer colors you use, the smaller the file

Size, and thus the quicker the download time. Using the Mixer Tab 450

Using the Mixer Tab

You use the Mixer tab of the Mixer and Tints panel to mix up any color of the

Rainbow for your objects. You can mix a color using one of three color

Models, or you can use the System Color Picker to add a splash of color to

Your illustration (Mac users can select colors from Crayons, a Spectrum, and

More). The neat thing about the Mixer tab is that you’re dealing with values.

If you have a set of values for a color (say that lovely chartreuse your client

Uses for a logo), you can match that color exactly by entering the values in

The appropriate section of the Mixer tab. In the next few sections, we explain

How to use each color model to mix up a shade of chartreuse, or whatever

Other color you fancy for your illustration. To open the Mixer tab, shown in

Figure 6-1, choose Window➪Color Mixer or press Shift+F9.

After mixing a color, you can apply it to an object or add it to the Swatches

Tab of the Assets panel. We cover these colorful tasks in the upcoming sec -

Tion, “Working with the Mixer Tab.”

Mixing a CMYK color

When you mix a color using the CMYK color model, you mix percentages of

Cyan, Magenta, Yellow, and blacK. If your document is destined for print,

This is the color model you should choose. Follow these steps to mix a color

Using the CMYK color model:

1. Choose Window➪Color Mixer or press Shift+F9.

The Mixer and Tints panel, previously shown in Figure 6-1, opens.

CMYK

Add to swatches

Change attribute color

System Color Picker

HLS

RGB

Figure 6-1:

You can mix

A color

Using one of

The three

Color

Models. Book IV

Chapter 6

Exploring the Color

Management Tools

Using the Mixer Tab 451

2. Click the CMYK button, which is the top button.

The Mixer tab goes into CMYK mode.

3. Drag the sliders to mix the color.

As you drag the sliders, the color swatch on the right side at the bottom

Of the panel changes to reflect the current values, as shown in Figure

6-2. The values in each field update as well. Alternatively, you can enter

Known values in each field to match a known color, or click the arrows

To increment the values.

Mixing an RGB color

When you create illustrations that will be displayed on a Web site or as part

Of a CD-ROM presentation, you use the RGB (Red, Green, Blue) color model.

You have 256 values (values from 0 to 255) of each color to work with. For

Example, if you create an RGB color with the following values (R=255, G=0,

B=0), you get bright red; the following values yield bright blue (R=0, G=0,

B=255), the values for black are (R=0, G=0, B=0), and so on. When you com -

Bine the possible permutations, you end up with millions of colors. To mix

An RGB color, follow these steps:

1. Choose Window➪Color Mixer or press Shift+F9.

The Mixer and Tints panel opens to show the Mixer tab (refer to

Figure 6-1).

2. Click the RGB button, which is the second one from the top in the

Panel.

The Mixer tab is reconfigured, as shown in Figure 6-3.

Color component values

Original color

Color value sliders

Mixed color

Figure 6-2:

CMYK color:

A little dab’ll

Do ya. Using the Mixer Tab 452

3. Drag the sliders to mix the color.

As you drag the sliders, the color swatch on the right side at the bottom

Of the panel changes to reflect the current values. The values in each

Field also update. Alternatively, you can enter values in the text fields,

Which by the by, is the proper way to match a known color value.

Mixing an HLS color

FreeHand uses HLS (Hue, Lightness, Saturation) color; you may see this

Color model referred to as HSB (Hue, Saturation, Brightness) in other pro -

Grams. When you mix a color using the HLS color model, you choose a hue,

Specify the lightness of the color, and how saturated the color is. The HLS

Model is actually a color wheel. The hue is a value between 0 and 360

Degrees. Values for light and saturation vary between 0 and 100. To mix an

HLS color, follow these steps:

1. Choose Window➪Color Mixer or press Shift+F9.

The Mixer and Tints panel opens with the Mixer tab selected (refer to

Figure 6-1).

2. Click the HLS button, which is the third one from the top in the panel.

The Mixer tab is reconfigured, as shown in Figure 6-4.

3. Click inside the color wheel and drag to select a hue.

As you drag, the color swatch at the bottom of the panel changes to

Reflect the color your cursor is currently over. The values in the Hue and

Saturation fields update as well.

Color component values

Original color

Color value sliders

Mixed color

Figure 6-3:

A dash of

Red, green,

And blue. Book IV

Chapter 6

Exploring the Color

Management Tools

Using the Mixer Tab 453

4. Drag the slider to select a value for Lightness.

The values vary from 0 (black) to 100 (white). Alternatively, you can

Enter a value in the Lightness field.

5. To specify saturation, enter a value in the Saturation field.

You can enter a value between 0 and 100. Low values create a grayer

Variation of the color; higher values increase saturation, creating a more

Vibrant color. Alternatively, you can drag the point in the color wheel,

Towards the center to decrease saturation, or away from the center to

Increase saturation.

After you mix up a color, click the button for another color mode to see the

Component values for the new color in that color mode.

Mixing a color from the System Color Picker

Your operating system uses specific colors to display the icons, buttons,

And text of the software you use. You can use a color from the System Color

Picker in your FreeHand illustrations (Mac users can choose a color from

Crayons, a Spectrum, Grayscale, CMYK, RGB, HSB, Web-safe colors, and

More). To mix a color from the System Color Picker, follow these steps:

1. Choose Window➪Color Mixer or press Shift+F9.

The Mixer and Tints panel opens to show the Mixer tab (refer to

Figure 6-1).

2. Click the System Color Picker button, which is the fourth one from

The top in the panel.

The Color dialog box opens, as shown in Figure 6-5.

HLS color wheel

Original color

Color component values

Mixed color

Figure 6-4:

You can mix

Colors form

The HLS

Color wheel. Working with the Mixer Tab 454

3. Click a color to select it.

Half of the bar at the bottom of the Mixer tab of the Mixer and Tints

Panel refreshes to show the color you select. The component values for

The color are displayed in the text fields for the color mode you choose.

If you want to see the values for the color in CMYK, RGB, or HLS, click

The appropriate button on the Mixer tab.

Working with the Mixer Tab

After you use the Mixer tab to mix the perfect hue, you can apply it directly

To an object, use it for the current fill color, or add it to the Swatches tab of

The Assets panel. We show you how to use the Swatches tab of the Assets

Panel to create a color palette in the upcoming section, “Using the Swatches

Tab of the Assets Panel.”

Using the Mixer tab to apply color to an object

When you mix a color with the Mixer tab, you can apply it directly to the

Stroke or fill of an object in your document. To apply a color from the Mixer

Tab to an object, follow these steps:

1. Click the swatch shown in the right half of the rectangular bar at the

Bottom of the Mixer tab.

A square appears at the end of your cursor.

2. While holding down the mouse button, drag toward the object you

Want to apply the color to.

3. Release the mouse button when your cursor is over the stroke or fill

Of the object, whichever you want to change.

The color is applied to stroke or fill of the object.

Figure 6-5:

You can

Choose a

Color from

The System

Color

Picker. Book IV

Chapter 6

Exploring the Color

Management Tools

Working with the Mixer Tab 455

Using the Mixer tab to change

The current fill or stroke color

If you’re getting ready to create several objects and you want to use the same

Stroke or fill color on these objects, you can replace the current stroke or fill

Color with one you mix in the Mixer tab and create away. To use a color

Mixed in the Mixer tab as the current fill or stroke color, follow these steps:

1. Click the swatch shown in the right half of the rectangular bar at the

Bottom of the Mixer tab.

A square appears at the end of your cursor.

2. While holding down the mouse button, drag towards the Fill or

Stroke color box.

You can find these boxes in the Colors section of the Tools panel.

3. Release the mouse button when your cursor is over the Fill or Stroke

Color box.

The swatch in the Fill color box or Stroke color box changes to the color

You mixed in the Mixer tab. If you have an object in the document

Selected, its fill or stroke color changes as well.

Adding a color to the Swatches

Tab of the Assets panel

If you mix a color you’re going to use repeatedly in the document, you can

Add it to the Swatches tab. To add a color from the Mixer tab to the

Swatches tab of the Assets panel, follow these steps:

1. Choose Window➪Color Mixer or press Shift+F9.

The Mixer and Tints panel opens.

2. Mix a color.

If you don’t know how to mix a color, read the preceding section, “Using

The Mixer Tab.”

3. Click the Add to Swatches button at the lower-left corner of the Mixer

Tab — it’s the one to the right of the Change Attribute Color button.

The Add to Swatches dialog box opens.

4. Accept the default name for the color or enter one of your own.

FreeHand uses the component values to name the color. When the color

Is added to the Swatches tab of the Assets panel, a small rectangular

Swatch of the new color is added as well. If you give the color a unique

Name, it will be easier to find if you’re creating an illustration with lots of

Colors. To give the color a unique name, type the name and press Enter. Creating Color Tints 456

5. Choose Process or Spot.

This option refers to how the color is separated for the output device.

Process colors are printed on four separate pages using the four

Process (CMYK) inks. Spot colors are not separated and are printed

On a separate plate.

6. Click Add.

The color is added to the Swatches tab of the Assets panel.

Creating Color Tints

When you create a color tint, you create a lighter variation of the original

Color. You create a color tint by varying the percentage of the original color

With the Tints tab of the Mixers and Tints panel. After you create a color

Tint, you can apply it directly to an object, add the tint to the Swatches tab

Of the Assets panel, or use it as the current fill or stroke color. To create a

Color tint, follow these steps:

1. Create a color using the Mixer tab of the Mixer and Tints panel.

2. Click the Tints tab on the panel.

The Tints tab opens, as shown in Figure 6-6.

3. Drag the slider to specify the percentage of the original color that will

Be used to create the tint.

As you drag the slider, the swatch at the bottom-right of the panel

Updates to display the new tint. Compare this to the swatch at the

Slider

Original color

Tint value windows

Tinted color

Figure 6-6:

To tint or not

To tint, that

Is the

Question. Book IV

Chapter 6

Exploring the Color

Management Tools

Using the Swatches Tab of the Assets Panel 457

Bottom-left of the panel, which is the original color. Alternatively, you

Can tint the color by clicking one of the squares (tints of the original

Color in ten percent increments) or by entering a value in the field.

4. After creating the tint, do one of the following:

• Click the color swatch shown in the right half of the rectangle at the

Bottom of the panel, and then drag and drop the color on an object

In the document.

• Click the color swatch shown in the right half of the rectangle at the

Bottom of the panel, and then drag and drop the color on the Fill

Color box to replace the current fill color with the tint, or drag and

Drop the color on the Stroke color box to replace the current stroke

Color with the tint. If you have an object selected while doing this,

The object’s stroke or fill color is changed as well. Note: The Fill color

Box and the Stroke color box are both found on the Tools panel.

• Click the Add to Swatches button to add the tint to the Swatches tab

Of the Assets panel. After you click the button, the Add to Swatches

Dialog box appears. For more information, read the “Adding a color to

The Swatches tab of the Assets panel” section, earlier in this chapter.

If the Mixer and Tint panel is open at the same time as the Swatches tab of

The Assets panels, you can click the color swatch at the bottom of either the

Mixer tab or the Tint tab in the Mixer and Tint panel, and drag and drop it

Into the Swatches tab, and the color is added to the palette.

Using the Swatches Tab of the Assets Panel

When you create an illustration that uses the same colors on each page or

For several objects, mixing the color each time you need it is time-consuming

And counterproductive. You can save a considerable amount of time if you

Add the colors you use frequently to the Swatches tab of the Assets panel.

You also use the Swatches tab to organize and apply colors from standard

Preset color-matching systems. This option is handy if you’re creating a

Document that will be printed by a service center. If you’re creating a docu -

Ment for a Web page, you can also choose a color from the Web safe color

Library. Another option you have with the Swatches tab is saving the current

Color palette for future use. To open the Swatches tab, shown in Figure 6-7,

Choose Window➪Swatches or press Ctrl+F9.

The Swatches tab shown in Figure 6-7 already has colors added to it. The

Default colors when you create a new document are None, Black, White, and

Registration. You cannot rename or delete these colors. Black is a spot color

That is used for the black separation plate when printing a process color.

The registration color, a combination of CMY and K, all at 100%, is used for

Crop or trim marks and prints solid on separations. Using the Swatches Tab of the Assets Panel 458

You can differentiate color types in the Swatches tab of the Assets panel as

Follows:

✦ Process colors: The names of process colors are italicized.

✦ Spot colors: The names of spot colors are displayed with plain type.

✦ RGB colors: RGB colors display a triangular icon with red, green, and

Blue spheres after the color’s name. Colors derived from the HLS color

Wheel or the System Color Picker are displayed as RGB colors as well.

✦ CMYK colors: CMYK colors are displayed with no icon.

After you open the Swatches tab of the Assets panel, you can do any of the

Following:

✦ Apply a color to an object: You can apply a color to the stroke or fill of

An object by selecting the color and dragging and dropping it on an

Object. Alternatively, you can apply a color by selecting an object, click -

Ing the Fill, Stroke, or Stroke and Fill button at the top of the Swatches

Tab, and clicking the desired color’s name in the Swatches tab.

✦ Modify a color: You can modify a color in one of two ways:

• Mixer tab: You can modify a color in the Swatches tab by opening

The Mixer tab and dragging and dropping a color from the Swatches

Tab to the left side of the rectangular color swatch at the bottom of

The Mixer tab.

• Tints tab: You can modify a color in the Swatches tab by opening the

Tints tab and dragging and dropping a color from the Swatches tab

To the left side of the rectangular color swatch at the bottom of the

Tints tab.

✦ Change the stroke color: You can change the current stroke color by

Selecting a color from the Swatches tab and then dragging and dropping

It on the Stroke color box on the Tools panel.

✦ Change the fill color: You can change the current fill color by selecting

A color from the Swatches tab and then dragging and dropping it on the

Fill color box on the Tools panel.

Figure 6-7:

You use the

Swatches

Tab to

Create a

Color palette

And more. Book IV

Chapter 6

Exploring the Color

Management Tools

Using the Swatches Tab of the Assets Panel 459

Adding preset colors to the Swatches tab

You can add a color to the Swatches tab of the Assets panel from either

The Mixer tab or the Tints tab, as outlined earlier in the chapter. If you fast -

Forwarded to this section and need to know how to add a color to the

Swatches tab from the Mixer tab, read the section, “Adding a color to the

Swatches tab”; to add a tint to the Swatches tab, read the section, “Creating

Color Tints.” In this section, we show you how to add colors to the

Swatches tab from preset color matching systems. To add a color from a

Preset color matching system to the Swatches tab, follow these steps:

1. Choose Window➪Swatches.

The Swatches tab of the Assets panel opens.

2. Click the Options menu (the bulleted list icon at the upper-right corner

Of the Assets panel) and choose one of the preset color matching sets.

If the document you’re creating will be printed commercially, find out the

System they use for color matching. For example, they may use one of

The PANTONE or Munsell matching systems. If the document you’re cre -

Ating will be displayed on a Web page, choose Web Safe Color Library.

When you choose a color matching system, a dialog box appears.

3. Select a color (or colors) from the Library dialog box.

You can select additional contiguous colors by clicking them while hold -

Ing down the Shift key and non-contiguous colors by holding down the

Ctrl key.

4. Click OK.

The Library dialog box closes and FreeHand adds the selected color(s)

To the Swatches tab using the color’s default library name.

You can also double-click a color to add it the Swatches tab, which will close

The dialog box.

Renaming a color

You can rename any color in the Swatches tab, except the default colors:

None, Black, White, and Registration. If you give a color a unique name,

You’ll have an easier time selecting it from the Swatches tab. To rename a

Color, follow these steps:

1. Choose Window➪Swatches.

The Swatches tab of the Assets panel opens.

2. Double-click the color you want to rename.

The color’s name is highlighted. Using the Swatches Tab of the Assets Panel 460

3. Type a new name for the color and then press Enter.

The color is renamed.

Exporting a color palette

When you create an ideal color palette, you can export the palette for use in

Documents you create in the future. This option is handy if you do work for

A client that uses specific color combinations for their text and logo. You

Create the palette by adding colors to the Swatches tab as outlined previ -

Ously in this chapter in the “Adding a color to the Swatches tab,” “Creating

Color Tints,” and “Adding preset colors to the Swatches tab” sections. After

You create the palette (also known as a Color Library), you can export it by

Following these steps:

1. Choose Window➪Swatches or press Ctrl+F9.

The Swatches tab of the Assets panel opens.

2. Click the Options menu (the bulleted list icon at the upper-right

Corner of the Assets panel) and choose Export.

The Export Colors dialog box, shown in Figure 6-8, opens.

3. Select the colors you want to export.

To select a color, click it. Hold down the Shift key to add a selection of

Contiguous colors to the selection, or hold down the Ctrl key to add

Individual noncontiguous colors to the selection.

4. Click OK.

The Create Color Library dialog box appears.

Figure 6-8:

You can

Create a

Custom

Color

Library

From the

Swatches

Tab. Book IV

Chapter 6

Exploring the Color

Management Tools

Using the Swatches Tab of the Assets Panel 461

5. Enter a name in the Library Name field.

Choose a meaningful name that describes the type of colors in the

Library, or enter the name of the client you use the colors for.

6. In the Filename field, accept the default name of CUSTOM, or enter

Another name for the library.

If you intend to store more than one library, change the name to one

That reflects the contents of the library. When you import the Color

Library into a future document, this is the name you look for.

7. Click Save.

FreeHand saves the library in the Colors folder (in FreeHand’s Settings

Folder) and the colors in it appear on the Swatches tab.

Adding custom colors to the Swatches tab

After you save a color palette as a library, you can use any or all colors from

The palette in new illustrations by adding them to the Swatches tab of the

Assets panel. To add colors from a custom library to the current Swatches

Tab, follow these steps:

1. Choose Windows➪Swatches or press Ctrl+F9.

The Swatches panel opens.

2. Click the Options menu (the bulleted list icon at the upper-right

Corner of the Assets panel) and select the custom color library by

Clicking its name.

The Library dialog box opens.

3. Select the colors you want to add to the Swatches tab.

Select an individual color by clicking its swatch. To add contiguous

Colors to the selection, hold down the Shift key and click the top and

Bottom colors you want to add. To add noncontiguous colors to the

Selection, hold down the Ctrl key and click the individual colors you

Want to add.

4. Click OK.

The colors are added to the Swatches tab.

You can also copy and paste or drag and drop named colors from one open

FreeHand document to another. The colors will be added to the Swatches

Tab automatically. Using the Eyedropper Tool 462

Using the Eyedropper Tool

You use the Eyedropper tool to sample a color. You can sample the color

From an object in your document, the Stroke color box, the Fill color box, or

From the following panel tabs: Mixer, Tints, and Swatches. To sample a color

With the Eyedropper tool, follow these steps:

1. Select the Eyedropper tool from the Tools panel.

It’s the tool with an eyedropper for an icon.

2. Sample a color by doing one of the following:

• Click an object in the document window.

• Click a color swatch in any of the following panel tabs: Mixer,

Swatches, or Tints.

After you sample a color, hold down the mouse button and drag and

Drop the color to any of the following:

• A different object in the document: Do this when you sample a

Color from one object that you want to apply to another.

• An object in the document: Do this when you want to sample a

Color from a panel tab.

• The color swatch in the Mixer tab: Do this when you want to modify

A color using the Mixer tab.

• The color swatch in the Tints tab: Do this when you want to tint an

Existing color.

• The Swatches tab: Do this when you want to add a sampled color to

The Swatches tab.

3. Release the mouse button.

The sampled color is applied to the object or added to the tab you

Dropped it on.

Modifying Strokes

You use the Object tab of the Properties panel to change the color of a

Stroke, its width, and other parameters. If the stroke is a single line, you can

Add arrowheads to the head and/or tail of the stroke. The Object tab of the

Properties panel has enough options to fill up a whole lot of pages. You’ll

Never use many of the options, so we spare you a lot of excess verbiage by

Showing you how to modify a basic stroke in this section. To modify a stroke

Using the Object tab of the Properties panel, follow these steps:Book IV

Chapter 6

Exploring the Color

Management Tools

Modifying Strokes 463

1. Use the Pointer tool to select the stroke you want to modify.

You select a path, or modify an object’s stroke (outline) by selecting the

Object.

2. Choose Windows➪Object or press Ctrl+F3.

The Object tab of the Properties panel opens, displaying the Stroke

Tools, as shown in Figure 6-9.

3. Click the stroke in the list of Object properties to show the options for

The stroke you want to edit.

4. To change the stroke’s color, click and drag a color from the Swatches

Tab of the Assets panel onto the box to the right of the stroke indicator.

Similarly, you can also click the Stroke color box on the Tools panel and

Select a color from there.

5. Select an option from the Width drop-down list.

Alternatively, you can enter the desired value in the Width field.

6. Click a button in the Cap section to determine the path end.

The available options are Butt, Round, or Square.

Stroke color

Butt

Round

Square

Mitered

Round

Bevel

Stroke type

Figure 6-9:

You can

Modify a

Stroke’s

Appearance

With the

Object tab

Of the

Properties

Panel. Modifying Fills 464

7. Click a button in the Join section to determine how path ends join.

The available options are Mitered, Round, and Bevel.

8. Enter a value in the Miter field.

This value is applicable if you choose a miter join. Enter a value

Between 1 and 57. If the line length exceeds this value, it will be squared

Off instead of mitered.

9. To have a dashed stroke, select an option from the Dash drop-down list.

10. To apply an arrowhead to an open path, select an option from each of

The Arrowheads drop-down lists.

Use the left Arrowheads drop-down list to select an arrowhead for the

Start of the path; use the right Arrowheads drop-down list to select an

Arrowhead for the end of the path. You can select different arrowheads

For each end of the path. You can also have an arrowhead at one end of

The path and no arrowhead at the other.

The settings you specify are applied to the selected stroke. When you

Create a new stroke, the stroke is created using the previous settings.

You can use the Object tab to set stroke settings for all future strokes you

Create. Deselect all objects in the document, select a non-drawing tool, such

As the Pointer tool, and then set stroke characteristics as outlined in the

Previous steps. The characteristics will be applied to all future strokes until

You modify the settings in the Object tab.

If you like artistic brush strokes, select a path, open the Object tab, and then

Select Brush from the Stroke Type drop-down list. (Refer to Figure 6-9.) You

Can make the stroke look like it was painted with an artist’s brush or an

Airbrush.

Modifying Fills

When you add color to a shape, you give it a fill. You can modify the fill at

Any time using the Object tab of the Properties panel. The Object tab is

Filled with all manner of different fill options. In fact, it has so many options;

It would fill a chapter of its own. In the upcoming sections, we show you the

Most commonly used fill options.

Creating a basic fill

You can create or modify a basic fill through the Object tab in the Properties

Panel. A basic fill is pretty simple; it only has one color. When your design

Calls for a basic fill, here’s how you create one with the Object tab:Book IV

Chapter 6

Exploring the Color

Management Tools

Modifying Fills 465

1. Use the Pointer tool to select the object whose fill you want to modify.

Alternatively, deselect all objects in the document, select a non-drawing

Tool, and the fill you create is applied to all future shapes you create.

2. Choose Window➪Object or press Ctrl+F3.

The Object tab of the Properties panel opens.

3. Click Fill: Basic beneath the object box in the list area of the panel.

By default, fills are defined as Basic and are colored black, as shown in

Figure 6-10.

4. Choose a color from the Fill drop-down list.

These are the colors currently in the Swatches tab of the Assets panel.

Alternatively, you can select a color by clicking the swatch in the Mixer

Or Tint tabs of the Mixer and Tints panel and dragging and dropping the

Color on the current color swatch in the Object tab.

After you select a color, it is applied to the selected object, or if you

Have no objects selected, the fill will be applied to all closed paths you

Create until you modify the fill.

If there is no default fill created for an object you’re working on, you can

Create one by clicking the Paint Bucket button on the Object tab. This will

Add a fill of the default color (which is usually black) to the object.

Creating a gradient fill

When you create a gradient fill, you create a gradual transition of two or

More colors. In FreeHand, you can create the following types of gradient

Fills: linear, radial, contoured, logorithmic, rectangle, or cone. Figure 6-11

Shows a comparison of the six gradient fill types.

Figure 6-10:

Basic fills

Are. . .

Basic. Modifying Fills 466

When you create a gradient fill, you specify each color in the fill and where

The color is blended. To create a gradient fill, follow these steps:

1. Use the Pointer tool to select the object to which you want to apply

The gradient fill. The object must have a closed path.

Alternatively, you can deselect all objects in the document, and the fill

You create will be applied to closed paths you create from this point

Forward.

2. Choose Window➪Object and, from the Object tab, select Fill: Basic

From the area underneath the object name in the middle list area.

3. From the Fill Type drop-down list, select Gradient.

The Object tab is reconfigured, as shown in Figure 6-12.

Fill type

Gradient type Color ramp

Figure 6-12:

You can

Create a

Colorful fill

By choosing

The gradient

Option.

Linear

Logarithmic Rectangle Cone

Radial Contour

Figure 6-11:

You can

Choose from

The six

Varieties of

Gradient

Fills. Book IV

Chapter 6

Exploring the Color

Management Tools

Modifying Fills 467

4. Select the appropriate gradient type from the drop-down list beneath

The Fill Type drop-down list.

You can choose Linear, Radial, Contour, Logarithmic, Rectangle, or

Cone. The default gradient fill blends black and white, but you can

Choose any color.

5. Click the color swatch at either end of the color ramp (the rectangle

At the bottom of the tab) and choose a color from the color picker.

The color swatch refreshes to show the color you selected. Alternatively,

You can click the color swatch in the Mixer or Tint tabs and drag and

Drop the color onto the color swatch on the color ramp.

6. To add additional color points to the gradient, click a color swatch

From the Mixer tab of the Mixer and Tints panel or from the Swatches

Tab of the Assets panel and drag and drop it to the desired position

On the color ramp.

You can add as many color points as needed to define your fill. After

Adding another color point, you can select a different color by using

Any of the methods outlined in Step 5. If you need to move a color

Pointer, click the color pointer and drag it to a different position on

The color ramp. To remove a color point, click it and drag it off the

Color ramp.

7. Set the options for the type of gradient you’ve selected.

Each of the gradients has slightly different options for tweaking the fill

Pattern. In general, though, they include starting points for the gradient,

The angle of the gradient, and the width of the gradient.

Creating a tiled fill

When you create a tiled fill, you copy a shape from within the document

And use it to create a fill that displays the copied object tiled within

Another object. You can specify how large the tiled object is and change

The fill’s position within the filled object. To create a tiled fill, follow these

Steps:

1. Use the Pointer tool to select the object (or objects) that you want as

The basis for your tiled fill.

2. Choose Edit➪Copy or press Ctrl+C.

The object is copied to the Clipboard.

3. Use the Pointer tool to select the object you want to fill. Modifying Fills 468

4. Choose Window➪Object and select Tiled from the Fill Type drop -

Down list in the Object tab of the Properties panel.

The Object tab is reconfigured to create tiled fills.

5. Click the Paste In button.

The copied shape is pasted into the window and is tiled within the

Object you are filling.

6. To resize the object, enter values in the X and Y fields.

Enter values lower than 100 to make the object smaller and values larger

Than 100 to increase the size of the tiled object. As you enter values, the

Object’s fill changes to reflect the new parameters. Enter the same value

In each field to resize the object proportionately.

7. Enter values in the X and Y Offset fields.

The values you enter move the fill within the object to which it is

Applied. Enter positive X values to move the tiled fill to the right,

And negative X values to move the tiled fill to the left. Enter positive

Y values to move the fill up, and negative Y values to move the fill

Down.

8. Drag the circular dial to set the fill’s angle.

Hold down the Shift key to constrain the changes to 45-degree incre -

Ments. Alternatively, you can enter a value in the Angle field. Figure 6-13

Shows the Object tab being used to create a tiled fill as well as the

Object the tiled fill is being applied to.

Filled object

Fill scale

Fill offset

Fill angle

Figure 6-13:

It’s not

Ceramic,

But it is tile. Book IV

Chapter 6

Exploring the Color

Management Tools

Modifying Fills 469

Using FreeHand’s other fill types

Getting into the nitty-gritty details of how to use FreeHand’s other fill types

Goes a little beyond the scope of this book, but we did want to at least men -

Tion what they’re used for, lest you see them in the Fill Type drop-down list

And think, “Hey, I got robbed! Nobody told me about these.” Briefly, here’s

What the other Fill types are designed to do:

✦ Custom Fill: Nine custom fills are available, and they include things like

Bricks, circles, and grass. Each of the fills is editable.

✦ Lens: The Lens fill allows you to set up your fill using common photo -

Realistic effects, such as transparency, lighten, darken, invert, and

Monochrome. Again, each of these effects is editable to your liking.

✦ Pattern: The Pattern fill is fun, because you can watch your object

Change as you click on little boxes in a grid in the Object tab.

✦ Postscript: Postscript fills are standardized repeating patterns. You

Won’t be able to see them onscreen — they only appear when you print

Your document on a PostScript printer. Onscreen (and when output

From non-Postscript printers) they show up as rows of the letter C.

Postscript fills don’t scale when you scale an object; they have set

Sizes. If you’re looking for a place to get started on understanding

Postscript, including links to other sources on the Net, check out

Www. postscript. org.

✦ Textured: Textured fills work almost exactly like the pattern fills, except

That the fills are more interesting. For this type, they include burlap,

Denim, sand, and coarse gravel.

Fun with color, FreeHand style

You can also modify colors in your documents

By choosing Xtras➪Colors and choosing a com -

Mand from the submenu. You can use these

Commands to lighten, darken, or desaturate

Process colors, as well as randomize colors,

Sort named colors, and more. We urge you to

Experiment with these powerful commands to

Further your use of color in FreeHand. Book IV: FreeHand MX 470

Introducing FlashPaper

Teaming Contribute 2 with Dreamweaver

Using the PayPal extension

C ontribute 2 isn’t really integrated into the Macromedia Studio MX 2004

Suite. It’s very much a standalone product created for people who need

To maintain Web sites but not build them. Contribute 2 for Windows comes

With its own standalone product: FlashPaper.

Introducing FlashPaper

FlashPaper converts any printable file (word processing document, spread -

Sheet, slide show) into an SWF file that can be viewed by anyone with the

Latest version of the standalone Macromedia Flash Player or a browser with

The latest version of the Flash plug-in.

Unless you specified otherwise, when you installed Contribute, you installed

FlashPaper also, and the FlashPaper icon was placed automatically on your

Desktop, as shown in Figure 4-1.

FlashPaper can be accessed from within Contribute (see the section on

Adding images, links, and more in Book VII, Chapter 2 for details). That

Means when you insert a document as FlashPaper into a draft, you might

Not even realize you’re using another application. But FlashPaper can run

Quite independently of Contribute.

Figure 4-1:

The

FlashPaper

Icon. Introducing FlashPaper 804

You can use FlashPaper as a standalone application to in two ways:

✦ By dragging a printable document onto the FlashPaper desktop icon.

✦ By selecting the FlashPaper printer when you print from within an appli -

Cation like Word or Excel. Figure 4-2 shows FlashPaper selected in two

Different applications; the Print dialog box on the top is from Word and

The Print dialog box on the bottom is from Internet Explorer.

Whichever method you choose, your printable document is cloned as an

SWF file.

Figure 4-2:

To “print”

To an SWF,

You can

Select the

FlashPaper

Printer

When you

Print from

Many

Applications,

Including

Word (top)

And IE

(bottom).Book VII

Chapter 4

Contribute 2 and

Other Macromedia

Products

Understanding Dreamweaver Templates 805

While you could theoretically “print” an image as an SWF, there’s no com -

Pelling reason to do so, because image formats like GIF and JPEG are nearly

Universally compatible with image display and editing programs as well as

Browsers.

There is one catch: SWF files generated by FlashPaper cannot be edited with

Macromedia Flash MX 2004. If you need to change a file you’ve converted

With FlashPaper, you have to change the original file, and then make a new

FlashPaper document from it.

As of this writing, FlashPaper is available only for Windows versions

After Windows 95; presumably Macromedia is at work on a Mac version.

(Contribute was originally available only for Windows, but with version 2,

It is now available for Mac users.)

Teaming Contribute with Dreamweaver

For Web developers who plan to hand off the maintenance of the sites

They’ve built to people who don’t know anything about HTML, FTP, or CSS,

Contribute represents a certain amount of peace of mind. Especially when

Combined with Dreamweaver templates, Contribute can make creating new

Pages with a consistent design faster and simpler for nontechnical people

Doing site maintenance.

Understanding Dreamweaver Templates

A Dreamweaver template is a special type of file (it uses the extension. dwt)

That may contain HTML, CFML, and other typical Web page code, and that

Also contains hidden instructions that tell Dreamweaver and Contribute to

“lock” certain portions of the code — basically making those chunks of code

Unavailable for editing.

Figure 4-3 shows a new page based on a simple Dreamweaver template. The

Template has three editable areas: the top navigation, the page header, and

The main text area. When the cursor is over any other area on the draft, it

Becomes a circle-slash, signifying that edits to the area are not permitted.

The page title, which you can see highlighted in the Pages panel as well as

Prominently displayed in the Contribute title bar in Figure 4-3, has been

Entered in the New Page dialog box that appears when a contributor creates

A new page. (See Book VII, Chapter 2 for details on creating a new page

Based on a Dreamweaver template.)Working with PayPal 806

For details about creating Dreamweaver templates, see Book II, Chapter 7.

For details about how to ensure that contributors use particular templates

To create new pages on your site, see the section on granting group permis -

Sions in Book VII, Chapter 3.

Working with PayPal

Contribute 2 includes an extension similar to the one available for

Dreamweaver that makes adding PayPal buttons to your page a snap.

(Note: You must have a PayPal Business or Premier account to insert the

PayPal buttons into your page, and your site must already have the code

For the shopping cart.) In order to use the extension, you have to select it

When you install Contribute, as shown in Figure 4-4.

If you have the PayPal extension installed, you see an extra button at the

Right side of the browser toolbar when you’re editing a page. When you click

And hold that button, you can select the following options from the pop-up

Menu:

✦ Buy Now Button

✦ Add to Cart Button

✦ View Cart Button

✦ Subscription Button

Figure 4-3:

Creating a

New page

From a

Dream -

Weaver

Template. Book VII

Chapter 4

Contribute 2 and

Other Macromedia

Products

Working with PayPal 807

Those same options are also available when you choose Insert➪PayPal.

A wizard guides you through the steps necessary to insert the buttons on

Your page — be sure to have your PayPal account information at hand.

Make sure that any contributor working on a page with PayPal buttons

Has the PayPal extension installed. Also, be aware that Contribute’s PayPal

Extension may have trouble with forms that use JavaScript validation, forms

Within <SPAN>tags in Dreamweaver templates, and more. See the Contribute

TechNote at www. macromedia. com/support/contribute/ts/documents/

Paypal. htmfor details on workarounds.

Figure 4-4:

Select the

PayPal

ECommerce

Toolkit when

You install

Contribute. Book VII: Contribute 2 808