Limitare MouseEvents a Maschera in Flex pelle?

Question

Ho un ButtonSkin (Flex 4 Skin) con un rettangolo, un'etichetta, e un gruppo, il Gruppo mascherare il Rect. Sul ribaltamento, ho animare x del Label per this.width, e rollOut, tornare alla posizione originale. Il problema è, quando rollOut, se mi rotolo verso destra (in cui l'etichetta si nasconde dietro la maschera), non registra rollOut, finché passo davanti l'etichetta (this.width * 2). Come posso evitare che, così quando ho rollOut della zona visibile, anche se io sono ancora sopra l'etichetta dietro la maschera, ho un evento "rollOut"?

Ecco la pelle:

<?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

Il modo più semplice per farlo è quello di creare un oggetto "hit" che si trova sulla parte superiore del display nella vostra pelle pulsante. Si crea l'oggetto "hit" per le dimensioni esatte desiderate il mouse per essere interattivo con e collegare il listener di eventi per l'oggetto "hit".

In Flex Flex 4 è possibile utilizzare <s:Group> e non devono preoccuparsi di trasparenza e visibilità.