Flexイメージを使用してPNGの透過領域でマウス操作を無視するにはどうすればよいですか？

Question

単純なテストAirアプリケーションを使って、マスキングのさまざまな方法を試したり、hitAreaを使用してマウスイベントをPNGの透過領域で無視したりしました。それを動作させるために適切なものを見つけることができないようでも、Web上で簡単な例を見つけることもできません。

これらの方法のいずれかの透過領域をクリックしても、クリックがバックグラウンドで処理されることはありません。

ここで私が持っているコードです：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        status="{clicked}"> 

<fx:Declarations> 
    <s:Image id="maskX" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
</fx:Declarations> 

<fx:Script> 
    <![CDATA[ 
     [Bindable] public var clicked:String = "none"; 

     protected function onClick(event:MouseEvent):void 
     { 
      clicked = event.currentTarget["id"] + "\t" + (new Date()).time; 
     } 
    ]]> 
</fx:Script> 

<!-- Some sort of background so I can see transparency working. --> 
<s:Group id="background" width="100%" height="100%" click="onClick(event)"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:LinearGradient rotation="90"> 
       <s:GradientEntry color="blue"/> 
       <s:GradientEntry color="white"/> 
      </s:LinearGradient> 
     </s:fill> 
    </s:Rect> 
</s:Group> 

<s:Group width="100%" height="100%"> 
    <s:layout> 
     <s:TileLayout/> 
    </s:layout> 

    <!-- Simple attempt at having Flex respect the alpha in the PNG itself as transparent 
      with regard to clicks --> 
    <s:Group id="image1" click="onClick(event)" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Use an explicit bitmap mask for the hitArea --> 
    <s:Group id="image2" click="onClick(event)" hitArea="{mask2}" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')"/> 
     <s:Image id="mask2" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Try using just the mask bitmap --> 
    <s:Group id="image3" click="onClick(event)" hitArea="{mask3}" mouseEnabledWhereTransparent="false"> 
     <s:Image id="mask3" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
    </s:Group> 

    <!-- Specify the hitArea with alternate syntax --> 
    <s:Group id="image4" click="onClick(event)" mouseEnabledWhereTransparent="false"> 
     <s:Image source="@Embed('image1.png')"/> 
     <s:hitArea> 
      <s:Image id="mask4" source="@Embed('mask1.png')" cacheAsBitmap="true"/> 
     </s:hitArea> 
    </s:Group> 
</s:Group> 

私はここにアップロードした画像1とマスク1ファイル：

イメージ1 - http://img853.imageshack.us/img853/923/image1yj.png

マスク1 - http://img715.imageshack.us/img715/3755/mask1.png

Answer 1

は、実際には可能です。 FlexはPNGのアルファチャンネルを尊重しませんが、可視コンテンツをスプライトにレンダリングして、それをDisplayObjectのマスクとして使用できます。この方法を使用すると、pingの可視領域だけがマウスイベントを引き起こし、すべての不透明度を尊重する必要があります。あなたが物を重ねているなら、あなたはいくつかの問題を打つかもしれません。

特定のカラーチャンネルではなく、コンテンツのマスキングにアルファチャンネルを使用するようにしてください。