Now that you know where to find and use the drawing tools, it's time to get more creative with
The stroke and fill colors that will be 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 Property inspector. 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 generate
The color chips in the Tools panel display the most recently selected colors and are always visible regardless of which tool you're using. The Property inspector shows the color chip of the currently active item, and only displays the chips 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 will be visible on the Tools panel, but the Property inspector will display only a Stroke color chip. Although these chips
Figure 5-23: The current Swatches pop-up invoked by clicking the Stroke or Fill color chip in the Tools panel (left), or by clicking a color chip on the Property inspector (top right)
The pop-up Color Swatches display the same color options as the main Color Swatches panel shown in Figure 5-24. Use shortcut keys (Ctrl+F9 or z +F9) or select Window Color Swatches from the application menu to launch the Color Swatches panel. The Flash 8 Swatches pop-up includes a new Alpha value box as well as a Hexadecimal color value box, another iteration of the No Color button (when it applies), and a button that launches the Color Picker. The Swatches menu evoked with the Fill color chip includes the same solid colors available for Stroke, as well as a range of gradient fill styles along the bottom of the panel.
Figure 5-24: The default Color Swatches palette as displayed in the main Color panel
We discuss the custom palette options available in the Color Swatches panel in detail, along with the Color Mixer panel and other
In Flash, for all tools that draw or display a line or outline, you control the
Figure 5-25: The Properties panel gives you all the controls you need to select the stroke height, color, and style, as well as a new option to control how strokes will scale in the Flash Player.
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 it's appearance with the settings in the Property inspector.
When dragging the Stroke height slider, the numeric entry box updates and displays a height read-out analogous to the current position of the slider. This also functions as a precise numeric entry field. Simply enter a value to create a stroke with a specific height or thickness. Permissible values range from 0.1 to 200, with fractions
In older versions of Flash, the largest Stroke height available was 10. In Flash 8, you can now set stroke heights up to 200. In our experience, any stroke with a height setting of more than about 25 becomes rather unwieldy. If you need a mark that big, you are probably better off using one of the shape tools to create a filled area instead of a giant stroke.
Depending upon the level of zoom, the height difference of some lines may not be visible onscreen — even though zooming in closer enables you to see that the stroke height is correct. Lines set to a height of 1 pixel or lower appear to be the same thickness unless the Stage view is zoomed to 200 percent or closer. However, all line heights still print correctly on a high-resolution printer and will be visible in your final Flash movie (.swf) to
The Stroke Style drop-down menu (see Figure 5-25) offers the choice of
Figure 5-26: The Stroke Style dialog box is invoked with the Custom button on the Property inspector. The properties displayed vary depending on the style of line you select for adjustment.
The new Scale menu for strokes in the Properties panel enables you to control how lines will scale when symbols are scaled in the authoring environment or the Flash movie is scaled in the Flash Player. For those of us who've struggled with keeping lines at a consistent
Points are the default unit of measurement for determining the spacing and thickness of line segments in the Stroke Style dialog box.
To closely examine a custom line before you begin drawing with it, select the Zoom 4x check box
Although there is no way to save custom line styles within the Stroke Style dialog box, you can create a separate document (.fla) and save samples of your favorite lines there. This will ease your workflow if you want to reuse custom line styles extensively. You can apply these styles quite easily to other lines by opening the document and using the Eyedropper tool in conjunction with the Ink Bottle tool. For more information, see the sections on the Eyedropper and the Ink Bottle tools in Chapter 9, "Modifying Graphics."
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 Hairline line style provides a consistent line thickness that doesn't visually vary at different zoom levels. This is the best line style to choose if you're creating artwork that you want to scale without losing the original line width. Regardless of whether an object with this stroke is enlarged or reduced in size, the hairline stroke always displays as 1-point wide (as shown in Figure 5-27).
The Solid line style draws a smooth, unbroken line. The customization variables for this style are limited to Thickness and Sharp corners. These two
The Hatched line style thickness settings are different from the point size thickness settings that are available for all lines. The default thickness setting (measured in points) defines the thickness or height of the overall hatched line, whereas the hatch thickness setting defines the width of the individual vertical strokes that create the density of the hatched line texture.
Figure 5-27: Hairline strokes always display at 1-point, even if they are scaled in the authoring environment or in the Player.
The new Scale option is only available 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 using the Scale menu will only work if you convert the raw stroke into a symbol. To make this easier to understand, here are the steps for applying the Scale option:
Select a Solid line style.
Set the stroke height to any height between 0.1 and 200.
Select the Scale behavior that will work best for the specific element:
None: This produces a stroke that does not scale. A Solid stroke with Scale set to None will have the same consistency as a Hairline but you are able to use any stroke height — rather than being restricted to the 1-point height for Hairline strokes. Figure 5-28 shows how a sample graphic with a 3-point stroke and a Scale setting of None will appear when transformed with different amounts of scaling.
This produces a stroke that
Vertical: This produces a stroke that scales to match the vertical transformation of an item. Horizontal transformations will have no effect on the scale of the stroke. Figure 5-30 shows how a sample graphic with a 3-point stroke and a Scale setting of Vertical will appear when transformed with different amounts of scaling.
Normal: This produces a stroke that scales proportionally when it is scaled in any direction. This is generally the best setting to use if you want lines to maintain the same relative size as other scaled elements. However, if you want lines to have a fixed size no matter how big or small other elements are scaled, it is best to use the None setting. Figure 5-31 shows how a sample graphic with a 3-point stroke and a Scale setting of Normal will appear when transformed with different amounts of scaling.
Convert the graphic that contains the stroke into a symbol (Movie Clip, Graphic, or Button).
Scale instances of the symbol in the authoring environment or in the Player and you will notice how the stroke scaling is constrained based on the Scale setting that you applied to the original stroke (in Step 3).
Figure 5-28: Strokes with Scale set to None will always display with the original stroke height.
Figure 5-29: Strokes with Scale set to Horizontal will only scale in proportion to horizontal transformations.
Figure 5-30: Strokes with Scale set to Vertical will only scale in proportion to vertical transformations.
Figure 5-31: Strokes with Scale set to Normal will scale in proportion with the greatest transformation in any direction.
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 new 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