Adding a mask to a Flex Image

I have the following mxml:

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <flex:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Re开发者_开发问答ct>
    </s:Group>
  </flex:mask>
</s:Image>

Shouldn't this code generate a Rectangular Mask of 129px*123px that will produce a cropping effect?

Thanks.

The problem is that the mask object needs to be already created AND added to the display list, by the time it is set as a mask. So, your code should be changed to reflect this, like so:

<s:Group id="imageMask" alpha="0.1">
  <s:Rect width="129" height="123">
    <s:fill>
      <s:SolidColor color="0x00FFFF"/>
    </s:fill>
  </s:Rect>
</s:Group>

<s:Image source="@Embed(source='my/path/to/img.png')" mask="{imageMask}" />

Have a great day.

That works for BitmapImage. Image has it's own BitmapImage inside ImageSkin.

Create skin, set skinClass:

<s:Image source="@Embed(source='my/path/to/img.png')" 
         skinClass="MyImageSkin"/>

and inside MyImageSkin find BitmapImage and set mask:

<!--- Primary image display skin part. -->
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0">
    <s:mask>
       <s:Group alpha="0.1">
            <s:Rect width="129" height="123">
                <s:fill>
                    <s:SolidColor color="0x00FFFF"/>
                </s:fill>
            </s:Rect>
        </s:Group>
    </s:mask>
</s:BitmapImage>

This should work.

<s:Image source="@Embed(source='my/path/to/img.png')" >
  <s:mask>
    <s:Group alpha="0.1">
      <s:Rect width="129" height="123">
        <s:fill>
          <s:SolidColor color="0x00FFFF"/>
        </s:fill>
      </s:Rect>
    </s:Group>
  </s:mask>
</s:Image>

s:mask is a property of the image and will use the inner FXG as the mask. The alpha won't make any difference unless you set the maskType="" property to alpha (for clip, the default property it's either visible or not).