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:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo"
 xmlns:style="http://www.flexinstyle.org/2009"
 minWidth="21" minHeight="21"
 alpha.disabledStates="0.5">

 <!-- states -->
 <s:states>
  <mx:State name="up" />
  <mx:State name="over" stateGroups="overStates" />
  <mx:State name="down" stateGroups="downStates" />
  <mx:State name="disabled" stateGroups="disabledStates" />
  <mx:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
  <mx:State name="overAndSelected" stateGroups="overStates, selectedStates" />
  <mx:State name="downAndSelected" stateGroups="downStates, selectedStates" />
  <mx:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
 </s:states>

 <!-- transitions -->
 <s:transitions>
  <mx:Transition fromState="*" toState="*">
   <s:Animate
    target="{labelDisplay}"
    duration="300">
    <s:SimpleMotionPath property="x"/>
   </s:Animate>
  </mx:Transition>
 </s:transitions>

 <!-- fill -->
 <s:Rect left="1" right="1" top="1" bottom="1" mask="{masker}" maskType="clip">
  <s:fill>
   <mx:LinearGradient rotation="90">
    <mx:GradientEntry id="backgroundTopGradient"
     color="0xff0000"/>
    <mx:GradientEntry id="backgroundBottomGradient" color="0xf00000"/>
   </mx:LinearGradient>
  </s:fill>
 </s:Rect>

 <!-- label -->
 <s:Label id="labelDisplay"
   textAlign="center"
   verticalAlign="middle"
   maxDisplayedLines="1" x.up="10" x.over="100"
   horizontalCenter="0" verticalCenter="1"
   left="10" right="10" top="2" bottom="2" mouseChildren="false"
   color="0xffffff" mouseEnabled="false">
 </s:Label>

 <!-- mask -->
 <s:Group id="masker" width="100%" height="100%" mouseEnabled="false">
  <s:Rect width="100%" height="100%">
   <s:fill>
    <s:SolidColor alpha="0.1"/>
   </s:fill>
  </s:Rect>
 </s:Group>

</s:SparkSkin>

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.