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

Property	Range	Description
ra	-100 to 100	Red percentage transformation
rb	-255 to 255	Red offset
ga	-100 to 100	Green percentage transformation
gb	-255 to 255	Green offset
ba	-100 to 100	Blue percentage transformation
bb	-255 to 255	Blue offset
aa	-100 to 100	Alpha percentage transformation
ab	-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;
myColorTransform.ga = 100;
myColorTransform.gb = 50;
myColorTransform.ba = 100;
myColorTransform.bb = 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);
my_color.setTranform(myColorTransform);

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: