Graphic Effects Learning Guide for Flash: Color

Adobe Flash Professional CS5 provides a range of features to help you work with color and color effects. Choosing and managing color is a core concept in any Flash project.

Computers and display devices use the RGB color model to reproduce a wide range of colors. RGB is an additive color model composed of three primary colors: red, green, and blue. Unique colors are generated by superimposing the three colors at varying degrees of intensity. The intensity of the three colors in the RGB color model is represented by a number ranging from 0 to 256:

• White (256, 256, 256)
• Black (0, 0, 0)

Color on the web is commonly represented as an RGB triplet in hexadecimal format (a hex triplet). A hex triplet is a six-digit, three-byte hexadecimal number where each byte is represented by two letters or numbers ranging between 00 and FF. Hexadecimal numbers are written in base-16 notation which augments 0–9 with A–F to represent numerical values from 10 to 15. In Flash Professional and ActionScript, hexadecimal numbers are written using the prefix 0x followed by three double-digit hex numbers representing the RGB values of the color:

• White (0xFFFFFF)
• Black (0x000000)

When working with color in ActionScript APIs such as BitmapData, you'll format colors using the ARGB (alpha, red, green, blue) color model which includes an additional hex byte representing alpha (transparency) before the RGB value. A leading value of 0x00 produces a completely transparent color whereas a leading value of 0xFF produces a completely opaque color:

• Transparent white (0x00FFFFFF)
• Opaque white (0xFFFFFFFF)

Although you'll primarily work with six-digit hexadecimal notation in the Flash Professional workspace, you can use the Color panel to view color values in hexadecimal or standard RGB format.

Check out the following articles for more information on RGB and ARGB color values:

• Counting in hexadecimal (Kirupa Chinnathambi)
• Reading RGB/aRGB color values (Kirupa Chinnathambi)
• Tracing ARGB (32-bit) hex values (Grant Skinner)

The Flash Professional workspace provides a range of color management options. Usually, you'll choose colors using the Tools panel and Properties panel (see Figure 1) as you work with the drawing tools.

Drawing objects represent color in two parts: stroke color (pencil icon) and fill color (paint bucket icon). The stroke color defines the outline color of a vector shape whereas the fill defines the color that fills the shape.

For more information on the basics of working with colors, see the Colors, gradients, and strokes section of the Flash Professional online help.

Flash Professional displays the web-safe color palette by default—a collection of 216 colors common to most browsers. The default palette can be seen if you click on a color swatch in the Tools or Properties panels, or by opening the Swatches panel (see Figure 2).

Use the Swatches panel as a way to access the default color palette or any custom color palette you choose to build. You can store solid colors, gradient colors, and bitmap fills in the Swatches panel.

For more information about using the Swatches panel, see the Color palettes and Duplicate, delete, and clear colors sections of the Flash Professional online help.

The Color panel is used to create custom colors, gradients, and bitmap fills (see Figure 3). Use the Color panel to create colors and gradients that can be applied to drawing objects or saved in the Swatches panel.

For more information about the Color panel, see The Color panel section of the Flash Professional online help.

The Kuler panel provides a way to quickly generate color themes from a base color (see Figure 4).

Kuler is an online community that can help you download and share color themes on the web and across other Adobe products. Use the Browse tab to view themes available in the community. Use the Create tab to generate your own themes. At any time, choose the Add theme to Swatches option in the Kuler panel to copy the theme to the Swatches panel.

Note: The Kuler panel is available in Adobe Photoshop CS5, Flash Professional CS5, Adobe InDesign CS5, Adobe Illustrator CS5, and Adobe Fireworks CS5. The panel is not available in the French versions of these products.

For more information on the Kuler panel, see the Kuler panel section of the Flash Professional online help.

Color effects are simple color transformations that can be applied to movie clips, text, and buttons. Whenever one of these types of objects is selected, the Color Effect area on the Properties panel becomes active, allowing you to assign or remove an effect from the object. You can animate color effects to create effects such as fades and color changes.

Color effect options include the following:

• Brightness shifts an objects color between black and white
• Tint adds a tint to the object
• Alpha adjusts the transparency of the object
• Advanced adjusts combinations of brightness, tint, and alpha

To change the alpha (transparency) of a graphic:

1. Create a new ActionScript 3 FLA file and name it alpha.fla.
2. Rename Layer 1 to assets.
3. Draw a shape on frame 1 and convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.

Note: If you use a TLF text field, you can skip Step 2. For classic text or any type of drawing object, however, you need to convert the asset to a movie clip or button symbol before applying the color effect.

4. Select the shape instance on the Stage and change the Color Effect menu from None to Alpha.
5. Drag the Alpha slider toward 0% and notice that the transparency of the graphic changes.
6. Return the Color Effect menu to None to turn off the effect.
7. Save the file.

Note: Color effects cannot directly be applied to classic text. To apply a color effect to classic text, nest the text field in a movie clip symbol. For alpha effects, you need to embed the font in the classic text field.

For more information on using color effects, see the Change the color and transparency of an instance section of the Flash Professional online help.

You can also apply color effects dynamically at runtime using ActionScript. Each display object (text, movie clip, button, etc.) includes an ActionScript API for setting the alpha or transform properties of that object. The alpha property sets the transparency of an instance (in a range between 1 and 0), and the transform property provides access to the colorTransform object, which can be used to dynamically change the color of the instance.

To change the alpha (transparency) of a graphic:

1. Create a new ActionScript 3 FLA file and name it alpha_as.fla.
2. Draw a shape on Frame 1 and convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.
3. Select the instance and name it shape_mc in the Properties panel.
4. Rename Layer 1 to assets and add a new layer named actions above it.
5. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
6. Copy and paste the following code in the Actions panel script area:

7. Run the Test Movie (Control > Test Movie) command to see the effect.
8. Save the file.

To change the color of a graphic:

1. Create a new ActionScript 3 FLA file and name it color_as.fla.
2. Draw a shape on Frame 1 and convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.
3. Select the instance and name it shape_mc in the Properties panel.
4. Rename Layer 1 to assets and add a new layer named actions above it.
5. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
6. Copy and paste the following code in the Actions panel script area:

7. Run the Test Movie (Control > Test Movie) command to see the effect.
8. Save the file.

For more information on working with color and ActionScript, see the ColorTransform class in the ActionScript 3 Reference for the Flash Platform and the Adjusting DisplayObject colors section of the ActionScript 3 Developer's Guide. Also check out the color transformations ActionScript sample.

Computer monitors are calibrated with different settings, which are used to generate a color profile describing the characteristics of the monitor. Color correction occurs when a device's color profile is used to adjust colors so they appear as intended. Color management is the process of using color profiles for color correction.

Flash Player 10 and later support color correction for bitmap images. You can enable color correction in Flash Player using ActionScript.

To learn more about color correction, see Using color correction in Flash Player 10.

This section of the Graphic Effects Learning Guide covers the basics of working with color and color effects in Flash Professional. Check out the Create tween animation section of the online Flash Professional help for information on animating color effects. Also, check out Grant Skinner's article, Using bitwise operators to manipulate bits and colors, for a low-level view of working with color in ActionScript.

For more information on working with Kuler, check out the following resources:

• Kuler online
• Kuler help pages
• Kuler Services