Question

I am having trouble handling a MouseEvent.MOUSE_DOWN on an component with a Image for a mask in Flex 4.

I have an application as follows:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  creationComplete="init()"
  >
  <fx:Script>
  <![CDATA[
  import spark.core.MaskType;

  public function init():void {

    manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
  }

  public function handleMouseDown(e:MouseEvent):void {
    trace( e.target )
  }

  ]]>
  </fx:Script>

  <s:Group id="manager" width="500" height="500">
    <s:Group id="layer" mouseChildren="false" x="220">
      <s:Group id="content" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
        <s:Rect width="338" height="162">
          <s:fill>
            <s:SolidColor color="0xDDAAAA" />
          </s:fill>
        </s:Rect>
        <s:mask>
          <s:Group>
            <mx:Image 
              source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
              cacheAsBitmap="true" 
              />
          </s:Group>
        </s:mask>
      </s:Group>
    </s:Group>
  </s:Group>
</s:Application>

If you run this, you will notice that if you click on the left side of the image (on the “3”), the trace correctly indicates that “layer” got clicked. However, if you click on the right side of the image (on the “D”) you’ll see that “manager” got clicked instead of “layer”, which is wrong. If you click anywhere on the “layer” that is past 338px (the mask size), the mouse event does not seem to make it to the layer object.

If I remove the “x” offset on “layer”, the whole layer works as expected, but as soon as I offset, anything past the width of the mask (338px) seems to not be captured properly, like if the mask wasn’t offset. The strange thing is that if you click to the left of the image once it has been offset, you do get “manager”, which means that the layer (and mask) did get moved.

Here’s what I mean, with no offset, clicking on the green area returns “layer”, clicking on the blue area returns “manager”, which is the expected behaviour. See image

If I offset the layer by 220, the areas behave like this image

Sorry I can’t embed the images here, but I don’t have enough reputation 🙁

Answer 1

Figured it out.

Apparently the problem is that the Image that is used as the mask needs to be added to the display list before it gets set as the mask or this erratic behaviour happens. This is what the code looks like now and it’s working:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  creationComplete="init()"
  >
  <fx:Script>
  <![CDATA[
  import spark.core.MaskType;

  public function init():void {

    manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
  }

  public function handleMouseDown(e:MouseEvent):void {
    trace( e.target.id )
  }

  ]]>
  </fx:Script>

  <s:Group id="manager" width="500" height="500">
    <s:Group id="layer" mouseChildren="false" x="100" mouseEnabledWhereTransparent="false">
      <s:Group id="content" mask="{maskImage}" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
        <s:Rect width="338" height="162">
          <s:fill>
            <s:SolidColor color="0xDDAAAA" />
          </s:fill>
        </s:Rect>
      </s:Group>
      <mx:Image id="maskImage"
        source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
        cacheAsBitmap="true" 
        />
    </s:Group>
  </s:Group>
</s:Application>

Also of note is that the maskImage is a child of layer and not a child of content. Setting it as a child of the latter results in the same incorrect behaviour as before.