March 17, 2006
Flash 8: Selective Color Transform

I was asked if my ColorMatrix Class can be used to change only a certain range of colors within a bitmap. Well, that's mathematically not possible, but nevertheless there is a way to make this work with Flash - it just needs a few more steps and some temporary helper bitmaps.

In short it works like this - if you only want to change the orange parts of an image you first isolate those parts by replacing all other colors with 100%transparent pixels, then you apply the ColorMatrix filter to it and finally draw it over the original bitmap.

Here is the part of the code that creates a mask from a given color range - as you see I'm using several consecutive threshold commands for every color channel.

mask.threshold( original, rect, zero, "<", rmin<<16,0,0x00ff0000,true);
mask.threshold( mask, rect, zero, "<", gmin<<8,0,0x0000ff00,true);
mask.threshold( mask, rect, zero, "<", bmin,0,0x000000ff,true);
mask.threshold( mask, rect, zero, ">", rmax<<16,0,0x00ff0000,true);
mask.threshold( mask, rect, zero, ">", gmax<<8,0,0x0000ff00,true);
mask.threshold( mask, rect, zero, ">", bmax,0,0x000000ff,true);
mask.threshold( mask, rect, zero, "==", 0xff000000,0xffffffff,0xff000000,true);

I have expanded the concept a bit and added a few tools to clean up and adjust the resulting mask. Check out the demo here:

Click on the middle color swatch and pick a color from the image that you want to change. With the range slider you can set the minimum and maximum color that is included in the selection. Upon start the range is set to maximum which means that all colors are included - move the silders to something like -20 / 20, select "mask" on the right side and you will see how it works. The shrink and grow sliders are used to remove noisy pixels or to fill small holes inside of the mask. For example if you have many stray single pixels use "shrink" with a small value to get rid of them.

The shrink and grow algorithms are quite heavy on the CPU with big radii so usually it's best to only use them with small values.
Download the source code here

Posted at March 17, 2006 07:38 PM | Further reading

That's utterly impressive. Amazing work as always.

Posted by: P.J. Onori on March 17, 2006 09:05 PM

Now what if you want to have more then one color effected, basically setting up more than just one color mask applied? How could you do that?

Thanks again brilliant work!

Posted by: Tony Birleffi on March 17, 2006 10:55 PM

So basically I would create more than one transformMap, and then how would I tell the render() function to just change one transformMap or the other at a time. Can you create a mask dynamically?

Posted by: Tony Birleffi on March 17, 2006 11:30 PM

So basically you need to define more than one ColorMatrix, however cmat:ColorMatrix isn't passing from the object cm1 or cm2 am I defining the syntax wrong?

Posted by: Tony Birleffi on March 18, 2006 12:09 AM

Mario- What if you wanted to create a black and white mask bitmap imported to flash and then apply that to an image, can that be done?

Posted by: Tony on March 20, 2006 06:10 PM

Mario-I think I figured it out however, now how can I apply it to images that are loaded in dynamically. How can I convert them to BitmapData and then still apply your ColorMatrix functions?

Posted by: Tony on March 20, 2006 10:01 PM

Hi Mario,

So I've been using your keying code with live video and it works pretty well, as long as the light level is very consistent.(no surprise there) However it would be nice to be able to key out some shadows that can appear on the green screen by being able keying in a range of green. Could you use the method that you've described in the above tutorial to create more robust keying? And if so how would you do go about changing the code in the keying sample?

Posted by: anders Sandell on June 18, 2007 08:47 PM

thanks for helping me by changing the color of bitmaps in flash.

Posted by: Sibajee on September 14, 2007 08:07 AM

...very awesome stuff, unglaublich!

Posted by: michael on February 29, 2008 09:43 PM
Post a comment

Email Address:



Remember info?

Thank you!

Most Visited Entries
Sketches, Works & Source Code
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german

My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers