March 19, 2006
Flash 8: Realtime Video Color Keying

My previous experiment with the selective color transforms made me think a bit more about creating masks from colors and its applications. I wondered if it is possible to use a similiar technique to calculate green screen or blue screen masks in realtime for Flash video. And indeed - it works.

I've programmed a keying technique similar the Color Difference Key known from AfterEffects or other video editing programs. This kind of keying allows for finer control and better transitions than for example a simple chroma key.

A very important factor for successful keying is good lighting of the fore- and background and as I don't have a studio at hand for this demo I allowed myself to use the example clip from this Macromedia Video Tutorial featuring Tom Green - I hope that's okay for this purpose. I've converted the original 20MB quicktime movie to a 1 MB FLV (wow, isn't that on2 codec great?) - and there is definitely no more alpha channel in there. Alternatively you can try to use your webcam, but if you don't have good lighting and a decent background the results will be only so-so. But I can imagine that the same technique could be used for example on still images to mount peoples' heads on avatars.

Here is the demo:

The sliders have the follwing functions:
- Preblur will blur the source before the difference, thus reducing noise and smoothing the edges of the mask
- Mask In sets the black point of the mask
- Mask Out sets the white point of the mask
- Gamma changes the transition between the transparent and opaque areas of the mask
- Postblur can be used to feather the mask's edges
- Defringing is an attempt to reduce background color bleeding at the edges - depending if your new background color is dark or bright try the different settings

Download the source files here
(Released under Creative Commons Attribution-Noncommercial 3.0)

Posted at March 19, 2006 10:49 PM | Further reading

Just awesome. Well done!

Posted by: Tom Lee on March 19, 2006 11:32 PM

More Mario brilliance! Thanks for sharing the source. Where do you find the time?

Posted by: steve w on March 20, 2006 02:19 PM

Nice done!

Posted by: Weyert de Boer on March 20, 2006 03:57 PM

Sweet! Was planning on building one of these myself, love the level of control it provides... One question - how does the realtime key compare with an alpha-channel based on cpu usage? I would imagine it would be more so, just curious what kind of overhead you saw during development.

Posted by: mray on March 20, 2006 05:33 PM

Hi ! it's excellent !
I've tested a little threshold on video ( )but not also perfect like your sample
thanks for sharing

Posted by: jeanphilippe on March 22, 2006 05:53 AM

Really cool, since i saw this at a flash 8 presentation last year i wanted to build it... never got around to i though :(

One minor problem, it works fine in my macromedia flash player (read 8) but my latest adobe flashplayer (8.5) doesn't like it and crashes my browsers (both ie and firefox)... i hope this isn't going to be a trend with other future products from adobe :)

Posted by: Laurent on March 22, 2006 05:21 PM

Mario.. this is great!!! Thanks a lot for sharing too. Extremely impressive


Posted by: Graeme on March 22, 2006 06:45 PM


Posted by: Marc Kremers on January 11, 2008 03:04 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