Apache – how to use transparent images to mask images and add an eventlistener

apache-flex

the easy part is to create the image and the mask for it:

// The jpg
var elementImage:Image = new Image();
elementImage.source = "/assets/materials/9/main-body.jpg";
elementImage.cacheAsBitmap = true;

// the mask
var elementImageMask:Image = new Image();
elementImageMask.source = "/assets/elements/4/main-body-mask.png";
elementImageMask.cacheAsBitmap = true;
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

my problem is that i want to add EventListener to the non transparent regions of the images.

elementImage.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
elementImage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

but that's not working here. the event listener reacts even if i hover over the trasparent parts.

if i draw an vector graphic and use it to mask the image it works just fine…

Best Answer

Ran into the same problem: Solution is to set a sprite as a hitarea to the Object. Since I was to lazy to draw a hitarea-sprite myself, I wrote a simple method to convert a transparent png image to a sprite. Detailed explanation how that works can be found here.

Related Topic