1.使用自帶效果
在flex裡面不像在flash裡面随意制作動畫了，flex更趨向于應用程式，而不是動畫制作了，是以沒有了時間軸的概念。在flex中使用動畫效果，可以用flex自帶的effect，或者自已定制effect，因為很多人都想借flash裡面的一樣操作flex，比如在flash裡面做一個動态按鈕很容易，當滑鼠移動到上面時，會有很多發光的點跑出來（熒火蟲效果），這種效果在flash十分容易實作，但在flex裡面要實作這種效果就不是那麼簡單的了，下面說說在flex裡的的動務效果的使用與自定義制作。
首先介紹一下flex裡面的自帶的效果有以下幾種：
blur 模糊效果
move 移動效果
fade 淡入淡出效果
glow 發光效果
resize 調整大小效果
rotate 旋轉效果
zoom 縮放效果
wipeleft 用遮罩實作畫面收放效果，下同，分别為不同方向
wiperight
wipeup
wipedown
不同的效果所需要設定的屬性也不一樣，比如blur效果需要設定它的x與y軸的模糊像素
<mx:blur id="blur" blurxfrom="0" blurxto="10" />
而move效果需要設定移動的位置資訊
<mx:move id="moveeffect" xfrom="-100" />
其它設定可以參考flex語言參考
下面說說如何使用這些效果。要運作這些效果有兩種方法：一種是調用該效果的play()方法，另外一種是使用觸發器來觸發效果。
（1）使用play()方法：
以下代碼：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:script>
4 <![cdata[
5 private function onclick(event:event):void {
6 be.target = event.currenttarget;
7 be.play( );
8 }
9 ]]>
10 </mx:script>
11
12 <mx:blur id="be" blurxto="50" bluryto="50" duration="1000" />
13
14 <mx:panel id="p" width="200" height="180" click="onclick(event)" />
15 </mx:application>
在代碼中看到，要使用效果，先定好一個效果，如上面的<mx:blur ...>該标簽就是模糊效果的mxml标簽，定好效果後在panel的點選事件裡再對該效果進行一些設定，如be.target = event.currenttarget 設定該效果将要應用到的目标元件(component)，之後再調用play()方法後，該效果就會應用在panel上面播放！
（2）使用觸發器播放效果：
使用觸發器播放效果的話，可以不用寫actionscript代碼，直接在元件的效果觸發器上指明使用哪個效果就可以了，比較簡單明了，但就不能進行更多的屬性定制，而用as控制播放的話，可以對效果進行很多的設定再相應根據情況播放，先看看觸發器播放的代碼：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4 <mx:blur id="be" blurxto="50" bluryto="50" duration="2000" />
5
6 <mx:panel id="p" width="200" height="180" creationcompleteeffect="{be}" />
7 </mx:application>
看以上代碼，先寫好了blur的效果并設定好屬性後，duration="2000"這個是播放的時間以毫秒為機關。
在panel标簽裡有這樣一句：creationcompleteeffect="{be}" 這個就是觸發器，是該panel元件的效果觸發器，當panel元件加載完成時，會由系統自動調用該效果觸發器，觸發器裡面指了觸發 be 這個blur效果
在flex裡面還有很多觸發器如：
addedeffect 被添加進容器時觸發效果
removedeffect 被從容器中移除時觸發效果
creationcompleteeffect 被建立成功時觸發效果
focusineffect 獲得焦點時觸發
focusouteffect 失去焦點時觸發
hideeffect 被隐藏時(visible=false)觸發
showeffect 被顯示時(visible=true)觸發
rollovereffect 滑鼠經過時觸發
rollouteffect 滑鼠離開時觸發
mousedowneffect 滑鼠按下時觸發
mouseupeffect 滑鼠松開時觸發
moveeffect 被移動時觸發
resizeeffect 被重整大小時觸發
注意：這些都是效果觸發器，不要與事件觸發器混亂了。事件觸發器是rollover，事件觸發器與效果觸發器差不多，事件觸發器是當使用者執行相就操作時觸發事件，将會調用自定的事件觸發處理函數，而效果觸發器是執行相應操作時被觸發并由系統自動調用所定的效果的play()方法。
現在說說效果的一些其它屬性：
每個效果都有reverse( );方法，該方法是反向播放，原本由小到大的變化，而調用reverse( );後再運作play()的話，效果将會從大到小進行播放。
但要注意的一點是，reverse( );不會自動播放，即是單單調用reverse( );的話，效果并不會播放，他隻會記錄該效果為倒轉，而要再調用play()後倒轉效果才會開始播放。而調用pause( )與resume( )就是暫停與繼續播放效果
startdelay這個屬性是設定效果的播放延時，以毫秒為機關，即要等待多少毫秒後效果才開始播放，如：
<mx:blur id="be" blurxto="50" startdelay="3000" />
該模糊效果将會在調用play()之後3秒才開始播放
repeatcount這個屬性是設定效果的重複次數，預設為1，設定為0的話就是不停循環播放
<mx:blur id="be" blurxto="50" startdelay="3000" repeatcount="5" />
每個效果都有兩個事件：effectstart 與 effectend
你可以在該效果事件的處理函數裡面對效果作相應的操作，如：
5 import mx.events.effectevent;
6 public function oneffend(e:effectevent):void{
7 e.effectinstance.reverse();
8 e.effectinstance.play();
9 }
10 ]]>
11 </mx:script>
12 <mx:blur id="be" blurxto="50" bluryto="50" duration="2000" />
14 <mx:panel id="p" width="200" height="180" creationcompleteeffect="{be}" effectend="oneffend(event)" />
當效果播放完時，系統将會自動觸發effectend事件，在處理函數裡面，将該效果instance即現時播放的效果執行個體進行倒轉并播放，當播放完，又會觸發effectend事伯，這樣一直循環！
現在再來說說效果的組合：
通常如果你覺得隻應用一個效果很單調的話，可以進行效果組合應用，即多個效果同時播放或者順序播放，
如，當加載頁面時，你想panel先模糊到一定程度，再将panel移動到某個位置，再把panel還原成原來的清淅度（即消退模糊）。這樣分析一下，一共用了三個效果，一，先應用blur（由清至模）效果，當blur完成時，再應用move效果，當move完成時，再應用另外一個blur（由模至清）效果。這樣三個效果組合就是按順序組合，先後運作。
看看代碼：
3
4 <mx:sequence id="sequenceeffect">
5 <mx:blur id="beout" blurxto="50" bluryto="50" duration="500" />
6 <mx:move id="mv" xto="200" yto="150" duration="500" />
7 <mx:blur id="bein" blurxfrom="50" bluryfrom="50" blurxto="0" bluryto="0" duration="500" />
8 </mx:sequence>
9
10 <mx:panel id="p" width="200" height="180" mousedowneffect="sequenceeffect" />
11 </mx:application>
看以上代碼，<mx:sequence id="sequenceeffect">标簽就是順序組合效果标簽，當應用sequenceeffect效果的時候，它會按順序播放該标簽裡面的三個子效果。
另外的就是同時播放了，
1 <mx:parallel id="paralleleffect">
2 <mx:blur id="beout" blurxto="50" bluryto="50" duration="500" />
3 <mx:move id="mv" xto="200" yto="150" duration="500" />
4 </mx:parallel>
這個标簽就是同時播放的效果标簽，放在它裡面的子效果都會同時播放，即一邊模糊一邊移動。這個都可以自由組合，<mx:parallel>與<mx:sequence>标簽都可以自由組合，例如先按順序先播放模糊，再同時播放移動與隐藏等。這裡就不多說了。
使用flex自帶的效果基本用法就這些，下篇文章将讨論自定義效果的制作，下篇将會詳細說說這篇文章上面說到的 effectinstance 即執行個體與工廠的概念。
2.自己制作flex動畫
上面講到了使用flex系統裡面自帶的一些動來效果的使用，但很多開發者都并不滿足flex裡提供的簡單的漸變大小，透明，移動，遮罩等的效果，如果是flash的開發者的話，更不用說了，在flash，多數人都是随意的制作一些動畫效果等，而且形态多變。但是不是flex裡就不能實作呢？肯定不是，在flex裡也可以自定義動畫效果，隻不過就是沒有flash裡面那麼簡單随意了。不過熟悉了之後，也會覺得在flex裡制作動畫也不是什麼難事，不多說了，轉入正題！
在這裡我先介紹一下flex裡面的動畫效果機制，在flex裡面要使用動畫效果的話，先要建立一個效果标簽，之後在元件裡（如textinput）寫上效果觸發器，但可能會有人問，如果程式裡我就隻定義一個移動效果
<mx:move>，之後我程式裡面有5個元件，每個元件的動畫效果都指向這個move效果，那麼它是不是元件一運作了效果後，元件二再觸發效果，是不是元件一的效果會消失才會到元件二裡播放？其它不是，雖然我們隻定義了一個move，但我們定義的隻是move效果的工廠，這裡就用到了設計模式中的“工廠方法”模式，其實5個元件都可以同時運作效果，而5個效果都是不同的一個執行個體，彼此獨立。所謂工廠方法模式，就好比是一家衣服制造工廠，a走進這家工廠說要一件衣服，工廠就制作一件合适a的size的衣服，b進去，就會生産合适b的衣服，但a與b的衣服都是一樣的。就好等于面向對象中的類與對象的關系一樣。（我可能說多了-_-）
效果運作的時候，其實運作的不是move這個對象，而是moveinstance這個對象，move隻是工廠，既然一個動畫效果就主要分這兩大部份，我們就先建造一個工廠吧！
在flex裡面所有的效果的工廠都是繼承自 mx.effects.effect 這個類，我們也不能搞特殊，我們自定義的效果也要繼承那個類，先看以下整個工廠類的代碼：
1 package com.jiangzone.flex.effects {
2 import mx.effects.effect;
3 import mx.effects.ieffectinstance;
4
5 public class myeffect extends effect {
6 private var _color:number = 0xff0000;
7
8 public function set color(value:number):void {
9 _color = value;
10 }
11
12 public function myeffect(newtarget:object = null) {
13 super(newtarget);
14 instanceclass = myeffectinstance;
15 }
16
17 override public function getaffectedproperties( ):array {
18 return [];
19 }
20
21 override protected function initinstance(instance:ieffectinstance):void {
22 super.initinstance(instance);
23 myeffectinstance(instance).color = _color;
24 }
25 }
26 }
大家看看上面的代碼，其中先看構造函數，構造函數要接收一個預設為空的object對象
public function myeffect(newtarget:object = null)
之後在該構造函數裡面調用父類的構造函數，并且将instanceclass這個屬性設定為你的該效果的執行個體類，因為這個類是工廠類，是以要知道你這個工廠生産什麼産品，即上面說的“衣服”，是以這裡我們将其命名為myeffectinstance，注意：在flex中的所有效果執行個體類都是在工廠類後面加instance，也不是一定，隻是規範而已。還有注意，下面一會定義的執行個體類的類名一定要跟這裡的一緻。
大家還會看到，上面的代碼中，複寫（override）了二個方法：getaffectedproperties( )與initinstance(instance:ieffectinstance)
這兩個方法都是要複寫的，先說說getaffectedproperties( )這個方法，這個方法是擷取被改變的屬性值，怎麼說呢，比如說，你做的動畫效果如果要用到元件對象的一些屬性的話，就要傳回這些屬性的名字，如：你的效果是對元件做旋轉的話，則：
1 override public function getaffectedproperties( ):array {
2 return ["rotation"];
3 }
反正你做的效果需要對元件修改什麼屬性的話，都在這個方法裡傳回名字，修改多個屬性的話就往數組裡加就是了。
後面就是這個方法了initinstance，該方法接收一個instance:effectinstance參數，也就是效果執行個體類啦，因為每個效果執行個體類都要繼承effectinstance類，是以這個方法裡的參數寫的是父類，在裡面要做其它的話，需要将 instance 轉換為你相應的效果類。在這個方法裡面，也是要調用父類的同名方法：super.initinstance(instance);
基本上，一個工廠類就寫好了，但這樣隻是最簡單的寫法，試想想，每個人穿衣服的size不同，喜歡的顔色也不同，是以，是不是可以由使用者來定義他們想要的效果的顔色等屬性呢？當然，你對衣服有什麼要求，都是向工廠提出的，沒有人會對衣服說吧？是以，這些可設定的屬性也是定義在工廠類裡面，是以下面，我們為該衣服可定制顔色為例，在工廠類裡面加入如下代碼：
1 private var _color:number = 0xff0000;
2 public function set color(value:number):void {
3 _color = value;
4 }
你想運作時的效果可以設定不同的顔色的話，就可以直接設定myeffect的color屬性，之後将這個屬性傳給效果執行個體類：
1 override protected function initinstance(instance:effectinstance):void {
2 super.initinstance(instance);
3 myeffectinstance(instance).color = _color;
這些對效果執行個體類的設定，都是要定在initinstance方法裡了，你想對運作時的效果設定什麼屬性的話，都要先告訴工廠類，之後工廠類在這個方法裡面轉嫁給執行個體類，這樣，同一個效果，可以運作不同的顔色。但前提是你後面要寫的執行個體類要有color這個屬性。
現在已做好了工廠類了，下面要做效果執行個體類了，先貼出完整代碼：
2 import mx.effects.effectinstance;
3 import flash.display.shape;
4 import flash.events.event;
5
6 public class myeffectinstance extends effectinstance {
8 private var _color:number;
9 private var shape:shape;
10
11 public function set color(value:number):void {
12 _color = value;
13 }
14
15 public function myeffectinstance(newtarget:object) {
16 super(newtarget);
17 }
18
19 override public function play( ):void {
20 super.play( );
21 drawshape();
22 }
23
24 private function drawshape():void{
25 shape = new shape();
26 shape.graphics.beginfill(_color);
27 shape.graphics.drawrect(target.width * -0.5,target.height * -0.5,target.width,target.height);
28 shape.graphics.endfill();
29 shape.x = target.x + target.width * 0.5;
30 shape.y = target.y + target.height * 0.5;
31 target.parent.rawchildren.addchild(shape);
32 target.addeventlistener(event.enter_frame,onenterframe);
33 }
34
35 private function onenterframe(e:event):void{
36 shape.scalex += 0.1;
37 shape.scaley += 0.1;
38 shape.alpha -= 0.05;
39 if(shape.alpha <= 0){
40 target.parent.rawchildren.removechild(shape);
41 target.removeeventlistener(event.enter_frame,onenterframe);
42 }
43 }
44 }
45 }
我們看到，每一個動畫效果執行個體類，都要繼承自effectinstance這個類，構造函數也是需要接收一個object，這個object其實就是你要應用到的元件對象，這個會是系統自動傳遞的，接收了object後還要用該object 調用父類的構造函數：super(newtarget);
之後還有一件必做的事，就是重寫play()這個方法：override public function play( ):void
是不是對play()很熟悉？因為第一篇文章中，就用到這個方法來發動效果的播放的，是以，你需要做的動畫程式設計都是在這個方法裡。但還是要先調用父類的同名方法，super.play();之後的，就是你想怎麼畫就怎麼畫啦。我将畫一個與要應用效果的元件一樣大小的矩型，之後該矩形會放大并透明，效果都寫在drawshape()方法裡了。看到這個方法裡面的代碼，是不是跟flash裡的一樣了？
這裡再貼上mxml代碼：
2 <mx:application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"
3 xmlns:pf="com.jiangzone.flex.effects.*">
4 <pf:myeffect id="myeffect" color="0xffffff" />
5 <mx:vbox x="100" y="43">
6 <mx:textinput focusineffect="{myeffect}" />
7 <mx:textinput focusineffect="{myeffect}" />
8 <mx:textinput focusineffect="{myeffect}" />
9 <mx:textinput focusineffect="{myeffect}" />
10 </mx:vbox>
在這裡，我用了enter_frame的寫法，但是如果不用enter_frame方式制作動畫的話，還有另外一種方法的，那就是tween了，tween是以“時間”為準，而enter_frame是以“幀”為準，其實到這裡，一個基本的flex自定義動畫效果就完成了，但擴充一下的，還可以用tween來實作，而且建議用tween來寫動畫效果，易控制，清淅一點。用tween實作的話，效果與寫法都是差不多的，要用tween就要将效果執行個體類繼承自tweeneffectinstance這個類，并重寫它的ontweenupdate( )方法與ontweenend( )方法，這種tween效果的寫法，将會比enter_frame的寫法友善，因為它根據的是時間，是以，你可以指定效果播放的時間，并且當播放完畢會自動調用ontweenend()方法，你可以在該方法裡寫一些處理操作，如釋放資源等等
由于編幅關系，就不在這裡詳細介紹tweeneffectinstence了，就簡單貼出該類的寫法與注釋吧：
2 import mx.effects.effectclasses.tweeneffectinstance;
5 import mx.effects.tween;
6
7 public class myeffectinstance extends tweeneffectinstance {
8
9 private var _color:number;
10 private var shape:shape;
11
12 public function set color(value:number):void {
13 _color = value;
14 }
15
16 //構造函數
17 public function myeffectinstance(newtarget:object) {
18 super(newtarget);
21 //同樣的要重寫play()方法與調用父類同名方法
22 override public function play( ):void {
23 super.play();
24 drawshape(); //先建立一個矩形
25 /*注意：用tween效果寫法的話，就一定要建立一個tween對象
26 第一個參數是偵聽器，即偵聽update與end的，這兩個方法都在這個類裡，
27 是以這裡就寫this,第二和第三個參數都是一個數組
28 第二個參數是初始值數組，第三個是結果值數組，都要一一對應，第四個是變化時間
29 這裡的是[1,1]分别是初始時的scale比例與alpha，[3,0]就是最終結果數值
30 系統會自動在1000毫秒裡平分這些值來得到漸變效果
31 并将每一次數值的改變時調用update方法，結束後調用end方法
32 你也可以将時間的參數釋出到工廠類屬性裡，可以友善設定播放時間，像flex自帶效果一樣
33 */
34 new tween(this,[1,1],[3,0],1000);
35 }
36
37 override public function ontweenupdate(value:object):void{
38 //這裡将改變的數值應用到元件對象中。注意：也要與上面的數值數組相對應。
39 shape.scalex = number(value[0]);
40 shape.scaley = number(value[0]);
41 shape.alpha = number(value[1]);
42 }
43
44 override public function ontweenend(value:object):void {
45 //當播放完時會自動調用該方法，這裡就做删除該矩形的操作吧
46 target.parent.rawchildren.removechild(shape);
47 }
48
49 private function drawshape():void{
50 shape = new shape();
51 shape.graphics.beginfill(_color);
52 shape.graphics.drawrect(target.width * -0.5,target.height * -0.5,target.width,target.height);
53 shape.graphics.endfill();
54 shape.x = target.x + target.width * 0.5;
55 shape.y = target.y + target.height * 0.5;
56 target.parent.rawchildren.addchild(shape);
57 }
58 }
59 }
就寫到這裡吧，關于tween其它的，就留作為作業，讓大家思考與探索吧！之後如果有時間的話，将會寫完下篇文章介紹flex的“變面”動畫，即狀态變換！這裡先謝謝大家支援！
3.flex的transitions
這篇文章是flex動畫效果變換的最後一編了，這篇将會講述flex中的“變面”（我自已的了解）技術，即是transitions！
如果看過flex sdk裡面的自帶的例子程式，有一個叫“flex store”的應用，在裡面的手機清單中看某一個手機的詳細時，就是這種效果，不多說，這篇會比較簡單.
看看代碼再解析：
2 <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="695" height="555">
3 <mx:states>
4 <mx:state name="a">
5 <mx:setproperty target="{windowa}" name="width" value="500"/>
6 <mx:setproperty target="{windowa}" name="height" value="300"/>
7 <mx:setproperty target="{windowc}" name="width" value="150"/>
8 <mx:setproperty target="{windowc}" name="height" value="150"/>
9 <mx:setproperty target="{windowc}" name="y" value="333"/>
10 <mx:setproperty target="{windowd}" name="x" value="373"/>
11 <mx:setproperty target="{windowd}" name="width" value="150"/>
12 <mx:setproperty target="{windowd}" name="height" value="150"/>
13 <mx:setproperty target="{windowd}" name="y" value="333"/>
14 <mx:setproperty target="{windowb}" name="x" value="23"/>
15 <mx:setproperty target="{windowb}" name="y" value="333"/>
16 <mx:setproperty target="{windowb}" name="width" value="150"/>
17 <mx:setproperty target="{windowb}" name="height" value="150"/>
18 <mx:setproperty target="{windowc}" name="x" value="200"/>
19 </mx:state>
20 <mx:state name="b">
21 <mx:setproperty target="{windowd}" name="width" value="150"/>
22 <mx:setproperty target="{windowd}" name="height" value="150"/>
23 <mx:setproperty target="{windowc}" name="width" value="150"/>
24 <mx:setproperty target="{windowc}" name="height" value="150"/>
25 <mx:setproperty target="{windowa}" name="width" value="150"/>
26 <mx:setproperty target="{windowa}" name="height" value="150"/>
27 <mx:setproperty target="{windowb}" name="width" value="500"/>
28 <mx:setproperty target="{windowb}" name="height" value="300"/>
29 <mx:setproperty target="{windowa}" name="y" value="333"/>
30 <mx:setproperty target="{windowc}" name="x" value="200"/>
31 <mx:setproperty target="{windowc}" name="y" value="333"/>
32 <mx:setproperty target="{windowb}" name="x" value="23"/>
33 <mx:setproperty target="{windowd}" name="x" value="373"/>
34 <mx:setproperty target="{windowd}" name="y" value="333"/>
35 </mx:state>
36 <mx:state name="c">
37 <mx:setproperty target="{windowd}" name="width" value="150"/>
38 <mx:setproperty target="{windowd}" name="height" value="150"/>
39 <mx:setproperty target="{windowb}" name="width" value="150"/>
40 <mx:setproperty target="{windowb}" name="height" value="150"/>
41 <mx:setproperty target="{windowa}" name="width" value="150"/>
42 <mx:setproperty target="{windowa}" name="height" value="150"/>
43 <mx:setproperty target="{windowc}" name="width" value="500"/>
44 <mx:setproperty target="{windowc}" name="height" value="300"/>
45 <mx:setproperty target="{windowa}" name="y" value="333"/>
46 <mx:setproperty target="{windowb}" name="x" value="200"/>
47 <mx:setproperty target="{windowb}" name="y" value="333"/>
48 <mx:setproperty target="{windowc}" name="x" value="23"/>
49 <mx:setproperty target="{windowc}" name="y" value="19"/>
50 <mx:setproperty target="{windowd}" name="x" value="373"/>
51 <mx:setproperty target="{windowd}" name="y" value="333"/>
52 </mx:state>
53 <mx:state name="d">
54 <mx:setproperty target="{windowc}" name="width" value="150"/>
55 <mx:setproperty target="{windowc}" name="height" value="150"/>
56 <mx:setproperty target="{windowb}" name="width" value="150"/>
57 <mx:setproperty target="{windowb}" name="height" value="150"/>
58 <mx:setproperty target="{windowa}" name="width" value="150"/>
59 <mx:setproperty target="{windowa}" name="height" value="150"/>
60 <mx:setproperty target="{windowd}" name="width" value="500"/>
61 <mx:setproperty target="{windowd}" name="height" value="300"/>
62 <mx:setproperty target="{windowa}" name="y" value="333"/>
63 <mx:setproperty target="{windowb}" name="x" value="200"/>
64 <mx:setproperty target="{windowb}" name="y" value="333"/>
65 <mx:setproperty target="{windowd}" name="x" value="23"/>
66 <mx:setproperty target="{windowd}" name="y" value="19"/>
67 <mx:setproperty target="{windowc}" name="x" value="373"/>
68 <mx:setproperty target="{windowc}" name="y" value="333"/>
69 </mx:state>
70 </mx:states>
71 <mx:transitions>
72 <mx:transition fromstate="*" tostate="*">
73 <mx:parallel targets="{[windowa, windowb, windowc, windowd]}">
74 <mx:move />
75 <mx:resize />
76 </mx:parallel>
77 </mx:transition>
78 </mx:transitions>
79 <mx:titlewindow x="23" y="19" width="250" height="200" layout="absolute" title="a" id="windowa" click="currentstate='a'" />
80 <mx:titlewindow x="309" y="19" width="250" height="200" layout="absolute" title="b" id="windowb" click="currentstate='b'" />
81 <mx:titlewindow x="23" y="260" width="250" height="200" layout="absolute" title="c" id="windowc" click="currentstate='c'" />
82 <mx:titlewindow x="309" y="260" width="250" height="200" layout="absolute" title="d" id="windowd" click="currentstate='d'" />
83 </mx:application>
代碼會比較多，我們先看看<mx:states>标簽，它是一個集合，就是你的程式有多少個狀态，什麼是狀态呢？我自已了解就即是有多少個“面譜”，即是現在程式裡面有四個顯示界面狀态，是以裡面有四個<mx:state>标簽，每個<mx:state>狀态都需要有一個名字name屬性，以區分是哪個界面狀态，在每個狀态裡面都有很多<mx:setproperty>的标簽，看英文都知道了，該标簽用于設定這個狀态下的所有界面元素的屬性（元件的屬性），因為每個界面狀态中各個元件的大小布局都不同，是以在狀态标簽裡就要預先設定好該狀态下的元件的位置與大小，那個target="{windowc}"屬性就是設定你要設定的哪個元件的名字拉，name="height"就是你要設定的屬性value="333"就是你要設定該屬性的值，我們細心看看的話，可能會發現，每個狀态裡面設定的屬性，都是width,height,x,y這四個屬性，我們看看上面的最終效果就知道無論切換哪個狀态，元件間的變換來來去去都是移動位置與大小改變，就是說當你變換狀态時，需要改動哪些屬性的，就将它的目标值設定在<mx:setproperty>标簽裡。再看看下面的<mx:transitions>标簽，這個也是個集合，裡面放着不同的變換方法<mx:transition>，我們來看看變換标簽的代碼：
1 <mx:transition fromstate="*" tostate="*">
2 <mx:parallel targets="{[windowa, windowb, windowc, windowd]}">
3 <mx:move />
4 <mx:resize />
5 </mx:parallel>
6 </mx:transition>
formstate與tostate屬性是要設定該狀态變換是怎樣觸發的，裡面要填上狀态的名字，<mx:state name="c"> c就是狀态的名字，即是如果你formstate="a",tostate="c"的話，隻有從a狀态切換到c狀态時，才會産生以上的變換動畫效果，如果不附合該規則如a切換到b狀态的話，則隻會按狀态的屬性設定值來直接生成視圖，而沒有動畫漸變效果了。如果填上“*”的話，就是無論是哪個狀态切換到哪個，都會運作動畫效果，至于變換期間用到哪種動畫效果來進行漸變，就在它的下級标簽裡定義了，這裡它用到了<mx:parallel>并列播放移動與重整大小的動畫效果，之前文章講過，這裡不多說了。基本上，一個變換就做好了，但我們還需要觸發它，也就是去改變程式目前的顯示狀态：click="currentstate='a'" 在每個元件的click事件裡，改變程式的currentstate值，就是改變程式的目前顯示狀态！之後動畫效果就會觸發了！
遲點有時間，再做一個3d的動畫效果，将會用到pv3d的架構，再整理一個代碼與教程也貼出來跟大家分享吧，不過不知道大家對pv3d這個東東熟悉不，不熟悉的話，可能看得痛苦點，至于pv3d方面的教程，我也看看抽點時間寫寫吧！先謝過大家的支援！
![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)