Preventing the bounding box of transparent Bitmap Sprite from triggering mouse events

Question

I thought I had solved my mouseEvent problem for Sprites containing a Bitmap with an alpha channel but I've encountered a new issue shown in the image below: the bounding box of the "Eurasia" map Sprite is triggering a `MouseEvent.Roll_Out" for the "Africa" Sprite.

My setup: Each map piece is a Sprite with a child Bitmap (PNG with alpha) and a "hitArea" Sprite derived from the Bitmap. The relevant code is below. This works great – except in the case where there are bounding box overlaps. The eventListeners I attach to each Sprite use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT but I have also tried MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT.

I've tried attaching eventlisteners to the "hitArea" Sprite and various other things but I can't get the bounding box to be ignored. Are there any settings I may have missed – or a workaround?

---

Code:

buttonImage = new Bitmap(upImageData);
buttonImage.smoothing = true;
this.addChild(buttonImage);
hitSprite = createHitArea(upImageData, 4);
this.addChild(hitSprite);
hitSprite.visible = false;
hitSprite.mouseEnabled = false;
this.hitArea = hitSprite;

---

    public function createHitArea(bitmapData:BitmapData, grainSize:uint=1):Sprite
    {   
        var _hitarea:Sprite = new Sprite();
        _hitarea.graphics.beginFill(0x000000, 1.0);         
        for(var x:uint=0;x<bitmapData.width;x+=grainSize) {
            for(var y:uint=grainSize;y<bitmapData.height;y+=grainSize) {                    
                if(x<=bitmapData.width && y<=bitmapData.height && bitmapData.getPixel(x,y)!=0) {
                    _hitarea.graphics.drawRect(x,y,grainSize,grainSize);
                }                   
            }
        }           
        _hitarea.graphics.endFill();
        _hitarea.cacheAsBitmap = true;
        return _hitarea;
    }

Answer 1

If using a vector mask is not a viable option (it should work if you changed your hitSpite into a Shape and then made it the mask of the map piece sprite - also you'd have to add it as a sibling of the map piece and not a child), then the way most people do this is checking if the pixel under the mouse is transparent or not.

Here is an example:

Let's say all your map pieces are the sole children of a Sprite referenced in a var called container. Let's also make the assumption for the example, that your map pieces are all Sprites that have the png Bitmap as the bottom most child.

You need to add the click listener to the container (instead of each individual map piece):

container.addEventListener(MouseEvent.CLICK,click);

function click(e:MouseEvent):void {
    var child:Sprite; //a helper var to store the current iterations child below in the while loop
    var target:Sprite; //the item that we determined was clicked

    //iterate through all children of container (backwards, so we process the top most layer first)
    var i:int = container.numChildren;
    while(i--){
        child = container.getChildAt(i) as Sprite; //populate the child var

        //now we check if the mouse is over this child by a simple hit test point
        //we also then check if the pixel under the mouse is transparent (a value of 0)
        if(child.hitTestPoint(e.stageX, e.stageY) && Bitmap(child.getChildAt(0)).bitmapData.getPixel32(child.x + e.localX,child.y + e.localY)){
            target = child;
            break; //break out of the loop since we found a child that meets the criteria
        }
    }

    trace(target);

    //now do something with target
}