Changing Colors of Movie Clips - Example 2

In the example below, we add rotations of the square to the mix. Also, the color is chosen from a group of radio buttons. This makes a difference as the selected color is returned by the radio button group as a string that represents the selected color's hex value. Thus after converting to an integer, the value can be passed to the ColorTransform.color property.

Download

The zip file contains the fla file for the applet above as well as a detailed PDF guide that explains from scratch how to draw the square and separate into sections, how to configure the radio buttons group and the combo box. The guide discusses also the code behind the applet.

The New Elements in the Code Related to Changing Colors

The value property for each radio button in the group of buttons was assigned as the value for the corresponding color in hex, e.g.: 0xFF0000. Thus, the value (that is returned as a string) can be passed to ColorTransform.color property after converting to an integer. All of this is done in the function that changes the color of the clicked triangle as follows:

/*
Notice that the (color) data from the radio button group is accessed as 'the data from the group of which rbRed is part.'
*/

 

var pickedColor:ColorTransform = thisTriangle.transform.colorTransform;

pickedColor.color = int(rbRed.group.selectedData);

thisTriangle.transform.colorTransform = pickedColor;

Note that you can't set directly thisTriangle.transform.colorTransform.color=int(rbRed.group.selectedData); It will not work. You have to create a ColorTransform that is a copy of thisTriangle.transform.colorTransform (we do it above by creating pickedColor), change its 'color' property and then assign the ColorTransform 'pickedColor' as the value for the object thisTriangle.transform.colorTransform.

What do you do if you want to use the color property but you have your desired color in terms of its RGB components? There is an extremely useful function combineRGB(value for red,value for green,value for blue) that can be used in such situations. The function utilizes bitwise shift. It takes red, green and blue components of a color and returns the number corresponding to the color.

function combineRGB(red:Number,green:Number,blue:Number):Number {

var RGB:Number;

if(red>255){red=255;}

if(green>255){green=255;}

if(blue>255){blue=255;}

 

if(red<0){red=0;}

if(green<0){green=0;}

if(blue<0){blue=0;}

 

RGB=(red<<16) | (green<<8) | blue;

 

return RGB;

}

You don't have to understand bitwise shifts to use the function; it simply works. But if you'd like to delve into the subject, you can find all you need at Colin Moock's website: http://www.moock.org/asdg/technotes/bitwise

combineRGB() function comes from Colin Moock's book 'ActionScript for Flash MX: The Definitive Guide'.

There is much more that can be said about ColorTransform especially as it pertains to bitmaps. That will be a topic of an upcoming tutorial.

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.