0
創建動畫的皮膚我一直負責創建等效的Flex 4實施此頁上的按鈕的圖形樣式： http://h.dwighthouse.com/temp/UDOP/2011-3-25_themeDevGlowing/難度Flex 4中
也就是說，在動畫上的按鈕發光效果。我已經得到了我認爲是基於梯度的合適皮膚基礎，但我有兩個問題。
一，我不能得到任何鼠標事件來響應皮膚。我似乎無法找到有這個問題的其他人。在下面的代碼中，當鼠標懸停發生時，startAnimation永遠不會被調用，但事件顯然正在被註冊。要測試此代碼，只需將skinClass="ButtonSkin"添加到主應用程序中的按鈕聲明中，下面的代碼就是ButtonSkin.mxml文件。
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="init()"
mouseEnabled="true">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flash.events.Event;
[Bindable]
private var animatedAlpha:Number = 0.8;
private var animationDirection:Number = -1;
private function backAndForth(value:Number, max:Number, min:Number, increment:Number):Number {
value += (animationDirection * increment);
if (value < min || value > max)
{
animationDirection *= -1;
value += (animationDirection * increment * 2);
}
return value;
}
private function startAnimation(e:MouseEvent):void {
animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
systemManager.addEventListener(MouseEvent.MOUSE_OUT, endAnimation);
}
private function endAnimation(e:MouseEvent):void {
animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
systemManager.removeEventListener(MouseEvent.MOUSE_OUT, endAnimation);
}
private function init():void {
parent.mouseChildren = true; // Otherwise mouse events don't fire in the skin
clickableArea.addEventListener(MouseEvent.MOUSE_OVER, startAnimation);
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Group top="0" bottom="0" left="0" right="0" id="clickableArea">
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#000000" color.down="#bb0000" color.disabled="#3b3b3b" ratio="0" />
<s:GradientEntry color="#353535" color.down="#ff0000" color.disabled="#555555" ratio="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0" />
<s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0.4" />
<s:GradientEntry color.over="#8f1b1b" alpha="{animatedAlpha}" alpha.down="0" ratio="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
<s:stroke>
<s:SolidColorStroke color="#000000" color.disabled="#333333" weight="1" />
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" color.disabled="#9e9e9e" alpha="0.6" alpha.down="0.7" ratio="0" />
<s:GradientEntry color="#ffffff" color.disabled="#848484" alpha="0.2" alpha.down="0.4" ratio="0.45" />
<s:GradientEntry color="#ffffff" alpha="0" ratio="0.46" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" color="#ffffff" color.disabled="#aaaaaa" textAlign="center" baseline="center" paddingTop="7" paddingBottom="5" paddingLeft="10" paddingRight="10">
<s:filters>
<s:DropShadowFilter distance="0" angle="45" blurX="5" blurY="5" />
</s:filters>
</s:Label>
</s:Group>
編輯我找到了原因鼠標事件無法。該按鈕顯然默認情況下爲mouseChildren，它明確地防止事件觸發低於其自身。在構造函數中使用parent.mouseChildren = true;可修復此問題。關於問題的下一部分：連續動畫。
除此之外，我會感謝一些幫助或指出我在每幀調用函數的正確方向，以及使用鼠標事件開啓和關閉所述增量呼叫的能力。 （如果這不是Flex中的動畫，請原諒我，我對基於Flash的動畫一無所知。）謝謝！已發現