Flash AS3 PK AS2

1. Flash AS3 PK AS2 崇右技術學院 馬世驊老師

2. 前言 • AS3看起來像是AS2的版本升級，但是其架構卻是大大不同，初學者在學習AS3確實有一些難度。 • 但以下準備了12個理由，讓你可以義無反顧的投入AS3的領域。 Speed Test-Tweening Engine Comparison

3. 理由一 類別明確 • 在AS2時代，我們大多使用MovieClip包山包海，無論是載入圖片、繪圖、特效…等。用了一大堆MovieClip，卻只是使用該元件的局部功能，會造成資源的大量浪費。 • 在AS3裡面，將所有的功能區分成多個類別，想使用哪個功能，就啟用該功能所屬的類別即可，這樣可以節省大量的資源。

4. 理由一 類別明確 範例 AS2：movieClip.loadMovie(“demo.swf”); //MovieClip物件，載入外部的demo.swf檔 movieClip.moveTo(0,2); //MovieClip物件繪圖功能movieClipattachBitmap(myBitmapData); //MovieClip物件附加點陣圖物件 AS3：varldr:Loader=new Loader(); //Loader物件，用來載入外部的jpg、png、gif（不含動態圖檔）或是swf檔 movieClip.graphics.moveTo(0,2); //MovieClip物件的graphics屬性，其屬性值為Graphic類別，可用來繪製圖形varbitmap:Bitmap=new Bitmap(myBitmapData) //MovieClip已經不能附加點陣圖物件，取而代之的是Bitmap類別

5. 理由二 事件的統一 • 在AS2監聽事件時，可以使用「on」、「addListener」、「addEventListener」，多種不同的方法，很容易讓人搞不清楚。 • 在AS3則全部統一改成「addEventListener」來監聽特定事件。

6. 理由二 事件的統一 範例 AS2：movieClip.onRelease=function(){}; //MovieClip物件的滑鼠放開事件 Stage.addListener(listenerObject); //listenerObject物件監聽Stage類別所發出的所有事件component.addEventListener("click",onClick); function onClick(e:Object){}; //onClick監聽者監聽component組件發出的“click”事件 AS3：movieClip.addEventListener(MouseEvent.MOUSE_UP,onEventMouseUp); function onEventMouseUp(e:MouseEvent){}; //統一採用addEventListener的方式監聽

7. 理由三 更有效率的記憶體工作方式 • 在AS2中，可視物件只要被建構之後，就立即出現在場景中。 • 在AS3，可視物件被建構後，只是存放在記憶體裡，等需要出現的時候才透過DisplayObjectContainer或子系列的addChild()方法加其加入。 • 對Flash Player來說，更新Player畫面是最消耗效能的動作，因此AS3的做法可以讓動畫執行更順暢。

8. 理由三 更有效率的記憶體工作方式 範例 AS2：this.createEmptyMovieClip("movieClip",1); //建立一個實體名稱為movieClip的空白MovieClip物件 this.attachMovieClip("linkID"); //從元件庫呼叫指定的MovicClip元件，並加入在目前的時間軸裡 //一旦執行該函式，設定的物件會立即出現在場景上 AS3：varmovieClip:MovieClip=new MovieClip(); //所有類別的建構，都是透過new這個關鍵字 this.addChild(movieClip); //將movieClip物件加入到目前的可視物件容器裡

9. 理由四 物件的屬性統一 • 在AS2中的物件屬性，有的有底線，有的沒有底線。 • 在AS3中物件屬性統一取消底線。

10. 理由四 物件的屬性統一 範例 AS2：movieClip._x; //MovieClip物件的x軸屬性 movieClip._alpha; //MovieClip物件的alpha軸屬性 Stage.width; //Stage類別的寬度屬性 AS3：movieClip.x; //MovieClip物件的x軸屬性 movieClip.alpha; //MovieClip物件的alpha軸屬性 stage.stageWidth; //Stage類別的寬度屬性

11. 理由五 統一程式碼撰寫的位置 • AS2可以將程式碼寫在時間軸上、影片片段上、按鈕上，也可以寫在外部定義的類別.as檔內，這樣會讓程式碼在維護的時候相當不方便。 • AS3則規定程式碼統一只能寫在時間軸上，或是外部定義的類別.as檔內。

