Using the Color Mixer Panel

Think of the Color Mixer panel as the "boss" of the Color Swatches panel. The Color Swatches panel handles the color inventory and serves up the available colors, but the Color Mixer panel has the power to modify those colors and add the variations to the current set. The Color style menu available on the Color Mixer panel allows you to choose the type of color pattern that you want to work with — including solid colors, linear and radial gradients, and bitmap fills.

New Feature 

In Flash 8, gradient styles can be used with strokes as well as with fills. This option has great potential for creating custom line styles for borders and other decorative lines.

As shown in Figure 7-12 and Figure 7-13, the Color Mixer panel enables you to create new colors, with settings in any of three color spaces — RGB, HSB, or hex — using either manually entered values or the "rainbow" color picker field. All colors are handled with four channels, which are RGBA (red, green, blue, alpha); these values can be individually adjusted using the Color value fields and slider controls. The Tint slider control enables you to dynamically shift your current color darker or lighter. A Fill or Stroke color selected in any of the Swatch menus will be displayed in the Mixer panel where it can be modified.

Figure 7-12: The Flash 8 Color Mixer panel

Figure 7-13: Colors modified in the Mixer panel can be added to the Color Swatches panel.

As shown in Figure 7-13, colors modified in the Color Mixer panel can be added to the palette loaded in the Color Swatches panel — just select Add Swatch from the Color Mixer panel options menu and the color will be added below the colors currently loaded in the Color Swatches panel.

Any color swatch selected in the Color Swatches panel will be loaded into the Mixer panel as a starting point only — modifications made in the Mixer panel will not change the original color in the Color Swatches panel. The new color or gradient that you create using the controls in the Color Mixer panel (shown in Figure 7-14) will be added as a new swatch only when you select Add Swatch from the options menu. You can always edit your custom color by selecting the new (saved) swatch, but the modified version will be treated as a new color and will also have to be added to the Color Swatches panel separately.

Figure 7-14: The Color Mixer panel preview swatch splits to compare colors as you use the color picker or the Tint slider to make adjustments.

Caution 

The colors you create and add to the Color Swatches panel will be saved with the document (.fla) as long as you do not reload the default set or overwrite the loaded swatch set. If you want to save your custom mixed colors, remember to save the Flash color set (.clr) to a folder using the Save Colors command in the Color Swatches panel before you reload the default Web 216 color set or Replace Colors with a new palette.

When you select a color from the Swatches pop-up palette, the cursor converts to a Dropper tool that enables you to sample color from anywhere in the interface just by dragging the dropper and clicking the color you want to pick up. You can pluck colors from icons in the Flash application, from any element that you have in the Document window, and even from elements on your desktop or in other application windows that are currently open.

Tip 

The same Dropper feature is available from any of the Swatches pop-ups, but the colors you select this way will not be stored in the Color Swatches panel unless you use the Color Mixer panel menu's Add Swatch option.

Caution 

To pick up colors with the Dropper tool outside of the Flash application itself, be careful not to release the mouse button while you move the mouse from the Swatches in the Color Mixer panel to the other color that you want to sample. If you release the mouse button before moving it to the color you want to sample, you will be able to pick up colors from inside the Flash application only.

Adjusting Fill and Stroke Transparency

The Alpha control in the Color Mixer panel (and in the Swatches pop-ups) is used to adjust the transparency of stroke and fill colors, either to modify a selected graphic (shape or Drawing Object) or to create a new color that can be added to the Color Swatches panel.

There are two ways to change the Alpha value for a selected color: Either drag the Alpha slider until the preview display looks right, or enter a numeric value directly in the Alpha value box. Numeric entry is useful when you already know what level of transparency is required, while the slider is useful for tweaking the transparency by eye to get it just right — as indicated in either the stroke or fill color chip or the color preview in the Color Mixer panel. In Figure 7-15, a stroke color and a fill color have both been adjusted to 50 percent alpha and then added to the Color Swatches panel. While the Alpha slider is being dragged to a new setting, the preview displays the original 50 percent Alpha value (at the bottom) as well as the current 25 percent Alpha value (at the top). The rectangle below the panels shows the 50 percent alpha stroke and fill applied to a shape. The Flash grid has been turned on (View ð Grid ð Show Grid), so that the alpha is easier to see — on a flat white background, the color just looks lighter rather than transparent.

Figure 7-15: New levels of Alpha can be applied to Fills and Strokes and the modified swatches can be added to the Swatches panel for reuse.

Caution 

Alpha transparency will result in more of a performance hit than a color tint, especially if there are a lot of overlapping animated transparencies. If you can achieve the effect that you want by using a tint instead (fading to a solid color), then save the Alpha effect for graphics that you need to layer on top of other elements or textured backgrounds.

New Feature 

You can apply blend modes to symbols to create different types of layered effects. We describe this new Flash 8 feature in Chapter 9, "Modifying Graphics."

Working with Gradient Fills

Gradients are composed by blending two or more colors together in bands across a plane (a linear gradient) or from the center to the edge of an object in concentric circles (a radial gradient). You can modify these two basic styles of gradient fill to create virtually unlimited variations.

