By Joey Lott
Price: $44.99 USD
£31.99 GBP

Cover | Table of Contents

Table of Contents

Chapter 1: Drawing in Flash

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

One of the hallmarks of Flash is the use of vector-based graphics; vector graphics can be scaled to any size without causing the pixelation or scrunched look associated with scaled bitmap graphics. Vector graphics are also compact, because they are described mathematically. For example, to render (draw) a circle, Flash needs to store only the circle's center point and radius; from this information, it figures out which pixels to draw on the screen. In contrast, bitmap (or raster) graphics describe every point in an image. To draw a bitmap graphic, Flash simply does what it's told, drawing each pixel in the original image to the screen. The file size for bitmap graphics is generally much larger than that of vector graphics, and bitmaps tend to look jagged or pixelated when scaled. Vector graphics are ideal for line art and curves, offering both high quality and small storage size; bitmaps are more appropriate for photographic images that can't be described easily with vectors. Although Flash can import and manipulate bitmaps, the drawing tools create vector graphics only. This chapter focuses on how to create your own graphics with Flash's vector drawing and manipulation tools.

Although Flash's drawing tools can create straight line segments, curves, and complex shapes, they differ somewhat from those in other vector drawing programs, such as Freehand and Adobe Illustrator. Flash uses a simpler system (quadratic paths) for describing paths than these other programs (which use cubic paths).Basically, quadratic paths are adjusted with just one control handle and three data points, whereas cubic paths are adjusted with two control handles and four data points. The underlying math may be abstract, but the implications are not.

Flash's quadratic paths are not capable of quite the same level of precision as the paths you can create in most other vector programs. In practical terms, Flash does not represent paths drawn with a freehand tool as faithfully. The loss in fidelity is counterbalanced by the savings in file size and Flash's ability to simplify paths via shape recognition and line smoothing, both of which make drawing easier and help minimize file size. Whether to automatically apply smoothing, along with other options, can be specified under Edit → Preferences → Drawing. Many Flash designers find that shape recognition and smoothing enable them to create art much more quickly than in other vector drawing programs. And in spite of the intrinsic limitations of Flash's paths, it does have tools, such as the Pen and Subselection tools, which enable you to create paths with nearly the same precision as those drawn in vector drawing programs that use the more elaborate cubic paths.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Straight Lines

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to create a straight line segment or a shape made out of multiple straight line segments.

Use the Line tool (keyboard shortcut: N), the Pen tool (keyboard shortcut: P), or the Pencil tool (keyboard shortcut: Y) with shift-constraint (explained in detail later in this recipe).

Often the simplest way to draw a straight line is to use the Line tool. You can do so by first selecting the Line tool from the Tools panel (Window → Tools).With the Line tool selected, drag the mouse on the stage to create a line. Pressing the mouse button creates the starting point, and releasing the mouse button creates the ending point. When using the Line tool, Flash connects the points with a straight line, and applies the active stroke attributes to the line.

You can control the appearance of the stroke, including its color, height, style, end caps, and join types. You can select the Line tool and preset these attributes in the Property inspector before drawing the line on the stage. Alternatively, you can modify an existing line's attributes by selecting the line with the Selection tool and using the Property inspector.

You can create a multisegment line by clicking the mouse close to the end of the previous line segment. Provided the mouse is close enough to an existing segment, Flash automatically joins the line segments into a single path.

Therefore, to create a path comprising a sequence of straight line segments, do the following:

1. Select the Line tool (N) from the Tools panel.
2. Press the mouse button on the stage to create a starting point.
3. Drag the mouse to another location.
4. Release the mouse button.
5. Without moving the mouse, click and drag to the next point's location, and then release the mouse button.
6. Repeat step 5 as necessary.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Curved Lines

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw curved lines.

Use the Pen tool. Optionally, use the Line tool to draw a straight line. Then use the Selection tool to make the line curve. To draw curves freehand, use the Pencil tool with smoothing.

Flash offers a number of approaches to drawing curved lines. Which you select is a matter of both context and preference.

If you plan to draw a series of connected curved segments, the Pen tool is frequently the best option. The Pen tool, as discussed briefly in , enables you to draw line segments by plotting points. However, as you draw the points, you can adjust the control points in order to draw curved segments. To adjust the control points, click the mouse at the location at which you want to add a point, and then drag while the mouse button is still pressed. You can also use the Subselection tool to adjust any of the end points and control points along a path after it has been drawn.

You can also use the Selection tool to make paths drawn with the Line tool (or any technique that results in a straight line) into curved segments. The following steps describe the procedure:

1. Draw a straight line using any of the techniques described in .
2. Choose the Selection tool.
3. Make sure that the straight line is deselected. If the line has already been selected before proceeding to the next step, you will cause the line to move, rather than curve.
4. Use the mouse (or stylus) to click on a point along the line and drag it to form a curve. You may repeat this step as many times as you want to add more curves to the line.

Although it is the least accurate of the approaches, drawing curved lines with the Pencil tool is often the most straightforward. Furthermore, using the Pencil tool you can achieve sketched looks that would be more difficult to achieve with the other approaches described in this section. Here's how to draw curved lines with the Pencil tool:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Modifying Curves

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to modify the curvature of a line segment by curving a straight line segment, modifying the existing curvature, or removing the curve altogether.

Use the Selection tool (V), following up (if necessary) with the Subselection tool.

After a path is created, the Selection tool is often the fastest and most visually intuitive way to modify the curvature of any of its segments. With the Selection tool selected from the Tools panel, hover over any line segment (it should not be selected), and the cursor changes to indicate a curve. Click and drag until the segment is curved as desired, using the path preview as a guide.

Another way to modify an existing curved line segment—and the more precise way, albeit less intuitive—is to use the Subselection tool and the control points. The Subselection tool is more precise because a segment's curvature can be defined independently at each end. If a given line segment is straight, you can add control points by selecting an end point and Alt-dragging (Windows) or Option-dragging (Macintosh).You can add new points to an existing path using the Pen tool. With the Pen tool selected, click on the path where you'd like to add the new point.

To modify a curved segment using control points, use the Subselection tool to select a point adjacent to the segment. When its control points appear, drag them and use the path preview as a guide. Dragging the control points away from the point increases the amount of curvature, and dragging them closer to the point decreases the curvature. Rotating them around the point changes the direction of the curve. When working with end points on a path, there is only one control point. However, points in the middle of a path have two control points. The control point pairs ordinarily move in mirror images to each other. To move one control point independently of the other, hold down the Alt key (Windows) or Option key (Macintosh) while dragging one of the control points.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Selecting a Line

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to select a line segment or entire line.

Use the Selection tool.

A line may be made up of one or more segments. Each of these segments may be straight or curved. In Flash, you can select individual straight line segments, contiguous curved line segments, or the entire line.

• To select a single straight line segment, click the line segment.
• To select contiguous curved line segments, click any curved line segment.
• To select an entire line, double-click any line segment on that line.

You cannot select a single curved line segment if it is connected to any other curved line segments.

When the stroke is selected, it is marked with a dotted selection. You can change the selected strokes properties, such as its color, width, and style, in the Property inspector or the Colors section of the Tools panel.

You can delete a selected line (line segment or whole line) by pressing the Delete key. If the line is part of a shape—that is, it is closed and has a fill—the shape remains; only the stroke disappears.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Applying Line Styles

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to apply a dashed, dotted, stippled, ragged, or hatched effect to a line.

Specify the appropriate style in the Property inspector.

You can add a stroke effect to a shape using one of Flash's seven built-in stroke styles: Hairline, Normal, Dashed, Dotted, Ragged, Stippled, and Hatched. You can apply these styles to an existing line by selecting the line with the Selection tool and choosing the line style from the Property inspector. Alternatively, you can select any tool capable of creating strokes (Line, Pen, Oval, Rectangle, Pencil, and Ink Bottle) and choose a line style from the Property inspector before you create the stroke.

If the built-in line styles are not exactly what you want, you can customize one of the line styles to better suit your needs. For example, if you need smaller dashes in a dashed line, you can customize the dashed line style. To customize a style, click the Custom button in the Property inspector while a stroke is selected or a tool capable of creating a stroke is active. The Stroke Style dialog box opens.

You can set the attributes of each stroke style to customize its appearance. For example, for the Dashed stroke, you can specify the spacing and pixel width of the dashes. The Hatched style has six settings—Thickness, Space, Jiggle, Rotate, Curve, and Length—whose effects are evident in the Stroke Style dialog box's convenient preview window.

You can customize all the line styles, except the Hairline, which is the Solid style with a thickness of one screen pixel.

, ,

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Controlling How Lines Scale

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to control how a line scales.

Set the Scale type from the Property inspector.

