Recipe 10.11. Applying Grayscale

Problem

You want to apply a grayscale effect.

Solution

Use a grayscale matrix, and apply it using a ColorMatrixFilter object.

Discussion

You can apply a grayscale effect by converting all colors to their luminance equivalents. A simplified, nontechnical definition of luminance is the measure of brightness. You can convert a color to the equivalent luminance by multiplying the colors by the red, green, and blue luminance constants. The constants used for computer graphics differ from the NTSC standard used for broadcast purposes. The computer graphics luminance constants are 0.3086, 0.694, and 0.0820, respectively, for the RGB values. The following matrix describes a grayscale effect:

0.3086  0.6094  0.0820  0  0 0.3086  0.6094  0.0820  0  0 0.3086  0.6094  0.0820  0  0 0       0       0       1  0

The following applies a grayscale effect to a display object:

sampleSprite.filters = [new ColorMatrixFilter([0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0, 0, 0, 1, 0])];

You can use the ascb.filters.ColorMatrixArrays.GRAYSCALE constant:

sampleSprite.filters = [new ColorMatrixFilter(ColorMatrixArrays.GRAYSCALE)];