7Yue's Weblog

在Flex里有一个很有效的Resize类，用来控制相关Flex Controls的尺寸，基本方法使用起来也很简单：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--
  使用Resize类来处理控件变化特效；
  首先，引入mx.effects.Resize类；
  其次，创建一个resizePanel方法；
  第三，在方法中声明Resize的对象，并把目标Panel的id加载，然后使用Resize的play方法
  第四，将resizePanle方法作为click event的listener来使用。
-->
  <mx:Script>
    <![CDATA[
      import mx.effects.Resize;
      public function resizePanel():void{
        var myResize:Resize=new Resize();
        myResize.target=myPanel;
        myResize.widthBy=100;
        myResize.heightBy=100;
        myResize.play();
      }
    ]]>
  </mx:Script>
  <mx:Panel id="myPanel"/>
  <mx:Button label="Resize" click="resizePanel()"/>
</mx:Application>

看看效果：

而在Panel上附加特效则可以在Resize类上再附加Exponential类的方法：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.effects.easing.Exponential;
    ]]>
  </mx:Script>
  <mx:Parallel id="parallelEffect" target="{myPanel}">
    <mx:Resize widthBy="150" heightBy="150" easingFunction="{Exponential.easeOut}"/>
    <mx:Blur blurXTo="5" blurYTo="5"/>
  </mx:Parallel>
  <mx:Sequence id="sequenceEffect" target="{myPanel}">
    <mx:Resize widthBy="-150" heightBy="-150" easingFunction="{Exponential.easeInOut}"/>
    <mx:Blur blurXTo="0" blurYTo="0"/>
  </mx:Sequence>
  <mx:Panel id="myPanel" title="Panel" width="100" height="100"/>
  <mx:Button label="Parallel Effect" click="parallelEffect.play()"/>
  <mx:Button label="Sequence Effect" click="sequenceEffect.play()"/>
</mx:Application>

看看结果：


总结：对于Flex Framework内置的类，一定要物尽其用。很少的工作，达到很不错的结果。