Flex中原始图像（线条/直角），图像和文本的闪烁

Question

我们正在构建一个可视化学习程序，并需要显示带有亮点的“问题内容”。我们正在考虑使用闪烁的文字，图元和图像。

我们不想使用计时器，因为当屏幕上还有其他计时器驱动的动画时，它会导致一些痛苦。

有关如何实现此目的的任何想法？

Answer 1

你好：] 实现闪烁效果的一种方法是创建辉光滤镜，然后为其设置alpha属性。 然后将效果设置为所需的标签。 如果你想让整个文本闪烁，那么只需要动画文本的alpha属性。下面是一些 示例代码：

<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
    <s:GlowFilter id="myGlowFilter" 
        color="#00FFAA" 
        blurX="5" 
        blurY="5" 
        quality="8" 
        /> 

    <s:AnimateFilter id="myGlowEffect" 
        bitmapFilter="{myGlowFilter}" 
        repeatCount="0" 
        repeatBehavior="reverse" 
        duration="1000" 
        > 
     <s:motionPaths> 
      <s:SimpleMotionPath property="alpha" 
           valueFrom="0" 
           valueTo="1" 
           /> 
     </s:motionPaths> 
    </s:AnimateFilter> 

    <s:Animate id="myBlinkingEffect" 
      repeatCount="0" 
      repeatBehavior="reverse" 
      target="{backgroundColorOfRect}" 
      duration="1000" 
      > 
     <s:motionPaths> 
      <s:SimpleMotionPath property="alpha" 
           valueFrom="1" 
           valueTo="0" 
           /> 
     </s:motionPaths> 
    </s:Animate> 


</fx:Declarations> 

<s:layout> 
    <s:VerticalLayout /> 
</s:layout> 

<s:Label text="How fast can a dragonfly fly?" 
     creationCompleteEffect="{myGlowEffect}" 
     fontSize="24" 
     buttonMode="true" 
     click="myFadeEffect.play()" 
     /> 

<s:Rect width="200" height="200"> 
    <s:fill> 
     <s:SolidColor id="backgroundColorOfRect" color="red" /> 
    </s:fill> 
</s:Rect> 

Answer 2

我想你应该创建一套组件与闪烁的能力，并在您的应用程序中使用它们。为了获得更好的效果，你可以使用基于帧的事件例如，对于一个闪烁的标签代码：

package 
{ 
import flash.events.Event; 

import spark.components.Label; 

[Style(name="numOfFramesPerBlink", inherit="yes", type="uint")] 
public class BlinkingLabel extends Label 
{ 
    private static const DEFAULT_NUM_OF_FRAMES_PER_BLINK:Number = 10; 

    private var _explicitVisibility:Boolean = true; 

    private var blinkingDirty:Boolean; 

    private var currentBlinkingPhaseFrames:uint; 

    private var numOfFramesPerBlinkValue:uint = DEFAULT_NUM_OF_FRAMES_PER_BLINK; 

    override public function get visible():Boolean 
    { 
     return _explicitVisibility; 
    } 

    override public function set visible(value:Boolean):void 
    { 
     super.visible = value; 
     _explicitVisibility = value; 
    } 

    private var _blinking:Boolean; 

    [Bindable] 
    public function get blinking():Boolean 
    { 
     return _blinking; 
    } 

    public function set blinking(value:Boolean):void 
    { 
     if (_blinking == value) 
      return; 
     _blinking = value; 
     blinkingDirty = true; 
     invalidateProperties(); 
    } 

    override public function styleChanged(styleProp:String):void 
    { 
     super.styleChanged(styleProp); 

     var allStyles:Boolean = styleProp == null || styleProp == "styleName"; 
     if (allStyles || styleProp == "numOfFramesPerBlink") 
     { 
      var newNumOfFramesPerBlink:uint = getStyle("numOfFramesPerBlink"); 
      if (newNumOfFramesPerBlink > 0) 
       numOfFramesPerBlinkValue = newNumOfFramesPerBlink; 
      else 
       numOfFramesPerBlinkValue = DEFAULT_NUM_OF_FRAMES_PER_BLINK 
     } 
    } 

    override protected function commitProperties():void 
    { 
     super.commitProperties(); 

     if (blinkingDirty) 
     { 
      if (_blinking) 
      { 
       addEventListener(Event.ENTER_FRAME, enterFrameHandler); 
       currentBlinkingPhaseFrames = 0; 
      } 
      else 
      { 
       removeEventListener(Event.ENTER_FRAME, enterFrameHandler); 
       setVisibleState(_explicitVisibility); 
      } 
      blinkingDirty = false; 
     } 
    } 

    private function setVisibleState(value:Boolean):void 
    { 
     super.visible = value; 
    } 

    private function enterFrameHandler(event:Event):void 
    { 
     currentBlinkingPhaseFrames++; 
     if (currentBlinkingPhaseFrames > numOfFramesPerBlinkValue) 
     { 
      setVisibleState(!super.visible); 
      currentBlinkingPhaseFrames = 0; 
     } 
    } 
} 
} 

的用法很简单：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> 
    <s:layout> 
     <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" /> 
    </s:layout> 
    <local:BlinkingLabel text="Test Label" id="blinkingLabel" numOfFramesPerBlink="{framesPerBlinkSlider.value}" /> 
    <s:CheckBox label="Blink Label" selected="@{blinkingLabel.blinking}" /> 
    <s:HSlider minimum="1" maximum="100" value="10" id="framesPerBlinkSlider" /> 
</s:Application> 

希望这有助于！