Grayscale on Image With Color Channels in Bitmap
June 15, 2008 – 5:10 amWhat you can do with Bitmap Class in Actionscript is not little. A lot of filters and effects that are being used by the image editing program’s can be used in Actionscript to. With Bitmap Class and bit of math knowledge you can make really good shapes and animation. In this article I will basically show an example how you can change color channels on Bitmap Data. In example we will add a image to stage and than we will change the color channels to gray depending on Mouse position. The main target is getting the specific color channels and replace with other color channels. For this example we will take green color channel as a source and we apply to red, green and blue. Result of this will be gray.
Let’s begin, first of all we import the classes that we need;
-
import flash.display.Bitmap;
-
import flash.display.BitmapData;
-
import flash.geom.Rectangle;
-
import flash.geom.Point;
Afterwards we need to take our image from library. For that we are giving linkage ID for our image as “circle”. First of all we are creating BitmapData and than we we are giving name of the object in library as a class name. The parameters that we give for this code is not a valid value, we have to give the width and height of BitmapData when we create, but we are getting our image from library so the value that we give will not be valid. But we have to give it anyway.
-
var circleImageData:BitmapData = new circle(0,0);
We added our Bitmap object from library to stage. Now what we need to do is copy to color channels and replace them by mouse position. For this we are creating our second BitmapData object for holding the transformed bitmap data. We are getting the width and height of new BitmapData object from the old one. Afterwards we are using the clone method for cloning the BitmapData that we get from library.
-
var grayBitmapData = new BitmapData(circleImageData.width, circleImageData.height, true, 0);
-
grayBitmapData = circleImageData.clone();
Now we have to create variables and objects we will use. First of all for holding the x position of mouse we create Xpos. Second one is for holding x and y position of destination channel, we create Point object and name it descPoint. Next is Rectangle object for boundaries of pixels. And last one is Bitmap object we name it grayBitmap and, this object will hold the BitmapData.
-
var xPos:Number;
-
var destPoints:Point = new Point(0,0);
-
var rect:Rectangle = new Rectangle();
-
var grayBitmap:Bitmap = new Bitmap();
Ok now its colors, in 32-Bit color system there are 4 different color channels, which is; Alpha(Transparency), Blue, Green and Red. We will only get the green channel from our object, and than we will send this values to red, green and blue channel. So this way we can build a grayscale pixels.
-
var redColorChannel:uint = 1;
-
var greenColorChannel:uint = 2;
-
var blueColorChannel:uint = 4;
The 1, 2, 4 values over here are belong to BitmapDataChannel. And Alpha channel get 8 as a value. Now we have to add a event listener for listening the ENTER_FRAME event, and than we will write our function.
-
this.addEventListener(Event.ENTER_FRAME, render);
-
function render(e:Event) {
-
xPos = mouseX;
-
rect = new Rectangle(0, 0, xPos, grayBitmapData.height);
-
grayBitmapData.copyPixels(grayBitmapData,rect,destPoints);
-
grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,redColorChannel);
-
grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,greenColorChannel);
-
grayBitmapData.copyChannel(grayBitmapData,rect,destPoints,greenColorChannel,blueColorChannel);
-
rect = new Rectangle(xPos, 0, grayBitmapData.width-xPos, grayBitmapData.height);
-
grayBitmapData.copyPixels(circleImageData,rect,new Point(xPos, 0));
-
grayBitmap = new Bitmap(grayBitmapData);
-
addChild(grayBitmap);
-
}
In function first of all we are assign the x position of mouse to xPos variable. Second we assign the values to Rectangle object. Third; we are using copyPixels method for copying pixels from x:0 to xPos value. At fourth, fifth and sixth we are using copyChannel method for copying the channels from green color channel to red, green and blue channel. By copying and replacing the channels we are creating the grayscale image. Afterwards we are assigning the values of Rectangle object again, we will use that in copyPixels method in next line. And last two lines of code in function is holding the BitmapData and adding to Display List.
It may look hard at beginning but after trying and getting use to it Bitmap class, I am sure you will enjoy to working with it.
PS: The copyChannel example over here its based on example from Brendan Dawes which is made it with Actionscript 2.0.
Take Care
Engin!
