Working in the Color Swatches Panel


The Color Swatches panel (Ctrl+F9 or z+F9) is the most commonly used source for selecting colors as you work in Flash. Although the controls for loading or modifying specific palettes are available only on the main Color Swatches panel, both the Tools panel and the Property inspector give you quick pop-up menus to access whatever colors are currently loaded. If the main Color Swatches panel isn't visible, you can always find it in the application menu under Window ð Color Swatches. Figure 7-6 shows the Fill Swatches for the default Web 216 colors as they display in the pop-up menu in the Tools panel (A), the Property inspector (B), and on the main Color Swatches panel (C). The Color Swatches panel is shown with the Options menu that is invoked by clicking the top-right corner of the panel.

image from book
Figure 7-6: The default color palette as it displays in the Tools panel pop-up (A), Property inspector pop-up (B), and on the Color Swatches panel (C)

New Feature 

In Flash 8, there is now a handy Alpha field in the Swatches pop-up menu that provides a quick way to change the transparency of a selected color. In older versions of Flash, you adjust Alpha levels on fill colors using the Color Mixer panel — this is still an option.

Tools that create fields of color, or fills, include the Brush, the Paint Bucket, and the various Shape tools. Each of these tools is accompanied by the Fill color button, which appears in the Tools panel and in the Property inspector. Although the Fill Swatches pop-up is similar to the Stroke pop-up, it has one significant difference: It includes another row of swatches at the bottom, which are gradient swatches — click one to fill with a prebuilt gradient style.

Tools that create lines, or strokes, include the Line, Pencil, Ink Bottle, Pen, and — because they create outlines around fills — any of the Shape tools. These tools rely on the Stroke color button, which appears in both the Tools panel and the Property inspector.

For all drawing tools, basic color selection is accomplished by clicking either the Stroke or Fill color buttons, and then choosing a color from the Swatches pop-up. This pop-up displays the same swatch set that is currently loaded in the Color Swatches panel. It also includes a hexadecimal color-entry box — which facilitates keyboard entry, as well as cut-and-paste of hex values. Depending upon the tool you select, the Swatch menu available from the Tools panel may display a No Color button above the solid swatches as well as a button that launches the Color Picker.

New Feature 

In Flash 8, you can remove a fill or stroke from a selected shape or Drawing Object by using the None (or No Color) button in any of the Swatches menus. The old method of using Edit ð Clear or pressing the Backspace (Delete) key to remove a line or stroke still works if the line or stroke shows the selection grid — shapes can be selected directly; Drawing Objects must be in Edit mode.

Tip 

If you decide after you invoke the Swatches pop-up that you don't want to change your selected color after all, hit the Escape key or make sure that your mouse is over the original color swatch when you click to close the pop-up.

The color chips displayed on the Tools panel will always display the most recently selected Stroke and Fill colors, while the Property inspector will display the color chips relevant to the active tool or the currently selected item.

Note 

Drawing Objects behave like grouped shapes, but the fill and stroke colors applied to Drawing Objects can be modified without opening them in Edit mode. When a Drawing Object is selected (by single-clicking) with the Selection tool, the selection grid isn't visible (as it would be on a raw shape), but you can apply a new fill or stroke color by using any of the Swatches menus. To open a Drawing Object in Edit mode, double-click with the Selection tool.

If the color you want is not available in the current Swatches menu, you may opt to invoke the Color Picker by clicking the Color Picker button. Alternatively, you may also open the Color Mixer panel to create a new color and add it to the currently loaded selection of swatches. The Color Swatches panel enables you to load, add, delete, and modify various color sets for individual documents. Whatever changes are made to the Color Swatches panel will be saved with the document (.fla) that is currently active.

Tip 

With any of the Swatch pop-ups active, your cursor icon will turn into an Eyedropper. If you roll the Eyedropper over colors outside of the swatches area while continuing to hold down the mouse, you will notice that you can "sample" colors from anywhere on your desktop. When you find a color you like, release your mouse and the color will load into Flash as your currently selected color. Don't forget to add the color to the Color Swatches panel if you want to save it in the color library of your current file. We describe the steps for adding and saving swatches later in this chapter.

Color Swatches Panel Options

