如何使用透明的图像掩模图像，并添加一个事件侦听

Question

容易的部分是为它创建的图像和掩码：

 
// 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); 

我的问题是，我想的EventListener添加到非透明区域的图像。

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

但这不起作用。即使我将鼠标悬停在透明部分上，事件侦听器也会作出反应。

，如果我画一个矢量图形，并用它来掩盖它工作得很好图像...

Answer 1

，所以我monkeyed围绕我的代码，发现某事：

，而不是使用.png文件作为掩模你也可以使用矢量形状。你也可以尝试使用svg文件（tinyurl.com/2xe9vs）。它的工作，但：

您不能在运行时导入SVG文件;您只能在编译时将它们嵌入到Flex应用程序中。

这样的解决方案是使用一个.swf文件：

 
// 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); 

，你也可以使用InteractivePNG libary。

Answer 2

检查将localX并将MouseEvent的localY是你的面具的范围内。否则，请忽略该操作。

Answer 3

出现同样的问题：解决方法是将精灵设置为对象的目标区域。因为我自己懒得画一个hitarea-sprite，所以我写了一个简单的方法将一个透明的PNG图像转换成一个精灵。 Detailed explanation how that works can be found here.