12. 理由五 統一程式碼撰寫的位置 範例

13. 理由六 變數的強制性宣告 • AS2可以不用var這個關鍵字來宣告，就可以直接指定變數來使用，這樣會讓人搞不清楚變數是私有變數還是公開變數。 • AS3則一定要透過var來宣告變數，另外AS3還新增了const來宣告常數。

14. 理由六 變數的強制性宣告 範例 AS2：num=3; //變數num為3 varstr:String="Stanley"; //定義字串變數str為Stanley AS3：num=3; //錯誤，因為num未定義 varnum:int=3; num=4; //因為使用var來宣告成變數，所以可以重新指定新的數值 const NUM:int=3; NUM=4; //錯誤「1049:對指定為常數的變數的指定不合法。」 //一般常數在使用上建議使用大寫字，以區別和其他變數的不同

15. 理由七 程式碼更嚴謹 • AS2在物件不存在、未經宣告、定義時，依然可以呼叫該物件的方法或屬性，不會有錯誤訊息出現。 • AS3則是會出現錯誤訊息。

16. 理由七 程式碼更嚴謹 範例 AS2：testFunction(); //呼叫一個未定義的函式，並不會產生錯誤 movieClip._x=20; //即使場景中沒有movieClip物件，也可以指定該物件的屬性，編譯器也不會產生錯誤 AS3：testFunction(); //編譯器會輸出，「呼叫可能未定義的方法testFunction」的錯誤訊息 movieClip.x=20; //編譯器會輸出，「1120：存取未定義的屬性movieClip」

17. 理由八 可使用文件檔類別 • 在AS2主時間軸本身雖然也是一個MovieClip類別，但沒有辦法方便地將它擴充成自訂的類別。 • AS3則新增了文件檔類別，讓主時間軸可以方便地擴充成自訂類別。

18. 理由八 可使用文件檔類別 範例

19. 理由九 可動態增加程式碼至指定的影格 • AS2必須在編輯環境中事先將所需要的程式碼都定義好。 • AS3則可以利用MovieClip物件的addFrameScript()方法，在動畫播放時，動態加入所需的程式碼。

20. 理由九 可動態增加程式碼至指定的影格 範例 AS3：this.addFrameScript(0,myFun0); //在目前的movieCli物件之影格1中，動態增加一個myFun0的函式。 //第一個參數0表是影格數，0為第一格，1為第二格 //第二個參數為新增的函式名 function myFun0(){ this.stop(); } //動態增加程式碼到指定的影格

21. 理由十 統一以root表示該swf檔的最上層可視物件 • AS2有_root屬性，又有_level0屬性，又可透過_lockroot屬性來改變_root的指向，不小心就會搞混。 • AS3中可視物件的root屬性，對載入的swf檔案的顯示物件而言，就是該swf檔之顯示清單樹狀結構的最上層顯示物件。 • 例如：a.swf載入b.swf及c.swf，無論在何處所加入的root屬性指的即是自己的主時間軸。

22. 理由十一 更順暢的事件流 • AS2並無事件流的機制，每當一個MovieClip或是Button被賦予onRelease等事件時，其容器下的子物件就會失去滑鼠感應功能，而收不到滑鼠事件。 • AS3則是透過事件流機制，一層一層的捕捉事件，不受其容器所影響。

23. 理由十一 更順暢的事件流 範例 AS2：movieClip.onRelease=function(){}; movieClip.childMC.onRelease=function();{} //因為movieClip被賦予了onRelease事件 //所以其容器裡的childMC就會失去本來的onRelease事件 AS3：movieClip.addEventListener(MouseEvent.CLICK,onClick); movieClip.childMC.addEventListener(MouseEvent.CLICK,onClick); //childMC不會因為上層容器監聽過事件，而蓋掉本身所要監聽的事件。

24. 理由十二 更多更炫的類別 • AS3裡面有許多超越AS2所擁有的類別，像是ByteArray，這個二進位資料類別，因為電腦只看的懂0與1兩個字元，所以只要知道其編碼格式，就可以透過該類別編出各種檔案。 • 將Flash裡面的任何畫面，輸出成BitmapData類別，再經過伺服器語言的處理，就可以產生一張實體的jpg圖檔。

25. PK完畢 更多功能要等你慢慢發掘唷！