Color correction in Flash Player
Modified
23 November 2010
Requirements
Prerequisite knowledge
General experience using the Flash authoring tool and ActionScript 3.0. An understanding of color management is also important.
To learn more, read the following white paper: Color consistency and Adobe Creative Suite (PDF, 2 MB)
User level
Intermediate
Required products
- Flash Player
- Flash Professional (Download trial)
Sample files
- color_correction_flash_player.zip (855 KB)
Computer monitors, printers, and mobile phones render color differently based on the different technologies they use. Most browsers, at this time, rely on the host device's native color characteristics to determine how colors appear. However, many users calibrate their monitors using a series of settings and then create a profile based on these settings. A standard format for establishing a profile creates ICC (International Color Consortium) color profiles that represent the color characteristics of a monitor. These ICC profiles are used by applications to adjust colors to compensate for the unique characteristics of a monitor. Using a particular device color profile to adjust color is called color correction for Adobe Flash Player, and the process for using color profiles is called color management.
Adobe Flash Player 10 (and later) allows content developers to specify whether a SWF file will use a local device's monitor color profile. If you develop content in Adobe Flash Professional for Flash Player 10, you can enable color correction for your SWF file. That way, when a SWF file is viewed on one device (like a desktop computer monitor using the monitor's color profile) and is printed out using that device's color profile, then the colors will appear identical.
How Flash Player uses color correction
By default, Flash Player understands RGB colors using an sRGB gamma(g) 2.2 color space (sRGB is an acronym for "standard red, green, and blue"). However, this color space does not define the colors that are drawn to the monitor screen. You need to turn on the color correction for Flash Player 10 to define the colors that are drawn on the monitor. When an image does not use sRGB, it usually has an embedded profile that tells a program how to transform the image into sRGB.
Note: If you import an image with an embedded profile into Flash Professional, the color profile is removed and the image on the Stage appears without its embedded color profile.
Flash Player 10 (and later versions) has an ActionScript API that allows you to set a SWF file to use the local device's color profile—or not. The new API is listed in the flash.display.Stage.colorCorrection section of the ActionScript 3.0 Reference for the Adobe Flash Platform. Use the new ActionScript API to determine whether a SWF will use the standard sRGB color profile or the local device's color profile.
The new API also includes a Stage.colorCorrectionSupport property, which really serves two purposes:
- To determine if a monitor's color profile is installed. The
Stage.colorCorrectionSupportproperty is read-only and indicates if a SWF file is set to use the monitor's color profile. If a monitor profile is not installed or is not supported by the current system, theStage.colorCorrectionSupportproperty value isunsupportedand color correction can't be enabled. - To determine if the host (usually the browser) is currently set to use color management. The property is set to either
defaultOnordefaultOff(depending on the setting of theStage.colorCorrectionproperty). When the host is using color management, the value isdefaultOnand a designer can use this information to set color management on or off based on whether it is on or off in the browser. Using color management sets colors to appear the same in the browser and in Flash Player. For example, color management is useful if background HTML colors are supposed to match colors in the SWF.
Note: Currently, SWF file color correction is not supported on Linux/Unix systems or systems with less than 32-bit color resolution. On these systems, the Stage.colorCorrectionSupport property value is always unsupported.
When color management is enabled, the colors are converted from sRGB to the monitor's color profile so the user sees colors that are defined as sRGB on the monitor as sRGB. If color management transformation is not enabled, colors appear in the color space of the monitor and look different on different monitors. Also, Flash Player always color-corrects the entire Stage, so the color profile applies to all images within a SWF file. You can't selectively set some parts of a SWF to use color correction and not other parts.
For example, the sample file contains an image file (Peppers_withGBRprofile.jpg) that has an embedded color profile. When you open it in a browser that supports the GBR color profile, you'll see the peppers as yellow, red, green, and orange. Otherwise, you'll see the peppers as shades of green and blue. The sample file also contain another image (Peppers_RGB_8C.jpg) with an RGB color profile embedded—the color management supported by Flash Professional by default. Compare the two images of the same peppers (see Figure 1).
Note: Although Flash Player color correction can be used on multiple-monitor configurations, only the main monitor's color profile is applied to the SWF file.
Flash Player color correction does have some limitations. You do not have access to a device's color profile and cannot alter the color profile or do the color conversions in ActionScript. All color conversion is done automatically using the current profile; color conversion is ignored when the color correction property is disabled or unavailable.
lblHasCM.addEventListener(Event.ADDED, addHandler);
btnToggle.addEventListener(MouseEvent.CLICK, doToggle);
function addHandler(add_event:Event) {
if (stage.colorCorrectionSupport == ColorCorrectionSupport.DEFAULT_ON || stage.colorCorrectionSupport == ColorCorrectionSupport.DEFAULT_OFF) {
lblHasCM.text = "stage.colorCorrectionSupport: " + stage.colorCorrectionSupport;
}
else {
lblHasCM.text = "stage.colorCorrectionSupport: unsupported";
}
}
function doToggle(e:MouseEvent) {
// don't try to toggle if color management is not supported
if(stage.colorCorrectionSupport == ColorCorrectionSupport.DEFAULT_ON ||
stage.colorCorrectionSupport == ColorCorrectionSupport.DEFAULT_OFF) {
switch(stage.colorCorrection) {
case ColorCorrection.ON:
stage.colorCorrection = ColorCorrection.OFF;
lblCMEnableState.text = "State: " + stage.colorCorrection;
break;
case ColorCorrection.OFF:
stage.colorCorrection = ColorCorrection.DEFAULT;
lblCMEnableState.text = "State: " + stage.colorCorrection;
break;
case ColorCorrection.DEFAULT:
stage.colorCorrection = ColorCorrection.ON;
lblCMEnableState.text = "State: " + stage.colorCorrection;
break;
default:
lblCMEnableState.text = "Error.";
break;
}
}
else {
lblCMEnableState.text = "Color Correction is not supported.";
}
}
ActionScript by Albert Chang, Software Quality Assurance Engineer, Flash Player.
Result
Click the toggle button to see the SWF file cycle through the on/off/default state for colorCorrection. If unsupported appears as the property of Stage.colorCorrectionSupport, the SWF file cannot read what profile is in use by the monitor:
Since some browsers now support monitor color profiles (such as Safari 3 and Firefox 3), you'll see a difference between running the sample SWF file in those browsers that support color correction profiles and other browsers that do not. You can see this difference when the value of the Stage.colorCorrection property is default. Also, you can load different color profiles on your system to see the effect of each profile on the example.
The Stage.colorCorrection property enables two options:
- Send colors to the monitor with no adjustment (the same way as an earlier version of Flash Player). Colors, as encoded in the SWF file, are sent directly to the monitor with no adjustment; RGB values of 127,127,127 are sent as 127,127,127 to the monitor. If the monitor has a red cast and is relatively dark, then the SWF file appears red and dark.
- Send colors to the monitor using the monitor's color profile to adjust color values. If a monitor has a red cast, assigning the
Stage.colorCorrectionproperty theonvalue adjusts colors to compensate for this red cast; RGB values of 127,127,127 are sent as 125,127,127 to the monitor. Equal values of RGB using the sRGB color space are "neutral" and the goal of color management is to see neutral color on the monitor, even though the monitor has a red cast.
Note: Some browsers that do support monitor profiles have color management turned off by default. Read your browser's help documentation to learn more.
Testing the sample files
The sample file zip archive includes the following files:
- colorcorrection.fla: Flash Professional CS4 file for the sample.
- colorcorrection_CS5.fla: Flash Professional CS5 version of the file for the sample.
- Peppers_withGBRprofile.jpg: Image file with an embedded GBR color profile.
- Peppers_RGB_8C.jpg: Image file with an embedded RGB color profile.
Follow these steps to test the sample files
- Download the sample file linked to above.
- Open the FLA files in Flash Professional.
- Select the Control > Test Movie menu option (or press the Ctrl+Enter keys). Alternatively, use the File > Publish menu option to publish the file and view it in a browser.
Understanding the code
The ActionScript code for the examples is in each sample FLA file:
- With one of the sample FLA files open in Flash Professional, select the first frame of the main Timeline.
- Select the Window > Actions menu option (or press the F9 key) to open the Actions panel and see the ActionScript.
This article does not describe all of the ActionScript classes used in the application. For more information, see the ActionScript 3.0 Reference for the Adobe Flash Platform.
Related Flash Quick Starts
