Recipe 11.4. Adjusting Movie Clip Instance Color

Problem

You want to adjust the color of a movie clip instance.

Solution

Select the Tint option from the Color Styles menu in the Property inspector, and modify the red, green, and blue values as well as the tint amount.

Alternatively, use an ActionScript ColorTransform object to modify the color at runtime.

Discussion

You can adjust the tint on each movie clip instance individually, creating unique colors for each, even though they are all derived from a common library symbol. This can be a powerful technique for creating variations on a single movie clip instance.

At authoring time, you can modify an instance's color settings from the Property inspector:

1. Select the instance on the stage.

2. Open the Property inspector, locate the Color Styles menu, and select the Tint option.

3. Adjust the available settings:

   • Set the red, green, and blue color values individually, or choose a color from the color selector. These settings affect the tint of the color to apply to the instance.

   • Choose a value for the Tint Amount. The valid range is from 0% to 100%.

When you apply a tint to a movie clip instance, Flash modifies each of the instance's color values relative to their original value. The result is a tint, rather than a fill effect. In other words, if the movie clip instance originally had blue, orange, and yellow colors within it, and you apply a red tint to it, the blue, orange, and yellow values become redder. How much redder the colors become depends on the value you choose for Tint Amount. If you choose 0%, no tint is applied. If you choose 100%, the red color ends up replacing all the other color values. The values in between result in a tint of increasing intensity.

The Tint option in the Color Styles menu gives you moderate control over the tint you apply to the movie clip. For more advanced authoring time control, use the Advanced option instead. If you choose Advanced from the Color Styles menu in the Property inspector, you then have the option to open the Advanced Color Settings dialog box.

In the Advanced Effect dialog box, there are eight values for you to modify. These values are the red percentage, red offset, green percentage, green offset, blue percentage, blue offset, alpha percentage, and alpha offset. For more information on how these values work together to produce a tint, read the further discussion later in this recipe on modifying these values using ActionScript.

You can also apply a tint to a movie clip instance at runtime using ActionScript. The ActionScript ColorTransform class lets you make runtime adjustments to a movie clip's color. Here are the steps to follow:

1. Import the ColorTransform class with an import statement. The class is in a package called flash.geom, so the import statement looks like this:

    import flash.geom.ColorTransform; 

   
   

2. Create a new ColorTransform object using a new statement with the ColorTransform constructor. You can pass the constructor eight parameters, specifying the red multiplier, green multiplier, blue multiplier, alpha multiplier, red offset, green offset, blue offset, and alpha offset. We'll discuss the details of those parameters in just a minute. For now, just know that the multiplier values have a range of1 to 1 and the offsets have a range of255 to 255. The following example makes a ColorTransform object that applies a red tint by effectively subtracting the green and blue parts from the colors:

    var ctClipColor:ColorTransform = new ColorTransform(1, 0, 0, 1, 0, 0, 0, 0); 

   
   

3. Apply the object to the movie clip instance by way of the TRansform. colorTransform object. Every movie clip has a transform property that, in turn, has a colorTransform property. You can assign the ColorTransform object to that property as follows:

    mClip.transform.colorTransform = ctClipColor; 

   
   

When you apply a tint at authoring time, you can see the results on the stage. Therefore, when using that technique, there is not always a need to be able to understand how the tint gets applied in order to predict what the result will be. However, when you make changes to an instance's color at runtime, you need to be able to predict what your number values will produce visually. In order to make these predictions, you need to understand how Flash calculates the tint based on the values of your transform object (or from the Advanced Effects dialog box if you are making authoring time changes). All calculations are based on the original color values of each pixel, which I refer to as R0, B0, G0, and A0. The original color values are multiplied by the multiplier values, and then the offset is added to that product. Here are the equations that are used in the calculations to give you a better idea:

newRed = (R0 x redMultiplier)/100 + redOffset

newGreen = (G0 x greenMultiplier)/100 + greenOffset

newBlue = (B0 x blueMultiplier)/100 + blueOffset

newAlpha = (A0 x alphaMultiplier)/100 + alphaOffset

You might notice that it is possible to produce values outside of the valid range (0 to 255.) For example, if you have an R0 value of 150, and you use a red multiplier value of 1 and a red offset value of 180, the resulting red value is 330. In such cases, Flash will convert the value to something within the valid range by way of some calculations that are a bit too complex to discuss in this book. Suffice it to say that if you use values outside the valid range, the resultant color will be difficult to predict.

When you use the advanced authoring time settings or the ActionScript runtime technique to modify tints, you can reset the movie clip instance to its original color by using the following ColorTransform object.

 var ctColorReset:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0); 

You can retrieve the current ColorTransform object for a movie clip by simply reading the value of the transform.colorTransform property.

 var ctCurrent:ColorTransform = mClip.transform.colorTransform; 

You can then use the redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, and alphaOffset properties to update the value. For example, the following code subtracts 10 from the current blue offset.

 ctCurrent.blueOffset -= 10; 

If you want the changes to affect the movie clip, you have to reassign the object to the TRansform.colorTransform property:

 mClip.transform.colorTransform = ctCurrent; 

The advantage of updating the properties of the current object instead of constructing a new ColorTransform object is that you can make incremental changes to the color relative to the current values. In the preceding example the blue offset was decremented by 10. That enables animated effects whereby colors change gradually over time.