Until Flash 8, there was just one option for the line scale type. The line thickness scaled with the width and height. For example, a line with thickness of 10 would appear as though it had a thickness of 20 when scaled to 200%.The only alternative for lines was to use the Hairline Line style. However, the Hairline style works only if you want a line with a thickness of one pixel.

As of Flash 8, you can specify a scale style for lines using the Scale style menu in the Property inspector. The default setting is Normal, which means that lines scale just as they have always done. However, you can also select from Horizontal, Vertical, and None. When you select Horizontal, it means that Flash does not scale the thickness when the line is scaled horizontally. Likewise, when you select Vertical, it means that Flash does not scale the thickness when the line is scaled vertically. And a setting of None means that Flash does not scale the thickness of the line regardless of whether or not the line is scaled vertically or horizontally.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Customizing Line Caps

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to change the style applied to the ends of line segments.

Change the line Cap style in the Property inspector.

For most of its lifetime Flash has had exactly one line cap style: rounded. The rounded caps on lines are appropriate for many things, but not for everything. For example, when you draw a rectangle using round line caps, the corners of the rectangle are slightly rounded. Starting with Flash 8, however, Flash allows you to select the line Cap style in the Property inspector. You can select from None, Round (default), and Square.

When you select None, the line is drawn as a rectangular area with exactly the length specified. When you select Round or Square, Flash adds a cap to each end of the line segment. The end cap extends beyond the end of the line segment by half of the line thickness. For example, if the line thickness is 10, the caps extend 5 pixels past the ends of the line segment. In the case of Round, the caps are semicircles. In the case of Square, the caps are semisquares (also known as rectangles).

You can change the Cap style for any line after it's been drawn. However, note that changing the Cap style can have an effect on the Join style.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Customizing Join Styles Between Line Segments

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to change the way in which two line segments join.

Select the adjoining line segments, and select the style from the Join style menu in the Property inspector. Both line segments must also have the same Cap style.

As with line caps, Flash previously had only one line Join style: rounded. While a round Join style is fairly neutral, it's not appropriate for everything. Starting with Flash 8, you can select from three line Join styles—Bevel, Round (default), and Miter. To do so, select the two adjoining line segments, and select from the Join menu in the Property inspector. Note that for Join styles to work, the adjoining line segments must also have the same Cap style.

The Bevel join style makes the joins between line segments flat and angular. The Miter join style causes the joins between line segments to be pointed. When you select the Miter join style, you can also set the sharpness by specifying a value for the Miter field in the Property inspector. The value can range from 1 to 60, and it determines at what point the miter join is beveled. The value is multiplied by the thickness of the line segments to determine how many pixels past the join the miter is beveled. For example, if the line segments have a thickness of 10 and the miter limit is set to 2, the miter can extend up to 20 pixels past the join before it is beveled. If the miter naturally converges at or before that point, the join appears pointed. Other-wise it is beveled at that point.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Creating Effects with Strokes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to add effects to a line, such as expanding it or softening its edges.

Use the Convert Lines to Fills command, and then manipulate the resulting fill.

Lines and fills each have unique capabilities. Lines are best for creating complex designs, closed or open. However, fills enable special effects, such as bitmap fills. In addition, shapes can be expanded and have their edges softened.

Flash provides different tools to create these kinds of effects. For example, the Brush tool is the most direct way to paint fills. But if you don't have a graphics tablet, it is very hard to draw well with the mouse and the Brush tool.

You can get the best of both worlds—the precision of working with lines and the visual effects available with shapes—by converting lines to fills.

To convert lines to fills, follow these steps:

1. Draw the line. Any of the line drawing tools will work: Pencil, Pen, or Line tools.
2. When you are satisfied with the overall shape, convert the stroke to a fill by choosing Modify → Shape → Convert Lines to Fills. At the end of this step, the shape looks the same on stage as it did before, but it is a fill and you can start treating it as such.
3. To change the fill to a bitmap, set the active fill to the bitmap, and use the Paint Bucket tool to apply it to the shape.
   To expand the width of the fill, choose Modify → Shape → Expand Fill. In the dialog box that appears, choose the number of pixels that you want it to expand. Also, select whether you want those pixels to be added to the current fill (Expand) or subtracted from the current fill (Inset).
   To soften the edges of a fill, creating a blurred effect around the edges, choose Modify → Shape → Soften Fill Edges. In the resulting dialog box, you can set the width of the transition in pixels, the number of transition steps, and whether to soften outward (Expand) or inward (Inset).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Primitive Shapes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw primitive shapes, such as ovals, circles, rectangles, and squares.