Figure 7-16 shows the gradient editing controls in the Mixer panel, with the preview display for a linear gradient on the left, and for a radial gradient on the right. When working with linear gradients, the position of the color pointers on the Edit bar will correspond to control points on the blend from left to right. When used in conjunction with radial gradients, the Gradient Edit bar corresponds to the radius, or a slice from the center out to the edge, of the circular gradient. Color pointers at the left end of the Gradient Edit bar represent the center — or inside — of the radial gradient, while color pointers at the right end represent the outside border. The active color pointer is identified by a black fill in the pointer, and unselected color pointers have a white fill in the pointer.

Figure 7-16: The Color Mixer panel displaying edit controls and preview for a linear gradient (top) and for a radial gradient (bottom)

The main Color Swatches panel and any of the fill Swatches pop-ups display the prebuilt linear and radial gradients that are included in the default palette. To edit an existing gradient swatch, just select it from the any of the fill Swatches pop-ups or select it from the main Color Swatches panel, and it will be loaded into the Mixer panel where the relevant controls will be displayed automatically. The other option is to start by choosing a gradient style from the central Color style menu on the Mixer panel to load a basic linear or radial gradient. After you create a custom gradient in a document, your settings will appear when you go back to the Mixer panel menu. To start with an unmodified default gradient, just select one from the fill Swatches palette. Figure 7-17 shows the two methods of selecting a gradient style to work with.

Figure 7-17: You can select default gradient styles (and saved custom gradients) from any of the fill Swatches pop-ups, or set one of the basic grayscale gradient styles with the Color style menu in the Color Mixer.

Note 

The Fill Transform tool has been improved and is now called the Gradient Transform tool in Flash 8.

Controlling Gradient Fill Colors

The colors in a gradient and the distribution of blending are adjusted by sliding the color pointers along the Gradient Edit bar in the Mixer panel. These pointers are the access points to the key colors that define the gradient. After you click on a pointer to make it active, you can assign the color that will be blended in its range, either by double-clicking to invoke the Swatches pop-ups or by picking a color in the color selection field. You can also use the value fields and the color slider controls to modify an assigned color in a gradient the same way as any solid color. Flash 8 provides more robust support for gradient creation. Although you probably won't ever need to exceed the old limit of 8 points, Flash 8 has doubled the limit to 16 points.

New Feature 

The Color proxy chips used to assign colors to gradient pointers in Flash MX 2004 have been replaced with handy Swatches pop-ups that are invoked by double-clicking any of the color pointers along the gradient Edit bar in the Color Mixer panel.

Caution 

When you are editing a gradient fill, selecting a solid color swatch from the Color Swatches panel does not have the same effect as selecting a solid color swatch from the Swatches pop-up in the Color Mixer panel. Clicking a solid color swatch in the Color Swatches panel will replace your entire gradient in the Color Mixer with a solid fill style. Clicking a swatch from a Swatches pop-up on one of the gradient color pointers will only replace the color on the currently selected pointer — leaving the rest of your gradient intact.

You can adjust the pattern of the blend by clicking and dragging any of the color pointers to slide them to new positions along the Gradient Edit bar. You can add additional color pointers to the gradient range by clicking anywhere along the Gradient Edit bar. These additional pointers will create new control points in the gradient that can be dragged to new positions or assigned new colors to define the gradient pattern. To remove color pointers, simply drag them downward away from the Gradient Edit bar; they will detach and disappear, taking their assigned color and control point with them. Figure 7-18 shows a basic radial gradient modified with the addition of a new color pointer. To save a custom gradient to your Color Swatches panel, choose Add Swatch from the Color Mixer panel options menu.

Figure 7-18: A two-point radial gradient from white to black (on the left), modified by setting the left pointer to gray and adding a central color pointer set to white (on the right)

By selecting an element on the Stage, you can also apply or modify an existing gradient fill or stroke using the Mixer panel. When an item is selected in the Document window, you will see the current fill and stroke displayed in the Color Mixer panel. Any changes you make in the Color Mixer panel while the item is selected will be updated on the item dynamically. Remember to select Add Swatch from the options menu if you want to store the new gradient in the Color Swatches panel.

New Feature 

In Flash MX 2004, fills and strokes on items in the Document window are loaded into the Color Mixer panel by using the swatches pop-up in the Property inspector. In Flash 8, the workflow has been streamlined — the current fill (or stroke) of any selected item is automatically loaded in the Color Mixer panel.

Tip 

To make it easier to see how a gradient looks in a selected shape, you can toggle off the display of the selection mesh by using Shift+Ctrl+E (Shift+z+E).

If you need some new ideas for gradient styles, Macromedia Fireworks is a great addition to your tool kit. Flash 8 supports the import of Fireworks PNG files, and most filters and gradient styles added in Fireworks will be preserved and editable when the file is imported to Flash. Fireworks ships with a huge library of ready-made gradient styles, including simple but handy Rectangle and Contour styles and fancier ones such as Satin, Starburst, and Ripple. Some of these gradient styles are too complex for the Flash authoring environment to support, but you can import them as bitmaps and jump out to Fireworks to edit them if you need to. You can add Fireworks gradient styles that Flash supports to your Swatches panel and reuse or modify them. Now those same old shaded buttons you have to keep making might just be more fun!

Using Alpha Settings with Gradients

As we mentioned previously, all the normal Color sliders and value fields will apply to control points on a gradient. You may have noticed already that this means you can add alpha to the blend range of any gradient. To create a soft transition between a bitmap or a patterned back-ground and a solid color, you can create a gradient from a 0 percent alpha to a 100 percent alpha of the same solid color. To demonstrate just one application of this feature, we will walk through the steps of adding the appearance of a vignette (or softened edge) to a photograph imported into Flash:

1. Import a bitmap into Flash and place it on the Stage; then lock the bitmap layer.

2. Create a new layer above the bitmap layer and name it gradient (see Figure 7-19).

3. Open the Mixer panel and set the gradient style to radial, or select the default grayscale radial gradient from the fill Color Swatches panel. Set the stroke color to black, with a stroke height of 2. Leave the Overflow menu on the default (Extend) setting.

   New Feature 

   The new Overflow style menu for gradient and bitmap fills in the Flash 8 Color Mixer panel provides more control over fill rendering. Three Overflow settings determine how the edges of a gradient or bitmap image will be rendered if they need to extend beyond the bounding box of the original applied fill. We include more detailed coverage of these settings in Chapter 9, "Modifying Graphics."

4. Select the gradient layer and then use the Rectangle tool to drag out a rectangle on the Stage that is the same size as the photograph on the layer below (see Figure 7-20).

5. Select the fill of the rectangle and then select the left (white) color pointer on the Gradient Edit bar and assign it a color of black (see Figure 7-21). Set the Alpha value on the left color pointer to 0 percent.

6. Press Shift+Ctrl+E (Shift+z+E) to hide the selection mesh and adjust the position of the color pointers by sliding them along the Gradient Edit bar, until you like the way the blend looks on top of the photo (see Figure 7-22).

Figure 7-19: An imported bitmap placed on the Stage with a new layer above it for the gradient

Figure 7-20: Finished rectangle with a radial gradient fill and a black stroke of 2. The rectangle is dragged out to match the size of the photograph on the layer below.

Figure 7-21: Both color pointers assigned a color of black for the selected gradient fill

Figure 7-22: The final gradient can be previewed as the color pointer is moved to adjust the edges of the alpha blend.

Tip 

If you applied the Drawing Object option when you drew the original gradient rectangle, you won't have to worry about turning off the selection mesh. The thin blue outline that shows up on a selected Drawing Object doesn't interfere with the live gradient preview like the dotted mesh that appears on a selected raw shape does.

New Feature 

Select any gradient item (fill or stroke) with the Gradient Transform tool (in the Tools panel) and you will see the new edit handles that you can use to modify the center point, scale, and rotation of your gradient within the selected item. We describe the Gradient Transform tool in more detail in Chapter 9, "Modifying Graphics."

Note 

As you read through the steps in this example, you might have wondered why we assigned the same color to both color pointers; since one of the pointers is set to an alpha value of 0 percent, perhaps it doesn't matter which color is used? The answer is that you can create a "fade" effect with a radial gradient made from two different colors, but the blend will not be clean unless you use only one color. Although the end point of the gradient assigned an alpha value of 0 percent will be "clear," the interstitial bands of the gradient will be tinted by whatever color you have assigned to the color pointer before changing the alpha value.

Selecting Bitmap Fills

Another handy feature available in the Color Mixer panel is the Bitmap fill option. This option enables you to choose any bitmap, in the Library or elsewhere on your system, to use as a fill for shapes drawn in Flash. When the image loads into a selected shape, it tiles to fill the shape.

To apply a bitmap fill directly to an existing shape, perform the following steps:

1. Select the fill of a shape (or select a Drawing Object) with the Selection tool.

2. Open the Mixer panel and choose Bitmap from the Color style menu.

3. If you have bitmaps stored in your current document library, they will be available from the Bitmap Preview area of the Mixer panel. Simply click on the thumbnail of the bitmap that you want to apply and it will automatically fill the selected shape.

4. If you do not have any bitmaps available in the current document, selecting Bitmap from the Color style menu in the Mixer panel will launch the Import to Library dialog box, where you can browse your system and specify a bitmap to be imported and applied as a fill.

Figure 7-23 shows a selected shape with a bitmap fill applied from the available thumbnails in the Mixer panel Preview area.

Figure 7-23: A bitmap fill applied to a selected shape. The bitmap is chosen from images stored in the library, which are displayed as thumbnails in the Mixer panel Preview area.

Note 

The appearance of a Bitmap fill will vary depending on how it is loaded (or assigned) to a specific item. We cover the various ways of loading Bitmap fills and the results you can expect in more detail in Chapter 9, "Modifying Graphics."