- Setting Selection Preferences
- Making Selections
- Using the Clipboard
- Resizing Graphic Elements
- Positioning Graphic Elements
- Flipping, Rotating, and Skewing
- Distorting Graphic Elements
- Modifying Fills and Strokes
- Modifying Shapes: Natural Drawing Tools
- Modifying Shapes: Bzier Tools
- Modifying Primitive-Shape Paths
- Converting Shape Types
This chapter is from the book
This chapter is from the book
This chapter is from the book
Modifying Shapes: Bézier Tools
The subselection tool lets you see and manipulate the anchor points of a path. You can reposition anchor points to change the path and you can manipulate a point's Bézier handles to modify the slope and depth of the curve. You can add and delete points and convert existing curve points to corner points, or vice versa, with the three anchor-point tools or the pen tool. Flash has two styles for displaying anchor points: hollow (the default) and solid. To pick a style, from the Flash menu (Mac) or the Edit menu (Windows), choose Preferences. In the dialog that appears, from the Category list, choose Drawing. In the Pen Tool section, select/deselect the Show Solid Points radio button; click OK.
The tasks in this book assume that Show Solid Points is active.
To view a path and anchor points
In the Tools panel, choose the subselection tool, or press A (Figure 4.55).
Figure 4.55 Use the subselection tool to modify the path of a line segment.
The pointer changes to a hollow arrow.
On the Stage, click the line or curve you want to modify.
Flash selects and highlights the path and anchor points. To manipulate a particular point, you must select it directly.
)
TIP
- When the subselection tool is selected in the Tools panel, the Select All command—
-A (Mac) or Ctrl-A (Windows)—highlights the path and anchor points for all the graphic elements on the Stage and Pasteboard.
The Mystery of Fill Paths
Although a fill shape without a stroke has no outline, it does have a path that defines its shape. The selection, pen, and subselection tools all work to reshape fill paths just as they do to reshape strokes, as outlined in the tasks in this chapter (Figure 4.56).
)
Figure 4.56 When you position the pointer over the edge of a fill shape, the selection tool displays either the curve-point or corner-point modifier. Clicking the edge of the fill activates a portion of the path outlining the shape (left). Selecting the edge of a fill shape with the subselection tool highlights the full path and its anchor points. You can reposition anchor points and Bézier handles to modify the fill shapes (right).
To select an anchor point
- In the Tools panel, select the subselection tool.
Move the subselection pointer over the path you want to modify.
A small solid square appears next to the hollow-arrow when the pointer is above a curve or line segment; a small hollow square appears next to the hollow-arrow icon when the pointer is directly above an anchor point (Figure 4.57).
Figure 4.57 A solid square appears next to the subselection tool when it's ready to select the entire path (top). When a hollow square appears (bottom), the tool is ready to select and manipulate a single anchor point.
Click an anchor point.
Flash highlights the selected point and displays its Bézier handles.
)
To move a corner point
- Use the subselection tool to highlight the path and anchor points of the element you want to modify.
- Position the pointer over a corner point.
Click and drag the desired corner point to a new location.
Flash redraws the path (Figure 4.58).
Figure 4.58 Using the subselection tool, drag a corner point to reposition it.
)
To move a curve point
- Use the subselection tool to highlight the path and anchor points of the element.
Position the pointer over a curve point.
The anchor-point modifier appears.
- Click and drag the point to a new location (Figure 4.59).
Figure 4.59 When you select an anchor point (A), Flash highlights the entire path (B). You can drag the anchor point to modify the path (C). The path and anchor points remain highlighted when you're done (D).
Flash previews the new curve as you drag.
After you move a curve point, the path remains selected, and the Bézier control handles become active so that you can further manipulate the curve.
)
To reshape a curve with the Bézier handles
- With the subselection tool, click the curve you want to modify.
Click one of the anchor points that define the curve you want to modify.
Bézier handles appear.
Click and drag one of the Bézier handles.
The pointer changes to a solid arrowhead as you drag.
- To modify the curve, do one or more of the following:
- To make the curve more pronounced, position the Bézier handle farther from the curve in the direction in which the curve bulges.
- To make the curve flatter, position the Bézier handle closer to the curve.
- To make the curve bulge in the opposite direction, move the Bézier handle past the existing curve, in the opposite direction from the current bulge.
- To make the curve deeper, position the Bézier handle farther from the anchor point.
- To make the curve shallower, position the Bézier handle closer to the anchor point.
Figure 4.60 When you select anchor points, their Bézier handles appear (A). Leaning a Bézier handle away from a curve (B) makes that curve segment more pronounced (C). Leaning the handle toward the curve flattens that part of the curve. Dragging the Bézier handle away from its anchor point (D) makes the curve deeper (E); dragging the handle toward the anchor point makes the curve shallower.
)
The Mysterious Modes of the Pen Tool
In Flash CS3, there are three new Bézier tools: add anchor point, delete anchor point, and convert anchor point. In previous versions of Flash, the pen tool did all the work of converting, deleting, and adding anchor points. The pen tool still retains the ability to perform many of those functions. As you position the pen pointer over the Stage and existing paths, various modifiers appear next to the pen icon, indicating the tool's current function (Figure 4.61).
)
Figure 4.61 The pen tool icon changes to give feedback about what function the tool can perform at any given moment.
Create initial anchor point. A small x indicates the pen is ready to place the first point in a path. Click any empty spot on the Stage to start your path.
Create sequential points. The pen tool has no modifier when you are in the middle of placing a series of anchor points. Clicking the Stage adds points and segments to the path you are creating.
Add anchor point. A plus sign appears when you position the pointer over a selected path, between anchor points. In this mode, clicking the path with the pen tool adds new points to the path. Clicking between two corner points adds a new corner point; clicking between two curve points (or between a curve and a corner point) adds a curve point.
Convert curve point to corner point. A caret appears when you position the pen pointer over a curve point in a selected path. Click the curve point and it changes to a corner point.
Delete corner point. A minus sign appears when you position the pen pointer over a corner point in a selected path. Click the corner point and Flash removes it.
Extend path. A slash appears when you position the pen pointer over a terminal anchor point (the first or last point in an open path). Clicking the point links the pen tool to that path; now clicking on the Stage creates a new point that extends the existing path.
Close path. A circle appears when you position the pen pointer over the initial anchor point of the path you are currently creating. (The circle modifier also appears if you are using the pen tool to create a merge-shape path and you position the pointer over a terminal anchor point in a different merge-shape path.)
Join drawing-object path. A chain-link icon appears when you are creating a new path, and you position the pen pointer over one of the terminal anchor points in an existing drawing-object path.
To convert a corner point to a curve point
- Use the subselection tool to highlight the path and anchor points of the path you want to modify.
- In the Tools panel, click the current Bézier tool and from the submenu that opens, choose Convert Anchor Point Tool (Figure 4.62).
The pointer changes to an upward-pointing caret.
Figure 4.62 Flash CS3 has four tools for modifying the anchor points and Bézier curves of a path. Click the current Bézier tool in the Tools panel to access a submenu showing all four.
- Position the caret pointer over a corner point.
To activate Bézier handles, click the point, then drag away.
Flash converts the corner point to a curve point that has Bézier handles (Figure 4.63). As you drag, the handles extend and move, modifying the curve.
Figure 4.63 To change a corner point into a curve point (one with Bézier handles) using the convert–anchor-point tool, click (top) and drag a corner point. You pull Bézier handles out of the point instead of relocating the point (middle). When you release the mouse button, Flash redraws the curve (bottom).
)
){kind=icon}
To convert a curve point to a corner point
- Using the subselection tool, select the path you want to modify.
- In the Tools panel, from the Bézier-tools submenu, select the convert–anchor-point tool.
- Position the caret pointer over a curve point.
Click the curve point.
Flash converts the curve point to a corner point, removing the Bézier handles and flattening the curved path (Figure 4.64).
Figure 4.64 Clicking a curve point with the convert–anchor-point tool (left) reduces the point to a corner point (right). Flash redraws the path accordingly.
)
To delete an anchor point
- Using the subselection tool, select the path you want to modify.
In the Tools panel, click the current Bézier tool, and from the submenu that opens, choose the delete–anchor-point tool.
The pointer changes to a pen icon with a remove-point modifier (a minus sign).
Position the pointer over an anchor point and click.
Flash removes the anchor point and reshapes the path to connect the remaining points (Figure 4.65).
Figure 4.65 Click an anchor point with the delete–anchor-point tool to remove the point. Flash redraws the path accordingly.
)
To add a point within a path
- Use the subselection tool to select the path you want to modify.
In the Tools panel, from the Bézier-tool menu, select the add–anchor-point tool.
The pointer changes to a pen with a plus-sign modifier.
- Position the pointer over the path and do any of the following:
- Click between two corner points to create a new corner point.
- Click between two curve points to create a new curve point.
- Click between a corner point and a curve point to create a new curve point.
Figure 4.66 When you position the pen tool between existing anchor points, a small plus sign appears next to the pointer (left). With the plus-sign modifier active, click the path to add a new point (right).
)
To extend a path
- In the Tools panel, from the Bézier-tool submenu, select the pen tool.
Position the pointer over the anchor point at either end of the path (a terminal anchor point).
The continue-path modifier—a small slash—appears next to the pen icon.
Click the terminal anchor point.
The pen links to that point as if you'd just placed it.
- Click to add points as you learned to do in Chapter 2.