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> 

希望這有助於！