Random Colors in AS3
       by kirupa  |  28 June 2009

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

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.