8 August 2011
This guide assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files and ActionScript.
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:
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:
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:
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:
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.
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:
To change the alpha (transparency) of a graphic:
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.
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
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:
shape_mc.alpha = .5;
To change the color of a graphic:
import flash.geom.ColorTransform; // Change the color of the shape var ct:ColorTransform = new ColorTransform(); ct.color = 0x0099FF; shape_mc.transform.colorTransform = ct;
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:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.