使用状态过渡来触发效果

<?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/halo">
  <s:layout>
    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
  </s:layout>
  <s:states>
    <s:State name="orange" />
    <s:State name="black" />
  </s:states>
  <s:transitions>
    <s:Transition fromState="*" toState="*">//定义所有状态的Transition
      <s:Resize target="{box}" />//设置期望的过渡效果
    </s:Transition>
  </s:transitions>
  <s:HGroup>
    <s:Button label.orange="Black" label.black="Orange">
      <s:click>
        <![CDATA[
        currentState = (currentState == 'orange' ? 'black' : 'orange');//单击按钮时改变状态
        ]]>
      </s:click>
    </s:Button>
  </s:HGroup>
  <s:Rect id="box" width="200" height="200"
          width.black="150" height.black="150">
    <s:fill>
      <s:SolidColor color.black="#000000" color.orange="#de7800" />//设置每个状态下显示的颜色
    </s:fill>
  </s:Rect>
</s:Application>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

只使用ActionScript创建效果

<?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"
               applicationComplete="init()">
  <s:layout>
    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
  </s:layout>
  <fx:Script>
    <![CDATA[
      import flash.utils.Timer;
     
      import spark.effects.AnimateFilter;
      import spark.effects.animation.MotionPath;
      import spark.effects.animation.RepeatBehavior;
      import spark.effects.animation.SimpleMotionPath;
      import spark.filters.GlowFilter;
     
      [Bindable]
      protected var secondsTillDue:int = 5;
      protected var _timer:Timer;
      protected var _effect:AnimateFilter;
     
      protected function init():void{
        var filter:GlowFilter = new GlowFilter(0xde7800, 1, 20, 20);
        _effect = new AnimateFilter(box, filter);
        _effect.duration = 1000;
        _effect.repeatCount = 0;
        _effect.repeatBehavior = RepeatBehavior.REVERSE;
        _effect.motionPaths = new <MotionPath>[
                                  new SimpleMotionPath("alpha", 0, 1)];
       
        _timer = new Timer(1000); //tick every 1000ms 
        _timer.addEventListener('timer', onTimerTick);
        _timer.start();
      }
     
      protected function onTimerTick(event:TimerEvent):void{
        secondsTillDue = Math.max(secondsTillDue-1, 0);
        if(secondsTillDue == 0){
          _effect.play();
          _timer.stop();
        }
      }
    ]]>
  </fx:Script>
  <s:Label id="labelField" fontWeight="bold" fontSize="14"
           text="Due in {secondsTillDue} seconds" />
  <s:Rect id="box" width="200" height="200">
    <s:fill>
      <s:SolidColor color="black" />
    </s:fill>
  </s:Rect>
</s:Application>