Chapter 2: Using the Graphics Tools
Posted: July 15th, 2010 | Author: admin | Filed under: Book V Macromedia Flash MX 2004Contents at a Glance | Comments OffIn This Chapter
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.