Drawing with the Oval tool (O) creates a perfectly smooth oval. You draw ovals by clicking and then dragging diagonally from one "corner" of the oval to the other — dragging more vertically creates a taller oval, whereas dragging more horizontally creates a wider oval.

The Oval tool has no unique options, but it can be filled with any of the fill colors available in the Swatches panel (described later in this chapter) as well as "outlined" with any of the stroke styles or colors. Figure 5.2 shows some of the huge variety of shapes you can create by using the Oval tool with different stroke and fill settings.

Figure 5.2. Shapes created with the Oval tool, using different stroke and fill settings

If you need more complex shapes based on an oval, the Oval Primitive tool (available in the same drop-down Tools menu as the Oval tool) can save you a lot of time. With the Oval Primitive tool you can draw a basic oval and then modify angle and radius settings in the Properties panel (in the Oval Options section) to create donut or pie shapes, or open curves. Figure 5.3 includes just a few of the shapes that you can draw, along with the settings that were used to create them.

Figure 5.3. Shapes created with the Oval Primitive tool, using different angle and radius settings

Don't overlook the Close path check box available in the Properties panel for oval primitives. By default, this check box is selected to create filled shapes, but if you prefer to create outlined shapes or curves, simply deselect the Close path check box. Figure 5.4 shows the same shapes as Figure 5.3, with the difference in effect created by deselecting the Close path check box.

Figure 5.4. Shapes created with the Oval Primitive tool, with the Close path check box deselected

The Oval tool and Oval Primitive tool both have a "hidden" Settings dialog box that you can use to set the width and height of an oval before you draw it. To access this feature, select the Oval or Oval Primitive tool in the Tools panel (0), and then hold down the Alt (or Option) key as you click in the Document window where you want the shape to be drawn. The dialog box shown in Figure 5.5 pops up and you can set the width and height (in pixels). By default, the Draw from center check box is selected; if you prefer the shape to be drawn from the top-left corner (originating where you clicked), deselect the check box. After you have entered the settings and clicked OK, the shape is drawn for you to the correct dimensions.

Figure 5.5. The Oval Settings dialog box can be used to generate shapes with precise width and height settings, instead of estimating size as you draw them manually.

The Rectangle tool (R) creates perfect rectangles, which means that all four sides are parallel, regardless of the length or width of the shape. Draw rectangles by clicking to place a starting corner and then dragging toward the opposite corner of your shape until you have the size and shape that you want.

Aside from choosing the stroke and fill to apply to a shape drawn with the Rectangle tool, there are also value boxes in the Properties panel under Rectangle Options for setting the radius for corners on the rectangle. The radius is set to 0 pt by default, to create rectangles with square or 90-degree corners. The range for radius settings is 100 pt to −100 pt, but unless the dimensions of the rectangle are equal to double the radius setting that you use, you will not see any additional effect by pushing the value farther. For example, the highest (or lowest) setting that would have a visible effect on a rectangle that was 30 × 30 pixels square would be 15 or −15. Choosing a more moderate radius setting creates rounded rectangles or squares with softened corners, and choosing negative values creates rectangles with indented corners (see Figure 5.6). By default, all rectangle corners are locked to have the same value, but if you want to create more interesting polygons you can click the lock icon in the Properties panel to "unlock" the corner values and enter different radius settings for each corner.

Radius settings for rectangles made with the basic Rectangle tool cannot be adjusted after they are drawn, but shapes drawn with the Rectangle Primitive tool can be modified, using the options in the Properties panel, as long as they are not converted to drawing objects or broken apart into basic shapes.

Figure 5.6. Rectangles drawn with different radius settings create different degrees of roundness or inversion on the corners. Radius settings for rectangle primitives remain editable after they are drawn, and settings for basic rectangles "stick" and are not editable (from the Properties panel) after the shape is created.

As shown in Figure 5.7, the Join menu includes three settings — Miter, Round, and Bevel — that you can apply to create three different join styles on any of your drawings or shapes with intersecting lines.

Figure 5.7. The three join styles available in the Join drop-down menu in the Properties panel create corners or angles with different types of line intersection.

When you select the Miter join style, you can further adjust the angle of the join by entering a setting between 1 and 60 in the Miter field. This field is a hot text value in Flash CS5, which means it can also be modified by clicking and dragging left or right to update the Miter angle. As shown in Figure 5.8, the visual difference between these different Miter angles is very subtle, and for most graphics you will probably be happy with the default setting of 3.

Figure 5.8. The sharpness of Miter joins can be adjusted by entering a setting between 1 and 60 in the Miter field.

The PolyStar tool is so named because it is a multipurpose tool that can make a whole variety of different polygons and stars. If you're using the default Tools set in Flash, you'll find the PolyStar tool at the bottom of the shape tools submenu in the Tools panel. There is no shortcut key for the PolyStar tool.

When the PolyStar tool is active, an Options button appears in the Properties panel to open a Tool Settings dialog box that enables you to control the type of shape you want to draw. The composite in Figure 5.9 includes the Properties panel as it appears when the PolyStar tool is active, as well as the Tool Settings dialog box with the two shape styles available: polygon or star. You can set the number of sides for either shape by entering a value between 3 and 32 in the Number of Sides field. As shown at the top of Figure 5.9, a standard five-sided star is as easy to create as a triangle — that is, a polygon with three sides.

Figure 5.9. A composite figure showing the Options button in the Properties panel (left) that launches the Tool Settings dialog box, used to create different shape styles (right)

The fields in the Tool Settings dialog box look the same whether you select polygon or star in the Style menu, but Star point size does not affect polygon shapes. If you are drawing a star, enter any number between 0 and 1 to control the depth of the star points. This might not look like much of a range, but you can enter decimal numbers, so you actually have 99 possible settings! As shown in Figure 5.10, numbers closer to 0 create sharper stars and numbers closer to 1 create blockier shapes.

Figure 5.10. Star point size decimal settings between 0 and 1 create various star shapes.

Drawing with the Line tool (N) enables you to create a perfectly straight line that extends from a starting point to an endpoint, simply by clicking a start position and dragging to the end position before releasing the mouse. Just select the Line tool in the Tools panel and start drawing in the Document window. You can select various line styles and stroke heights from the Properties panel, as well as set the color with the popup Swatches panel accessible from the Stroke color chip on either the Properties panel or the Tools panel. I describe the various options for line styles and colors later in this chapter. Snapping settings and guides can be used to help control where a line is placed and how precisely it connects to other lines. The Line tool conforms to the snapping settings I describe later in this chapter.

Figure 5.11 shows how a line previews as you drag and how it appears when the mouse is released and the current line style and stroke height settings are applied.

With the Cap option menu in the Properties panel, you can quickly switch a stroke from a rounded end to a square end to a flat or no cap end. Figure 5.12 illustrates how these cap styles render on a 10 pt line.

Figure 5.11. Line tool preview (top) and the final line (bottom), displayed when the mouse button is released and line style is rendered

