Color Class

In Flash MX and Flash MX 2004, instances of color objects are created from the Color class constructor and apply only to movieclips. For any movieclip on stage, you can create an instance of the Color class, specifying your movieclip as the parameter in the constructor, and then use the setRBG method (or setTransform if you need to specify transparency) to specify the color. In the Christmas tree above, each light has an associated color instance. The code to create a color instance and assign a color to it:

// create an instance of the Color class named cCircle 
// associated with movieclip circle_mc
cCircle = new Color(circle_mc);
// change the color of circle_mc by using setRGB with the Color instance
cCircle.setRGB(0x3399ff);

If you need to change the color of a movieclip only once, you can do it all at once like this:

(new Color(circle_mc)).setRGB(0x3399ff);

but if you want to change the color repeatedly (on rollOver, eg, or in the sample above), it's best to first create an instance of the color class and assign it to a variable, and then use that variable for the repeated color changes.

The only thing you need to remember when using setRBG is that the color value must be specified as a number, not a string. It can be either a hexadecimal value, as in the example above (0x3399ff), or a decimal value. Each of the following examples produces a movieclip of the same color (medium/light blue, RBG=66/99/cc hex, 102/153/204 decimal):

// single hex number
cCircle.setRGB(0x6699cc);
  
// variable representing hex number
var nColor:Number = 0x6699cc;
cCircle.setRGB(nColor);
  
// three hex numbers, one each for R-G-B, bitwise creation of number
var nRed:Number = 0x66;
var nGreen:Number = 0x99;
var nBlue:Number = 0xcc;
cCircle.setRGB(nRed<<16 | nGreen<<8 | nBlue);
  
// three decimal numbers, one each for R-G-B
var nRed:Number = 101;
var nGreen:Number = 153;
var nBlue:Number = 204;
cCircle.setRGB(nRed<<16 | nGreen<<8 | nBlue);
  
// same as previous but arithmetic calculation of final number
var nRed:Number = 101;
var nGreen:Number = 153;
var nBlue:Number = 204;
cCircle.setRGB(nRed*65536 + nGreen*256 + nBlue);

// string hex value, convert to number
var sColor:String = "6699cc";
var nColor:Number = parseInt(sColor, 16);
cCircle.setRGB(nColor);
  
// three hex strings, concatenate and convert to number
var sRed:String = "66";
var sGreen:String = "99";
var sBlue:String = "cc";
sColor = sRed + sGreen + sBlue;
nColor = parseInt(sColor, 16);
cCircle.setRGB(nColor);

Assigning random colors to movieclips at intervals

The christmas tree sample above contains a movieclip lights_mc with a bunch of individual light movieclips in it. I first created a movieclip light with one light in it, and then, above the tree layer, I created a new movieclip lights_mc and dragged multiple copies of light into it from the library. I didn't bother to give them instance names -- because I want to do the same thing to all movieclips in lights_mc, I could use a for/in loop to do that:

for (var ilight:String in lights_mc) { ... }

Whatever actions are put within the brackets will be applied to every movieclip (light) within lights_mc. This is the code in frame 1 (the only frame) of the movie:

// set up an array with whatever colors you want your lights to be
// can be any length -- repeat colors that you want to show up more often
var colors:Array = [0xff0000, 0xffcc00, 0x00ff00, 0x0066ff, 0xff00ff, 0xff9900, 0xcc00ff, 0xffffff, 0xffff00];

// function to apply a random color from the colors array to the movieclip
// associated with color instance c
function changeToRandomColor(c:Color) {
   var randomColor:Number = colors[Math.floor(Math.random()*colors.length)]
   c.setRGB(randomColor);
}

// assign a color instance, a default start color, and an interval to each light
for (var ilight:String in lights_mc) {
   // create a color instance for associated movieclip
   this["c"+ilight] = new Color(lights_mc[ilight]);
   // assign random color to movieclip at start
   this["c"+ilight].setRGB(colors[Math.floor(Math.random()*colors.length)]);
   // set up the interval for each light
   // the color instance (this["c"+ilight])is passed to changeToRandomColor as a parameter
   setInterval(changeToRandomColor, 1000 + Math.random()*6000, this["c"+ilight]);
}

Transition from one color to another

The example above shows a right and wrong way to do color transitions. If you move your mouse over the right side of the image, you should see the flower color change from bright pink when the mouse is near the top to deep purple when it's near the bottom. Moving the mouse vertically over the left side of the image produces jumpy color transitions instead of a smooth one.

Transitioning smoothly from one color to another requires that each color channel (R, G, B) be manipulated individually. The code from the movie is shown below -- looking in the onMouseMove definition will show the difference between the two sides:

// assign any start and end color
var STARTCOLOR:Number = 0xFC5FEF;
var ENDCOLOR:Number = 0x682388;
var STAGEHEIGHT:Number = 200;
var STAGEWIDTH:Number = 160;

var rstart:Number = STARTCOLOR >> 16;
// use this to see the color as a hex string:
// trace(rstart.toString(16));
var gstart:Number = (STARTCOLOR >> 8) & 0xff;
var bstart:Number = STARTCOLOR & 0xff;

var rend:Number = ENDCOLOR >> 16;
var gend:Number = (ENDCOLOR >> 8) & 0xff;
var bend:Number = ENDCOLOR & 0xff;

// create a color instance
var cFlower:Color = new Color(chick_mc.flower_mc);

this.onMouseMove = function() {
   // how far down the screen is the mouse?
   var prop:Number = this._ymouse / STAGEHEIGHT;
	
   // set the flower color accordingly
   if (this._xmouse > STAGEWIDTH/2) {
      // right side (good -- apply proportion to each channel individually):
      cFlower.setRGB( (rstart + (rend-rstart) * prop) << 16 |
                      (gstart + (gend-gstart) * prop) << 8  |
                       bstart + (bend-bstart) * prop);
   } else {
      // left side (bad -- proportion can't be applied to whole color number):
      cFlower.setRGB(STARTCOLOR + (ENDCOLOR-STARTCOLOR)*prop);
   }
   this.updateAfterEvent();
}