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:

1
2
3
4
5
6
7
8
9

package {
	import flash.display.Sprite;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
		}
	}
}

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

Now let’s try this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// red
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// green
			matrix=matrix.concat([0.5,0.5,0.5,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

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

While with this script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([1,0,0,0,0]);// red
			matrix=matrix.concat([0,1,0,0,0]);// green
			matrix=matrix.concat([0,0,1,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([2,-1,0,0,0]);// red
			matrix=matrix.concat([-1,2,0,0,0]);// green
			matrix=matrix.concat([0,-1,2,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([1.5,0,0,0,-40]);// red
			matrix=matrix.concat([0,1.5,0,0,-40]);// green
			matrix=matrix.concat([0,0,1.5,0,-40]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

Changing the hue

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package {
	import flash.display.Sprite;
	import flash.filters.ColorMatrixFilter;
	public class cmf extends Sprite {
		var cats_image:cats=new cats();
		public function cmf() {
			addChild(cats_image);
			var matrix:Array = new Array();
			matrix=matrix.concat([0,1,0,0,0]);// red
			matrix=matrix.concat([0,0,1,0,0]);// green
			matrix=matrix.concat([1,0,0,0,0]);// blue
			matrix=matrix.concat([0,0,0,1,0]);// alpha
			var my_filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			cats_image.filters=[my_filter];
		}
	}
}

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: (4 votes, average: 5.00 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

7 Responses

1. tolleder says:

   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.

   Reply
2. Arxanas says:

   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!

   Reply
3. Flo says:

   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

   Reply
4. gremlinc5 says:

   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!

   Reply
5. Yair Neumann says:

   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?

   Reply
6. Mick says:

   March 3, 2010 at 10:26 am

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

   Reply
7. meenakshi says:

   July 28, 2010 at 3:05 pm

   Great post.very nicely explained.thanks for sharing.

   Reply