Figure 5.12. A 10 pt line rendered with different cap styles. These styles can be applied to any line using the Cap style menu in the Properties panel: None (top), Round (center), Square (bottom).

You use the Pencil tool to draw lines and shapes. At first glance, it operates much like a real pencil. You can use the Pencil tool with different line styles as you draw a freeform shape. But a deeper examination reveals that, unlike a real pencil, you can set the Flash Pencil tool to straighten lines and smooth curves as you draw. You can also set it to recognize or correct basic geometric shapes. For example, a crude lumpy oval can be automatically recognized and processed into a true, or perfect, oval. You can further modify these shapes and lines after you've drawn them by using the Selection and Subselect tools.

When the Pencil tool is active, one option besides the Object Drawing toggle appears at the bottom of the Tools panel. This is actually a button for the Pencil Mode popup menu, which sets the Pencil tool's current drawing mode. The three modes, or drawing styles, for the Pencil are Straighten, Smooth, and Ink. These settings control the way that line processing occurs as you draw.

Figure 5.13 shows the same freehand drawing done with the different Pencil modes. The drawing on the left was done with the Straighten mode, the drawing in the middle was done with Smooth mode, and the drawing on the right was done with Ink mode. As you can see, each mode is more effective for certain types of lines and shapes.

Figure 5.13. Similar sketches made by using the three different Pencil modes to show how line processing affects various shapes: Straighten (left), Smooth (center), and Ink (right)

To create a pleasing finished result, you'll most likely use different Pencil modes when working on individual elements of your drawing. Here are some notes on the characteristics of the three Pencil drawing modes that you can select in the Tools panel:

Adjusting Drawing Settings

You may adjust the degree to which shape recognition processes your Pencil drawings with the Drawing settings found in Edit

You can also choose to further simplify lines and shapes that you have drawn with the Pencil in Ink mode by using the Selection tool to select what you've drawn and then using either the Smooth or Straighten command by clicking the Smooth or Straighten button at the bottom of the Tools panel. Or, for maximum control, manually edit extraneous points with either the Pen or the Subselect tool (as I describe in the Pen and Subselect sections later in this chapter). Here are the various Drawing settings and options available in Preferences:

• Connect Lines: The Connect Lines setting adjusts how close lines or points have to be to each other before Flash automatically connects them into a continuous line or shape. This setting also controls how close to horizontal or vertical a line has to be for Flash to set it at an exact angle. The options are Must be Close, Normal, and Can be Distant. This setting also controls how close elements need to be to snap together when Snap to Objects is turned on.

• Smooth Curves: Smooth Curves simplifies the number of points used to draw a curve when the Pencil is in Straighten or Smooth mode. Smoother curves are easier to reshape and are more optimized, whereas rougher curves more closely resemble the original lines drawn. The options are Off, Rough, Normal, and Smooth.

• Recognize Lines: The Recognize Lines setting controls how precise a line has to be for Flash to recognize it as a straight line and automatically align it. The options are Off, Strict, Normal, and Tolerant.

• Recognize Shapes: The Recognize Shapes setting controls how accurately you have to draw basic geometric shapes and 90-degree or 180-degree arcs for Flash to recognize and correct them. The options are Off, Strict, Normal, and Tolerant.

• Click Accuracy: Click Accuracy determines how close to an element the cursor has to be for Flash to recognize it. The settings are Strict, Normal, and Tolerant.

These drawing settings do not modify the Straighten and Smooth options for the Selection tool, which reduce point complexity (or smooth angles) based on the settings you enter in the respective dialog boxes before you apply the command to a shape or line that has already been drawn.

You use the Brush tool to create smooth or tapered marks and to fill enclosed areas. Unlike the Pencil tool, which creates marks with a single row of anchor points, the Brush tool actually creates marks by using filled shapes. The fills can be solid colors, gradients, or fills derived from bitmaps. Because the Brush paints only with a fill, the Stroke color chip does not apply to the marks drawn with the brush. The Brush tool is especially well suited for artwork created using a drawing tablet. A number of settings and options are available when the Brush tool is active, giving you precise control over the type of marks that it makes.

The Brush mode menu

The Brush tool includes options for controlling exactly where the fill is applied. The Brush mode option menu reveals five painting modes that are amazingly useful for a wide range of effects when applying the Brush tool: Paint Normal, Paint Fills, Paint Behind, Paint Selection, and Paint Inside, as shown in Figure 5.14.

Figure 5.14. The Brush tool and options (left); the Brush mode settings menu (right)

Note

The Pressure toggle and the Tilt toggle are visible in the Options area only if you have a drawing tablet installed on your system.

Note

To learn more about tablets and read some fun tutorials, visit www.wacom.com.

Figure 5.15 depicts the various ways in which the Brush modes interact with drawn and painted elements. The base image is a solid white rectangle drawn with a black outline. The boat outline is drawn with the Pencil tool in dark gray on top of the rectangle:

• A: Paint Normal mode: Applies brush strokes over the top of any lines or fills.

• B: Paint Fills mode: Applies brush strokes to replace any fills, but leaves lines untouched.

• C: Paint Behind mode: Applies brush strokes only to blank areas and leaves all fills, lines, or other items untouched. In Figure 5.15 (C), the only areas the brush mark covers are those in the background, outside the frame of the picture. Effectively, the brush has gone behind the entire shape. If the stroke had originated within the frame, it would have covered the white fill and gone behind the drawn gray lines and the black outline.

• D: Paint Selection mode: Applies brush strokes only to selected fills. In Figure 5.15 (D), a selection was made by Shift+clicking both the white fill inside the boat and inside the sail. The same gray brush marks drawn on the previous figure are now visible only inside the selected fills.

• E: Paint Inside mode: Applies brush strokes only to the singular fill area where the brush stroke was first initiated. As the name implies, Paint Inside never paints over lines. If you initiate painting from an empty area, the brush strokes won't affect any existing fills or lines, which approximates the same effect as the Paint Behind setting.

Warning

Painting with the background color (such as white) is not the same as erasing. Although painting with a background color may appear to accomplish something similar to erasing, you are, in fact, creating a filled item that can be selected, moved, edited, deleted, and erased. Even if you can't see it, it adds to your file size. Only erasing erases!

Brush size and shape options

Although similar to Stroke height and style, the Brush size and Brush shape settings are unique to the Brush tool.

Note

The Lock Fill option is common to both the Brush tool and the Paint Bucket tool. For coverage of using the Lock Fill option with the Brush tool and the Paint Bucket tool, refer to Chapter 9, "Modifying Graphics."

In Flash, the size of applied brush marks is always related to the Zoom setting. Therefore, using the same brush diameter creates different-sized brush marks, depending on what Zoom setting you work with in the Document window (see Figure 5.16). You can paint over your whole stage in one stroke, even with a small brush diameter, if your Zoom is at a low setting such as 8 percent; or you can use a large brush diameter to make detailed lines if your Zoom is at a high setting such as 1,500 percent.

