Flex – Play with pictures

Flex offers great functionalities to play around with the pictures you have in your application. I am far from being a design or photo expert but I did have fun modifying the pictures that were inside my latest flex app.

My particular issue was the following. We had a list of products, each of them having a related picture. Some of these products could be bought, others not yet so we wanted to display the later as « disabled ». In other words, we wanted a nice colorfull picture for some products and a grayscale picture for others but the only picture available to us was the colorfull one.

So we used the ColorMatrixFilter. Here is how :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    height="300"
    width="600"
    backgroundGradientAlphas="[0,0]"
    backgroundColor="#FFFFFF">

    <mx:Script>
        <![CDATA[

            private var rLum:Number = 0.212671;
            private var gLum:Number = 0.715160;
            private var bLum:Number = 0.072169;

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

            [Bindable]
            private var imgUrl:String = "http://blog.netinfluence.ch/public/julien/editImgDemo.png";

        ]]>
    </mx:Script>

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

    <mx:Image source="{imgUrl}" height="300" width="300"/>
    <mx:Image source="{imgUrl}" height="300" width="300"
              left="300" filters="{[cmf]}"/>

</mx:Application>

This is a very simple example. You can actually apply this method to other components than the image one. And if you play around with the matrix and the rgb values, you will find that you can change many things. The best way to see what you can do is to check out this little app : http://afoucal.free.fr/wp-content/ColorMatrixBuilder/ColorMatrix.html

So go ahead and build you own photoshop 😉