hit test only on the visible content of MOVIECLIP

Question

I have masked a Bitmap using a shape and have converted this to a movie clip. Now only the masked image is inside the movieclip. i have added a mouse click event listener for this movie clip and still the click is taken for the whole movieclip. how do i manage to click only the visible area of the movieclip.

`

//img is a bitmap on stage and s1 is an irregular shape on the stage which is a movieclip
img.mask = s1;

var bmp:Bitmap = new Bitmap(new BitmapData(img.width,img.height,true));
bmp.bitmapData.draw(img);
var n:MovieClip = new MovieClip();



n.addChild(bmp);

addChild(n);


trace(s1.width + " " + s1.height);
trace(n.width + " " + n.height);
n.addEventListener(MouseEvent.CLICK, clicked);
removeChild(s1);
removeChild(img);

function clicked(m:MouseEvent):void
{
            trace(n.hitTestPoint(n.mouseX,n.mouseY, false));
            trace("clikckedek kkc kkeke");
}

`

Answer 1

I got it working using the trick of "get pixel". the mouse click is taken only on the colored pixels and not white pixel.

    function clickHandler (event:MouseEvent):void
{
    //check if the bitmap inside the object that was clicked has a transparent pixel at the current mouse position
    var mcAlpha:String = (event.currentTarget.getChildAt(0).bitmapData.getPixel32(event.localX,event.localY) >> 24 & 0xFF).toString(16);

    if (mcAlpha == "0")
    {
        trace ("transparent!");
    }
    else
    {
        trace ("CLICK!!!");
    }
}

Answer 2

Can't you just move your click handler to the mask, (s1 in your code)?

This should allow clicking only inside the visible circle:

import flash.events.MouseEvent;
import flash.display.Sprite;

var shape:Sprite = addChild(new Sprite()) as Sprite;
shape.graphics.beginFill(0xFF0000, 1);
shape.graphics.drawRect(0,0,200,200);
shape.x = shape.y = 50;

var masque:Sprite = shape.addChild(new Sprite()) as Sprite;
masque.graphics.beginFill(0x00FF00, 1);
masque.graphics.drawCircle(100,100,100);
masque.buttonMode = masque.useHandCursor = true;
shape.mask = masque;

function handleMasqueClick($e:MouseEvent):void
{
    trace("CLICK");
}

masque.addEventListener(MouseEvent.CLICK, handleMasqueClick);

Not certain I understood - is this what you were after?

Otherwise, if what you mean is you want to avoid a positive hit on transparent parts of the bitmap within the masked area, you would need to get the position of the mouse click on the masque and hit test that point against the bitmap itself (see: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#hitTest%28%29) - probably going a bit of localToGlobal/GlobalToLocal juggling to get everything in the same coordinate space.