How do i create a mask for an application?

Question

Hello.
I pulled out an flex app out of Flash catalyst, and it has several "fx:designLayer"s containing images that slide off the stage.
I'd like to hide the images going outside the stage borders with a mask.
I tried:   
<s:mask>
    <s:Group id="mask">
        <s:Rect width = "100" height="100">
            <s:fill>
                <s:SolidColor color="#FF0000"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:mask>
but all I see is blank.
I tried to set mask = "{mask}" inside the <s:Application > tag and removing the <mask> tags, which works, but it gives me a warning that bindings to mask cannot be detected.
How do I get the mask for the app with no warnings?
And just for the sake of understanding Flex, how could I fix either one of those approaches?

Answer 1

Defining a Group as the mask doesn't seem to work because the Group is never
put on the display list so it doesn't draw its content.  Other examples I
saw were using FXG will compiles down into Sprites that draw automatically.
I don't normally do masking like this, I just draw a filled Sprite and
assign it as the mask.
One way I found that worked was this:
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="800"
minHeight="600"
               backgroundColor="#66DDFF"
                >
    <fx:Declarations>
    </fx:Declarations>
    <s:Group id="mask" includeInLayout="false" visible="false" >
        <s:Rect x="300" y="10" width="600" height="200">
            <s:fill>
                <s:SolidColor color="#FF0000"/>
            </s:fill>
        </s:Rect>
    </s:Group>
    <s:Rect height="341" id="myRandomThing" width="800" x="79.5" y="86.5" >
        <s:fill>
            <s:LinearGradient rotation="270" scaleX="341" x="115.5" y="341">
                <s:GradientEntry color="#222222" ratio="0"/>
                <s:GradientEntry color="#FFFFFF" ratio="1"/>
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke  color="#333333"  weight="10"/>
        </s:stroke>
    </s:Rect>
</s:Application