Actionscript Retrieving BitmapData From Sprite Mouse Event

Question

i've created a bitmap with data and placed it into a sprite so to receive mouse events. however, i'm struggling with reading the BitmapData within the sprite.

function showBitmapData(e:Event):void
    {
    var bData:BitmapData = new BitmapData(video.width, video.height);
    bData.draw(video);

    var bmap:Bitmap = new Bitmap(bData);
    bmap.x = 220;
    bmap.y = 20;
    bmap.scaleX = bmap.scaleY = 2;

    canvas = new Sprite;
    addChild(canvas);
    canvas.addChild(bmap);

    //Mouse Track Pixel Colors
    canvas.addEventListener(MouseEvent.CLICK, readPixel);
    }

function readPixel(e:MouseEvent):void
    {
    var hex:uint = e.bmap.bData.getPixel32(mouseX, mouseY); // <- is the problem?
    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text = "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }

Answer 1

You are trying to read the field bmap from e who is a MouseEvent and don't have such field.

Also the Bitmap has no field named bData but bitmapData.

One way to get the bitmap from the your sprite is to use the target of the event and use getObjectsUnderPoint to get the bitmap (in case you have multiple bitmap into your sprite)

Also don't forget to take the mouse coordinate from the bmap, otherway you will have to play with Point conversion using globalToLocal and LocalToGlobal

// function to get the bitmap from a display object container
// using the mouse coordinate
function findBitmap(container:DisplayObjectContainer):Bitmap {
 if (container === null)
   return null;

 var childs:Array = container.getObjectsUnderPoint(
    new Point(container.mouseX, container.mouseY)
 );

 while (childs.length > 0) {
   var ret:Bitmap = childs.pop() as Bitmap;
   if (ret !== null)
     return ret;
 }

 return null;
}

// ....
canvas = new Sprite;
addChild(canvas);
canvas.addChild(bmap);
//Mouse Track Pixel Colors
canvas.addEventListener(MouseEvent.CLICK, readPixel);
// ...

function readPixel(e:MouseEvent):void {
    // found the bitmap from the currentTarget
    var bmap:Bitmap=findBitmap(e.currentTarget as DisplayObjectContainer);

    var hex:uint=0;

    if (bmap!==null) {
     hex = bmap.bitmapData.getPixel32(bmap.mouseX, bmap.mouseY); 
    }

    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text =
         "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }

Answer 2

The problem is that "e" is an event, which doesn't have a bmap property. It will have a target property, but that will be a event dispatcher, in this case your canvas.

I would suggest:

Create a custom class that extends sprite and contains your bitmap. Create an instance of that class and add it to the stage. Add your event listener to that object instead of the stage. In your event listener check that event.target is an instance of your custom class. If so, you can use the event's localX and localY to get the pixel value of the object's bitmap property.

Answer 3

Easiest way is to make your bitmap a property of the canvas so it can easily be referenced from the canvas. The event is firing from the canvas object so e.target will be your canvas. From there, you can hit your bitmap, and the bitmapData property of your bitmap will reference your bitmap data.

function showBitmapData(e:Event):void
    {
    var bData:BitmapData = new BitmapData(video.width, video.height);
    bData.draw(video);

    var bmap:Bitmap = new Bitmap(bData);
    bmap.x = 220;
    bmap.y = 20;
    bmap.scaleX = bmap.scaleY = 2;

    canvas = new MovieClip(); //sprites can't have arbitrary properites
    addChild(canvas);
    canvas.bmap = bmap; //*** Look at me! I can be referenced later!
    canvas.addChild(bmap);

    //Mouse Track Pixel Colors
    canvas.addEventListener(MouseEvent.CLICK, readPixel);
    }

function readPixel(e:MouseEvent):void
    {

    var hex:uint = e.target.bmap.bitmapData.getPixel32(mouseX, mouseY); // e.target is your "canvas" from before
    var pixelAlpha:int = (hex >>> 0x18) & 0xff;
    var red:int = (hex >>> 0x10) & 0xff;
    var green:int = (hex >>> 0x08) & 0xff;
    var blue:int = hex & 0xff;

    colorText.text = "Red:" + red + " Green:" + green + " Blue:" + blue + " Alpha:" + pixelAlpha;
    }