Restrict MouseEvents to Mask in Flex Skin?

Question

I have a ButtonSkin (Flex 4 Skin) with a Rect, a Label, and a Group, the Group masking the Rect. On rollOver, I animate the Label's x to this.width, and on rollOut, back to the original position. The problem is, when I rollOut, if I roll to the right (where the label is hiding behind the mask), it doesn't register rollOut, until I go past the label (this.width * 2). How do I prevent that, so when I rollOut of the visible area, even though I'm still over the label behind the mask, I get a "rollOut" event?

Here's the Skin:

`
`
`
 
 
  
  
  
  
  
  
  
  
 `
` 
 
 
  
   
    
   
  
 `
`
 
 
  
   
    
    
   
  
 `
` 
 
 
 `
` 
 
 
  
   
    
   
  
 `
` 
`

Answer 1

The easiest way to do this is to create a "hit" object that sits on the top of the display in your button skin. You create the "hit" object to the exact dimensions you want the mouse to be interactive with and attach the event listeners to the "hit" object.

In flex flex 4 you can use <s:Group> and not have to worry about transparency or visibility.