Figure 5.15. The result of painting with the Brush tool varies depending on the Brush mode. Paint Normal (A), Paint Fills (B), Paint Behind (C), Paint Selection (D), Paint Inside (E).

Figure 5.16. Marks made by using the same brush size applied with the Document View at different percentages of Zoom

The Brush Shape option is a drop-down menu with nine possible brush shapes that are based on the circle, ellipse, square, rectangle, and line shapes. (Refer to Figure 5.14.) The oval, rectangle, and line shapes are available in various angles. You can combine these stock brush shapes with the range of brush sizes available in the Brush Size menu to generate a wide variety of brush tips. When using shapes other than circles, note that the diameter sizes chosen in the Brush Size menu apply to the broadest area of any brush shape.

Additional Brush options for drawing tablets

If you use a pressure-sensitive tablet for drawing, two extra options appear in the Tools panel when the Brush tool is active. (The Pressure and Tilt toggles are shown at the bottom of the Tools panel in Figure 5.14.) The Pressure toggle enables you to use pen pressure on a tablet to vary the thickness of brush marks as you draw. Working on a tablet with this option, you can create organic-looking strokes that taper or vary in width as you change the amount of pressure applied to the tablet surface.

Tip

To achieve pressure-sensitive eraser marks, use the eraser on the tablet pen while the Brush tool is active rather than the Eraser tool in the Tools panel.

Figure 5.17 shows a series of tapered marks created with a pressure-sensitive tablet, using a single Brush size and a consistent Zoom setting.

Figure 5.17. Drawing with the Brush tool on a pressure-sensitive tablet (with the Pressure option turned on in the Tools panel) creates tapered, calligraphic marks.

If you're drawing on a tablet that supports this feature, activating the Tilt toggle enables you to control the thickness and direction of strokes with the movement of your wrist. The degree of tilt is determined by the angle between the top of your stylus (or pen) and the top edge of the drawing tablet. This is a very subtle control that you'll most likely notice if you're using a large, tapered (or "flat") brush style — and if you spend hours drawing on a tablet! I didn't include a figure to illustrate this feature because it is hard to tell from finished artwork how it affects your drawings, but experienced artists will appreciate the "feel" that this option adds to the drawing environment.

Note

Support for the Tilt feature varies on different drawing tablets. If you have a Wacom tablet, you can get current drivers and feature documentation from www.wacom.com. It is beyond the scope of this book to describe different types and features of drawing tablets, but the drawing options available in Flash have been tested on a wide range of tablets, so the chances are good that they will work for you.

The Eraser tool (E) is used in concert with the shape and drawing tools to obtain final, useable art. As the name implies, the Eraser tool is primarily used for rubbing out mistakes. When the Eraser tool is active, three options appear on the Tools panel, as shown in Figure 5.18. Eraser mode and Eraser Shape are both drop-down menus with multiple options. For Eraser Shape, you can select rectangular or oval erasers in various sizes. Eraser modes are similar to the Brush modes I described previously.

You use the Eraser tool's one unique option, the Faucet toggle, to clear enclosed areas of fill. Using the Faucet is the equivalent of selecting a line or a fill and then deleting it, but the Faucet accomplishes this in one easy step. Select the Eraser tool, choose the Faucet option, and then click any line or fill to instantly erase it. Clicking any part of a selection with the Faucet deletes all elements in the selection.

The interaction of Eraser modes and artwork is consistent with the Brush modes available for the Brush tool. The only difference is that instead of adding a mark to a specified part of a drawing, the Eraser removes marks in a specified part of a drawing. Aside from Erase Normal, Erase Fills, Erase Selected Fills, and Erase Inside, which you will recognize from the previous descriptions of Brush modes, there is also an Erase Lines mode that enables you to remove any lines without disrupting fills.

Note

The Eraser tool erases only lines and fills that are in the current frame of the scene. It won't erase groups, symbols, or text. When you need to erase a part of a group, you have two options: Select the group and choose Edit

Figure 5.18. The Eraser tool has three basic options: Eraser mode, Eraser shape, and Faucet.

The only alternative to using the Eraser tool to remove graphic elements or areas of drawings is to select them with the Selection, Subselect, or Lasso tool, and then delete them by pressing Delete (or Backspace).

The stroke and fill colors that are applied with any of the drawing tools are determined by the current settings of the color chips located in the Flash Tools panel and in the Properties panel. You can set the fill and stroke colors before you draw something, or select an element on the Stage and adjust it by choosing a new color from the stroke or fill swatches. The Oval, Rectangle, PolyStar, Brush, and Paint Bucket tools all use the current fill settings — you can select colors before you draw a new shape or select an existing shape and modify it by changing the fill and stroke colors.

The color chips in the Tools panel display the most recently selected colors and are always visible regardless of what tool you're using. The Properties panel shows the color chip of the currently active item and displays the chips only if they can be applied with the tool you have active or to the item you have selected. Thus, if you select the Line tool, both Stroke and Fill color chips are visible on the Tools panel, but the Properties panel displays only a Stroke color chip (the Fill color chip displays a strikethrough icon). Although these chips indicate the current color, they're really also buttons: click any color chip to select a new color from the popup Swatches menu. The Swatches menu is shown in Figure 5.21 as it pops up from the Tools panel or from the Properties panel.

