Limiter MouseEvents à Masquer dans la peau Flex?

Question

J'ai un ButtonSkin (Flex 4 Skin) avec un Rect, un Label et un Group, le Groupe masquant le Rect. Sur rollOver, j'anime le x de l'étiquette à this.width, et sur rollOut, de revenir à la position d'origine. Le problème est, quand je roule, si je roule vers la droite (où l'étiquette se cache derrière le masque), il n'enregistre pas rollOut, jusqu'à ce que je dépasse l'étiquette (this.width * 2). Comment puis-je empêcher cela, alors quand je roule sur la zone visible, même si je suis encore sur l'étiquette derrière le masque, je reçois un événement "rollOut"?

est ici la peau:

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

La meilleure façon de le faire est de créer un objet « hit » qui se trouve sur le haut de l'écran dans la peau de bouton. Vous créez l'objet "hit" aux dimensions exactes avec lesquelles vous voulez que la souris soit interactive et attachez les écouteurs d'événement à l'objet "hit".

Dans Flex Flex 4, vous pouvez utiliser <s:Group> et ne pas avoir à vous soucier de la transparence ou de la visibilité.