action script 3 - is it possible to trigger click event only when mouse is clicked on the image part?

Question

I have a problem and I have potential solution. But I wanted to confirm if there is an easy and simple way to solve my problem.

App type:

Isometric Game

Problem statement:

I am loading images in my flash app and have mouse events attached to them.

The images I load are prop images like vehicles, trees, buildings etc., and all of them are transparent.

Example: Red ball asset (please ignore the yellow background which I applied to describe the problem)

If I click on the actual image area (colored in red), then every thing works perfect

I don't want to trigger mouseevent when I click on empty image part (or transparent area, which I have shown in yellow color)

There is one way I know by creating masks in flash. I don't want to do it unless that is the final option left because I load image assets instead of flash assets and I don't want to create a new mask asset for all the assets

There is another method I was going to adopt by using getPixel method of Bitmap. Which is discussed here.

But there is another problem with this method.

I might be able to ignore the click event when I click on the empty part of the asset but if there is some other asset is behind the image in the same location, then I need to process the click event for the occluded image.

Well, thinking of solution to this problem takes me to the getObjectsUnderPoint where I can scan the occluded assets

Answer 1

Well, what you proposed as a solution is 100% valid. Just move the logic of determining what game object is clicked outside of that object.

1. Listen for MOUSE_DOWN/MOUSE_UP events at container which contains your game objects.
2. Catch an event
3. Check if the game object which is the target of this event is transparent at this point using BitmapData.getPixel32
4. If it is use getObjectsUnderPoint to find out all other game objects at this point
5. Find in a loop the first object which is not transparent at this point

Now you got the actual object which is hit.

Answer 2

One interesting solution is to use Sprite objects with the individual non-transparent pixels burnt onto them.

Suppose this is your Loader "complete" handler:

private function loaderCompleteHandler(event:Event):void
{
    // Loader is not our child, we use a Sprite instead (below).
    var loader:Loader = Loader(event.target);

    var sprite:Sprite = new Sprite();
    addChild(sprite);

    var w:Number = loader.content.width;
    var h:Number = loader.content.height;

    // Use transparent bitmap.
    var bitmapData:BitmapData = new BitmapData(w, h, true, 0);
    bitmapData.draw(loader.content);

    // Now burn the image onto the Sprite object, ignoring
    // the transparent pixels.
    for (var xPos:int = 0; xPos < w; xPos++) {
        for (var yPos:int = 0; yPos < h; yPos++) {
            var pixel32:uint = bitmapData.getPixel32(xPos, yPos);
            var alpha:int = pixel32 >>> 24;
            if (alpha != 0) {
                sprite.graphics.beginFill(pixel32 & 0xFFFFFF, alpha / 0xFF);
                sprite.graphics.drawRect(xPos, yPos, 1, 1);
                sprite.graphics.endFill();
            }
        }
    }

}

Essentially you want "empty" pixels that aren't clickable, and fully transparent pixels aren't quite the same thing. With this solution you get empty pixels.

Only problem is that this might be slow. Give it a shot.