Question

I’m having trouble setting up a Graphic object (a solid filled rectangle) to be masked with an image that gets loaded at runtime. I’ve managed to get it to work with the following code:

<?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 {
       rect.mask = circle;
 }
    ]]>
  </fx:Script>

  <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
    <s:Rect width="500" height="500">
      <s:fill>
        <s:SolidColor color="0xDDAAAA" />
      </s:fill>
    </s:Rect>
  </s:Graphic>
  <mx:Image 
    id="circle" 
    source="http://example.com/someimage.png" cacheAsBitmap="true" />

</s:Application>

What I don’t understand is why it does not work with this other snippet, modified slightly from the O’Reilly Flex 4 Cookbook (Chapter 4 – Apply Bitmap Data to a Graphic Element as a Mask):

<?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"
>
  <fx:Script>
    <![CDATA[
 import spark.core.MaskType;

    ]]>
  </fx:Script>

  <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
    <s:Rect width="500" height="500">
      <s:fill>
        <s:SolidColor color="0xDDAAAA" />
      </s:fill>
    </s:Rect>
    <s:mask>
      <mx:Image 
        id="circle" 
        source="http://example.com/someimage.png" cacheAsBitmap="true" />
    </s:mask>
  </s:Graphic>
</s:Application>

Setting the PNG inside the <s:mask> makes the stage render nothing, while adding the mask programatically in the init() method causes correct behaviour.

It took me quite a while to figure this out and I’d like to understand what it is that I’m doing incorrectly in the MXML approach, as that seems to be what is being done in the Cookbook (other than me using an Image and the example using a Group wrapped BitmapImage).

Thanks

Answer 1

Figured it out finally… The <mx:Image> in the <s:mask> needs to be wrapped in a <s:Group> (like the original code from the Cookbook indicated for the BitmapImage). I originally thought the Image did not require the Group tag because of what is mentioned earlier:

Likewise, any DisplayObject-based element, including the visual elements from the MX set, can be applied as a mask source for a Graphic element.

The final code looks like this:

<?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"
  >
  <fx:Script>
  <![CDATA[
    import spark.core.MaskType;
  ]]>
  </fx:Script>

  <s:Graphic id="rect" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
    <s:Rect width="200" height="200">
      <s:fill>
        <s:SolidColor color="0xDDAAAA" />
      </s:fill>
    </s:Rect>
    <s:mask>
      <s:Group>
        <mx:Image 
          id="circle" 
          source="http://example.com/triangle.png" cacheAsBitmap="true" />
      </s:Group>
    </s:mask>
  </s:Graphic>
</s:Application>