convert color image into single Color as3

Question

How to convert color image into single Color as3?

Answer 1

I think that what you must mean is like the following example: In this example I have taken a image and made it grayscale (upperleft) The upper right is the same grayscale image but then with a red overlay and set the blending mode to Darken. Samen with the blue and yellow. To make a grayscale image in flash you must set the same values for the Red Blue and Green channels. You can do this easily in flash. First you must have a bitmapData object with the picture in it. Then make it grayscale and finally do make the overlay and blend it together.

To get bitmapdata with the image you can follow the example @ adobe reference

I made a example class (worked from the example @ adobe) which does exactly what I said above:

    package {
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.display.BitmapDataChannel;
    import flash.display.BlendMode;

    import flash.events.*;

    import flash.geom.Point;
    import flash.geom.Rectangle;

    import flash.net.URLRequest;

    [SWF(width='900', height='481', backgroundColor='#FFFFFF', frameRate='30')]
    public class BitmapExample extends Sprite {
        private var url:String = "test.jpg";
        private var fillColor:uint = 0xFF0000; //0xFF0000 = Red

        public function BitmapExample() {
            configureAssets();
        }

        private function configureAssets():void {
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

            var request:URLRequest = new URLRequest(url);
            loader.load(request);
        }

        private function completeHandler(event:Event):void {
            var loader:Loader = Loader(event.target.loader);
            var image:Bitmap = Bitmap(loader.content);
            var bitmapData:BitmapData = image.bitmapData.clone();

            //Now we have the bitmapData we can make it grayscale.
            //First lock the data so it shows no changes while we are doing the changes.
            bitmapData.lock();
            //We now copy the red channel to the blue and the green channel.
            bitmapData.copyChannel(bitmapData,bitmapData.rect,new Point(),BitmapDataChannel.RED,BitmapDataChannel.BLUE);
            bitmapData.copyChannel(bitmapData,bitmapData.rect,new Point(),BitmapDataChannel.RED,BitmapDataChannel.GREEN);
            //After the change we can unlock the bitmapData.
            bitmapData.unlock();


            //Create the overlay with the color set in the private var fillColor
            var overlay:Bitmap = this.makeOverlayBitMap(bitmapData.width, bitmapData.height, fillColor);
            //Set the blendMode to darken so it will will be just like the picture in the post.
            overlay.blendMode = BlendMode.DARKEN;

            //Add original to the stage
            image.x = 0;
            image.y = 0;
            addChild(image);

            //Add a copy next to it with the grayscale data
            var image2:Bitmap = new Bitmap(bitmapData);
            image2.x = image.width;
            image2.y = 0;
            addChild(image2);

            //Add the overlay to the stage at position of the grayscale
            overlay.x = image2.x;
            overlay.y = image2.y;
            addChild(overlay);

        }

        private function makeOverlayBitMap(theWidth:int, theHeight:int, theColor:uint):Bitmap{
            var bitmapData:BitmapData = new BitmapData(theWidth,theHeight,false, theColor);
            var returnBit:Bitmap = new Bitmap(bitmapData);
            return returnBit;
        }

        private function ioErrorHandler(event:IOErrorEvent):void {
            trace("Unable to load image: " + url);
        }
    }
}

I hope that the code and comments in it will do the talking. If you have questions plz ask them.

Answer 2

You should look at http://blog.joa-ebert.com/2006/04/29/as3-imageprocessing-library/