Use the Oval (O) and Rectangle (R) tools, or the Pencil (Y) tool.

To create ovals or rectangles, select the Oval or Rectangle tool from the Tools panel, and click and drag across the stage to create the bounds of the shape. Because they are closed shapes, ovals and rectangles are automatically filled with the default fill style.

Fills are not visible if View → Outlines mode is active. To view fills, switch to another mode, such as View → Antialias.

Set the fill style to No Color to create unfilled shapes. To create an unfilled shape regardless of the default fill style, use the Pencil tool to scribble your best approximation of a rectangle or oval. Flash will automatically convert a rough approximation to a perfect rectangle or oval, especially if the Recognize Shapes option—under Edit → Preferences → Drawing—is set to Tolerant. The Recognize Shapes option works only if you draw the shape in one continuous motion without releasing the mouse button or lifting the pen from the tablet until you've closed the shape. Also note that the only shapes that Flash can recognize with the Pencil tool are primitive shapes—ovals, rectangles, and triangles. It cannot recognize polygons with sides numbering anything greater than four. To draw regular polygons (polygons with equilateral sides) you'll need to use the PolyStar tool as discussed in .

In Flash's drawing paradigm, a shape is created with a series of points, not treated as a separate primitive object (the Oval and Rectangle tools create shapes with at least four points).Selecting any point along the curve, by using the Subselection tool (A), allows you to distort the original shape.

To create a perfect circle or square with the Oval or Rectangle tool, use shift-con-straint; that is, hold down the Shift key as you drag.

When using the Rectangle tool, you have the option of drawing a rectangle with rounded corners. You can set the corner radius in the Options section of the Tools panel by clicking the Set Corner Radius icon. In the dialog box that displays, specify the radius in pixels.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Regular Polygons

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw a polygon (a closed shape made of straight lines, such as a triangle, hexagon, etc.) that has sides of equal length.

Use the PolyStar tool.

The PolyStar tool allows you to quickly draw regular polygons with up to 32 sides. You can find the PolyStar tool nested with the Rectangle tool. There is no keyboard shortcut to the tool, so the only way to get to it is to select it from the Tools panel. Because the PolyStar tool is nested with the Rectangle tool, only one is visible at a time. Therefore, if the Rectangle tool is currently visible, click and hold the mouse on the Rectangle tool to display the pop-up menu from which you can choose the PolyStar tool. You'll know when the PolyStar tool is selected, because the icon on the Tools panel will appear as a regular hexagon instead of a rectangle.

After you've selected the PolyStar tool, you next need to select the correct options before drawing. Because the PolyStar tool allows you to draw many different types of polygons (as well as stars), you need to make the appropriate selections from the tool settings. You can access the tool settings via the Options button in the Property inspector. Clicking the Options button will open a dialog box from which you can select the number of sides. In order to draw a polygon, make sure the style is set to Polygon and not Star. The star point size applies only when drawing stars. After you've made the appropriate selections, you can click on the OK button to close the dialog box.

With the settings made, you can draw a regular polygon by clicking on the stage and dragging the mouse or stylus to the size of polygon you want. If you hold the Shift key while drawing the polygon, Flash will snap the shape to 45° increments.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Stars

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw a star.

Use the PolyStar tool. Select Star from the style menu in the Options dialog box. discusses more details of the PolyStar tool.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Other Assorted Shapes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw a shape for which there is no built-in tool within Flash.

Check to see whether there is a drawing tool available that you can add to Flash via the Extension Manager.

Flash includes a JavaScript extension layer. What that means for you is that it is possible to find and install additional functionality for Flash—including extra drawing tools. Though you may not necessarily find a drawing tool that draws exactly what you are looking for, it is worth taking a look. A good resource for finding such extensions is the Flash Exchange at the Macromedia web site. A direct link to the Macromedia Exchange is http://www.macromedia.com/cfusion/exchange. Another resource with a few drawing tools is http://www.flashextensibility.com.

As time goes on, more Flash extensions are likely to be available, but at the time of this writing, the following are some of the most seemingly relevant:

Splat

The Splat tool allows you to draw shapes with circular inner shapes with curved shapes extending outward from it. The default settings create what looks like a splat of paint (hence the name).But by adjusting the settings for the tool, you can readily draw flower shapes and other, more abstract shapes. Splat v2 is the same as the first version, but with a few additional options, including random colors and a noise setting that applies a random distortion to each shape drawn with the tool.

