Creating Vector Shapes

   

Creating Vector Shapes

The Vector Shape window offers two basic ways to create a shape: You can use one of the shape tools (the Rectangle, Rounded Rectangle, or Polygon, either filled or unfilled) to draw a simple geometric shape, or you can use the Pen tool to draw a custom shape. The Pen tool, modeled after similar pen tools in Illustrator, Photoshop, and Flash, requires some practice to use: You click to plot points along a path , and you drag to control the curvature of the line that connects those points.

Other tools allow you to specify a shape's line width; line color, fill color, and background color ; and whether the shape is open or closed. You can choose what kind of fill a shape will have (none, solid, or gradient), and you can specify the colors for a gradient fill. You can draw multiple shapes within a single cast member, but all of them must share the same line and fill settings ( Figure 7.6 ).

Figure 7.6. You can draw multiple shapes within a single cast member, but all of them must share the same line and fill settings.

graphics/07fig06.gif

To create a simple vector shape:

  1. Select one of the shape tools, either filled or unfilled ( Figure 7.7 ).

    Figure 7.7. The shape tools.

    graphics/07fig07.gif

  2. Drag diagonally in the Vector Shape window to draw the shape.

graphics/tick.gif Tips

  • Hold down the Shift key while dragging to constrain the shape. A constrained rectangle makes a square; a constrained ellipse makes a circle.

  • It doesn't really matter whether you choose a filled or unfilled shape tool; you can always fill or unfill a shape later by selecting one of the Fill buttons at the bottom of the palette.


To draw a custom shape composed of straight lines:

  1. Select the Pen tool in the Vector Shape window ( Figure 7.8 ).

    Figure 7.8. Use the Pen tool to create custom shapes.

    graphics/07fig08.gif

    The mouse pointer turns into a crosshairs.

  2. Click in the work area to begin the first line segment.

    A small square appears, indicating a corner point. (See the following sidebar, "Types of Points.")

  3. Position the mouse pointer where you want the line segment to end, and click.

    Another corner point appears, connected to the first point by a straight line.

  4. Repeat step 3, as many times as desired, until you have the path you want ( Figure 7.9 ).

    Figure 7.9. An open path. Each click of the Pen tool creates a new corner point, connected to the previous point by a straight line.

    graphics/07fig09.gif

  5. If you want to leave the path open, double-click the last point you added.

    or

    If you want to close the path, position the mouse pointer directly over the first point in the patha black box ( Figure 7.10 ) appears next to the crosshairs when you're in the right positionand single-click ( Figure 7.11 ).

    Figure 7.10. To close a path, position the crosshairs directly over the first point in the path so that a black box appears, and click.

    graphics/07fig10.gif

    Figure 7.11. The same path, closed.

    graphics/07fig11.gif

graphics/tick.gif Tips

  • It doesn't really matter whether you initially decide to close a path or leave it open. You can always toggle a shape between its open and closed states by selecting or deselecting the Close Shape check box on the palette ( Figure 7.12 ).

    Figure 7.12. When this check box is selected, the first and last points in a path are automatically connected.

    graphics/07fig12.gif

  • If you include multiple shapes in a single cast member, all must be open or all must be closed.


Types of Points

A vector shape consists of a series of points connected by straight or curved lines. A shape you draw with the Pen tool may contain various kinds of points, indicated by different shapes and colors ( Figure 7.13 ).

Figure 7.13. Different types of points are indicated by different shapes and colors.

graphics/07fig13.gif

A corner point is the endpoint of a straight line segment. It's represented by a small square.

A curve point is the endpoint of a curved line segment. It's represented by a small circle.

If a point is selected, the circle or square is hollow; if a point is unselected , the circle or square is solid. (In most cases, a selected curve point also has two control handles attached to it.)

Points are color-coded as follows :

  • The first point in a path is green.

  • The last point in a pathor the point you've added most recentlyis red.

  • All other points are blue.

To draw a custom shape composed of curved lines:

  1. In the Vector Shape window, select the Pen tool.

  2. Click in the work area to begin the first curved line segment.

    A corner point appears.

  3. Position the mouse pointer where you want the segment to end, depress the mouse button, and drag outward.

    A curve point with two control handles appears ( Figure 7.14 ), with your mouse pointer "gripping" one of them.

    Figure 7.14. When you drag the mouse outward, a curve point with two control handles appears.

    graphics/07fig14.gif

  4. Keeping the mouse button depressed, drag the control handle until the curved line looks the way you want it to; then release the mouse button.

  5. Repeat steps 3 and 4 as many times as desired until you have the path you want.

  6. If you want to leave the path open, double-click the last point you added.

    or

    If you want to close the path, single-click the first point in the path. (See step 5 in the preceding task for more details.)

