[flexcoders] hiding parts of controls across the edges of their parents (masking?)

[simonjpalmer]

I have a canvas within a canvas and the outer canvas has rounded
corners.  The inner one is basically a strip along the right hand side
of the outer canvas which I fill with a colour depending on the state
of some internal variable.  There are a couple of text fields in the
outer canvas too, but they are irrelevant to the problem at hand.

I want the inner one to have square corners but for its right hand
edge to be trimmed or masked so that it doesn't appear outside the
outer canvas's rounded corners.

It's harder to describe than it is to see in reality.

Here is my code which when displayed shows the little corners of the
inner canvas poking out of the nicely rounded edges of its parent.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; 
        width="225" height="100" 
        cornerRadius="8" 
        borderStyle="solid" borderColor="#c0c0c0" 
        xmlns:ns1="src.com.dsl.controls.*">

        <mx:Canvas width="30" height="100%" right="0" top="0"
backgroundColor="#ff8000" backgroundAlpha=".5" id="cvs_StatusColour">
                <ns1:ctrl_FancyButton right="4" top="3" fillColors="[#0080ff,
#0080ff]" fillAlphas="[0.5, 0.5]" id="but_Select"/>
        </mx:Canvas>
        <mx:Label text="Target" fontSize="12" left="4" top="3" right="34"
color="#808080" id="lbl_Title"/>
        <mx:Text text="Text" left="4" bottom="4" right="34" top="20"
id="txt_Message"/>
        
</mx:Canvas>