Arrow

The Selection tool quite simply allows you to draw arrows without having to composite rectangles and triangles.

Spiral

The Spiral tool does pretty much what it says—it draws spirals.

Dot Spiral

According to a strict definition, a spiral is composed of a curve, and not line segments. So perhaps a more accurate term to describe what the Dot Spiral tool draws would be a spiral-like shape. The shape is composed of line segments that form what turn out to be very near to polygons, except that the angles are just a bit too wide such that the effect is something akin to a spiral. You can specify the number of points around the spiral-like shape. For example, if you specify four points, the spiral-like shape resembles a square.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Building Complex Shapes from Simple Shapes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to create a complex shape for which Flash doesn't have a specific tool.

Use Flash's intersect, punch, crop, slice, and union behaviors strategically to create the shape in multiple steps.

Flash has two drawing models—merge and object. Making complex shapes is possible using either drawing model. Which approach you take is a matter of preference, as is the type of shape you want to make. When you select a tool that supports the object drawing model (e. g., the Oval or Rectangle tools), a small Object Drawing button appears in the Options section of the Tools panel. The button (with a circular icon) enables you to toggle between the merge (default, deselected state) and object (selected state) drawing models.

When you draw on the stage using the merge drawing model, elements drawn in the same layer and frame that overlap will interact with one another by slicing, merging, and/or punching. Flash's auto-slice, auto-punch, and auto-union behaviors are unusual among vector applications. In most drawing applications, slicing, union, and punch are available, but they never happen automatically. All too often, Flash users inadvertently utilize one of the features, with Undo as the only recourse. However, you can and should use Flash's behavior strategically to create shapes that would otherwise be difficult to create.

When you place an ungrouped shape over another and deselect both shapes, Flash will automatically apply a slice, punch, or union behavior, depending on several factors. If the shapes have no outlines and are the same color, the union behavior is applied such that the two shapes merge into one shape. If the top shape has an outline or is a different color than the bottom shape, the top shape will punch out the bottom. A line that crosses another line or shape slices the line or shape it crosses.

For many shapes, the slicing, union, and punch behaviors are more efficient than using the Pen tool to plot several points, and then painstakingly modifying the Bézier curves with the Subselection tool. shows two unique shapes that were created by punching and merging shapes. The cloud formation at the top was created by laying one oval above another, all of the same color. After the overall shape was created, a linear gradient was applied to give it visual interest. The comb shape at the bottom was created by drawing a basic outline with the Pen tool, and then punching it with a simple spike shape.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Drawing Complex Lines and Shapes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw a line or shape, comprising any combination of straight and curved line segments.

Use the Pen (P) tool.

The Pen tool, also found in the Tools panel, is used to plot the points that make up a line or shape. The Pen tool can create straight or curved line segments.

To draw lines or shapes made of straight line segments, as discussed in , click with the mouse to add points, and Flash will connect them with straight line segments. To add curvature to the lines as you draw, rather than pressing and releasing immediately with the mouse, press and drag to create a new point and drag out control points, which control the curvature of line segments adjacent to the point. When you release, the curve is set, and continued clicking or dragging will create new points.

To close the path, click again on the first point in the path (or any point in between). To leave a path unclosed, double-click when adding the last point. After closing a shape or double-clicking with the Pen tool, clicking the mouse on the stage again starts a new path. If you forget to double-click when adding the last end point, you can click a second time on the end point or you can switch to a different tool instead; when you switch back to the Pen tool, Flash also starts a new path.

Mastering the Pen tool takes practice; however, it is the most precise and flexible drawing tool that Flash offers. Bear in mind that you can modify any part of a path, including the location of points and the curvature of the adjacent line segments, in the future.

The Pen tool is one of several ways to create complex shapes. You can also build complex shapes from primitive shapes, as shown in , and use the Pencil tool, as shown in . You can also combine these approaches. For example, you can rough out the path using the Pencil tool or the Pen tool in simple connect-the-dots fashion, and after the path is created, go back and add/modify the curves in a second pass, as shown in .

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Repositioning Points on Paths

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to reposition a point on a path.

Use the Subselection tool (A).

You may want to reposition a point on an existing line or shape edge without affecting the remaining points. Use the Subselection tool in the Tools panel to select the line or shape edge, which makes the points along it visible. Click to select the point you want to modify, and drag it to a new position.

