ColorTransform | RGB, Hex and random colors | Actionscript Color Tutorial

Overview

Color can sometimes make or break your design. I’ve put together this flash to show how to set a movieclip to a certain color, I’ve had to do this at runtime and had to go by different values such as a hex number, rgb values and have even wanted to just set a random color, so this example does them all! It’s even nice for translating a Hexadecimal color into RGB color.

Flash uses a Transform object to control certain properties of movie clips. To set color we need to use a Transform object as well as a ColorTransform object. ColorTransform objets are used to, you guessed it, tell the Transform object what color we want to set our clip to. It was a little unintuitive for me to learn, but now it makes sense, or at least enough sense to use.

I’ve made a function that does all this for you. You just send it the movieClip reference and a color. setColor(myMovieClip, myColor)

There are functions to convert rgb values to a hex value, and from a hex value to red, blue and green values as well.

To make a random hexadecimal number Math.random() * 16777216 (the total number of hexadecimal numbers)

Steps

1. Imports
   import flash.geom.ColorTransform;
import flash.geom.Transform;
2. Make a Transform object
   var myTransform:Transform = new Transform(item);
3. Make a ColorTransform object
   var myColorTransform:ColorTransform = new ColorTransform();
4. Set the rgb color of the ColorTransfrorm object
   myColorTransform.rgb = myColor;
5. Set the colorTransform property of the Transform object to your ColorTransform object
   myTransform.colorTransform = myColorTransform;

Flash Color App

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/10/color/color.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”550″ height=”400″]

[/kml_flashembed]

Source Actionscript (as2)

[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//method to set a specified movieClip(item:movidClip) to a specified color(col:hex value number)
function setColor(item, col) {
//make transform object and send the specified movieClip to it
var myTransform:Transform = new Transform(item);
//make colorTransform
var myColorTransform:ColorTransform = new ColorTransform();
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0; //variable to hold the color value var myColor:Number = col; //set color through color transformation myColorTransform.rgb = myColor; myTransform.colorTransform = myColorTransform;trace("the hex number: 0x" + addZeros(myColorTransform.rgb.toString(16))); var rgbObject = hex2rgb(myColor); trace("the hex number in rgb format: "+rgbObject.r+", "+rgbObject.g+", "+rgbObject.b); trace("the hex number in decimal format: " + myColorTransform.rgb); displayColors(myColorTransform.rgb); }//bitwise conversion of rgb color to a hex value function rgb2hex(r, g, b):Number { return(r<<16 | g<<8 | b); } //bitwise conversion of a hex color into rgb values function hex2rgb (hex):Object{ var red = hex>>16;
var greenBlue = hex-(red<<16) var green = greenBlue>>8;
var blue = greenBlue – (green << 8); //trace("r: " + red + " g: " + green + " b: " + blue); return({r:red, g:green, b:blue}); }//BUTTONS randomColor.onRelease = function() { //make random number (within hex number range) var theColor = Math.floor(Math.random() * 16777215); //set ball color to random color value setColor(colorBall.inner, theColor); } readHexColor.onRelease = function() { //convert 6 character input string into hex color format used by actionscript var theColor = "0x"+hexColorIn.text; //set ball color to hex color value setColor(colorBall.inner, theColor); } readRGBColor.onRelease = function() { //convert rgb values into hex value var theColor = rgb2hex(redColorIn.text, greenColorIn.text, blueColorIn.text); //set ball color to converted hex color value setColor(colorBall.inner, theColor); } readDecColor.onRelease = function() { //convert rgb values into hex value var theColor = decColorIn.text; //set ball color to converted hex color value setColor(colorBall.inner, theColor); } [/cc]

Open Source Download

color.zip (containing color.fla and color.swf)