The popup swatches display the same color options as the main Swatches panel shown in Figure 5.22. Use shortcut keys (Ctrl+F9 or

Figure 5.21. The current Swatches popup is opened by clicking the Stroke or Fill color chip in the Tools panel (left), or by clicking a color chip on the Properties panel (top right).

Figure 5.22. Grouping the Swatches panel with the Color panel enables tabbed access to either panel.

In Flash, for all tools that draw or display a line or outline, you control the thickness of the line — or stroke — either by dragging the Stroke Height slider or by entering a value in the Stroke Height numeric entry box. Both of these controls are available in the Properties panel, as shown in Figure 5.23. The stroke options are visible only when they can be applied — if a drawing tool that creates lines is active in the Tools panel or if you have selected an element with a stroke.

Changes to stroke color and style apply to lines or curves drawn with the Pen, Line, Pencil, Oval, Rectangle, and PolyStar tools. For shapes, the changes apply only to the outline, not to the fill. As with fill color settings, you can select a stroke color and style before you create any artwork (as long as the tool you're going to use is active in the Tools panel), or you can select a line in the Document window with the Selection tool and change its appearance with the settings in the Properties panel.

Figure 5.23. The Properties panel gives you all the controls you need to select the stroke height, color, and style, as well as an option to control how strokes scale in the Flash Player and a new Hinting option to constrain points to whole pixel values.

The Stroke Style drop-down menu (see Figure 5.24) offers the choice of Hairline or six standard, variable-width strokes. Hairline strokes always have the same 1-pixel thickness, even if the mark or shape that they outline is scaled larger after the stroke is applied. You can select and combine the other six line styles with any stroke height. If these styles do not deliver the line look you need, the Custom button (to the right of the Style menu) opens a Stroke Style dialog box (see Figure 5.24), which you can use to generate custom line styles by selecting from a range of properties for each preset line. Basic properties include stroke Thickness and Sharp corners. Other settings vary depending on what style of stroke you choose.

To closely examine a custom line before you begin drawing with it, select the Zoom 4x check box beneath the preview area of the Line Style dialog box. Note the Sharp corners check box, which toggles this Line Style feature on or off — select the check box to turn Sharp corners on.

Figure 5.24. The Stroke Style dialog box is opened with the Custom button on the Properties panel. The properties that appear vary depending on the style of line you select for adjustment.

Of course, the best way to get an idea of the variety of possible strokes is to experiment with settings and sizes for each style, but there are a few things to keep in mind as you work with stroke styles in Flash:

The Scale option is available only for solid lines, but it is very helpful for ensuring the consistency of scaled UI elements with outlines such as buttons. The various scaling behaviors you can set by using the Scale menu work only if you convert the raw stroke into a symbol. To make this easier to understand, here are the steps for applying the Scale option:

If you have ever tried to reuse a graphic that needed to be scaled while maintaining a specific size ratio to other elements — either relative or fixed — you will appreciate the level of control the Scale menu affords. The most common use for this option is constraining the scale behavior of a custom button that has to be adjusted to fit text of varying lengths. Generally, you want the stroke on the button to remain consistent while the button is stretched to accommodate the text. If you apply the Vertical Scale behavior, you will have a button with a stroke that stays the same no matter how long you stretch it horizontally to fit your text. But if you decide the buttons need to be a bit bigger overall, you can apply a vertical transformation and the stroke grows proportionally. What more could I ask for?

The Selection (arrow) tool (V) is used most commonly to select and move items — or multiple items — on the Stage. It is also used to reshape lines and shapes, in a way that is familiar to users who have worked in other vector graphics applications. The Selection tool's neighbor, which is differentiated with a white, rather than a black, arrowhead, is the Subselect tool (A). The Subselect tool is most useful for moving and editing anchor points created with the Pen tool and adjusting tangents on Bezier curves.

You can use the Selection tool to reshape a line or shape by pulling on the line (or shape) itself, or on its endpoints, curves, or corners. You can also use the Selection tool to select, move, and edit other Flash graphic elements, including groups, symbols, buttons, and text. When you click a raw stroke or fill, a mesh pattern appears to indicate that it has been selected. If the item you click is a symbol, a group, or a drawing object, a thin, colored line (called a highlight) indicates the selection status. You may set the highlight color in the General Preferences dialog box found under Edit

Tip

To temporarily turn off the selection mesh while editing an element, use View

Figure 5.31 shows a shape, a drawing object, a shape primitive, a group, and a Graphic symbol as they look when unselected (top) and as they appear when selected with the Selection tool. The first oval (a primitive shape) displays a mesh pattern when selected (left). The second oval (drawn with the Object Drawing option turned on), the third oval (drawn with the Oval Primitive tool), and the fourth oval (with the stroke and fill combined in a group) all display a thin, rectangular border when selected — the subtle differences being the color of the selection outline and the small, filled dot that designates the center point of the oval primitive. The final oval (which was converted into a Graphic symbol) displays a thin, rectangular border with a small crosshair icon in the top-left corner and a white transformation point in the center when selected (right). You can move groups and symbols but not edit them directly on the Stage with the Selection tool unless you go into Edit mode.

In addition to clicking a line or shape to select it, you can select one or more items by dragging a marquee around them when the Selection tool is active. This operation is called drag-select. You can add additional items to a current selection by pressing Shift and clicking the items in sequence. When you drag-select to make a selection, previously selected items are deselected and excluded from the selection. In order to include previously selected items, press Shift as you drag-select. When a group is selected and you drag to move it on the Stage, holding down Shift constrains the movement range of the elements to 45 degrees. This is helpful if you need to move an element up or down while keeping it on the same axis or baseline.

Figure 5.31. Top row shows items unselected; bottom row shows Selection tool highlights (L-R) for a shape, a drawing object, a shape primitive, a group, and a Graphic symbol

Deselect one or more items by using any of the following methods:

You can also use the Selection tool for duplicating items. Simply select an item (or line segment) with the Selection tool and press Alt (Option) while dragging the item to a new location. The original item remains in place, and a new item is deposited at the end of your drag stroke.

Moving multiple elements with the Selection tool

Text boxes, drawing objects, and groups are selected as single elements and move as a single unit. After you create text in a text box (I discuss text features in Chapter 8, "Working with Text"), Flash treats the text as one block, or group, meaning that all the individual letters move together when the box is selected. Similarly, a group of graphic elements — such as lines, outlines, fills, or shapes — can be grouped and moved or manipulated as a single element. However, when you move an item that is not grouped, only the selected Part is moved. This situation can be tricky when you have ungrouped fills and outlines because selecting one without the other could unintentionally break up your shape. To group elements, select them all and apply the Modify

Tip

Double-clicking the fill of a shape that has an outline stroke and a fill selects both. You can also use this strategy on lines with multiple sections. Double-clicking one section selects all the connected parts of a line, rather than just the closest segment.

The Drawing Object mode and the Shape Primitive tools make it easier to keep strokes and fills together. Drawing objects and shape primitives behave like grouped shapes: When you click anywhere on the shape, the stroke and fill are both selected so they move together. If you have drawn basic shapes with the Object Drawing toggle turned off, you can use the Modify

Modifying Selection preferences

In most cases, the default behavior for selection tools will support your workflow, but there are two preferences that you can modify to adjust selection behavior:

• Turn off Shift select: Prior to Flash 4, additional elements were added to a selection simply by clicking them. To use this older selection style, go to Edit (or on Mac Flash)

  

• Turn on Contact-sensitive selection: The standard selection behavior in Flash requires that a lasso or selection marquee completely enclose a group, drawing object, or symbol in order to select it. If you prefer to have these items included in a selection when the marquee touches any visible part, go to Edit

  

Figure 5.32. To change the default nonselection result of partial selections in Flash (top), you can turn on Contact-sensitive selection behavior to select even partially enclosed items (below).

Using Selection tool arrow states to adjust or move drawings

In addition to the actions accomplished by selecting a line (or line section) and clicking an option, three arrow states — Move Selected Element, Reshape Curve or Line, and Reshape Endpoint or Corner — enable you to reshape and move parts of your drawings. It works like this: As you move the Selection tool over the Flash Stage, the arrow cursor changes state to indicate what tasks it can perform in context with various items (the line or fill) closest to the Selection tool's current position.

Tip

When reshaping brush strokes or other filled items with the Selection tool, make sure that you don't select both the stroke and fill before trying to reshape the outline. If you do, you'll be able to move only the entire brush stroke — you won't be able to reshape it.

Figure 5.33 shows a series of (magnified) images that demonstrate the various arrow states as they appear and are applied. On the left, the original shape is shown with the arrow states displayed as the cursor is moved over the center of the shape, over a corner (B), and over a line (C). The center image shows the preview as the Move Corner arrow is used to extend the corner of the square and the Reshape Curve arrow is used to stretch the curve. The final image on the right shows the resulting changes to the original square.

Figure 5.34 shows the various Selection tool arrow states used to modify a line. The lower images show the arrow state cursors, the center images show the preview as the mouse is dragged, and the top images show the resulting changes to the line when the mouse is released. You will notice that lines have to be selected in order to be moved without changing their shape with the Selection tool. If the line is not selected, the arrow displays only Move Corner or Reshape Curve states. If you want to add an angle to a line rather than add a curve, switch from Reshape Curve to Add Corner Point by holding down Alt (or Option) before clicking and dragging a line segment.

Figure 5.33. Selection tool arrow states used to reshape and reposition an element: Move Selected Item arrow, Reshape Corner arrow (B), and Reshape Curve arrow (C)

Warning

The icon visible next to the Selection tool arrow does not update when you switch from Reshape Curve to Add Corner Point by holding down Alt (or Option), but the behavior changes. After you click and move the line, the icon updates to match the behavior.

Figure 5.34. Using Selection tool arrow states to reshape and reposition a line (L-R: Move Selected Item, Reshape Corner, Reshape Curve)

Tip

Some brush strokes are easier to reshape if you view them as outlines (as described in Chapter 4).

Knowing your Selection tool options

Figure 5.35 shows the three options that appear at the bottom section of the Tools panel when the Selection tool is active: Magnet (or snap to objects), Smooth, and Straighten. Because the various snap controls can be confusing at first, I compare the Magnet tool with the other snap settings available in Flash, later in this chapter.

Figure 5.35. The Selection tool options available on the Tools panel

The Smooth and Straighten options available with the Selection tool (when a raw shape or drawing object is selected) are best used to clean up drawings by smoothing irregular curves or straightening crooked lines. Smoothing or Straightening reduces the number of bumps and variations (or points of transition) in a complex shape or line by reducing the number of points. The simplest curve or line is described by only one point at each end.

To simplify a shape or line, click the Selection tool and select the item you just sketched. Then click the Straighten or Smooth button in the Tools panel to get incremental adjustment. If you want more control over the way these commands are applied to your artwork, use Modify

Tip

The controls in the Advanced Smooth dialog box can be a little confusing, but if you look at your drawing and consider if there are any angles that you do want to preserve and then use the angle menus to set a value range that excludes the angle you do want to keep (and not smooth), then it makes a little more sense. For example, if you have a 90-degree angle in your artwork (a clean corner) and you don't want that rounded off but you do want wider curves to be smoothed and narrower curves to be smoothed, you would set the first angle setting to Smooth angles below 89 degrees and the second setting to Smooth angles above 91 degrees. This would leave your 90-degree angle unsmoothed while applying smoothing to all the other angles in your drawing. If you have a hard time telling the difference between one result and another, don't be dismayed: This is a very subtle adjustment.

As shown in Figure 5.36, the simplified shape usually needs some further adjustment to get the result that you want after some of the points have been removed. The tools used for adjusting individual curves and points are the Pen tool and the Subselect tool.

You can apply the Smooth and Straighten options with the Selection tool to any selected shape or line to reduce the number of points and modify the form. The specific effect that these options have on your graphics is dependent on the Drawing settings that were used to create the original lines and the level of straightening or smoothing that you choose. By minimizing complexity in freehand drawings or shapes, Smooth and Straighten gradually reduce an erratic graphic into the most simplified form that can be described with the fewest points possible, while making curved lines straighter (when you apply Straighten) or sharp angles more rounded (when you apply Smooth).

Note

In the example shown in Figure 5.36, I achieved maximum smoothing on all angles in the drawing by using only the Smooth angle above setting in the Smooth dialog box. With this set to 0 and the Smooth angle below check box deselected, you are allowing the smoothing algorithm to be applied to all angles in the drawing (from 0 degrees to 180 degrees). The same effect could be achieved by setting the Smooth angle below value to 180 and deselecting the Smooth angle above check box.

Although these assistants nudge a sketch or line style in the direction that you want, they don't add information; so don't be surprised if your drawing doesn't really look "better" or it takes a few tries to get the right balance between rough drawing and shape recognition.

Figure 5.36. Lines drawn with the Pencil tool (top left) can be selected with the Selection tool and simplified with the Advanced Smooth (center) or Advanced Straighten (right) options. A geometric shape (bottom) can be smoothed to have more curved lines (center) or straightened to have more angular lines (right).

The Lasso (L) is a flexible tool, somewhat resembling the selection equivalent of the Pen tool crossed with the Pencil tool. You use the Lasso primarily to make freeform selections and to group-select odd or irregular-shaped areas of your drawing. After areas are selected, they can be moved, scaled, rotated, or reshaped as a single unit. You can also use the Lasso tool to split shapes or select portions of a line or a shape. As shown in Figure 5.37, it has three options in the Tools panel: the Polygon mode button, the Magic Wand, and the Magic Wand properties.

The Lasso tool works best if you drag a loop around the area you want to select. (Hence, the tool name Lasso!) But if you slip or if you don't end the loop near where you started, Flash closes the loop with a straight line between your starting point and the endpoint. Because you can use the Lasso tool to define an area of any shape — limited only by your ability to draw and use the multiple selection capabilities of Flash — the Lasso tool gives you more control over selections than the Selection tool.

Figure 5.37. The Lasso tool and options

The Magic Wand option and Magic Wand properties

The Magic Wand option of the Lasso tool is used to select ranges of a similar color in a bitmap that has been broken apart. After you select areas of the bitmap, you can change their fill color or delete them. Breaking apart a bitmap means that Flash subsequently sees the bitmap image as a collection of individual areas of color. (This is not the same as tracing a bitmap, which reduces the vast number of colors in a continuous-tone bitmap to areas of solid color.) After an image is broken apart, you can select individual areas of the image with any of the selection tools, including the Magic Wand option of the Lasso tool.

The Magic Wand option has two modifiable settings: Threshold and Smoothing. To set them, click the Magic Wand settings button to launch the Magic Wand Settings dialog box (shown in Figure 5.38) while the Lasso tool is active.

Figure 5.38. Use the Magic Wand Settings dialog box to adjust the selection range and level of smoothing.

The Threshold setting defines the breadth of adjacent color values that the Magic Wand option includes in a selection. Values for the Threshold setting range from 0 to 200: the higher the setting, the broader the selection of adjacent colors. Conversely, a smaller number results in the Magic Wand making a narrower selection of adjacent colors. A value of zero results in a selection of contiguous pixels that are all the same color as the target pixel.

The Smoothing setting of the Magic Wand option determines to what degree the edge of the selection should be smoothed. This is similar to anti-aliasing. (Anti-aliasing dithers the edges of shapes and lines so that they look smoother on-screen.) The options are Smooth, Pixels, Rough, and Normal.

The Subselection (arrow) tool (A) is the companion for the Pen and is found in the Tools panel to the right of the Selection tool. The Subselection tool has two purposes:

When you position the Subselection tool over a line or point, the hollow arrow cursor displays one of two states:

Figure 5.39 shows the use of the Subselection tool to move a path (A), to move a single point (B), to select a tangent handle (C), and to modify a curve by adjusting its tangent handle (D). Note that a preview is shown before releasing the handle.

Figure 5.39. Using the Subselection tool to modify lines and curves

The Subselection tool is most useful for modifying and adjusting paths. To display anchor points on a line or shape outline created with the Pencil, Brush, Line, Oval, or Rectangle tools, simply click the line or shape outline with the Subselection tool. This reveals the points that define the line or shape. Click any point to cause its tangent handles to appear. If you have a shape that is all fill, without any stroke, you'll need to position the cursor precisely at the edge of the shape in order to select or move it with the Subselection tool.

To convert a corner point into a curve point, follow these steps:

Note

By holding down Ctrl (or

An important use of the Pen tool/Subselection tool combo is editing lines for optimal file size. The simpler your shapes, the smaller your file size and the faster your movie downloads. Most often, this involves deleting extraneous points. There are a few ways to delete points:

There are five independent snapping settings in Flash. Snapping is a feature that gives you guidance when moving elements on the Stage and helps to align elements accurately in relation to each other, to the drawing grid, to guides, or to whole pixel axis points. The five different snapping controls can be turned on and off in the View

Figure 5.40. You can control Snapping settings in the Edit Snapping dialog box by using the Basic view, which shows only the top five check boxes, or the Advanced view, which expands the dialog box to include more Snap align settings, as shown here.

You can tell that an item is snapping by the appearance of dotted guide lines, as shown in the Snap Align example (see Figure 5.41), or by the appearance of a small circle beside the Selection tool arrow cursor, as shown in the Snap to Object and Snap to Grid examples (see Figure 5.42 and Figure 5.43). For best control of snapping position, click and drag from the center point or from an outside edge of an element.

The five main snapping modes are adjusted and applied as follows.

Snap to Objects

The Snap to Objects setting is a toggle that causes items being drawn or moved on-screen to snap to or align with other items on the Stage. Click the magnet icon in the Tools panel to turn snapping on or off (Shift+Ctrl+/ or Shift+

Figure 5.41. Snap Align guides give visual feedback for various alignment settings.

As shown in Figure 5.42, object snapping is indicated by the "o" icon near the center point as an item is moved from its original position (left). When the item is dragged close enough to another item to snap to it, the "o" icon gets slightly larger, which indicates to you to release the mouse (right). This same visual cue works if you drag an item by a corner point rather than from a center point. Ovals can be aligned to the center point or to any point along their outer edge.

Figure 5.42. Snap to Objects indicated by a change in the size of the center point (or corner point) "o" icon as an item is moved to overlap with another item

Snap to Grid

Snap to Grid (Ctrl+Shift+' [apostrophe] or

To control the tolerance of this snapping feature, use the settings found under View

Figure 5.43. The snap icon as it appears when an element is dragged onto a grid line with Snap to Grid turned on (snapping works regardless of whether the grid is visible or not)

Snap to Guides

As I described in the previous chapter, guides are vertical or horizontal visual alignment tools that can be dragged onto the pasteboard or Stage when rulers are visible: Choose View

Figure 5.44. The snap icon as it appears when an element is dragged onto a guide with Snap to Guides turned on

Note

Snap to Guides is independent of Snap to Grid, but guides can be placed only outside the grid when Snap to Grid is turned off.

Tip

Rulers have to be visible to drag a guide onto the Stage, but after guides are placed, rulers can be turned off and guides will still be visible.

Snap to Pixels

Snap to Pixels is the only "global" setting that causes all elements to align with a 1-pixel grid that is visible only when the View scale is set to 400 percent or greater. This setting does not necessarily help you to align elements with each other, but it does help to keep elements from being placed "between pixels" by constraining movement of elements on the X and Y axes to whole pixels, rather than allowing decimals. There is no shortcut key for turning Snap to Pixels on, but you can always toggle it on and off from the View menu by checking or unchecking View

Figure 5.45. The pixel grid visible when View scale is at 400 percent or higher with Snap to Pixels turned on

Warning

If an item is positioned between pixels — for example if the X, Y position is 125.5, 200.5 — the Snap to Pixel feature does not correct the position to a whole pixel value. Snap to Pixels constrains only the movement of items to whole pixel values. Thus, the item example given here could be dragged to a new location only by moving in whole pixel values; so it might end up at a new location such as 130.5, 225.5. If you want to keep items aligned to whole pixel values, use the input fields in the Properties panel to manually enter a starting location with whole pixel X, Y values, and then use the Snap to Pixel option to keep items aligned with the 1-pixel grid.

Tip

When you are working with an oval or other nonsquare polygon, you will notice that the X, Y values in the Properties panel may still show decimal pixel values even when Snap to Pixels is turned on. If you use the Info panel to change the shape's registration point from the default top-left setting to the center (click the center square in the Registration grid), you will have more success positioning and tracking the shape with whole pixel values.

When you are drawing in Flash, the design panels — Align, Info, and Transform — can be your best friends. Use the Align panel to align, regularize (match the sizes of), or distribute several items on Stage, either relative to each other or to the Stage area. Use the Info panel to modify the coordinates, dimensions, and transformation points for items on the Stage. Use the Transform panel to scale, rotate, and skew an item.

The Align panel (Ctrl+K or

The Align panel

The Align panel (Ctrl+K or

Figure 5.46. Use the Align panel to both size and arrange items with ease.

The Align panel has five controls. The icons on the buttons show visually how selected items can be arranged:

• To stage: On the far right, you will notice a To stage button. When this button is selected, all adjustments are made in relation to the full Stage. To stage is actually a toggle you can turn on or off at any time — it retains the last chosen state even if the panel is closed and reopened.

• Align: There are six buttons in this first control. The first group of three buttons is for horizontal alignment, and the second group of three is for vertical alignment. These buttons align two or more items (or one or more items with the Stage) horizontally (top, middle, bottom) or vertically (left, middle, right).

• Distribute: This control also has six buttons: three for horizontal distribution and three for vertical distribution. These buttons are most useful when you have three or more items that you want to space evenly (such as a row of menu items). These buttons distribute items equally, again vertically or horizontally. The different options enable you to distribute from edge to edge, or from item centers.

• Match size: This control enables you to force two or more items of different sizes to become equal in size, and match items horizontally, vertically, or both.

• Space: This option enables you to space items evenly, again, vertically or horizontally. You may wonder how this differs from Distribute. Both are similar in concept, and if your items are all the same size, these options have the same effect. The difference becomes more apparent when the items are of different sizes:

  • Distribute evenly distributes the items according to a common reference (top, center, or bottom). For example, if one item is larger than the others, it may be separated from the other items by less space, but the distance between its top edge and the next item's top edge will be consistent with all the selected items.

  • Space ensures that the spacing between items is the same; for example, each item might have exactly 36 pixels between it and the next.

To align an item to the exact center of the Stage, do the following:

1. Click to select the item you want to center.

2. Click the To stage toggle in the Align panel.

3. Click the Align horizontal center button.

4. Click the Align vertical center button.

The Info panel

Use the Info panel (Ctrl+I or

Warning

The registration point set in the Registration/Transformation point grid is actually a global setting that "sticks" even after you close the panel and change tools. After you change the registration point from top left to center, any new shapes or symbols that you create automatically have a center registration point. In most cases, it is best to stick with the default top-left registration point because this is the standard for items that are loaded or positioned with ActionScript. Changing the registration point on one item back to top left does not have any effect on other items that were created with a center registration point.

The Info panel has these controls:

• Width: Use this numeric entry field to alter the width of a selected item.

• Height: Use this numeric entry field to alter the height of a selected item.

Tip

Units for both Width and Height are measured in the units (pixels, inches, points, and so on) set in the Ruler Units option of the Document Properties dialog box found under Modify

Figure 5.47. Use the Info panel options to change the location and appearance of an item.

• Registration grid: The Registration grid is located just to the left of the numeric entry fields that are used for adjusting the X and Y location of any selected item. This grid consists of four small squares. Together, these squares represent the top corner of an invisible bounding box that encloses the selected item. Every shape created in Flash, even circles, resides within an imaginary rectangular bounding box that includes the extremities of the shape. The Registration grid enables you to toggle the selected item's registration point from the upper-left corner to the center of its bounding box. The T icon on the top-left square represents registration relative to the top-left corner of the item, and the O icon on the bottom-right square represents registration relative to the center of the item.

Note

The X (horizontal) and Y (vertical) coordinates are measured from the upper-left corner of the Flash Stage, which is the origin with coordinates 0,0.

• X: Use this numeric entry field to either read the X coordinate of the item or to reposition the item numerically, relative to the center point on the X (or horizontal) axis.

• Y: Use this numeric entry field to either read the Y coordinate of the item or to reposition the item numerically, relative to the center point on the Y (or vertical) axis.

• RGBA: This sector of the Info panel gives the Red, Green, Blue, and Alpha values for graphic items and groups at the point immediately beneath the cursor. Values for symbols, the background, or interface elements do not register.

• + X: / + Y: This sector of the Info panel gives the X and Y coordinates for the point immediately beneath the cursor — including offstage or pasteboard values. A negative X value is to the left of the Stage, whereas a negative Y is located above the Stage.

To scale or reposition an item, select the item and then open the Info panel with shortcut keys or by choosing Window

• Choose to scale or reposition the item relative to either the center or the upper-left corner. (The icon toggles from the T icon on the top left to the O icon on the lower right to indicate the current setting.)

• To scale the item numerically, enter new values in the Width and Height fields, and then click elsewhere or press Enter to apply the change.

• To reposition the item numerically, enter new values in the X and Y fields (located in the upper half of the panel), and then either press Enter or click outside the panel to apply the change.

The Transform panel

The Transform panel (Ctrl+T or

Tip

If you're using the Properties panel to resize an item by pixel values, don't overlook the constrain option. When an item is selected on the Stage, a small lock icon appears beside the Width and Height fields. Click the lock to preserve the aspect ratio of an element as you enter a new value for width or height.

Figure 5.48. Use the Transform panel to scale, rotate, and skew items.

Some other powerful transform options are available from the Tools panel and from the Transform submenu of the Modify menu. I explain these more-complex editing tools in Chapter 9."Modifying Graphics." However, the best place to start with transform options is the Transform panel, and these options are applied as follows:

• Scale: Use this to size the selected item by percentage. Enter a new number in the Scale field and press Enter. The shape scales to the specified percentage of its original size. To constrain the shape to its current proportions, click the Constrain check box. After a line or shape is deselected, the values in the Transform panel reset. The quickest way to get back to the original settings is to immediately use Edit

  

Tip

When you are using the Transform panel with groups, drawing objects, shape primitives, and symbol instances, you can reference or reset the original settings, even after the item has been deselected. I explain making and using symbols in Chapter 6, "Symbols, Instances, and the Library."

• Rotate: Click the radio button and then specify a rotation for the selected item by entering a number in the Rotate field. Press Return or Enter to apply the change to the selected item. The item rotates clockwise around its center point. To rotate an item counterclockwise, enter a negative number in the Rotate field.

• Skew: Items can be skewed (slanted in the horizontal or vertical direction) by selecting the Skew radio button, and then entering values for the horizontal and vertical angles. Pressing Return or Enter skews the item to the values entered.

• Duplicate Selection and Transform: Press this button and Flash makes a copy of the selected item (including shapes and lines) with all transform settings that have been applied to it. The duplicate is pasted in the same location as the original; select it with the Selection tool and move it to a new position to separate it from the original. Your original is left unchanged.

• Remove Transform: This button, at the bottom-right corner of the panel, removes all transformation settings for a selected object. You can always use the Remove Transform (or "Reset") button for instances, groups, or type blocks to get back to 100 percent scale with no rotation or skew. However, after a shape or line is deselected, this button does not work. For shapes, this is really more like an "Undo All" button.

Note

I discuss the 3-D rotation and 3-D center point options as they relate to working with 3-D symbols in Flash in Chapter 9, "Modifying Graphics."

The Spray Brush tool shares space in the Tools panel with the old-fashioned Brush tool. To toggle between the two, click and hold the Tool space until the popup shows both tools, and then select the one you want to work with. The icon for the Spray Brush gives you a good clue for how this tool works: like a can of spray paint. When you select the Spray Brush, you won't see options in the Tools panel as you do for the standard Brush tool, but instead you see controls in the Properties panel for selecting the symbol you want to work with and setting the size and angle of the Brush (which for this tool is actually the spray area covered when you click without moving your cursor). Figure 5.49 includes the Tools panel with the Spray Brush selected and the Properties panel with the Symbol and Brush settings used to create the pattern of dots shown on the far left. The special beauty of the Spray Brush tool is that the distribution of dots is somewhat random. If you have ever tried to create a "random" pattern by placing individual elements on the Stage, you will truly appreciate how much time and effort this tool can save.

You can use the Spray Brush without creating any custom symbols by simply leaving the Symbol setting for Spray on no symbol (the Default shape check box will be selected). With this workflow you can choose a color for your spray, and you can choose the area that the "ink" (or small dot/particles) scatter in with each click, but you can't alter the shape or size of the particles in the spray. The maximum settings allowed for width and height of the Brush area match the size of your current Stage size, but you can spray as large an area as you want by holding down the mouse and dragging to spray. Each time you click and release the mouse with the Spray Brush, you create a group of symbol instances. These groups can be selected and edited individually after they have been sprayed onto the Stage.

Tip

To make editing easier, you might consider using the Select All (

Figure 5.49. With the default settings in the Properties panel, the Spray Brush creates a random pattern of dots as you click and drag on the Stage.

As shown in Figure 5.50, the Spray Brush gets a lot more interesting when you have some symbols in your library to work with.

To specify a custom symbol spray pattern, do the following:

Symbol instances are sprayed and grouped each time you click the mouse. As shown in Figure 5.51, you may end up with a lot of groups if you click and spray multiple times.

Figure 5.51. Use Select all to see the symbol instance groups that make up a layered pattern created by the Spray Brush applied with multiple mouse clicks.

The Deco tool (U) is more like 13 tools in one. It's represented by one icon in the Tools panel, but as shown in Figure 5.52, when you select it, you see a drop-down menu in the Property inspector that enables you to choose from 13 different drawing effects:

Figure 5.52. The Deco tool in the Tools panel has 13 different drawing effect options in the Property inspector that produce distinctly different results, 3 of which are shown here: (far left, top to bottom) Vine Fill, Building Brush, Flower Brush. They all work by auto-arranging symbol instances or pre-built shapes on the Stage, but each has its own settings and controls for modifying the layout.

Growing patterns with the Vine Fill drawing effect

The Vine fill creates a simple pattern with the default symbols (as shown in Figure 5.52), but you can use it as a base for much more detailed designs. Keep in mind that the symbols you choose for the Leaf and Flower don't actually have to be leaves or flowers — they can be any symbol you choose. In Advanced Options you can choose a color and angle for the vine stem and also set a scale for the overall pattern and a length for the vine segments. As with any symbol instance, you have the option of editing your leaf and flower symbols after they have been drawn as part of the vine pattern. Figure 5.53 compares a Vine fill drawn with custom leaf and flower symbols with the same vine after the leaf and flower symbols have been edited.

You'll notice that the Vine fill "grows" in a kind of organic way after you click to start the fill. You can capture this fill pattern as frame-by-frame animation by selecting the Animate Pattern check box at the bottom of the Property inspector Advanced Options for the Deco tool Vine Fill drawing effect. The Frame step setting controls how often a new frame is added as the pattern grows: The range from 1 to 100 represents the percentage of the total pattern that is included in each frame. A setting of 100 puts only one keyframe on the timeline with the finished pattern in it, showing 100 percent of the drawing in just one step. A setting of 1 adds as many keyframes as there are elements in your vine pattern, showing the drawing in incremental steps with a keyframe for each step. For most purposes, a setting somewhere in the middle works just fine.

Figure 5.53. A Vine fill created with custom leaf and flower symbols (left) can be edited after it is drawn to have a very different look (right).

Warning

The Vine fill works best if the symbols you choose for the leaf and flower nodes are small in size: generally under 25 pixels in any direction. If the symbols are too large, the vine has no room for both leaves and flowers unless you make the segments really long — which makes the pattern look less like a vine and more like a series of long lines. If you are working with large symbols, you can either edit the graphics to scale them down or you can set the Pattern scale to a lower value to make the symbol instances small enough to fill the vine with a decent density of leaves and flowers.

Tip

If you like the look of larger leaves and flowers, it works better to create the fill pattern with small graphics and then edit the source symbols to scale the graphics larger; the symbol instances for the leaves and flowers update but the vine pattern is not disrupted. This was the workflow for the vines shown in Figure 5.53.

Creating reflected patterns with the Symmetry Brush drawing effect

The Symmetry Brush has four different modes, and each mode has a different guide that appears on the Stage, enabling you to control the placement of symbol instances in a geometric pattern. Although the guides are unique for each mode, the principle is the same — use the guide to set up placement of symbol instances, and then click to place them on the Stage while the drawing effect builds a reflected pattern each time you click. Figure 5.55 shows the guides and the pattern created by each with the default graphic (a black square).

Figure 5.54. Grid Fill creates a tiled pattern of symbol instances with the spacing and scale you choose. Here are just a few options: You can make the default shape small and dense (top), use a bitmap in a Graphic symbol as a fill for another shape (middle), or even apply the effect more than once to get layered geometric patterns (bottom).

Figure 5.55. The four Symmetry Brush modes enable you to use draggable guides to dynamically control the placement and spacing of symbol instances: Reflect Across Line (A), Reflect Across Point (B), Rotate Around Point (C), and Grid Translation (D).

These guides are tricky to describe and are best explored in a tactile way, but here is some explanation for each one:

• Reflect Across Line: Click and drag the guide center point to position the guide in the area of the Stage where you want the pattern to originate. Click and drag the direction point — marked with a double arrow — anywhere within a 360-degree arc to orient the line that creates the reflection axis. Click on either side of the line to place symbol instances and expect to see an exact reflection on the other side of the line, mirroring placement on the Stage and distance from the axis.

• Reflect Across Point: Click and drag the guide center point to position the guide in the area of the Stage where you want the pattern to originate. Click on any side of the center point to place symbol instances and expect to see an exact reflection on the other side of the point, mirroring placement on the Stage and distance from the axis.

• Rotate Around Point (aka the clock-face effect): Click and drag the guide center point to position the guide in the area of the Stage where you want the pattern to originate. Click and drag the direction point — marked with a double arrow — to anywhere within a 360-degree arc to orient the starting position for the first symbol instance in the circular pattern. Click and drag the spacing point — marked with an × — to anywhere within a 180-degree arc to set the angle of reflection.

  Click anywhere around the two lines and expect to see reflections oriented around the center point and repeated as many times as there is room for in the reflection area. If you drag the spacing point closer to the direction point, you increase the reflection area and more symbol instances fill the space. If you drag the spacing point farther away from the direction point, you decrease the reflection area and fewer symbol instances fill the space.

Note

If the spacing point is 180 degrees from the direction point (forming a straight line), you see only one reflection for each symbol instance you place, but the effect is different than the Reflect Across Line pattern because the reflected instances are at the opposite end of the axis line rather than directly across.

• Grid Translation: Click and drag the guide center point to position the guide in the area of the Stage where you want the pattern to originate. Click and drag the spacing points — marked with plus signs (+) — to set the endpoints for the fill pattern on the x and y axis. Click and drag the position guides — marked with double arrows — to adjust the rotation angle for the grid. One pointer changes the rotation of individual symbol instances in relation to each other, creating a skew effect, and the other pointer changes the rotation of the whole group of symbol instances in relation to the center point. Click to place a symbol instance in the grid area and expect to see a grid fill the space between the two spacing points.

One quick way to get a feel for the varied powers of these different Symmetry Brush modes is to create a pattern in one mode and then change the mode in the Property inspector without modifying the artwork on the Stage. This enables you to see how different the patterns made by each guide can be even with the same source symbol instances and placement.