0

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>

4

1 に答える 1

1

これを行う最も簡単な方法は、ボタン スキンのディスプレイの上部に「ヒット」オブジェクトを作成することです。マウスをインタラクティブにしたい正確な寸法に「ヒット」オブジェクトを作成し、イベントリスナーを「ヒット」オブジェクトにアタッチします。

flex flex 4 では<s:Group>、透過性や可視性について心配する必要はありません。

于 2009-11-16T15:49:04.720 に答える