Recipe 3.5 Tinting a Movie Clip's Color

3.5.1 Problem

You want to modify the color tint of a movie clip (as opposed to applying a single color to the whole shape).

3.5.2 Solution

Use the setTransform( ) method of the Color object that targets the movie clip.

3.5.3 Discussion

Using Color.setRGB( ) to fill a movie clip with a solid color overrides any color contrast within the movie clip. To apply a tint to a movie clip, use Color.setTransform( ) instead.

Flash records the color values set for a movie clip during authoring. A single clip might contain hundreds of colors. However, setRGB( ) applies the same RGB value to every color region within a movie clip. On the other hand, setTransform( ) can modify colors relative to their original values. For example, consider a movie clip that contains a JPEG with hundreds of colors. Using setRGB( ) applies one color to the whole movie clip, resulting in a solid-colored rectangle. But with setTransform( ), you can adjust the red, green, and blue levels of each original color, effectively tinting the image without losing the initial contrast.

The setTransform( ) method accepts a single parameter: a transform object that includes the eight properties shown in Table 3-1.

Table 3-1. Properties of a color transform object





-100 to 100

Red percentage transformation


-255 to 255

Red offset


-100 to 100

Green percentage transformation


-255 to 255

Green offset


-100 to 100

Blue percentage transformation


-255 to 255

Blue offset


-100 to 100

Alpha percentage transformation


-255 to 255

Alpha offset

The values in Table 3-1 are used to transform the existing color values within the movie clip using the following formulas:

red   = originalRed   * (ra/100) + rb
green = originalGreen * (ga/100) + gb
blue  = originalBlue  * (ba/100) + bb
alpha = originalAlpha * (aa/100) + ab

If any of the resulting values (red, green, blue, or alpha) are outside of the 0 to 255 range, it becomes more difficult to predict the resulting effect on the color. Therefore, it is generally wise to specify property values such that the resulting color remains in the valid range.

You can create the transform object by creating a generic instance of the base Object class and adding properties to it, as follows:

myColorTransform = new Object(  );
myColorTransform.ra = 100;
myColorTransform.rb = 50; = 100; = 50; = 100; = 50;
myColorTransform.aa = 100;
myColorTransform.ab = 0;

Or you can create an equivalent transform object using object literal notation:

myColorTransform = {ra: 100, rb: 50, ga: 100, gb: 50, 
                    ba: 100, bb: 50, aa: 100, ab: 0};

Any properties that are omitted from the preceding transform object are given a value of 0.

After defining a transform object, apply it to the targeted movie clip via Color.setTranform( ), as follows:

my_color = new Color(myMovieClip);

The values involved in transforming a movie clip's colors can sometimes appear a bit daunting and confusing at first. Familiarize yourself with how these values work together to produce a single color transformation by experimenting with the advanced color settings in the Flash MX authoring tool. The advanced settings correspond to the properties that make up a transform object, and they have the same effect?albeit at authoring time instead of runtime. You can access the advanced color settings at authoring time by following these steps:

  1. Select a movie clip instance on the Stage.

  2. Open the Property inspector (Window Properties).

  3. Select Advanced from the Color dropdown list in the Property inspector.

  4. The Settings button appears to the right of the Color dropdown list. Click the Settings button to open the Advanced Effects dialog box.

    Part I: Local Recipes
    Part II: Remote Recipes