Adobe Flash Catalyst CS5 : Using the Drawing Tools (part 1) - Set strokes and fills

The Catalyst Tools panel includes eight drawing tools that allow you to draw rectangles, rounded rectangles, ellipses, lines, triangles, hexagons, octagons, and stars. A Text tool is also available.

1. Draw rectangles, rounded rectangles, and squares

You can draw simple rectangles using the Rectangle tool. As with other applications, you simply click the tool, then click and drag on the artboard to create a rectangle. Once you've drawn them, you can modify the rectangles using the Properties panel.

Rectangles with rounded corners can be drawn using the Rounded Rectangle tool (see Figure 1). Press and hold the Shift key while you drag with the mouse to create a perfect square using either tool.

Figure 1. Rectangles and rounded rectangles

The values on the Properties panel such as the X and Y position, or the width and height, can be adjusted by clicking and typing a new value or by scrubbing the value. To scrub a value, simply click and drag. Dragging to the left decreases the value; dragging to the right increases it.

NOTE

The 0,0 point on the artboard in Catalyst, as in other Adobe design tools, is the top-left corner. X values count left to right, while Y values count top to bottom. A negative X value moves the object off the artboard to the left, while a negative Y value moves it above the artboard.

To create a new rectangle, follow these steps:

1. Click the Rectangle tool.

2. Click and drag on the artboard to draw a rectangle.

3. On the Properties panel, click and drag to scrub the X or Y value to move the rectangle on the artboard.

4. Click on the width property's value and type a new value.

5. Press Tab to move to the height property and type a new value.

2. Set strokes and fills

Each object you draw can have a stroke and a fill. Strokes are the outlines around objects, while fills place colors within it. Either strokes or fills can use solid colors or gradients. You can also set either the stroke or the fill to nothing.

On the Properties panel (see Figure 2), you will see three small boxes to the right of Stroke. The first sets the stroke to a solid color, the second a gradient, and the third removes it altogether.

A color picker appears to the right of these buttons when you select the solid-stroke option. Just as with the project's background color, this Color Picker (see Figure 3) presents 40 preset swatches and a spectrum from which you can select any other color. You can also enter a hexadecimal value for the color.

When you select the gradient stroke, you see a gradient map, which allows you to customize the gradient (see Figure 4). Color stops appear at either end just below the map. You can click on the colored square on the stop to change its color.

Dragging the stop sets its position within the gradient. You can add additional colors to the gradient by clicking the area below the map to add a new color stop. Drag a color stop away from the map to remove it.

When you select a solid color, a small number appears to the right of the Color Picker. Scrubbing this number allows you to create a thicker stroke. The stroke-width setting moves below the stroke buttons when you use a gradient.

Figure 2. The Stroke and Fill settings

Figure 3. The Catalyst Color Picker

Figure 4. Creating a gradient stroke

Additional settings for stroke are available by clicking the Stroke drop-down menu. From here, you can set the stroke's opacity, creating a transparent stroke on an otherwise opaque shape. The End caps settings have no effect on rectangles and are only used for lines. The Joints setting has three options:

• Round

• Bevel

• Miter

Round creates slightly rounded corners on the rectangle, in essence converting it to a rounded rectangle. Bevel creates hard diagonal corners, while Miter, the default, creates square corners. The Miter limit setting determines the appearance of a stroke at its joins. It will only be visible if you draw a star or triangle, set a very thick stroke, and then a very low miter limit. The setting primarily exists to allow you to alter a miter limit on artwork imported from Illustrator.

You can set fills in the same manner as strokes. You can use solid colors or gradients and create gradients using the same techniques as outlined previously for strokes. Only one additional setting is available when you click the triangle next to Fill: Opacity.

Below the Fill setting is another opacity property. Strokes and fills can have opacity set individually. If you want instead to have one opacity setting for the entire object, set it here (see Figure 4.9). Note that opacity settings are cumulative, so if you set stroke opacity and fill opacity individually and then modify the main-shape opacity, the fill and stroke become more transparent.

The Rotation setting, directly below Opacity, lets you rotate objects by scrubbing its value or typing a value of your own. Modifying the Corners property controls the roundedness of the corners of the rectangle.