Changing Color in ActionScript 3

One of the changes in ActionScript 3 is the addition of a dedicated transform property that deals with portions of your object's look and feel. The color your object takes is one such portion, and in this brief article, you will learn how to use the transform property's colorTransform property to easily change the color of an object.

Below you will find a simple example where hovering over the colored square changes the color of the background:

This was all done entirely using just code, so let's look at a very direct / straightforward example where a square is drawn and painted red:

// creates a red square

var square:Shape = new Shape();

square.graphics.beginFill(0x000000);

square.graphics.drawRect(0, 0, 100, 100);

 

var myColor:ColorTransform = square.transform.colorTransform;

myColor.color = 0xFF0000;

square.transform.colorTransform = myColor;

 

addChild(square);

When you copy and paste the above code into a new Flash or Flex AS3 project and test the application, the following is what you will see:

[ a red-colored rectangle gets displayed ]

Since this tutorial is all about colors, let's look at the code pertaining to the square's red color:

var myColor:ColorTransform = square.transform.colorTransform;

myColor.color = 0xFF0000;

square.transform.colorTransform = myColor;

ActionScript 3 does not have a Color class that you can use - unlike the good old days. Instead, you use the ColorTransform class (flash.geom.ColorTransform) to access the RGB property that allows you to specify the color.

First, you need to access the object that contains your colorTransform:

var myColor:ColorTransform = square.transform.colorTransform;

That is easily done by accessing your object (square)'s transform property that contains the colorTransform property. This property returns a value of type ColorTransform that I assign to variable called myColor.

Once you have a reference to your colorTransform, you can set the color property directly:

myColor.color = 0xFF0000;

The color value is of type uint or unsigned integer, and it is a hexadecimal representation of your RGB values.

The final step is to assign your new ColorTransform object back to the movie clip so that it knows about it:

square.transform.colorTransform = myColor;

The reason you have to first create a new object that stores a reference to the original colorTransform before modifying it and assigning it back to the object is because you can't modify the properties in your transform property. Something like the following will not work:

square.transform.colorTransform.color = 0xFF0000;

The only way to assign a different value is to basically assign a new object matching the property you are overwriting. In this example, you assigned a new ColorTransform object to the colorTransform property.

Conclusion
That is all there is to it when it comes to programmatically changing the color of an object using AS3. Below you will find the source file for the example movie that you saw above. While it looks like I am actually setting a gradient color in my example, I am just playing a visual trick by overlaying a semi-transparent / gradient-colored rectangle over a solid colored rectangle whose color I am actually changing.

Download Final Source

If you have any questions, feel free to post on the kirupa.com Forums.

Cheers!

	senocular
	kirupa