Example and Code

In this How-To we show two ways to tint objects in AS3: with the Color class contained in the package fl.motion and by direct manipulation of the colorTransform property without help from the Color class.

Download

Download well-commented source fla files corresponding to the two ways of tinting:

In the zip package you will find tint1.fla in which we use the Color class and its method setTint, and tint2.fla file in which we show how to accomplish the same result by manipulating the colorTransform property of an object directly.

Tinting with Color.setTint

Here is the Timeline code in tint1.fla.

We placed on the stage a MovieClip, 'clip', a slider, 'slider', a ColorPicker, 'picker', and a dynamic TextField, 'infoBox'. They are for demonstration purposes only and are not directly related to tinting.

In this example, we use the fl.motion.Color class and its setTint method to tint our MovieClip, 'clip'. The tinting is done within the 'tintClip' function in the script below.

import fl.motion.Color;

import fl.events.SliderEvent;

import fl.events.ColorPickerEvent;

 

infoBox.text=String(slider.value)+"%";

 

var c:Color=new Color();

 

slider.addEventListener(SliderEvent.CHANGE, sliderChanged);

 

picker.addEventListener(ColorPickerEvent.CHANGE, pickerChanged);

 

function sliderChanged(evt:SliderEvent):void {

tintClip();

}

 

function pickerChanged(evt:ColorPickerEvent):void {

tintClip();

}

The setTint method of of the Color class takes two parameters: tint color and tint multiplier, (a number between 0 and 1). The tint multiplier, is determined by the position of the slider, 'val' and equals val/100 as the slider values range from 0 to 100. The tint color, 'color', is determined by the color selected in the picker.

function tintClip():void {

var color:uint=picker.selectedColor;

var val:Number=slider.value;

c.setTint(color,val/100);

clip.transform.colorTransform=c;

infoBox.text=String(val)+"%";

}

The fl.motion.Color class extends the ColorTransform class. That is is why we could assign c as a value for clip.transform.colorTransform. To create a tinting effect, the method c.setTint(color,mul) assigns redMultiplier, greenMultiplier, blueMultiplier, redOffset, greenOffset, blueOffset of the transfrom c in a special way. Namely, if R,G,B are red, green and blue components of color, then c.setTint(color,mul) gives the following ColorTransform:

redMultiplier = 1 - mul
greenMultiplier = 1- mul
blueMultiplier = 1- mul
alphaMultiplier = 1
redOffset = Math.round(mul*R)
greenOffset = Math.round(mul*G)
blueOffset = Math.round(mul*B)
alphaOffset=0.

(More precisely, it is Math.round((1-mul)*256)/256 instead of 1-mul but the difference between the two values is negligible.)

Remarks: You can use negative values for the tint multiplier mul in setTint(color,mul). The ColorTransform c.setTint(color,mul) is created using the above formulas as well, and will produce contrast effects rather than tinting. Setting the brightness property of an instance of the Color class corresponds to tinting with white or tinting with black.

Tinting by Setting colorTransform

To obtain a tinting effect with a given color and a given tint multiplier, we can use the above formulas and assign a proper ColorTransform directly to clip.transform.colorTransform instead of using the Color class. We do it in tint2.fla. The Timeline code looks as follows.

import fl.events.SliderEvent;

import fl.events.ColorPickerEvent;

 

infoBox.text=String(slider.value)+"%";

 

var ct:ColorTransform=new ColorTransform();

 

slider.addEventListener(SliderEvent.CHANGE, sliderChanged);

 

picker.addEventListener(ColorPickerEvent.CHANGE, pickerChanged);

 

function sliderChanged(evt:SliderEvent):void {

tintClip();

}

 

function pickerChanged(evt:ColorPickerEvent):void {

tintClip();

}

 

function tintClip():void {

var color:uint=picker.selectedColor;

var mul:Number=slider.value/100;

var ctMul:Number=(1-mul);

var ctRedOff:Number=Math.round(mul*extractRed(color));

var ctGreenOff:Number=Math.round(mul*extractGreen(color));

var ctBlueOff:Number=Math.round(mul*extractBlue(color));

ct=new ColorTransform(ctMul,ctMul,ctMul,1,ctRedOff,ctGreenOff,ctBlueOff,0);

clip.transform.colorTransform=ct;

infoBox.text=String(mul*100)+"%";

}

 

function extractRed(c:uint):uint {

return (( c >> 16 ) & 0xFF);

}

 

function extractGreen(c:uint):uint {

return ( (c >> 8) & 0xFF );

}

 

function extractBlue(c:uint):uint {

return ( c & 0xFF );

}

The extractRed, extractGreen etc. functions above that extract color channels values from a color, are explained in detail in our tutorial: Extracting and Combining RGB Components.

Why does the transform ct defined above produce a tintitng effect? It helps to remember how color multipliers and offsets of a given ColorTransform affect each pixel of an object (in our case 'clip') to which the ColorTransform is applied. The result is calculated for each pixel as follows:

resultingRed=originalRed*ct.redMultiplier+ct.redOffset;
resultingGreen=originalGreen*ct.greenMultiplier+ct.greenOffset;
resultingBlue=originalBlue*ct.blueMultiplier+ct.blueOffset.

So with the tint multiplier say 0.3, we are darkening the object by 30 percent as color multipliers of ct are 0.7, and then we are adding 30 percent of the tint color as color offsets of ct are 30 percent of the tint color.

Related Tutorials on Color Manipulation in AS3

Check out our other tutorials on working with colors in AS3:

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.