Changing Colors of Movie Clips - Example 1

If you create display objects at runtime and draw in them using beginFill(..), lineTo(..), or curveTo(..) methods, then changing their color can usually be accomplished easily by redrawing with new parameters. If it is not convenient for one reason or another, or you want to change the color of a movie clip created at authoring time, you can use ColorTransform object which you assign to transform.colorTransform property of a DisplayObject.

Download

Download the well-commented fla file for the swf displayed above.

The Code

The square that you see above was created at authoring time. (The zip file that you can download from the next page contains a PDF guide that explains the process of creating the squre and its sections in detail.) The eight triangular sections were converted to MovieClips with instance names: tr0, tr2,....,tr7. Originally they are all blue. We put three instances of the Slider component named redSlider, greenSlider, and blueSlider. In the Parameters section for each Slider, we put the mimimum value as 0, the maximum 255. We set the length of all sliders to 255. Next, we put three dynamic text boxes: redTxt, greenTxt, and blueTxt, and a RESET button named btnReset. We also created a small rectagular movie clip, mcTest, that will display the color whose RGB components correspond to the current positions of the sliders' knobs. mcTest is a little 'preview' or a 'test' clip. We attached the following code to the first (and the only) frame. We present the code and discuss it as we go along.

We will use the SliderEvent.CHANGE, so we need to import SliderEvent package. We do not need to import fl.controls.Slider as a copy of Slider resides in the Library and on the Stage. Many classes are automatically imported when you attach code to the Timeline, SliderEvent is not one of them. But, for example, ColorTransform, contained in fl.geom package is automatically imported.

import fl.events.SliderEvent;

The next global variable of datatype ColorTransform will hold the current color information of our preview clip, mcTest. ColorTransform Object contains information about the values of red, green, and blue components of the current color as well as the alpha; that is, transparency value.

var testClipTransform:ColorTransform;

We set the text in color boxes corresponding to the initial positions of sliders' knobs.

redTxt.text="0";

greenTxt.text="0";

blueTxt.text="0";

We call a function that attaches listeners to our sliders, triangular clips (named tr1, tr2,..., etc.), and a button. The function is defined below.

setUpListeners();

We call a function that updates the color of our test clip, mcTest, based on the positions of sliders' knobs. Thus, the movie will open with the preview clip being black and not white (as it was at authoring time). Indeed, the initial positions of the knobs are 0,0,0.

updateTestClip();

Below is the function that updates the color of our preview clip, mcTest, based on the current positions of sliders' knobs.

function updateTestClip():void {

testClipTransform=new ColorTransform(0,0,0,1,redSlider.value,greenSlider.value,blueSlider.value,0);

mcTest.transform.colorTransform = testClipTransform;

}

The first line in the 'updateTestClip' function:

testClipTransform=new ColorTransform(0,0,0,1,redSlider.value,greenSlider.value,blueSlider.value,0);

reflects the way color change is accomplished in AS3. We are creating an instace of ColorTransform class and store it in testClipTransform variable. The parameters of the constructor (evoked with the word 'new') are: redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, and alphaOffset. The red, green and blue components of the new color (and its alpha) are calulated as follows:

    newRed=oldRed*redMultiplier+redOffset,  newGreen=oldGreen*greenMultiplier+greenOffset,  ... etc.

Thus, with multipliers set to 0, the offset values give the components of the new color. Alpha multiplier is 1 and offset 0. Thus, we are not changing the alpha (transparency) property. The offset values correspond to the positions of the sliders' knobs contained in Slider.value property. Next within the function, we assign testClipTransform as the value of mcTest.transform.colorTransform. This assignment changes the color of mcTest to the color whose parameters are contained in testClipTransform.

The next function sets up listeners. The handler functions are defined below.

function setUpListeners():void {

var i:Number;

for (i=0; i<8; i++) {

this["tr"+String(i)].addEventListener(MouseEvent.CLICK, changeTriangleColor);

}

redSlider.addEventListener(SliderEvent.CHANGE, redChanged);

greenSlider.addEventListener(SliderEvent.CHANGE, greenChanged);

blueSlider.addEventListener(SliderEvent.CHANGE, blueChanged);

btnReset.addEventListener(MouseEvent.CLICK, resetSquare);

}

The handlers for SliderEvent.CHANGE events are self-explanatory.

function redChanged(evt:SliderEvent):void {

redTxt.text=String(redSlider.value);

updateTestClip();

}

 

function greenChanged(evt:SliderEvent):void {

greenTxt.text=String(greenSlider.value);

updateTestClip();

}

 

function blueChanged(evt:SliderEvent):void {

blueTxt.text=String(blueSlider.value);

updateTestClip();

}

The next function changes the color of the clicked triangle to the current color selection displayed in the test clip and stored in testClipTransform variable.

function changeTriangleColor(evt:MouseEvent):void {

 

// Give the clicked triangle the local name thisTriangle.

// Notice that we cast the event target to MovieClip

//even though it is a MovieClip. Without casting,

//the compiler in the Strict Mode displays an error.

 

var thisTriangle:MovieClip = MovieClip(evt.currentTarget);

var curTransform:ColorTransform=testClipTransform;

 

//We set the color transform of a clicked clip to that of test clip.

 

thisTriangle.transform.colorTransform = curTransform;

}

The handler for btnReset returns everything to the initial state.

function resetSquare(evt:MouseEvent):void {

var i:Number;

redSlider.value=0;

greenSlider.value=0;

blueSlider.value=0;

updateTestClip();

redTxt.text="0";

greenTxt.text="0";

blueTxt.text="0";

for (i=0; i<8; i++) {

this["tr"+String(i)].transform.colorTransform=new ColorTransform(0,0,0,1,0,0,255,0);

}

}

On the next page, we show a slightly different applet. In that applet, we use the 'color' property of ColorTransform object. This property can make it easier to change the color of a display object. The only catch is that you have to know the desired color's number. The number can be in hex or or in the decimal system. In either case, it is not enough to know RGB components of the desired color.

Back to Basic Tutorials              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.