graphics/tick.gif Tip

  • You can combine straight and curved segments in a single path. Just click if you want the preceding line segment to be straight, or click and drag if you want the preceding segment to be curved ( Figure 7.15 ).

    Figure 7.15. You can combine straight and curved segments in a single path.

    graphics/07fig15.gif


To set the line width for a vector-shape cast member:

  • Choose a value from the Stroke Width menu ( Figure 7.16 ).

    Figure 7.16. In the Vector Shape window, select a value from the Stroke Width menu. Choosing a larger value results in a wider stroke width.

    graphics/07fig16.gif

graphics/tick.gif Tip

  • If you want your shapes to have no outline, select 0 from the Stroke Width menu.


To set the line color for a vector-shape cast member:

  • Choose a color from the Stroke Color menu ( Figure 7.17 ).

    Figure 7.17. Use these menus to select line, fill, and background colors.

    graphics/07fig17.gif

To set the background color for a vector-shape cast member:

  • Choose a color from the Background Color menu.

graphics/tick.gif Tip

  • When you put a vector-shape cast member on the Stage with the default Copy ink effect, the background color fills the rectangular bounding box surrounding the sprite ( Figure 7.18 ).

    Figure 7.18. When you use the Copy ink effect, the background color fills the rectangular bounding box that surrounds a sprite on the Stage.

    graphics/07fig18.gif


To set the fill type for a vector-shape cast member:

  1. Click the No Fill, Solid, or Gradient button in the Vector Shape window ( Figure 7.19 ).

    Figure 7.19. Use these buttons to choose the type of fill for your vector shape.

    graphics/07fig19.gif

  2. If you clicked Solid, choose a fill color from the Fill Color menu.

    or

    If you clicked Gradient, follow the steps for "To set the characteristics of a gradient fill," below.

graphics/tick.gif Tip

  • If the shapes in a cast member are open, the fill buttons are dimmed.


To set the characteristics of a gradient fill:

  1. In the Vector Shape window, choose the first color for the gradient from either the Fill Color menu or the Gradient starting color menu ( Figure 7.20 ).

    Figure 7.20. The gradient starting color is always the same as the fill color.

    graphics/07fig20.gif

    Making a choice from either menu will set the same color for both.

  2. Choose the ending color for the gradient from the Gradient destination color menu.

  3. Choose Linear or Radial from the Gradient Type menu.

    This and other gradient controls are on a toolbar across the top of the Vector Shape window ( Figure 7.21 ).

    Figure 7.21. Choose settings for your gradient on the Gradient toolbar.

    graphics/07fig21.gif

  4. Enter a value for Cycles.

    The Cycles setting specifies how many times the gradient repeats within the cast member ( Figure 7.22 ).

    Figure 7.22. Gradient cycles control how many times the gradient repeats in a shape.

    graphics/07fig22.gif

  5. Enter a Spread value.

    The Spread value controls whether the gradient is weighted more toward the starting color or the destination color. Values of less than 100 weight the gradient toward the destination color; values of greater than 100 weight it toward the starting color. A value of 100 distributes the gradient evenly ( Figure 7.23 ).

    Figure 7.23. The Spread value controls whether a gradient is weighted more toward the starting color or the destination color.

    graphics/07fig23.gif

  6. If you've chosen a linear gradient, determine its direction by entering a value in the Angle field.

    An angle of 0 specifies a gradient that goes horizontally from left to right.

  7. To offset a gradient within a vector shape, enter values in the X Offset and Y Offset fields ( Figure 7.24 ).

    Figure 7.24. You can create gradients with different offsets.

    graphics/07fig24.gif

    The starting point of the gradient moves horizontally or vertically by the number of pixels you specify.

graphics/tick.gif Tips

  • Radial gradients in the Vector Shape window travel in the opposite direction from those in the Paint window: In the former, the destination color is at the outer edge, while in the latter, the destination color is in the center.

  • You can have only one gradient per vector-shape cast member. If you have multiple shapes in a cast member, the gradient is stretched across all the shapes.


   


Macromedia Director MX for Windows and Macintosh. Visual QuickStart Guide
Macromedia Director MX for Windows and Macintosh. Visual QuickStart Guide
ISBN: 1847193439
EAN: N/A
Year: 2003
Pages: 139

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net