如何在星火

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]}" />