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.
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
- Importsimport flash.geom.ColorTransform;
import flash.geom.Transform; - Make a Transform objectvar myTransform:Transform = new Transform(item);
- Make a ColorTransform objectvar myColorTransform:ColorTransform = new ColorTransform();
- Set the rgb color of the ColorTransfrorm objectmyColorTransform.rgb = myColor;
- Set the colorTransform property of the Transform object to your ColorTransform objectmyTransform.colorTransform = myColorTransform;
Flash Color App
Source Actionscript (as2)
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);
}
Open Source Download
color.zip (containing color.fla and color.swf)
14 Comments
This is great – need to convert this to as3 though. I assume it will largely be the same?
I tried this code and it completely colors my movieclip. How do you keep the borders with their original color (in your case white)? In your example only the inside of the circle changes color, not the borders.
Thanks!
@Phil – I haven’t messed with this in AS3 as of yet, but I will soon and I’ll be sure to post about it.
@ainhoitxu – Simple really, in my example I have a movieclip containing two more clips, the inner part of the circle and the outline. Thay are seperate clips, and in the setColor(colorBall.inner, theColor); function I am sendning as an argument the colorBall.inner movieClip. I could also send in the colorBall.outline to change the color of the stroke, or like you have done and send in the whole clip as one. Make sense?
It does totally make sense! I am trying to do the same as you, color the inner part of an image with borders. I suppose there is no easier way to do it than having 2 different movieclips, right?
Is this really the bare minimum of what’s required to program a color change in flash? Basically… I have a movieclip in my library, and I have a command that will call that out and place it on stage, but for each time it’s loaded onto the stage, I want it to randomize its color. I’ve been trying to insert code to do this in the “function onLoad () { }” segment, but I don’t seem to understand how to get the colorTransform code to work on an already existing movie clip. I keep finding examples that involve creating objects from code…
Isaac, this is the bare minimum to transform a movieclip with an instance name of “mymc”
—
import flash.geom.ColorTransform;
import flash.geom.Transform;
var myTransform:Transform = new Transform(mymc);
var myColorTransform:ColorTransform = new ColorTransform();
myColorTransform.rgb = 0xFF0000;
myTransform.colorTransform = myColorTransform;
To my knowledge this is the only post that actually shows how to convert hex to RGB. Thank you very much. It works well for me.
This is great, but I can’t make it work. I just needed a code which could transform separated R, G, and B values into one RGB value. But when I use your rgb2hex function and I give in 0xFF, 0xFF, 0xFF, then it fills my rectangle with red color instead of white.
Do you know why this happens? (I use _ to make the code more readable, they’re not in my AS file.)
colorBitmapData = new BitmapData(256, 256, false);
for (var i=0; i<256; i++) { ___for (var j=0; j<256; j++) {
______hex = rgb2Hex(0xFF, 0xFF, 0xFF);
______rect = new Rectangle(j, i, 1, 1);
______colorBitmapData.fillRect(rect, hex);
___};
};
private function rgb2Hex(r, g, b):Number {
___return (r<<16 || g<<8 || b);
};
I’m actually trying to create a gradient filled box which has 2 black corners, 1 white corner and 1 corner with a specified color value. But I don’t seem to manage the colors good enough even for a solid fill…
Alright, I was pretty stupid with this. I forgot to add the r, g, b values to each other to get the total RGB value…
Hi… Really thanks… Evan , i don’t know what were developers of AS3 thinking when not puting a HEX conversor in the flash libraries… but you solve it, almost i reinvent the wheel… But you solved this commnon issue… thanks..
Thanks Evan! This helped me out a lot.
awesome Evan, Great Job!
I’m using AS2, but this will help me with randomly generating hex values. Thank you so much!
nice