Color Matrix

You can use matrices to manipulate colors in Flash. Before Flash 8, the only way you could manipulate colors was by varying the red, green, and blue channel values in the Color object. In Flash 8, ColorMatrixFilter (flash.filters.ColorMatrixFilter) gives you greater control on a much more granular scale.

ColorMatrixFilter accepts a 4 x 5 matrix (20-element array). Figure 4 shows the identity matrix for ColorMatrixFilter.

Figure 4. ColorMatrixFilter identity matrix

The calculations determining the resulting red, green, and blue channels are as follows:

redResult = a[0] * srcR + a[1] * srcG + 
            a[2] * srcB + a[3] * srcA + a[4]
 greenResult = a[5] * srcR + a[6] * srcG + 
              a[7] * srcB + a[8] * srcA + a[9]
 blueResult = a[10] * srcR + a[11] * srcG + 
             a[12] * srcB + a[13] * srcA + a[14]
 alphaResult = a[15] * srcR + a[16] * srcG + 
              a[17] * srcB + a[18] * srcA + a[19]  
 

As you can see, the values in the first row determine the resulting red value, the second row the green value, the third row the blue value, and the fourth row the alpha value. You can also see that the values in the first four columns are multiplied with the source red, green, blue, and alpha values, respectively—while the fifth column value is added (offset). Note that the source and result values for each channel range between 0 and 255. So even though the resulting value of red, green, or blue can be greater than 255 or less than 0, the values are constrained to this range. I’ll illustrate how this works with a few examples.

If you want to add 100 to the red channel (offset), set a[4] to a value of 100 (see Figure 5).

Figure 5. Increasing the red by 100

If you want to double the green channel, set a[6] to 2 (see Figure 6).

Figure 6. Doubling the green

If you want the amount of red in the source image to dictate the blue value in the result image, set a[10] to 1 and a[12] to 0 (see Figure 7).

Figure 7. Red dictating the blue value

To change the brightness of an image, you need to change the value of each color channel by an equal amount. The simplest way to do this is to offset the source value in each channel. Use an offset greater than 0 to increase brightness and a value less than 0 to reduce brightness. Figure 8 shows an example of increasing the brightness.

Figure 8. Increasing the brightness

You can also change brightness proportionally by multiplying each color channel by a value greater than 1 to increase brightness and a value less than 1 to reduce brightness.

In theory, to convert an image to grayscale, you need to have equal parts of each color channel. Because there are three channels, you can multiply the value of each channel by 0.33 and sum them to get the resultant value (see Figure 9).

Figure 9. Grayscale matrix

Due to the relative screen luminosity of the different color channels, however, there are actually specific “luminance coefficient” values that give a more true grayscale image. For example, if you take a block of pure green in Photoshop and put it beside a block of pure blue, and then grayscale the image, you’ll see that the formerly green block is a much lighter shade of gray than the formerly blue one.

To apply these matrices in Flash, create an instance of ColorMatrixFilter (passing it the matrix you want applied) and then add that ColorMatrixFilter instance to the filters property of a MovieClip instance. The following example doubles the amount of green:

import flash.filters.ColorMatrixFilter;

  var mat:Array = [ 1,0,0,0,0,
     0,2,0,0,0,
     0,0,1,0,0, 
    0,0,0,1,0 ];
 var colorMat:ColorMatrixFilter = new ColorMatrixFilter(mat);
 clip.filters = [colorMat]; 

Using ColorMatrixFilter together with an understanding of matrices, you can perform complex color adjustments in addition to brightness and grayscale. Adjusting contrast, saturation, and hue are all possible in Flash 8. Although a discussion of these topics is beyond the scope of this article, suffice it to say that Flash 8 provides access to color manipulation in a way that was never possible in any previous version.

In the sample files that accompany this article, you can see that ColorMatrixFilter can affect brightness, contrast, saturation, and hue. This demo uses the ColorMatrix class written by gskinner.com, which provides a simple API for doing complex color adjustments. See the resulting matrix values when each of these settings is changed, and change an individual matrix value to see the result: