Random Colors in AS3

A short while ago, I wrote how you can programmatically change colors in the Changing Color in AS3 article. This article extends the earlier one in a little fun and whimsical way by showing how you can change to a randomly generated color to create something a bit unpredictable.

In the following example, keep clicking on the Click Me button to see your background's color change to a random value:

In this short article, I will describe how you can randomly generate random colors along with my personal preference on how you can do this in a semi-random fashion.

Before you continue, if you have not done so already, I strongly recommend you read the Changing Color in AS3 article, for I will only describe the lines of code relevant to generating a random color.

The Direct, Simple Approach
To programmatically change the color of something, the following is the code you can use:

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color = 0xCCCCCC;

myMovieClip.transform.colorTransform = myColor;

In the second line, I explicitly set the color property to an actual color value. To specify a random color, all you will need to do is modify that second line with the following:

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color = Math.random() * 0xFFFFFF;

myMovieClip.transform.colorTransform = myColor;

You are picking a random color from a really large number. 0xFFFFFF may not look like much, but when the hex values are converted to a regular integer, it actually stands for 16,777,215. You can learn more about converting from hex to integers from my following blog post.

The random color returned from the above statement will not be as nicely formatted as six hexadecimal values. They will be in their expanded integer forms, but Flash knows how to properly map the colors based on the integer values. 

A Better Approach
In the previous section, I gave you the most direct way to generating a random color. In many applications, though, you probably don't just want any random color appear. Some random colors are just not quite as appealing as others, so a better solution maybe one that falls between having a single predefined color and having any random color.

Take a look at the following code:

var colorArray:Array = new Array(0xFFFF33, 0xFFFFFF, 0x79DCF4, 0xFF3333, 0xFFCC33, 0x99CC33);

var randomColorID:Number = Math.floor(Math.random()*colorArray.length);

 

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color=colorArray[randomColorID];

 

myMovieClip.transform.colorTransform = myColor;

Notice what I am doing here. I have an array that contains some colors that I really like. In my application, instead of generating a random application, I am instead picking a random color from my list of favorite colors instead. This strikes a nice balance between true randomness and boredom.

For emphasis, the relevant lines are:

var colorArray:Array = new Array(0xFFFF33, 0xFFFFFF, 0x79DCF4, 0xFF3333, 0xFFCC33, 0x99CC33);

var randomColorID:Number = Math.floor(Math.random()*colorArray.length);

 

var myColor:ColorTransform = this.transform.colorTransform;

myColor.color=colorArray[randomColorID];

 

myMovieClip.transform.colorTransform = myColor;

Conclusion
That is all there is to it when it comes to programmatically generating a random color to apply to an object. For a more involved example that demonstrates the code I showed earlier, check out my Colorful Explosion sample.

Once you get tired of looking at colorful circles flying in at you, feel free to download the source file for the example you saw in this tutorial:

Download Final Source

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!