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

October 21, 2008 • 12,235 views

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.

1	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

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

Flash Color App

Source Actionscript (as2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//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);

}

Open Source Download

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

Categories: portfolio, tutorial
Tags: actionscript, animation, as2, color, download, flash, interactive, open source, tutorial

Phil

This is great - need to convert this to as3 though. I assume it will largely be the same?

ainhoitxu

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!

circlecube

@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?

ainhoitxu

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?

Isaac

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...

jive

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;

robert

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.

Gabriel

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...

Gabriel

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...

Eduardo F. Sandino

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..