Flex Examples

This example loads an image and then uses a combination of the Bitmap and BitmapData classes to determine the color value under the mouse cursor. Pretty basic, but kind of neat. Maybe? Sorta?

Full code after the jump.

Download source (ZIP, 1K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/finding-a-pixels-color-value-using-the-bitmap-classes-and-getpixel/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private var bm:Bitmap;
            private var bmd:BitmapData;

            private function image_complete(evt:Event):void {
                /* Create Bitmap from Image content. */
                bm = img.content as Bitmap;

                /* Create new BitmapData object. */
                bmd = new BitmapData(img.contentWidth, img.contentHeight);

                /* Draw Bitmap into BitmapData. */
                bmd.draw(bm.bitmapData);
            }

            private function image_mouseMove(evt:MouseEvent):void {
                /* Get the pixel currently under the mouse cursor. */
                var color:int = bmd.getPixel(evt.localX, evt.localY);

                /* Convert the color value from a number to Hex string. */
                var colorStr:String = color.toString(16).toUpperCase();

                /* Set the swatch Box instance's backgroundColor style to the color under the mouse cursor. */
                swatch.setStyle("backgroundColor", color);

                /* Make sure colorStr is at least 6 characters. */
                colorStr = "000000" + colorStr;

                /* Make sure colorStr is at MOST 6 characters. */
                lbl.text = "#" + colorStr.substr(colorStr.length - 6);
            }
        ]]>
    </mx:Script>

    <mx:Zoom id="zoom" />

    <mx:VBox>
        <mx:Image id="img" source="image1.jpg" completeEffect="{zoom}" complete="image_complete(event);" mouseMove="image_mouseMove(event)" />

        <mx:HBox>
            <mx:Box id="swatch" width="{lbl.height}" height="{lbl.height}" />
            <mx:Label id="lbl" width="100" fontFamily="_typewriter" fontSize="16" />
        </mx:HBox>
    </mx:VBox>

</mx:Application>

View source enabled in the following example.