Converting an image to black and white using the ColorMatrixFilter

A quick example of converting an image to black and white using the ColorMatrixFilter class. This was originally written for the Flash documentation’s “Learning ActionScript 2.0″ book (click here), but I ported our sample to Flex below.

For more information on the ColorMatrixFilter in ActionScript 3.0, check out the Flex 3 Beta documentation on LiveDocs at: ColorMatrixFilter – Flex 3 Language Reference.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/27/converting-an-image-to-black-and-white-using-the-colormatrixfilter/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private var rLum:Number = 0.2225;
            private var gLum:Number = 0.7169;
            private var bLum:Number = 0.0606;

            [Bindable]
            private var bwMatrix:Array = [rLum, gLum, bLum, 0, 0,
                            rLum, gLum, bLum, 0, 0,
                            rLum, gLum, bLum, 0, 0,
                            0, 0, 0, 1, 0];

            [Bindable]
            [Embed('assets/image2.jpg')]
            private var image2:Class;

        ]]>
    </mx:Script>

    <mx:ColorMatrixFilter id="cmf" matrix="{bwMatrix}" />

    <mx:VBox>
        <mx:Label text="Black and white" />
        <mx:Image source="{image2}" filters="{[cmf]}" scaleX="0.5" scaleY="0.5" />
    </mx:VBox>

    <mx:VBox>
        <mx:Label text="Original" />
        <mx:Image source="{image2}" scaleX="0.5" scaleY="0.5" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

8/27/2007: You can also code similar to the following to modify the Bitmap data directly. This allows you to create two icons (one color, one black and white) rather than have to specify the ColorMatrixFilter filter on each Image tag separately.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/27/converting-an-image-to-black-and-white-using-the-colormatrixfilter/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            private const rLum:Number = 0.2225;
            private const gLum:Number = 0.7169;
            private const bLum:Number = 0.0606;

            private const bwMatrix:Array = [rLum, gLum, bLum, 0, 0,
                            rLum, gLum, bLum, 0, 0,
                            rLum, gLum, bLum, 0, 0,
                            0, 0, 0, 1, 0];

            [Bindable]
            [Embed("assets/image2.jpg")]
            private var image2:Class;

            private var image2Color:Bitmap;
            private var image2BlackWhite:Bitmap;

            private function init():void {
                image2Color = new image2();
                image2BlackWhite = new image2();
                image2BlackWhite.filters = [cmf];

                img1.source = image2BlackWhite;
                img2.source = image2Color;
            }
        ]]>
    </mx:Script>

    <mx:ColorMatrixFilter id="cmf" matrix="{bwMatrix}" />

    <mx:VBox>
        <mx:Label text="Black and white" />
        <mx:Image id="img1" scaleX="0.5" scaleY="0.5" />
    </mx:VBox>

    <mx:VBox>
        <mx:Label text="Original" />
        <mx:Image id="img2" scaleX="0.5" scaleY="0.5" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

9/26/2007: I recently learnt this trick where you can use the flash.* classes directly in your MXML by adding the namespace to the XML node or main <mx:Application /> tag. For more information, see “Using the flash.* classes in MXML“.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Number id="rLum">0.2225</mx:Number>
    <mx:Number id="gLum">0.7169</mx:Number>
    <mx:Number id="bLum">0.0606</mx:Number>

    <flash.filters:ColorMatrixFilter
            xmlns:flash.filters="flash.filters.*"
            id="matrix"
            matrix="{[rLum, gLum, bLum, 0, 0,
                      rLum, gLum, bLum, 0, 0,
                      rLum, gLum, bLum, 0, 0,
                      0, 0, 0, 1, 0]}" />

    <mx:Image id="image"
        source="http://www.helpexamples.com/flash/images/image1.jpg"
        filters="{[matrix]}"
        scaleX="0.5"
        scaleY="0.5" />

</mx:Application>