Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Understanding AS3 ColorMatrixFilter class

Do you want to apply color correction to images into your Flash movies on the fly?

Then ColorMatrixFilter is the class you need.

The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel in the input image to produce a result with a new set of RGBA color and alpha values.

The color matrix filter separates each source pixel into its red, green, blue, and alpha components as srcR, srcG, srcB, srcA.

To calculate the result of each of the four channels, the value of each pixel in the image is multiplied by the values in the transformation matrix.

It allows saturation changes, hue rotation, luminance to alpha, and various other effects.

For more information visit the official Adobe docs page.

Around the web you can find a lot of examples of photos loaded with Flash and sliders to change colors, but I want to explore this feature from a coding point of view.

I will make some experiment on this photo I found on Flickr

The first thing is creating a MovieClip with the image inside. I called it cats, so with this simple code I display the cats on the stage:

nothing new… now it’s time to add the filter.

Now let’s try this script:

multiplying all values by 0.5, we have a standard (and not so interesting) black and white photo.

While with this script

we have no changes. Why not? because the matrix is an identity matrix.

An identity matrix or unit matrix of size n is the n-by-n square matrix with ones on the main diagonal and zeros elsewhere.

Changing the saturation

To change the saturation of an image, simply boost red component on red channel, green component on green channel and blue component on blue channel, while decreasing the other ones.

Adding contrast

To add contrast, increase red component on red channel, green component on green channel and blue component on blue channel and decrease all offset values, this way

Changing the hue

To change the hue, swap red, green and blue values

Obviously you must finetune your matrix in order to achieve the best effect, but now you know how to change colors on the fly.

Download the source code and play with the values.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (24 votes, average: 4.88 out of 5)
Loading...Loading...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 19 comments

  1. tolleder

    on April 28, 2009 at 4:09 pm

    The description for changing saturation sound for me more like:

    matrix=matrix.concat([2,-1,-1,0,0]);// red
    matrix=matrix.concat([-1,2,-1,0,0]);// green
    matrix=matrix.concat([-1,-1,2,0,0]);// blue
    matrix=matrix.concat([0,0,0,1,0]);// alpha

    Also in Photoshop I never reach such red hair by just changing saturation.

  2. Arxanas

    on April 29, 2009 at 1:18 am

    Wow! That’s cool! I’m gonna try making some sort of color changer panel in the .swf!

  3. Flo

    on April 29, 2009 at 9:22 am

    Hi, nice. I really really like the ColorMatrix Class from Mario Klingemann. It is very easy to use.

    You can have a look here:
    http://www.quasimondo.com/archives/000565.php

    There exists an AS2 and AS3 Version

  4. gremlinc5

    on May 8, 2009 at 2:13 pm

    @Emanuele: great tips!

    I would like to point out just a this:
    the overall lightness of the resulting image depends on the SUM of the values on each row (so, Tolleder, your filter would produce a much darker image).

    In order to mantain the original luminosity (for each channel), each row must sum to 1.

    So, a better b&w filter matrix would be:
    0.3 0.6 0.1 0 0
    0.3 0.6 0.1 0 0
    0.3 0.6 0.1 0 0
    0 0 0 1 0
    This would retain luminance and would take account that blue is darker than red and green.

    @Tolleder: in Photoshop (and Gimp) the appropriate filter is the Channel Mixer, which applies exactly the same calculations to the image.

    Keep up with the good work!

  5. Yair Neumann

    on March 1, 2010 at 4:37 am

    I used the code in the first segment to turn a photo into b/w . the only difference is that in my FLA the photo is on the stage and not created by code.

    i used the “this” property to call on all the objects that are connected to my class and ran the function deSat wich had all the code in the upper segment.

    when I ran the SWF file the pictures disapeared…
    Do you have an explanation how this could happen?

  6. Mick

    on March 3, 2010 at 10:26 am

    10x alot for posting this source code .You saved me alot of time :D !! . Again thankyou

  7. meenakshi

    on July 28, 2010 at 3:05 pm

    Great post.very nicely explained.thanks for sharing.

  8. Ralph

    on September 28, 2010 at 9:14 pm

    Great post! A simple trick I’ve used for great results. Thanks again!

  9. Rahul Desai

    on April 21, 2011 at 6:33 pm

    This is very helpful. But what I was curious about was COMBINING these effects. Like for example, reducing the hue on a picture with a red tint applied to it. Would one do that by concatenating the two matrices/ arrays used to represent them?

  10. FFDigitalNet

    on June 3, 2011 at 6:11 am

    Thanx Dude, thats just what I was going for. Not that opaque colorTransform shit.

  11. YopSolo

    on August 29, 2011 at 12:19 pm

    there is a builtin class in fl.motion named AdjustColor

    the big advantage is that you can use the same value in the flash IDE and obtain the same result with pure AS3

    import fl.motion.AdjustColor;

    _color = new AdjustColor();
    _color.hue = 0;
    _color.contrast = 0;
    _color.brightness = 22;
    _color.saturation = 67;
    _colorMTX = new ColorMatrixFilter( _color.CalculateFinalFlatArray() );

    cheers !

  12. Anonymous

    on October 7, 2011 at 4:35 pm

    […] sollte doch eigentlich helfen. Hast Du bei google bestimmt auch schon gefunden: Understanding AS3 ColorMatrixFilter class – Emanuele Feronato Sieht doch ganz nach dem aus, was Du vorhast oder […]

  13. sonicoliver

    on December 14, 2011 at 3:59 am

    I noticed the hue in photoshop is wildly different to the hue in flash… do you know why the colours end up so different? what is the calculation behind the flash implementation of hue?

  14. Amarjit

    on January 12, 2012 at 2:42 pm

    Hello.

    Can you apply Colormatrix to to a top level SWF ? so it will affect all chldren images etc…

    Or can it only be applied to individual buttons, images objects etc.

    Thanks

  15. Matt

    on April 18, 2012 at 12:21 pm

    This is a great post.

    Rehul : You cannot normally concatonate complete matrixes. but normally you can pre-multiply them. (look up matrix multiplication). This should combine the effects (preserving order). I would imagine however there is a place where you can put a series of matrixes and they would pre-multiply.

    Amarjit: Try it.

  16. Filters! | Final Project Diary

    on April 24, 2012 at 1:24 pm

    […] – last visited 24/04/2012 2-http://www.emanueleferonato.com/2009/04/28/understanding-as3-colormatrixfilter-class/-last visited 24/04/2012 3-http://www.quasimondo.com/archives/000615.php- last visited […]

  17. Renan

    on August 2, 2012 at 4:17 pm

    Thank’s, great help :)

  18. Renu

    on February 5, 2013 at 12:13 pm

    I am using Tweenlite and activated ColorMatrixFilterPlugin to change brightness of a MovieClip. Now I want to get the brightness of a MovieClip in onUpdate function. Can anybody please let me know about this. See below the code I am using:

    var tween = new TweenLite(target_mc, time, {colorMatrixFilter: {brightness:1}, onUpdate:function() {
    trace(“I want brightness here”);

    }
    });

  19. Hoten

    on August 1, 2013 at 6:45 am

    Great write up. Needed a way to distinguish rare cards (think Shiny pokemon) in a trading card game I’m making. Thanks!

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×