Using Fill and Stroke Controls


Now that you know where to find and use the drawing tools, it's time to get more creative with color and line styles. In the following sections, we introduce you to the controls for setting the fill and stroke applied to artwork drawn in Flash.

Choosing Colors

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 shapes based on the current fill settings — you can select colors before you draw a new shape or select an existing shape and modify it by changing the fill and stroke colors.

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 indicate the current color, they're really also buttons: Click any color chip to select a new color from the pop-up Swatches menu. The Swatches menu is shown in Figure 5-23 as it pops up from the Tools panel (top) or from the Property inspector (bottom).

image from book
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.

image from book
Figure 5-24: The default Color Swatches palette as displayed in the main Color panel group — which also enables tabbed access to the Color Mixer panel

Cross-Reference 

We discuss the custom palette options available in the Color Swatches panel in detail, along with the Color Mixer panel and other colorful issues in Chapter 7, "Applying Color."

Choosing Line Styles

In Flash, for all tools that draw or display a line or outline, you control the thickness of the line — or stroke — either by dragging the Stroke Height slider or by entering a value in the Stroke Height numeric entry box. Both of these controls are available in the Properties panel, as shown in Figure 5-25. The stroke options are only visible when they can be applied — if a drawing tool that creates lines is active in the Tools panel or if you have selected an element with a stroke.

image from book
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.

Note 

Generally, in Flash, lines that are independent or not attached to any fill are referred to as lines, whereas lines or outlines on a filled shape are referred to as strokes. You use the same tools to create and edit lines and strokes.

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 expressed in decimals.

New Feature 

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.

Note 

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 anyone who zooms in close enough.

The Stroke Style drop-down menu (see Figure 5-25) offers the choice of Hairline or six standard, variable-width strokes. Hairline strokes always have the same 1-pixel thickness, even if the mark or shape that they outline is scaled larger after the stroke is applied. You can select and combine the other six line styles with any stroke height. If these styles do not deliver the line look you need, the Custom button (to the right of the Style menu) invokes a Stroke Style dialog box (see Figure 5-26), which you can use to generate custom line styles by selecting from a range of properties for each preset line. Basic properties include Stroke Thickness and Sharp corners. Other settings vary depending on what style of stroke you choose.

image from book
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.

New Feature 

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 size in older versions of Flash, this new menu is a welcome addition to Flash 8.

Note 

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 beneath the preview area of the Line Style dialog box. Note the Sharp corners check box, which toggles this Line Style feature on or off — select the check box to turn Sharp corners on.

Tip 

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 variables can also be adjusted on all line styles. The Solid line style is the optimal style for Web viewing because it requires fewer points to describe it and is consequently less file-intensive. The smaller file sizes theoretically translate into faster download times when the artwork is transmitted over the Web. This really only becomes an issue if you're making extensive use of complex line styles.

  • 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.

image from book Figure 5-27: Hairline strokes always display at 1-point, even if they are scaled in the authoring environment or in the Player.

Controlling Stroke Scale Behavior

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:

  1. Select a Solid line style.

  2. Set the stroke height to any height between 0.1 and 200.

  3. 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.

    • Horizontal: This produces a stroke that scales to match the horizontal transformation of an item. Vertical transformations will have no effect on the scale of the stroke. Figure 5-29 shows how a sample graphic with a 3-point stroke and a Scale setting of Horizontal will appear when transformed with different amounts of scaling.

    • 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.

  4. Convert the graphic that contains the stroke into a symbol (Movie Clip, Graphic, or Button).

  5. 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).

image from book
Figure 5-28: Strokes with Scale set to None will always display with the original stroke height.

image from book Figure 5-29: Strokes with Scale set to Horizontal will only scale in proportion to horizontal transformations.

image from book
Figure 5-30: Strokes with Scale set to Vertical will only scale in proportion to vertical transformations.

image from book
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 remain consistent while the button is stretched to accommodate the text. If you apply the Vertical Scale behavior, you will have a button with a stroke that stays the same no matter how long you stretch it horizontally to fit your text. But if you decide the buttons need to be a bit bigger overall, you can apply a vertical transformation and the stroke will grow proportionally. What more could we ask for?




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

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