Though a line or the edge of a shape may be selected with the Subselection tool, individual points within it may not be selected. Unselected points are represented as hollow squares. Selected points are represented as solid squares if the adjacent line segment is straight and as solid circles if the adjacent line segment is curved. The control points associated with the curved segments emanating from a point appear when the point is selected. If applicable, the control points that control the curvature of the curved segment as it approaches an adjacent point also appear, as shown in .

Figure : Unselected points are hollow, while selected points are solid. Control points are shown for segments attached to the currently selected point

You can reposition a selected point by dragging it with the Subselection tool. Alternatively, you can nudge it in any direction using the up, down, left, and right arrow keys. Nudging in Flash is relative to screen resolution and your view settings. At 100% zoom, it nudges one pixel relative to the stage each time you press an arrow key. Holding down the Shift key nudges it 10 times as far. At 200%, each time you press an arrow key it nudges one half pixel, relative to the stage.

You can select multiple points simultaneously, which is good for reshaping areas of a path. To do so with the Subselection tool, hold down the Shift key and click multiple points. Click a point again while still holding down the Shift key to deselect it without deselecting other points.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Freehand Drawing

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to draw directly on the stage using your input device (mouse or graphics tablet).

Use the Pencil tool (Y).

If you don't want to deal with the intrinsic constraints of the simple drawing tools (the Line, Oval, and Rectangle tools) or the painstaking perfectionism of the Pen and Subselection tools, consider the Pencil tool. When using the Pencil tool, as you drag the mouse (or stylus on a graphics tablet), Flash draws a vector path on screen.

In most vector applications, the freehand drawing tool works much better with a graphics tablet than with a mouse. However, Flash's automatic smoothing and shape recognition system is much more forgiving than those in most drawing applications. Flash has three different Pencil drawing modes: Straighten, Smooth, and Ink. The Straighten Pencil mode excels with the straight lines. If you want to draw freehand, but you want straight line segments, use the Straighten mode because it will automatically convert the paths to the nearest straight line segment approximations. Yet if you want to draw smooth paths, you will likely find that Straighten mode will yield effects counter to what you are trying to accomplish. For smooth lines, use the Smooth Pencil mode. Use Ink mode when you want to most closely represent what you have drawn. Because precision is necessary with Ink mode, it is best left to users with graphics tablets or those adept at drawing with a mouse.

The Pencil Mode option appears at the bottom of the Tools panel when you select the Pencil tool, as discussed in . Press and hold the Pencil Mode button to select from the three options. Flash uses Straighten mode by default.

As you work, you may find that you like the smoothing or straightening of the Flash Pencil tool, but the straightening or smoothing is too heavily (or too lightly) applied for your needs. You can control the degree to which Flash applies them using the Smooth Curves, Recognize Lines, and Recognize Shapes options under Edit → Preferences → Drawing.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Smoothing and Straightening Lines

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to smooth or straighten an existing line.

Use the Straighten and Smooth modifiers of the Selection tool (V).

Drawn shapes or lines, especially when drawn with the Pencil tool, have aberrations, such as bumps and undesired curves. You can clean up these aberrations by straightening or smoothing the line. Straighten lines that lack curved segments, and smooth lines that have curved segments.

To straighten or smooth a line or the edge of a shape, follow these steps:

1. Select the Selection tool in the Tools panel.
2. Double-click to select the whole line or shape. If a shape has both a stroke and a fill, double-click the fill to select both the fill and the stroke. Selecting strokes and shapes are discussed in detail in .
3. Click the Smooth or Straighten modifiers in the Options portion of the Tools panel (see ).
4. Repeat step 3 as many times as needed.

Figure : The Selection tool's Straighten and Smooth modifiers straighten and smooth an existing path

These modifiers have no effect on line segments that are already straight. Straightening shapes often results in a rectangle.

As global operations, straightening and smoothing may fix one part of a line or shape and cause trouble elsewhere. Remember that you can mix and match techniques. That is, you can straighten or smooth to approximate a shape, and switch to the Arrow or Subselection tool to rework a given area.

Smoothing and straightening is the best strategy for taking care of rough and bumpy paths, since these tools are geared toward improving the appearance of paths. In situations where the path looks good but appears to have too many points, making it hard to edit and increasing its file size, you should use the Optimize feature, as follows:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Painting Shapes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to emulate the experience of painting, but strokes aren't wide enough.

Use the Brush tool (B).

