Grey scale images with Actionscript 3.0

[Flep]

In this article, we will see how to apply grey scale effect to an image.
This effect is possible converting all the colors of the image to an equal luminosity.
This can be done multiplying the colors by the constant luminosity of the red, green and blue channels (RGB scale).
With Actionscript 3.0, we need a matrix and the ColoroMatrixFilter Class.

Let's see how to do it...

I create a FLA and save it as 'scala_di_grigi.fla', in which I import an image (colored one) and convert it as a MovieClip with an instance name 'image_mc'
I create a Document Class, an AS file saved as 'ScalaGrigi.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.BitmapFilter;
	import flash.geom.Point;
	
	public class ScalaGrigi extends MovieClip
	{
		private var bit_data:BitmapData;
		
		private var clip_mc:MovieClip;
		
		public function ScalaGrigi()
		{
			init();
		}
		
		private function init():void
		{
			clip_mc=new MovieClip();
			bit_data=new BitmapData(image_mc.width,image_mc.height,true,0xFF000000);
			bit_data.draw(image_mc);
			bit_data.applyFilter(bit_data,bit_data.rect,new Point(0,0),convertiGrigio());
			var bitmap:Bitmap=new Bitmap(bit_data);
			clip_mc.addChild(bitmap);
			addChild(clip_mc);
			clip_mc.x=image_mc.x;
			clip_mc.y=image_mc.y+image_mc.height+10;
		}
		
		private function convertiGrigio():BitmapFilter
		{
			var r:Number=0.212671;
			var g:Number=0.715160;
			var b:Number=0.072169;
			return new ColorMatrixFilter
			(
				[r,g,b,0,0,
				r,g,b,0,0,
				r,g,b,0,0,
				0,0,0,1,0]   );
		}
	}
}

The result:

Let's analise the code:

Properties
a BitmapData instance which will take a picture of image_mc
private var bit_data:BitmapData;
a MovieClip instance which will contain the Bitmap
private var clip_mc:MovieClip;

Methods
init();
I create a MovieClip
clip_mc=new MovieClip();
I create a BitmapData with a width and heigth equal to the measure of image_mc
bit_data=new BitmapData(image_mc.width,image_mc.height,true,0xF F000000);
I take a picture of image_mc
bit_data.draw(image_mc);
I apply a filter to the BitmapData passing the values of: the same BitmapData, the rect property of the bitmapData (which is nothing else then an instance of the Rectangle Class), the coordinates of the filter's starting point, a bitmapFilter instance which will return the function convertiGrigio()
bit_data.applyFilter(bit_data,bit_data.rect,new Point(0,0),convertiGrigio());
I create a new Bitmap (local variable because I do not need to keep track of it) to which I pass the BitmapData as value
var bitmap:Bitmap=new Bitmap(bit_data);
I add the Bitmap to clip_mc
clip_mc.addChild(bitmap);
I add clip_mc to the DisplayObject (otherwise it would not be visible)
addChild(clip_mc);
I position clip_mc
clip_mc.x=image_mc.x;
clip_mc.y=image_mc.y+image_mc.height+10;

convertiGrigio();
I create three numerical variables (constant ones) with the respective values of the luminosity of the three red, green, blue channels (RGB scale)
const r:Number=0.212671;
const g:Number=0.715160;
const ar b:Number=0.072169;
I return a new instance of the ColorMatrixFilter Class which is a matrix containing the value for a grey scale
return new ColorMatrixFilter
(
[r,g,b,0,0,
r,g,b,0,0,
r,g,b,0,0,
0,0,0,1,0] );

Stay tuned !