Using Geometric Shape Tools

The prebuilt geometric shapes available for creating graphics in Flash are easy to access from the Tools panel. The Line, Oval, and Rectangle tools are straightforward but infinitely useful. The PolyStar tool creates a wide variety of geometric shapes defined by the Tool Settings dialog box — available from the Options button in the Property inspector. You can use custom stroke styles and the various fill options (described later in this chapter) with these basic shapes to create nearly any graphic you may need. Geometric shapes are already optimized and you can combine or modify them in multiple ways to create more complex artwork.

Note 

In other parts of this book, the term primitive shape is used to refer to any shape that is not grouped or converted into a symbol. Creating and using symbols is covered in Chapter 6, "Symbols, Instances, and the Library."

The Line Tool

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 Property inspector, as well as set the color with the pop-up Color Swatches panel accessible from the Stroke color chip on either the Property inspector or the Tools panel. We 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 we describe later in this chapter, in the "Simplifying snapping settings" section.

Tip 

To restrict the line to 45-degree-angle increments, hold down the Shift key as you drag out the line.

Figure 5-1 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.

Figure 5-1: Line tool preview (top) and the final line (bottom), displayed when the mouse button is released and line style is rendered

Flash 8 includes a long-awaited control for selecting cap styles on lines. In older versions of Flash, all lines had rounded ends or caps. Creating a flat or squared-off end on a line was only possible by converting a line to a fill and then manually modifying the points that defined the fill. With the new 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-2 illustrates how these new cap styles render on a 10 pt line.

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

The Oval Tool

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.

Tip 

To constrain the shape to a perfect circle, hold down the Shift key before releasing the mouse.

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

Figure 5-3: Shapes created with the Oval tool, using different stroke and fill settings

New Feature 

The Oval tool now has a Settings dialog box that you can use to set the width and height of an oval, and Flash will draw it for you. To access this feature, select the Oval tool in the Tools panel (0), 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-4 will pop 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), then deselect the check box.

Figure 5-4: The new Oval Tool Settings dialog box can be used to generate shapes with precise width and height settings, rather than estimating size as you draw them manually.

The Rectangle Tool

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.

Tip 

To constrain the rectangle to a perfect square, hold down the Shift key before releasing the mouse.

Aside from choosing the stroke and fill to apply to a shape drawn with the Rectangle tool, an option on the Tools panel launches the Rectangle Settings dialog box for choosing 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 maximum radius setting is 999 pt, but anything higher than 35 pt produces almost the same kind of shape as the Oval tool, unless the shape is drawn very large, or elongated to create the classic "pill button" shape.

Tip 

A quick way to launch the Rectangle Settings dialog box (for radius settings only) is to double-click the Rectangle tool button in the Tools panel.

New Feature 

Like the Oval tool, the Rectangle tool now has a Settings dialog box that you can use to set the width, height, and corner radius of a rectangle, and Flash will draw it for you. To access this feature, select the Rectangle tool in the Tools panel (R), 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 will pop up and you can set the width and height (in pixels) and the radius (set in the same way here as it is in the radius-only Rectangle Settings dialog box). 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), then deselect the check box.

Figure 5-5: The new Rectangle Tool Settings dialog box can be used to generate shapes with precise width and height settings, in addition to specific radius settings — which are also available in the radius-only Rectangle Settings dialog box.

Choosing a more moderate radius setting creates rounded rectangles or squares with softened corners (see Figure 5-6). You'll want to choose this setting before you create a shape with the Rectangle tool because the radius cannot be reapplied or easily modified after the shape is drawn.

Figure 5-6: Rectangles drawn with different radius settings create different degrees of roundness on the corners.

Tip 

To adjust the corner radius while you're dragging out your rectangle shape, there is a handy shortcut. Before you release the mouse, use the Up arrow key (↑) to decrease the radius setting (making the corners more square), or use the Down arrow key (↓) to increase the radius setting (making the corners more rounded). The relationship between the arrow keys and the radius settings is counter-intuitive, but just think "Up arrow = more square, Down arrow = less square." After you release the mouse, the radius setting will stick and the arrow keys will go back to their usual behavior of moving selected items up or down on the Stage.

Caution 

The Set Corner Radius button is not a toggle, so if you change the radius setting, you have to set it back to 0 in the Rectangle Settings dialog box to return to drawing standard rectangles. Any radius setting entered in the Rectangle Settings dialog box accessed by Alt (or Option)+clicking in the Document window while the Rectangle tool is selected in the Tools panel will also be transferred to the radius-only Rectangle Settings dialog box.

Flash 8 Join and Miter Settings

If you are the kind of illustrator or designer who has been looking for more precise control over line intersection or join styles, you will be pleased to find two new options in the Flash 8 Properties panel. As shown in Figure 5-7, the new 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 new Join menu create corners 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. 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 60, which results in nice sharp corners.

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

We can't count the number of times we had to modify a rectangle manually just to create a simple triangle in old versions of Flash — fortunately, Flash MX 2004 introduced a painless way to create a variety of geometric shapes. 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 8, you'll find the PolyStar as a subset of the Rectangle tool — click and hold your mouse over the Rectangle button on the Tools panel to invoke the drop-down menu with the PolyStar tool, as shown in Figure 5-9.

Figure 5-9: The PolyStar tool is grouped with the Rectangle tool in the Tools panel.

Note 

The PolyStar tool does not have a shortcut key assigned to it, but the shortcut key for the Rectangle tool (R) will always activate the Rectangle tool, even if the PolyStar tool is visible in the Tools panel, because it was the last tool used from that Tools panel location.

When the PolyStar tool is active, an Options button appears in the Property inspector to invoke a Tool Settings dialog box that enables you to control the type of shape you want to draw. The composite in Figure 5-8 includes the Property inspector as it appears when the PolyStar tool is active and 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-10, a standard five-sided star is as easy to create as a triangle — that is, a polygon with three sides.

Figure 5-10: A composite figure showing the Options button in the Property inspector (bottom) that launches the Tool Settings dialog box, used to create different shape styles (top)

Note 

If you are a little confused by the inconsistent workflow for accessing Settings dialog boxes for the different drawing tools, don't worry, we were too! Hopefully, these glitches will be smoothed out in future releases of Flash. For now, we just have to live with the fact that there isn't an Options button in the Property inspector for launching the Settings dialog box for the Oval or Rectangle tool and that the Settings dialog box for the PolyStar tool doesn't show up when you Alt (or Option) + click in the Document window.

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-11, numbers closer to 0 create sharper stars and numbers closer to 1 create blockier shapes.

Figure 5-11: Star point size decimal settings between 0 and 1 create various star shapes.