Rect、Label、および Group を備えた ButtonSkin (Flex 4 スキン) があり、Group は Rect をマスキングしています。ロールオーバーでは、ラベルの x をアニメーション化し、this.width
ロールアウトでは元の位置に戻します。問題は、ロールアウトするときに右にロールすると (ラベルがマスクの後ろに隠れている場合)、ラベル (this.width * 2) を通過するまでロールアウトが登録されないことです。どうすればそれを防ぐことができるので、可視領域からロールアウトすると、マスクの後ろのラベルの上にまだいるにもかかわらず、「ロールアウト」イベントが発生しますか?
スキンは次のとおりです。
<?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>