AS3: Changing Colors

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner

This tutorial will teach you how to change the color of any visible object by using the ColorTransform class. Using this class you will be able to apply a single color tint to any object at any time. The example below uses this class to change the color of the object when the corresponding button is pressed.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Changing Colors

Unlike the majority of other simple properties such as alpha, x, y, width, and height, the color of an object cannot be directly changed on the object itself. Instead you must create a new instance of the ColorTransform class, any color transformation desired are to be applied to this instance, and then this instance is used to overwrite the actual ColorTransform property attached to the target object. This property itself is a sub property of the Transform property of the Display objects such as Shapes, Sprites, and MovieClips.

This process can be carried out through the generalized code shown below, where myTargetObject is a reference to the object on the stage which we would like to change the color of and 0xFFFFFF is the color we want to apply.

var myColorTransform = new ColorTransform();
myColorTransform.color = 0xFFFFFF;
myTargetObject.transform.colorTransform = myColorTransform;

This is a very simplified use of the colorTransform object, we are going to have a practical example next.

Practical Code

We are going to create a small example where we draw a square and then change its color using the ColorTransform object.

Start off by creating a new Flash movie in AS3 format. Right-click the only frame you have on your timeline and select Actions to open up the Actions Panel. All of our project will be written in code and no objects will be created manually on stage.

The first step in our tutorial is to draw the square which we will be changing the color of later. To do this we are going to use the graphics class, our square will be named my_square, we will draw it using the drawRect() method, and then we will make it visible on the stage by using the addChild() method.

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
You can learn more about Drawing Vectors and Display List by reviewing our tutorials on these topics.

You can test your movie at this stage by going through Control>Test Movie to see that you have drawn the square on the stage.

AS3 - Drawing a Square

To change the color of this object we need to create a ColorTransform instance. To do this we used the var keyword along with our desired named for the instance:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = new ColorTransform();


We can now change a number of attributes of this ColorTransform instance, the easiest way for changing the color of the object is to use the color property which accepts color values in RGB format. If we want to color our square in red we can use the RGB code 0xFF0000:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = new ColorTransform();
my_color.color = 0xFF0000;


Our my_color object is now configured, we need to apply it to my_square to have the color transformed:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = new ColorTransform();
my_color.color = 0xFF0000;
my_square.transform.colorTransform = my_color;

Remember that the ColorTransform property is a sub-property of the Transform property.

That should do it. You can test your movie now to see your square colored in red.

AS3 - ColorTransform - Red

This method could be used to change the color of any object. All you have to do is simply change the RGB code in your color property and then apply your ColorTransform property to your object.

Other Properties of the ColorTransform Class

In addition to the possibility of setting a color directly as an RGB code, you can also configure the following properties:

  • alphaMultiplier - Used to configure the transparency of the object - Accepts a decimal value between 0 and 1.
  • alphaOffset - Used to affect existing transparency of the object - Default value is zero, but can go up to 255 or down to -255.
  • blueMultiplier - Used to configure the blue channel value of the color - Accepts a decimal value between 0 and 1.
  • blueOffset - Used to affect existing blue channel value of the color - Default value is zero, but can go up to 255 or down to -255.
  • greenMultiplier - Used to configure the green channel value of the color - Accepts a decimal value between 0 and 1.
  • greenOffset - Used to affect existing green channel value of the color - Default value is zero, but can go up to 255 or down to -255.
  • redMultiplier - Used to configure the red channel value of the color - Accepts a decimal value between 0 and 1.
  • redOffset - Used to affect existing red channel value of the color - Default value is zero, but can go up to 255 or down to -255.

It is possible to use these properties together to apply the specific color your need. Here is an example on how they could be used:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = new ColorTransform();
my_color.alphaMultiplier = 0.5;
my_color.blueOffset = 150;
my_color.greenOffset = 100;
my_color.redOffset = -50;

my_square.transform.colorTransform = my_color;

Retrieving Existing ColorTransform Property

At times you might want to retrieve the existing ColorTransform Property of an object and then update that property instead of creating a new one. To do this you simply create a new variable and store a reference for your existing ColorTransform there:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = my_square.transform.colorTransform;

We can then modify some values or change a specific color channel without affecting the rest:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = my_square.transform.colorTransform;
my_color.redOffset += 100;

Finally, we apply the property the same way we have done in the past:

var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);

var my_color:ColorTransform = my_square.transform.colorTransform;
my_color.redOffset += 100;
my_square.transform.colorTransform = my_color;

The same technique could be used to modify all other properties as well.

This concludes our tutorial. I hope that you learnt something new from it. If you have any questions or comments feel free to post them at the Republic of Code Forum.

- End of Tutorial