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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
This cool aplication
Ok. It’s fine. I like it. But what about R G B color? What code should be instead of # ????
Hello, your example looks cool and simple, but I can’t get it to run properly.. seems to hang on this line:
var color:int = bmd.getPixel(evt.localX, evt.localY);
Not sure why. I’m compiling on osx
Daniel
very beautiful~:)
Hello,
Excelent example.
Does anybody know why the instroction flow is blocked at line :
bm = img.content as Bitmap
mainly at the instruction : img.content
Thank you,
The Example cant work, because you have to capture the Event “creationComplete” on the image and NOT the Event “complete”.
Also, you can simplify your “image_complete” function to:
private function image_complete(evt:Event):void { /* Create new BitmapData object. */ bmd = new BitmapData(img.width, img.height); bmd.draw(img.content); }Any idea how I could do the same off a videodisplay object?
Cool application!
Is there any feature that we an set the pixel value to a particular color similarly as we detect the color of the pixel?