ColorTransform is this mysterious class that had me baffled for quite a while.  You punch in a bunch of numbers, and somehow it is supposed to create one color from another.  But how?  How do the colors change? How do I get this thing to change the color of something on the screen when I want it to?  A fair bit of guesswork and luck was my answer.  Then I got learned up.  The Adobe LiveDocs got me started, but as for actually putting ColorTransform to good use in a real, live Flex project called for some additional know-how.

First, learn about colors on computers. You need to know what RGB stands for, and the difference between hexadecimal and decimal numbers.  Here’s a fun site called “Color Tutorial” (aptly named) to get you started.  And here’s a nice little page that demonstrates how RGB and hexadecimal numbers fit together.

Once you understand how colors are constructed from numbers, then understanding ColorTransform comes naturally.  All it does is jumble up the numbers with some simple math.  The math is explained in the AS3 documentation like this:

When a ColorTransform object is applied to a display object, a new value for each color channel is calculated like this:

New red value = (old red value * redMultiplier) + redOffset
New alpha value = (old alpha value * alphaMultiplier) + alphaOffset
New green value = (old green value * greenMultiplier) + greenOffset
New blue value = (old blue value * blueMultiplier) + blueOffset
If any of the color channel values is greater than 255 after the calculation, it is set to 255. If it is less than 0, it is set to 0.

So there you have it.  A DisplayObject has some colors, and you can transform those colors by fiddling with the RGB values.  You can even transform the alpha channel (transparency).  But how do you know what colors you will end up with?  That was a head scratcher.  Unless you have color codes memorized and are quick with the arithmetic, it’s darn tough to get an exact idea.  Here are a few resources that explain ColorTransform, and show it in action:

  • ColorTransform in Flash CS3 and ActionScript 3, from flashandmath.com
  • ColorTransform explorer by Kelvin Luck
  • Adobe – Style Explorer

There, lots of nice examples.  However, in order to really take advantage of colors and ColorTransform, you should really know how to manipulate color values on your own.  In the flashandmath page, you may have notices a line like this:

RGB=(red<<16) | (green<<8) | blue;

What?  Yeah, this is an example of a bitwise shift operation.  Double what?  Well, follow the link from flashandmath to get a brief rundown.  The gist of it is, the little carrots >> help separate the R, G and B values from a color value, or put separate R, G, and B values back together as a single color with the << symbol.  The nitty gritty is still a little fuzzy, but you don’t need to understand all the nuts and bolts to use the tool.

Of course, I haven’t mentioned HSV as an alternative to RGB.  But these resources are just the tip of the iceberg when it comes to color manipulation.  Check out these sites for extra credit if you are feeling ambitious:

Enjoy!