The Brush tool is a freehand drawing tool. Like the Pencil tool, its behavior is affected by the smoothing settings chosen in Preferences. But unlike the Pencil tool, the Brush tool creates fills, rather than lines.

When the Brush tool is selected, the Options portion of the Tools panel displays the brush options. The Brush Size and Brush Shape options are self-explanatory, but the Brush Mode and Lock Fill options are not. Brush Mode controls how the fills painted onto the stage interact with content already on the stage in the same frame, as follows:

Paint Normal

Paints over existing content (the default mode).

Paint Fills

Paints over only fills, leaving existing strokes intact.

Paint Behind

Fills the area behind existing elements, while leaving both their strokes and fills intact.

Paint Selection

Paints over selected strokes and/or fills only, leaving all unselected content intact.

Paint Inside

Paints only within the element in which you first click, not outside.

The differences among these modes can be seen in .

Figure : Different Brush Modes make coloring easy

, ,

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Tapered Painting Using a Pressure-Sensitive Graphics Tablet

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to paint tapered lines using a pressure-sensitive graphics tablet.

Use the Brush tool with the Pressure modifier toggled on.

If you have a pressure-sensitive graphics tablet (such as a Wacom tablet) installed, the Options for the Brush tool include a button for pressure sensitivity. When pressure sensitivity is toggled off, the Brush tool paints fills just as it does with the mouse, but when toggled on, the Brush tool responds to pressure.

To create calligraphic effects, toggle pressure sensitivity on and use one of the slanted Brush shapes.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Selecting a Shape and Changing Its Attributes

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to select a shape and change its fill color.

Click the fill with the Selection tool.

In Flash, fills are associated with shapes, so if you want to change a fill, you need to select its shape. To select a fill, click it with the Selection tool. You can then change its attributes using the Property inspector, the Colors area in the Tools panel, or the Color Mixer panel.

You can also delete a selected shape and fill by pressing the Delete key. If the shape has a stroke, the line surrounding the shape and its stroke remain. Otherwise, the entire shape is deleted.

Note that the fill can be selected separately from the line in which it is contained. That is, if you have a shape with both a stroke and a fill, it is possible to select the shape/fill without selecting the line/stroke surrounding it. Doing so enables you to delete the fill while retaining the closed line and stroke, or separate a shape/fill from its line/stroke.

To select an entire shape that contains both a stroke and a fill, double-click the fill. The shape/fill and line/stroke are both selected.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Applying a Stroke to a Fill

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to add or replace a stroke to/on an existing fill.

Use the Ink Bottle tool (S) in the Tools panel.

The Ink Bottle adds or changes the stroke on an existing fill. It has two behaviors, depending on the nature of the fill:

• If the fill lacks a stroke, the Ink Bottle adds a line enclosing the shape and gives it the active stroke.
• If the shape already has a stroke, the Ink Bottle changes the stroke to the active stroke.

Using the tool requires two steps: setting the active stroke and then applying it to the shape. To specify the stroke formatting, select the Ink Bottle tool and choose the desired stroke color, height, and style from the Property inspector. To apply the new stroke, click anywhere on the shape itself, if it's a solid color. Otherwise, click near the edge of the fill to add the stroke.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Applying a Fill to a Closed Path

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to apply or modify a fill to/in a shape or closed path.

Use the Paint Bucket tool (K) in the Tools panel.

The active fill can be applied only to a closed area, such as a closed path or an existing fill. Either way, you use the Paint Bucket to apply the active fill.

Adding a fill to an existing area requires two steps: setting the active fill and then applying it. The active fill appears in the Fill color box of the Tools panel. Clicking the Fill color box brings up the color pop up, from which you can pick the colors currently in the Color Swatches panel (see for more on the Color Swatches panel).

In addition, you can also set the active fill to any solid color (), gradient (), or even tiled bitmap () fill.

After you have set the active fill, apply it by activating the Paint Bucket tool and clicking anywhere within the shape or closed line. If the shape already has a fill, the fill is replaced. If a closed line lacks a fill, then a fill is added.

,

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Filling in Paths with Gaps

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to fill in a nearly closed path, but Flash won't let you, because the shape isn't quite closed.

Change the Paint Bucket's Gap Size modifier to make Flash more tolerant of gaps. Or close the gap using any drawing tool or the Subselection tool.

Generally, fills are available to closed shapes only. However, you might draw a line that is almost, but not quite, closed. This often happens when you draw with the Pencil tool using a graphics tablet—the shape looks closed to you, but not to Flash.

