Hack 11 Create and Organize Custom Swatches

Save and organize your color swatches without having to use the Color Swatches panel.

One of the most important factors in setting the mood and graphic impact of your Flash site is the color scheme. You can save the current palette from the Color Swatches panel as a Flash color set (CLR file). However, incorporating the colors in the Color Swatches panel into your workflow, such as arranging your colors into meaningful groups, isn't easy.

Of course, there's nothing stopping you from creating your own swatches. Simply create a layer called swatches, turn it into a guide layer (using ModifyTimelineLayer PropertiesTypeGuide), and add a few rectangles in which to store your colors. Just as oil painters keep a separate painting area on which to test colors before committing them to the final work, you can create as many ordered swatches as you want. To change or read the color of a particular swatch, use the paint bucket and eyedropper, respectively.

Figure 2-5 depicts storing skin tone and lip colors as a series of swatches outside the Stage area in the FLA document. Because the swatches are on a guide layer, they will not be exported as part of the final SWF.

Figure 2-5. Storing custom swatches off stage in a guide layer

Of course, there is still the problem of getting your colors into Flash in the first place.

Importing Colors

The Color Swatches panel contains that aging dinosaur of a bygone era, the web-safe palette. For the most part, the web-safe palette is no longer relevant. If a computer cannot display more than 256 colors, chances are it doesn't support the Flash Player (the exception might be handheld devices).

Furthermore, the web-safe palette is designed to work on hardware that can display a palette based on standard memory sizes (8, 16, or 32 bits). Web-safe colors do not display accurately on computers set to display 24-bit color.

If you use a gradient in Flash, you are no longer using web-safe colors, even if the colors controlling your gradients are taken from the web-safe palette.

You can use Photoshop to create your color palettes (you could also use Fireworks). The Swatches tab in Photoshop, shown in Figure 2-6, has the ability to display many more palettes than just web-based ones; it also includes many print-based presets.

Figure 2-6. The Photoshop Swatches tab

Unfortunately, Flash does not allow you to import a native ACO (Adobe Color palette) Photoshop swatch file. Not to worry; both Flash and Photoshop understand another (rather well-hidden) palette format, the ACT (Adobe Color Table) file.

An ACT file can be created only from an image that uses indexed color, typically a GIF or PNG-8.

To create such a palette in Photoshop:

Figure 2-7. Saving a color palette file from Photoshop

Back in Flash, to load the color table, select Add Colors from the Color Swatches panel's Options menu. The colors are appended to the end of the current swatches.

A far easier way of importing colors from Photoshop is to draw a set of swatches in Photoshop using a solid brush or airbrush, as shown in Figure 2-8, then import the bitmap in a lossless format (PNG-32 of TIFF) into Flash.

Figure 2-8. An image used to move a color palette from Photoshop to Flash

The color picker will recognize the individual pixels in the bitmap. Using the bitmap in much the same way as the off-stage vector color blocks, you have a very efficient way of passing color to Flash from Photoshop.

Final Thoughts

Despite the fact that color is an important way of setting the mood and look-and-feel of your web sites, the color-based features of the Flash interface can be somewhat confounding; you cannot sort the colors of a swatch into related groups of your choosing, for example. Creating your own swatches in the workspace outside the visible Stage is a good workaround to this limitation.

Additionally, Flash's interface is not as suited to choosing and designing color schemes as is Photoshop's, so it is important to be able to export color information from Photoshop and import it into Flash.