如何在星火

Question

發光濾鏡在Flex 3，你可以做一個發光效果，像這樣：

<mx:Glow id="glowImage" duration="250" 
      alphaFrom="0" alphaTo="1" 
      blurXFrom="0.0" blurXTo="3.0" 
      blurYFrom="0.0" blurYTo="3.0" strength="2" 
      color="0xcc0000" target="{this}"/> 

    <mx:Glow id="unglowImage" duration="250" 
      alphaFrom="1" alphaTo="0" 
      blurXFrom="3.0" blurXTo="0.0" 
      blurYFrom="3.0" blurYTo="0.0" strength="2" 
      color="0xaaaaaa" target="{this}"/> 

而且MXML：

<mx:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/> 

在Flex 4，我們應該使用AnimateFilter用的GlowFilter（由Adobe推薦）。下面是我想出：

<s:AnimateFilter id="glowAnimation" 
        target="{this}" 
        duration="250" 
        > 

     <s:bitmapFilter> 
      <s:GlowFilter color="#ff0000" strength="3" quality="3" /> 
     </s:bitmapFilter> 

     <s:motionPaths> 
      <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurX"/> 
      <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurY"/> 
     </s:motionPaths> 

    </s:AnimateFilter> 

而且MXML：

<mx:Image rollOverEffect="{glowAnimation}" rollOutEffect="{unglowImage}"/> 

的問題是，這個動畫一次，則效果被移除，其中作爲MX效果應用過濾器並保持它適用。

~~~ UPDATE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~
RIAStar的答案是正確的，我想補充爲什麼從這個視頻我只是偶然的原因[1]。它描述了Animate和AnimateFilter之間的區別。 AnimateFilter是暫時的。它應用過濾器，完成後將其刪除。 Animate將值永久應用於目標。

我們也應該知道，在Flex 4中不是所有的特效支持觸發器。

從AnimateInstance類：

override public function startEffect():void 
{ 
    // This override removes EffectManager.effectStarted() to avoid use of 
    // mx_internal. New effects are not currently triggerable, so 
    // this should not matter 
} 

這意味着，我們不能依靠rollOverEffect觸發綁定到它的效果。我們必須在rollOver事件中調用effect.play（）。

因此，這意味着當我們用動畫類，我們還需要改變這樣的：使用多個相關影響這是最好的做法時

<s:Image rollOver="glowImage.play()" rollOut="unglowImage.play()"/> 

注：

<s:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/> 

本調用play（）在它的連帶效應之前調用結束（）上的播放效果。

另外，請注意當使用單一效果，如在答案中，逆轉它而不是結束它像glowAnimation.play（null，true）。

<s:Image rollOver="rollOverAnimation.play()" rollOut="rollOverAnimation.play(null, true)"/> 

Answer 1

我不知道AnimateFilter，但這種方法使用簡單Animate效果應該很好地工作：

<s:Animate id="glowAnimation" target="{glow}" duration="250"> 
    <s:motionPaths> 
     <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurX"/> 
     <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurY"/> 
    </s:motionPaths> 
</s:Animate> 

<s:Image rollOver="glowAnimation.play()" 
     rollOut="glowAnimation.play(null, true)"> 

    <s:filters> 
     <s:GlowFilter id="glow" blurX="0" blurY="0" /> 
    </s:filters> 
</s:Image> 

注意，我設置的blurX和blurY初始值0。這是必要的，因爲否則會顯示默認的4只要你不翻身的圖像。

Answer 2

我使用過渡效果爲內SparkSkin切換。用於模糊光標下的皮膚項目：

<!-- states --> 
<s:states> 
    <s:State name="up" /> 
    <s:State name="over" /> 
    <s:State name="down" /> 
    <s:State name="disabled" /> 
</s:states> 

<fx:Declarations>  
    <s:BlurFilter id="aBlurFilter" blurX="0" blurY="0" blurX.over="10" blurY.over="10" quality="{BitmapFilterQuality.HIGH}" />  
</fx:Declarations> 

<s:transitions> 
    <s:Transition fromState="*" toState="over"> 

      <s:Animate id="BlurFilterTo" 
       target="{aBlurFilter}" 
       repeatCount="1" 
       duration="500" 
       repeatBehavior="reverse" 
       > 
       <s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="10"/> 
       <s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="10"/> 
      </s:Animate> 

    </s:Transition> 

    <s:Transition fromState="over" toState="*"> 

      <s:Animate id="BlurFilterFrom" 
       target="{aBlurFilter}" 
       repeatCount="1" 
       duration="500" 
       repeatBehavior="reverse" 
       > 
       <s:SimpleMotionPath property="blurX" valueFrom="10" valueTo="0"/> 
       <s:SimpleMotionPath property="blurY" valueFrom="10" valueTo="0"/> 
      </s:Animate> 

    </s:Transition> 

</s:transitions> 

<s:BitmapImage id="iconDisplay" filters="{[aBlurFilter]}" />