You can make Flash more tolerant of shapes that don't quite close by making Flash ignore small gaps. When filling shapes with gaps, Flash creates a hypothetical straight line between the points adjacent to the gap. It does not actually close the shape, and it is not possible to apply a stroke over this straight line; Flash merely tolerates the gap, enabling a fill to be applied.

You can specify how aggressively Flash should close gaps by using the Gap Size modifier, which appears in the Options tray of the Tools panel when the Paint Bucket tool is active. Settings include Don't Close Gaps, Close Small Gaps, Close Medium Gaps, and Close Large Gaps.

Often, Flash's idea of a large gap appears quite small to our eyes, and it's common that even with the most tolerant setting (Close Large Gaps), Flash will not fill a given shape. In such cases, you will have to manually close the gap (or at least enough of it to fit in Flash's Close Large Gaps range).

To close a gap, use one of Flash's drawing tools, such as the Pencil tool, Line tool, or Pen tool. The Pen tool usually works best, because it is the most precise. Remember that you can use the Zoom tool (M, Z) to make the gap easier to see and fill.

When closing a gap manually, match the original line with the new line that you are creating to bridge the gap. To do so, click the existing line with the Selection tool, and look at its attributes in the Property inspector: color, height, and style. Then set the active stroke to the same settings.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Mixing Custom Colors

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to mix a custom color.

Use the Color Mixer panel or the system color picker (available in the color pop up).

When you click the Fill or Stroke color box in the Tools panel or Property inspector, Flash displays a color pop up with the colors stored in the Color Swatches panel, which by default contains the 216 colors of the web-safe palette. These colors are often insufficient to meet design needs, so you'll often need to mix your own colors.

Flash has a dedicated interface for mixing colors: the Color Mixer panel. To mix a solid color, follow these steps:

1. Open the Color Mixer panel (Window → Color Mixer).
2. In the Fill Style menu, choose Solid.
3. To mix a color, use any combination of visual and numeric controls.
   To mix a color visually, drag in the Color Space and/or drag the Brightness Control slider.
   To mix a color numerically, enter the desired values in the Red (R), Green (G), and Blue (B) fields; alternatively, enter a hexadecimal color value in the Hex Edit Text Box.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Saving and Reusing Custom Colors

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to save or reuse a custom color.

Add the color to the Color Swatches panel.

If you plan to reuse a color that you've mixed, you should save it as a swatch. As a swatch, it will be available in the color pop ups in the Tools panel and Property inspector, as well as the Color Swatches panel.

To add a color to the Color Swatches panel, follow these steps:

1. Mix the color and set it as the active stroke or fill color in the Colors panel.
2. Open the Color Swatches panel (Window → Color Swatches).
3. If necessary, resize the window so that a gray area is visible beneath the existing swatches.
4. Click in that gray area. The cursor becomes a paint bucket, to indicate that you are adding a new color swatch.

Another way to add a color swatch is to choose Add Swatch from the Color Mixer panel's Options menu.

To remove a color swatch, hold down the Ctrl (Windows) or Command (Macintosh) key and click the swatch. The cursor becomes a pair of scissors to indicate that you are removing a color swatch.

Undo does not work when adding and removing colors from the Color Swatches panel.

You can restore the Color Swatches panel to the factory default—Web 216 plus a handful of premixed gradients—by choosing Load Default Colors from the Color Swatch panel's Options menu.

You can remove all colors from the Color Swatches panel, except black and white. Removing colors is useful when you are designing a custom color palette for a project. Choose Clear Colors from the Color Swatches Options menu.

The color swatches you store in the Color Swatches panel are stored along with the Flash .fla file. Swatches will not automatically be available to any other files. However, you can save custom color palettes—indeed, this step is highly recommended when working on projects that span multiple files. To save a color palette, choose Save Colors from the Options menu. A standard Save dialog box appears, enabling you to save the color palette in one of two formats:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Applying Preset and Custom Gradients

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You want to create a gradient.

Choose one of the gradient presets or mix a custom gradient using the Color Mixer panel.

Gradients are a powerful and flexible graphic effect used in a variety of different ways, including pseudo-3D effects, mask effects, and more. You can apply one of Flash's preset gradients or mix your own.

Flash gradients come in two varieties: linear and radial. Every gradient contains a spectrum of colors. A linear gradient plots the spectrum across a fill in a simple left-to-right manner; the left side of the shape is mapped to the left side of the gradient spectrum, and the righ