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

Question

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...

Answer 1

Check that the localX and localY of the MouseEvent are within the bounds of your mask. Otherwise, ignore the action.

Answer 2

so i monkeyed around with my code, and found sth:

instead of using a .png file as a mask you could also use a vector shape. you can also try using svg files (tinyurl.com/2xe9vs). it's working but:

You cannot import SVG files at run time; you can only embed them in your Flex application at compile time.

so the the solution is to use an .swf file:

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

// the mask
var elementImageMask:SWFLoader = new SWFLoader();
elementImageMask.load("/flash/hoodie/body.swf");
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

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

you could also use the InteractivePNG libary.