AS3PKAS2

Download Report

Transcript AS3PKAS2 

Flash AS3 PK AS2
崇右技術學院 馬世驊老師
前言
• AS3看起來像是AS2的版本升級，但是其架構卻是大大不
同，初學者在學習AS3確實有一些難度。
• 但以下準備了12個理由，讓你可以義無反顧的投入AS3的
領域。
Speed Test-Tweening Engine Comparison
理由一 類別明確
• 在AS2時代，我們大多使用MovieClip包山包海，無論是
載入圖片、繪圖、特效…等。用了一大堆MovieClip，卻
只是使用該元件的局部功能，會造成資源的大量浪費。
• 在AS3裡面，將所有的功能區分成多個類別，想使用哪個
功能，就啟用該功能所屬的類別即可，這樣可以節省大量
的資源。
理由一 類別明確 範例
AS2：
AS3：
movieClip.loadMovie(“demo.swf”);
var ldr:Loader=new Loader();
//MovieClip物件，載入外部的demo.swf檔
//Loader物件，用來載入外部的jpg、png、gif
movieClip.moveTo(0,2);
（不含動態圖檔）或是swf檔
//MovieClip物件繪圖功能
movieClip.graphics.moveTo(0,2);
movieClipattachBitmap(myBitmapData);
//MovieClip物件的graphics屬性，其屬性值為
//MovieClip物件附加點陣圖物件
Graphic類別，可用來繪製圖形
var bitmap:Bitmap=new
Bitmap(myBitmapData)
//MovieClip已經不能附加點陣圖物件，取而代之
的是Bitmap類別
理由二 事件的統一
• 在AS2監聽事件時，可以使用「on」、「addListener」、
「addEventListener」，多種不同的方法，很容易讓人搞
不清楚。
• 在AS3則全部統一改成「addEventListener」來監聽特定
事件。
理由二 事件的統一 範例
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的方式監聽
理由三 更有效率的記憶體工作方式
• 在AS2中，可視物件只要被建構之後，就立即出現在場景
中。
• 在AS3，可視物件被建構後，只是存放在記憶體裡，等需
要出現的時候才透過DisplayObjectContainer或子系列的
addChild()方法加其加入。
• 對Flash Player來說，更新Player畫面是最消耗效能的動
作，因此AS3的做法可以讓動畫執行更順暢。
理由三 更有效率的記憶體工作方式 範例
AS2：
this.createEmptyMovieClip("movieClip",1);
//建立一個實體名稱為movieClip的空白MovieClip物件
this.attachMovieClip("linkID");
//從元件庫呼叫指定的MovicClip元件，並加入在目前的時間軸裡
//一旦執行該函式，設定的物件會立即出現在場景上
AS3：
var movieClip:MovieClip=new MovieClip();
//所有類別的建構，都是透過new這個關鍵字
this.addChild(movieClip);
//將movieClip物件加入到目前的可視物件容器裡
理由四 物件的屬性統一
• 在AS2中的物件屬性，有的有底線，有的沒有底線。
• 在AS3中物件屬性統一取消底線。
理由四 物件的屬性統一 範例
AS2：
AS3：
movieClip._x;
movieClip.x;
//MovieClip物件的x軸屬性
//MovieClip物件的x軸屬性
movieClip._alpha;
movieClip.alpha;
//MovieClip物件的alpha軸屬性
//MovieClip物件的alpha軸屬性
Stage.width;
stage.stageWidth;
//Stage類別的寬度屬性
//Stage類別的寬度屬性
理由五 統一程式碼撰寫的位置
• AS2可以將程式碼寫在時間軸上、影片片段上、按鈕上，
也可以寫在外部定義的類別.as檔內，這樣會讓程式碼在
維護的時候相當不方便。
• AS3則規定程式碼統一只能寫在時間軸上，或是外部定義
的類別.as檔內。
理由五 統一程式碼撰寫的位置 範例
理由六 變數的強制性宣告
• AS2可以不用var這個關鍵字來宣告，就可以直接指定變
數來使用，這樣會讓人搞不清楚變數是私有變數還是公開
變數。
• AS3則一定要透過var來宣告變數，另外AS3還新增了
const來宣告常數。
理由六 變數的強制性宣告 範例
AS2：
AS3：
num=3;
num=3;
//變數num為3
//錯誤，因為num未定義
var str:String="Stanley";
var num:int=3;
//定義字串變數str為Stanley
num=4;
//因為使用var來宣告成變數，所以可以重新指定新的數值
const NUM:int=3;
NUM=4;
//錯誤「1049:對指定為常數的變數的指定不合法。」
//一般常數在使用上建議使用大寫字，以區別和其他變數的不同
理由七 程式碼更嚴謹
• AS2在物件不存在、未經宣告、定義時，依然可以呼叫該
物件的方法或屬性，不會有錯誤訊息出現。
• AS3則是會出現錯誤訊息。
理由七 程式碼更嚴謹 範例
AS2：
AS3：
testFunction();
testFunction();
//呼叫一個未定義的函式，並不會產生錯誤
//編譯器會輸出，「呼叫可能未定義的方法
movieClip._x=20;
testFunction」的錯誤訊息
//即使場景中沒有movieClip物件，也可以指
movieClip.x=20;
定該物件的屬性，編譯器也不會產生錯誤
//編譯器會輸出，「1120：存取未定義的屬性
movieClip」
理由八 可使用文件檔類別
• 在AS2主時間軸本身雖然也是一個MovieClip類別，但沒
有辦法方便地將它擴充成自訂的類別。
• AS3則新增了文件檔類別，讓主時間軸可以方便地擴充成
自訂類別。
理由八 可使用文件檔類別 範例
理由九 可動態增加程式碼至指定的影格
• AS2必須在編輯環境中事先將所需要的程式碼都定義好。
• AS3則可以利用MovieClip物件的addFrameScript()方法，
在動畫播放時，動態加入所需的程式碼。
理由九 可動態增加程式碼至指定的影格 範例
AS3：
this.addFrameScript(0,myFun0);
//在目前的movieCli物件之影格1中，動態增加一個myFun0的函式。
//第一個參數0表是影格數，0為第一格，1為第二格
//第二個參數為新增的函式名
function myFun0(){
this.stop();
}
//動態增加程式碼到指定的影格
理由十 統一以root表示該swf檔的最上層可視物件
• AS2有_root屬性，又有_level0屬性，又可透過_lockroot
屬性來改變_root的指向，不小心就會搞混。
• AS3中可視物件的root屬性，對載入的swf檔案的顯示物
件而言，就是該swf檔之顯示清單樹狀結構的最上層顯示
物件。
• 例如：a.swf載入b.swf及c.swf，無論在何處所加入的root
屬性指的即是自己的主時間軸。
理由十一 更順暢的事件流
• AS2並無事件流的機制，每當一個MovieClip或是Button
被賦予onRelease等事件時，其容器下的子物件就會失去
滑鼠感應功能，而收不到滑鼠事件。
• AS3則是透過事件流機制，一層一層的捕捉事件，不受其
容器所影響。
理由十一 更順暢的事件流 範例
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不會因為上層容器監聽過事件，而蓋掉本身所要監聽的事件。
理由十二 更多更炫的類別
• AS3裡面有許多超越AS2所擁有的類別，像是ByteArray，
這個二進位資料類別，因為電腦只看的懂0與1兩個字元，
所以只要知道其編碼格式，就可以透過該類別編出各種檔
案。
• 將Flash裡面的任何畫面，輸出成BitmapData類別，再經
過伺服器語言的處理，就可以產生一張實體的jpg圖檔。
PK完畢
更多功能要等你慢慢發掘唷！