color transitions?

[syntax]

how to do simple color transitions?
like a box randomly changing colors.. I've been searching the web, but I haven't had any luck.
What i'm particularly curious about is how do I come up with the hex colors?
a tutorial would rock. :)

[Noct]

Well, you can use setRGB with hex codes to change a clip's color. It has been depreciated in favor of the colorTransform now, but I still use it on occasion. setRGB is much easier to work with, but the full transform is better for doing code based transitions like a random coloring.

setRGB you just pass it a hex code. You could get random colors by populating an array of hex's and cycling through that to get the color.
This would set the clip "myMc" to red:

var myColor:Color = new Color(this.myMc);
myColor.setRGB(0xFF0000);

You can also do something similar with a transform and the rgb property:

import flash.geom.Transform;
import flash.geom.ColorTransform;
var myColorTransform:ColorTransform = new ColorTransform();
var myTransform:Transform = new Transform(this.myMc);
myColorTransform.rgb = 0xFF0000;
myTransform.colorTransform = myColorTransform;


If I were going to do a random coloring or a transition from one color to another however, I would use the full on colorTransform:

function randomColor(thisClip:MovieClip) {
var myColor:Color = new Color(thisClip);
var myColorTransform:Object = new Object();
//Function for generating random numbers:
function rN(lowValue:Number, highValue:Number):Number {
return ((Math.random()*(lowValue-highValue-1)) >> 0)+highValue;
}
myColorTransform.ra = 0;
myColorTransform.rb = rN(0, 255);
myColorTransform.ga = 0;
myColorTransform.gb = rN(0, 255);
myColorTransform.ba = 0;
myColorTransform.bb = rN(0, 255);
myColorTransform.aa = 100;
myColorTransform.ab = 0;
myColor.setTransform(myColorTransform);
}
randomColor(this.myMc);


As far as "coming up with" hex colors, you can figure them out yourself to some degree.
A hexCode is simply an RGB value with letters representing the values of 10-15 in the code. So, to mix colors you just add more to one and take away from another.
Just look at hexCodes as RGB (Red-Green-Blue), where the first two digits are the red, the second two the green and the last two the blue.

So:
0xFF0000 would be the most red a color could be.
0x00FF00 would be all green, and so on...

If you would like to see full on charts, they are all over the web. Just google "color hex code" and you'll get dozens of pages with handy color charts giving you hexs for every color imaginable. One such site:
http://html-color-codes.com/

The last code example I showed you is coloring using the decimal values of the RGB code. For example red:255, green:0, blue:0 is the same as "FF0000" in hex.

You can open the color palette in flash at any time and it will show you the hex or decimal value of any color you currently have selected.

[pixelwit]

You might find these 2 articles on color fading useful.

1 color between 2 starting colors (http://www.pixelwit.com/blog/2007/05/14/hexadecimal-color-fading/).
Many colors between many colors (http://www.pixelwit.com/blog/2008/05/21/color-fading-array/).

Hope it helps.

-PiXELWiT
http://www.pixelwit.com

[syntax]

wow, i was hoping it would be much simpler. :o
thanks for the info guys!
is there any AS3 version by any chance?

[mambo4]

For the hex value of any color onstage, just click on the Fill Color Swatch (next to the paint bucket) to pop open the color palette. The current color swatch on the top left has the hex value displayed next to it. You'll notice the cursor is now an eyedropper, which you can rollover any color on the stage and watch the current color swatch + hex value update.