Think of the Color Swatches panel (refer to Figure 7-6) as a paint box or a way to organize your existing swatches and to manipulate the display of colors that are available in the other panels. Use the Color Swatches panel to save color sets, import color sets, and reorder or change selected colors. The options menu of the Color Swatches panel provides the controls used to sort or modify individual swatches as well as various color sets:

  • Duplicate Swatch: Use this to duplicate a selected swatch. It can be useful when you want to make a range of related color swatches by duplicating and then editing a series of swatches with the Color Mixer panel.

    Tip 

    You can duplicate a selected swatch with just two clicks. First, select a swatch with the Selection tool or use the Dropper tool to pick a color from any item on the Stage. As you move the pointer into the space below the current solid swatches set (above the gradient swatches), the pointer icon changes from a dropper into a paint bucket. Just click and a new swatch is added to the color set.

  • Delete Swatch: Botched a swatch? Select and delete it here.

  • Add Colors: Opens the Import Color Swatch menu, which is a simple dialog box used to locate, select, and import color sets. Add Colors retains the current color set and appends the imported color set at the bottom of the panel.

    Caution 

    Be careful about creating huge color sets! In some cases, the Swatch color pop-ups may extend beyond the visible screen and you'll have to use the Color Swatches panel to be able to scroll to choose colors that are hidden off-screen. This can happen if you add colors from a complex GIF image to the default Web 216 set.

  • Replace Colors: Also opens the Import Color Swatch menu. However, Replace Colors replaces the current color set when it loads the selected color set. With the exception of the gradient swatches, if the current set has not been saved, it will be lost.

  • Load Default Colors: Clears the current color set and replaces it with the default Web 216 swatch palette. Again, if the current set has not been saved, it will be lost. Flash allows you to change the specification for your default color palette if you prefer not to use Web 216. (See Save as Default.)

  • Save Colors: Opens the Export Color Swatch menu, which is used to name and save color sets to a specific location on your hard drive. Color sets may be saved in either the Flash Color Set (.clr) or Color Table (.act) format, which can be used with Macromedia Fireworks and Adobe Photoshop. Gradients can only be imported and exported from Flash using the .clr format.

  • Save as Default: Saves the current swatch set as the default set to be loaded in the Color Swatches panel for all new Flash documents.

  • Clear Colors: Removes all colors currently loaded in the Color Swatches panel, leaving only the black and white swatches and a grayscale gradient.

  • Web 216: Loads the Web-safe palette. This option makes it safe to mess with the swatches in Flash because no matter what you do, you can always just reload this original default color set.

    Tip 

    You can override the default Web 216 color set by switching the Color Mixer panel to either the RGB or HSB (hue, saturation, brightness) color spaces. You can then mix your own fresh colors, add them to the Color Swatches panel, and save that palette as the default. Another alternative is to locate the Photoshop Color Tables on your hard drive (or download a specialty color table from the Web) and replace the default set with a broader gamut.

  • Sort by Color: This organizes the swatches by hue rather than by mathematical number and can visually be a more logical way to find colors in your current set. Note, however, that once you apply this sort, you have no way to toggle back to your original swatch order (other than reloading the default Web 216 swatch set). So it is best to save any custom palette first before sorting so that you have the option of going back to the other display if you prefer it. Figure 7-7 shows the Web 216 palette as it appears sorted numerically (left) and as it appears sorted by hue (right).

image from book
Figure 7-7: The default Web 216 palette as it appears sorted by number (left), and how it appears after being sorted by hue with the Sort by Color command (right)

Importing Custom Palettes

The option of loading custom swatches is helpful if you're developing a Flash project that you want to match with a predefined palette — whether this is out of necessity or just for inspiration. For example, you can match your Flash elements to a corporate logo or to the range of hues in a photo that you love. In addition to loading the colors in a specific GIF file, Flash allows you to load RGB color palettes from other graphics applications, which have been saved as Color Tables (in the .act format).

Loading a Custom GIF Color Palette

To simplify your Flash swatch selection to match the colors in a company logo or other GIF image, follow these steps:

  1. Clear the currently loaded color set by choosing Clear Colors in the Color Swatches panel options menu.

  2. Choose Add Colors from the Color Swatches panel options menu and, in the Import Color Swatch dialog box, specify the GIF file that you want to define the imported color set.

  3. Flash will load the colors from the GIF image into the Color Swatches panel and you can then save the document (.fla) to keep these colors as the loaded set.

  4. To organize the loaded color set in the Color Swatches panel by hue, choose the Sort by Color option. You can always add or delete swatches from this new set.

  5. If you want to use your custom color set in other files, use the Save Colors command in the Color Swatches panel options menu to save a Color Table (.act) or Flash Color Set (.clr).

