How do I ignore mouse actions on transparent areas of a PNG using Flex image?

Question

I made a simple test Air application to try different approaches to masking or using hitArea to ignore mouse events over transparent areas of a PNG. Can't seem to find the right mix of things to make it work, nor could I find a succinct example on the web.

Clicking on the transparent areas of any of these methods don't result in the click getting handled by the background.

Here's the code I have:

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

The image1 and mask1 files I've uploaded here:

image1 - http://img853.imageshack.us/img853/923/image1yj.png

mask1 - http://img715.imageshack.us/img715/3755/mask1.png

Answer 1

Actually, it is possible. Here is a sample: http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex

Flex doesn't respect the alpha channel of a PNG, but you can render out the visible content into a sprite, and use that as a mask on any DisplayObject. Using this approach, only the visible area of the ping will cause mouse events, and it should respect all opacity. If you are layering things, you might hit a few issues.

Just make sure you use the alpha channel for masking content, not a specific color channel.