transparent parts of sprite responding to mouse events

Question

I'm making a puzzle game in Flash cs5/as3 which can have custom puzzle shapes. Basically, the user can draw basic protrusions of a puzzle. Then I create a black and white puzzle piece with a custom function like this

var piece:PuzzlePiece= new PuzzlePiece(true,true,false,false);

PuzzlePiece is a class that extends Sprite. The four arguments correspond to the four sides of a puzzle piece (up, down, left, right). If the argument is true, it means that protrusion should stick out of that side of puzzle piece. If it's false, it should have a hole on that side, so it fits the protrusion.
I first attach the protrusions that stick out, then i flip the protrusions that stick in, attach them to a new sprite (in_part) and invert them with the following function:

in_part=invertSprite(in_part,in_part.widht,in_part.height);
function invertSprite(source:Sprite, width: int, height: int) {
var child:Shape = new Shape(); 
child.graphics.beginFill(0xFFFFFF);
child.graphics.lineStyle();
child.graphics.drawRect(0, 0, width,height);
child.graphics.endFill();

var cont:Sprite = new Sprite();
cont.addChild(child);
cont.addChild(source);
source.blendMode = BlendMode.ERASE;
cont.blendMode = BlendMode.LAYER;
return cont;
}

I combine the two parts and the result is black and white puzzle piece.

I then want to apply the piece as a mask to a part of a loaded image.

puzzleImg = Bitmap(loader.content).bitmapData; // this is the .jpg image 
var width = piece.width; // piece is black and white Sprite in the shape of the puzzle 
var height = piece.height;

var puzzlePc:BitmapData = new BitmapData(width,height,true,0);
puzzlePc.draw(puzzleImg);
disp = new Bitmap(puzzlePc);
tmp.addChild(disp); //tmp is the main, holding Sprite
addChild(piece);
disp.mask = piece;
disp.cacheAsBitmap = true;
piece.cacheAsBitmap = true;
tmp.mouseChildren = false;

This all works fine, except that the holes in the puzzle pieces (transparent parts in which other puzzle pieces should fit) respond to mouse clicks, and this is obviously not good for my intent.

I'm trying to solve this for a couple of days now, but I don't really understand why this happens.

Any ideas?

Answer 1

In the mouse handler you can check for the alpha value of the pixel under the point where the mouse is clicked. If the value is less then full alpha cancel any functionality.

protected function onMouseDown( event:MouseEvent ):void
{
    var pixelValue:uint = _bitmap.bitmapData.getPixel32( event.localX, event.localY );
    var alphaValue:uint = pixelValue >> 24 & 0xFF;

    trace( 'alphaValue: ' + alphaValue );
    trace( 'pixelValue: ' + pixelValue );

    if( alphaValue < 255 ) {
        trace( 'clicked area is not opaque' );
    } else {
        trace( 'clicked area is opaque' );
    }
}

Answer 2

I believe you can use BitmapData.hitTest function for this. With this function you can test a point against a bitmap or a bitmap against a bitmap.