Recipe 10.2. Applying Color Tints

Problem

You want to apply a tint to a display object rather than a solid color.

Solution

Work with the transform.colorTransform property of the display object. However, change the values of the multiplier properties rather than the offset properties.

Discussion

Recipe 10.1 shows how to apply solid colors to display objects. When you apply a solid color to a display object, it causes any contrast within the display object artwork to be indistinguishable. Applying a solid color is essentially the same as applying a fill to the entire shape of the display object. That means that every pixel within the display object is assigned the same color value.

When you apply a tint, each pixel's color is changed relative to the original pixel color value, which means the contrast is maintained. You can apply a tint to a display object in much the same way a solid color is applied. Both use the transform.col orTransform property of the object. The difference is that when you apply a tint, you want to set the offset properties to 0 (the default values) and change the values of the multiplier properties.

The multiplier properties (redMultiplier, greenMultiplier, blueMultiplier, and alphaMultiplier) have valid ranges from 0 to 1. The multiplier values determine how much of the red, green, blue, and alpha components of the original pixel color value to display. The default value for the multiplier properties is 1, which means that by default each pixel displays at 100 percent of the red, green, blue, and alpha components of the original pixel value. The following makes a display object appear with a green tint by keeping the greenMultiplier at 1 and setting the redMultiplier and blueMultiplier properties to 0:

var color:ColorTransform = sampleSprite.transform.colorTransform; color.redMultiplier = 0; color.blueMultiplier = 0; sampleSprite.transform.colorTransform = color;

See Also

Recipe 10.1