A sample source GIF image and the resulting imported Swatches palette are shown in Figure 7-8.

image from book
Figure 7-8: The simple logo GIF file that we specified as the source for a custom Swatches palette. The resulting swatches match the colors in the logo.

Tip 

The color settings defined in the original authoring environment (such as Adobe Illustrator or Photoshop) for saved GIF files will affect the colors available for loading to the Flash swatches panel. For the widest range of colors, use 256 colors and an adaptive palette. To get only the exact colors used in a graphic, manually restrict the number of colors that can be included by typing in a number that matches the number of colors in the original graphic. For example, if a logo that you plan to use as a source file for your swatches is red, blue, yellow, black, and white, restrict the GIF to five colors when you export it from the original authoring application.

Creating and Loading a Custom Color Table

If you want to save a color palette that will match the hues in a photograph, you can also generate a Color Table in Adobe Photoshop or Macromedia Fireworks.

To create a Color Table in Adobe Photoshop (or Illustrator), follow these steps:

  1. Open a source bitmap image (.jpeg, .tif, or .psd).

  2. Use the Save for Web command to access the settings that allow you to choose the file type and color space that you wish to export. To create a Color Table, set the file type to GIF, choose adaptive color, and choose the number of colors you wish to include in the color table. Although you can include anywhere from 2 to 256 colors in your Color Table, you will not likely need more than 16. Preview the swatches with the Color Table tab in the lower left of the interface (next to Image Size).

    Note 

    Although Photoshop includes a menu option for creating a Color Table (Image ð Mode ð Color Table), this option is available only if the source image is first converted to Indexed color. Also, the Color Table dialog box only offers limited control of the swatches that will be exported, so we prefer to use the Save for Web workflow.

  3. When you have a set of swatches that you are happy with, choose Save Color Table from the Color Table options menu. The settings used for the sample file are shown in Figure 7-9.

  4. Give the Color Table a name that you will remember (such as airplaneColors) and save the .act file to a folder where you can find it again. Creating a Custom Palettes folder on your system, where you can store and organize any of the Color Tables or source GIFs that you may want to use again, is a good idea.

  5. Open a Flash document (.fla), and from the Color Swatches panel options menu choose Add Colors if you want new colors added to the currently loaded set (or Replace Colors if you want to use only your new colors).

  6. From the Import Color Swatch dialog box, browse to your Color Table (.act) file and select it. Flash will load the new colors into the Color Swatches panel and you can then sort and save this set with your document.

image from book
Figure 7-9: Use the Save for Web command and the Color Table settings in Adobe Photoshop to create a custom color set from a photograph.

The sample source bitmap image and the resulting Color Table loaded into the Color Swatches panel are shown in Figure 7-10.

image from book
Figure 7-10: A photo used to generate a Color Table (.act), and the resulting color set loaded into the Flash Color Swatches panel

To create a Color Table in Macromedia Fireworks, follow these steps:

  1. Open a source bitmap image (.jpeg, .tif, or .psd).

  2. Open the Optimize panel (Window ð Optimize) to access the settings that allow you to choose the file type and color space that you wish to export. To create a Color Table, set the file type to GIF, choose adaptive color, and choose the number of colors you wish to include in the color table. To preview the swatches, select the Preview (or 2-Up) tab in the main image window.

  3. When you have a set of swatches that you are happy with, choose Save Palette from the Optimize panel options menu. The settings used for the sample .act file (on the CD-ROM) are shown in Figure 7-11.

  4. Continue with Steps 4 through 6 in the previous instructions.

image from book
Figure 7-11: Use the Optimize panel in Fireworks to create a custom color set from a photograph.

On the CD-ROM 

In the example, we created a Color Table from an image of an airplane wing. You can find the source bitmap (airplane.jpg) and the Photoshop Color Table (airplaneColors.act) files, along with a Flash document (airplaneColors.fla) that has a JPG imported and the color palette loaded in the airplaneColors folder in the ch07 folder on the CD-ROM.




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