Changing an objects color in AS3

There are many reasons to change an objects color in flash, and these days doing everything on the timeline is just unacceptable and improbable for most cases. Luckily changing an objects color is extremely easy with the ColorTransform class.

To start out, create your object as a movie clip (for examples sake we'll keep the object on the stage) and give it an instance name. I have given mine the name square_mc. Start a new layer for your actions and label it as such and open the actions panel. In most cases we will probably want the object to be clickable, so we will set a couple of properties that make is as such.

Basically, buttonMode tells flash that this is a button and we want to use a pointer when hovering over it, and mouseChildren is telling flash to ignore and objects inside of it and apply listeners to only the parent object. For a lot of cases this will be false, and will need to be set because by default its set to true.

Now before we add our event listeners we need to write a color changing function:

What we're doing here is setting a function that we're calling changeColor that we will call later and we are passing some variables to the function. Object and color, which are obviously the object we want to change and the color we want it to change to. Inside the function we are creating a new ColorTransform object called colorchange. We then tell it that the the ColorTransform object's color is our variable color. Finally, on the next line we tell flash to go ahead and change the objects color.

Now if you were to export this right now it would do nothing. So we will add some listeners and functions. If you are unfamiliar with how to do this in AS3, basically you create event listeners for each state you want, roll over, roll out and click (there are many others). For this case we'll just do roll over and roll out. First we'll add the listeners:

So if you were to export this right now, you'd get errors because those functions don't exist. But basically you're telling flash that when the mouse rolls over square_mc to run the function squareOver and when it rolls off of it to run squareOut. So now lets create those functions:

If you are unfamiliar with AS3 these functions might look vaguely familiar but different. The main difference is that we are passing the type of event to the function with e:Event. You could call e almost anything you want but this is just what I am used to. Technically since this is a MouseEvent we could put that there, but Event works fine. There are circumstances where you will have to put the event type in there rather than just Event but we will leave it like this for this example. The next line might look particularly odd to you. Its not completely necessary in this example, but it is a good practice to get into because when you get into writing longer functions, it saves load times by telling flash exactly what the target is. If you were to reference the target as e.target each time it take 3 times as long for flash to process. Basically you are telling flash to treat the events target as a movie clip. Then we tell it to run our changeColor function using the movieclip and the color we want to use. If you are unfamiliar with 0x in front of the hex value, that is just standard in AS to tell flash to treat the following as a hex value.

That's it. It's super simple. Of course you can get more complex and pull in the color with XML, etc. but this is just the basics. Its worth noting that this only works on objects, and not text fields. To color a text field you simply give it an instance name and use textColor:

This can also be used in conjunction with XML.

Here is the full code for our example below: