探索Flash Professional Actionscript 3.0 Preview
??????聲明：本教程英文版源自Adobe的：http://www.adobe.com/devnet/flash/articles/flash9_as3_preview.html原作者：Jen deHaan和Peter deHaan,本站對其進行了翻譯整理，此教程轉載請注明出處．并標有活動鏈接，謝謝合作．
??????Adobe Flash Professional 9 ActionScript 3.0 Preview(以下簡稱AS3.0預覽版)是下一個將要發布的flash 創作工具的預覽。眾所周知它的名字是”Blaze”,它擴展了Flash Professional 8 并包括了一系列特性將與Flash9 一同發布，計劃將在2007年發布。
????這個預覽版本包括支持Actionscript 3.0,它的優勢在于包含在flash player 9 中的一個新的虛擬機(AVM)，這個增強的虛擬機要比傳統的Actionscript 代碼的執行速度快上10倍，如果你想獲得更多的關于flash player 9的信息，請查看Flash Player Product page
?????? Flash9預覽版允許你編譯包含或導入到Fla中的Actionscript3.0 腳本，貼加在幀上或是與庫元件關聯的腳本在編譯過程加入與場景內容的交互。
????這篇文章是通過使用Flash的繪制工具創建一個新的形體來展開的，當你學完了如果讓形體與按鈕和鼠標交互移動，你會明白如果將actionscript從主時間軸上移到外部文件，怎樣與庫中的元件或是Flash文檔自身鏈接。
????要完成此文章你需要Flash Professional 9 Actionscript 3.0 和范例文件
在FLASH中編寫Actionscript 3.0
??????Flash9 預覽版只是一個開發環境，它允許你創建Flash文檔(FLA)并使用Actionscript 3.0,當然你也可以使用Flex Builder 2來編譯As3.0.
Flash9預覽版能讓你創建基于時間線的Actionscript3.0文檔，并可以使用其它的一些特性，如形變和運動緩動，flash.display.MorphShape類，abobe.utils package,static text fields,scenes,和庫。
Flash9 預覽版包括下面幾個新特性:
1.Document class:
Flash9引入了document class的概念，定義為與你的swf文件的主時間線關聯的類。當你初始化主時間線時，document class就已經被構造了。你可以文件的屬性面板或Actionscript 3.0發布設置面板上設置document class,如：File>Publish Settings > Flash tab > Settings button
如下圖：
2.Symbol-class linkage: (元件-類鏈接)
在ActionScript 3.0中你不再需要鏈接id了，取而代之的是，你可以為你能直接實例化或動態創建實例的元件指定一個特定的類名稱。如下圖所示：
3.如果類不能在你指定的類路徑當中找到，那么Flash會在場景之后創建一個以使它仍可以被實例化。如下圖所示：
4.Errors and warnings: （錯誤和警告）
針對ActionScript 3.0 errors和warnings增加了兩個操作.你可以在Actionscript 3.0的特性面板上選擇。如：選擇Edit>Preferences > ActionScript > Actionscript 3.0設置按鈕。如下圖。
—個是Strict Mode,使編譯器在編譯過程中遇到問題時非常的嚴格，都會當做錯誤來處理而不是警告。另一個是Warnings Mode,會出現額外的警告，大多數情況下當你從Actionscript 2.0遷移到As3.0時，會起到很大的幫助，當你選擇了Warning時，你可以通過編輯EnabledWarnings.xml文件中的Enabled屬性來定義你想要的警告。EnabledWarnings.xml文件的位置：
o Windows: C:\Program Files\Adobe\Flash 9 Public Alpha\en\Configuration\ActionScript 3.0\EnabledWarnings.xml
o Mac OS: HD|Applications|Adobe Flash 9 Public Alpha|Configuration|ActionScript 3.0|EnabledWarnings.xml
??????
Creating clickable and draggable shapes（創建可點擊和可拖動的形體）
??????在這個例子中，你將探索flash9 預覽版了一些新特性，你將創建一個簡單的形體并使用改良的事類模型來使它可以點擊,在后面的例子中，你將使這個形體可以拖動，將你的代碼轉換為類和動態創類的實例。
Clickable shapes(可點擊的形體)
下面我們先開始創建一個可以點擊的形體。
1. 選擇文件>新建一個文檔，并將它保存為simpleBall.fla.
2. 選擇繪制圓工具，在場景中繪制一個正圓。當然在繪制的時候按住shift就可以了。
注意：在繪制時候確何你的Object Drawing mode（對象繪模式）是關閉的。
3．選中選擇工具并雙擊這個形體使它高亮顯示
4.??當這個形體選中后，選擇編輯modify>Convert to Symbol轉換為元件(按F8)來打開元件轉換窗口，
5．將名稱改為circle然后點擊ok,將它轉換為影片剪輯。
6． 元件要仍處于選中的狀態，在屬性面板上為它起一個實例名為：ball_mc
7． 取消對元件的選擇打開action面板(F9).
8．在Action面板上輸入如下代碼：
| 代碼: | | ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
?? trace("You clicked the ball");
} | |
在這段代碼中，ball_mc實例變成了可以點擊的了，因為你加入了事件偵聽用來檢測用戶是否有點擊動作，無論何時只要用戶點擊了ball_mc影片剪輯，clickHandler()函數就會執行。這非常類似于之前版本在組件中加入偵聽事件，如As2.0使用onPress()事件來檢測用戶是否點擊了剪輯或按鈕。
9．選擇Control>Test Movie 測試影片，當你點擊圓時，就會在面板上輸出”you clicked the ball.
10．關閉Swf文件返回Flash操作環境，編輯你的Actionscript 代碼，在原有代碼的上面加入如下一行代碼：
ball_mc.buttonMode = true;
11．重新測試你的影片,當你的光標位于圓之上時，光標就會變成一只小手的形狀。用于給用戶一個提示，這是可以點擊的。
Draggable shapes(可拖動的形體)
??????如果你想讓用戶可以在場影中拖動這個形體，你需要加入兩個事性偵聽器，mouseDown(MouseEvent.MOUSE_DOWN)和mouseUp(MouseEvent.MOUSE_UP),如下面的例子。
下面的例子示范如何為mouseDown和mouseUp事件加入事件偵聽器
1.編輯我們之前的例子中代碼如下：
| 代碼: | |
ball_mc.buttonMode = true;
ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
ball_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
ball_mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
function clickHandler(event:MouseEvent):void {
??trace("You clicked the ball");
}
function mouseDownListener(event:MouseEvent):void {
?? ball_mc.startDrag();
}
function mouseUpListener(event:MouseEvent):void {
?? ball_mc.stopDrag();
}
| |
2.測試你的影片。你就可拖動這個圓了。
雖然我們編寫這個例子沒有花費我們多少時間，但如果再讓你寫一個可拖動的形體，你可能不會情愿去寫，假想你能將你的代碼轉換為與元件連接的外部類文件,它可以自動的創建可拖動的形體，會在將來結省你的大量時間。下面我們就看如何實現。
Converting code into a class(將你的代碼轉換成類)
下面的例子創建一個Actionscript類它封裝整個影片剪輯的拖動的實現邏輯。現在不管什么時候，只要創建一個類的新的實例被創建，它就是可拖動的。無須為場景中的每個實例去寫代碼。
1.創建一個新的Fla文檔并將它保存為fancyBall.fla.
2.選擇File>New選擇Actionscript File創建一個新的Actionscript文件。
3.保存這個Actionscript文件為Ball.as與Fla文件為同一路徑下。也就是剛才創建的fancyBall.fla.
4. 在里面輸入如下代碼：
| 代碼: | | package {
??import flash.display.MovieClip;
?? import flash.events.MouseEvent;
?? public class Ball extends MovieClip {
??????public function Ball() {
???????? trace("ball created: " + this.name);
???????? this.buttonMode = true;
???????? this.addEventListener(MouseEvent.CLICK, clickHandler);
???????? this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
???????? this.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
??????}
??????private function clickHandler(event:MouseEvent):void {
???????? trace("You clicked the ball");
??????}
??????function mouseDownListener(event:MouseEvent):void {
????????this.startDrag();
??????}
??????function mouseUpListener(event:MouseEvent):void {
???????? this.stopDrag();
??????}
?? }
}
| |
?????? 上面的代碼定義了一個新類名為Ball,它繼承了MovieClip類(內置在flash.display package中).注意在使用As3.0書寫外部類時，你必須明確的導入所需要類。不同于在Fla內部書寫代碼。
5．保存并關閉Ball.as文檔，然后打開fancyBall.fla文檔。
6. 使用繪制圓工具，在場景中繪制一個圓并將轉換為movieClip.
7．右擊剛剛建立的圓，選擇鏈接。
8．選擇Export for ActionScript(為action導出)，在Class(類)的輸入框中輸入類名Ball
9．點擊ok.關閉此面板。
10．確何這個圓的實例在場景中，測試影片。觀看是否與之前的效果是一樣的。
它看起來很不錯，下面的例子我們來看如何動態的創建類實例。
Dynamically creating instances of a class（動態創建類實例）
??????你不需要在創作時總是將元件拖動到場景中，你也可以通過使用Actionscirpt新操作方法在庫中創建新的類實例。
Using the new operator（使用新的操作）
???? 之前的Actionscript在創建新的MovieClip或是TextField實例時是通過使用如MovieClip.attachMovie(),MovieClip.createEmptyMovieClip(),或MovieClip.createTextField().來創建的。在ActionScript 3.0中，你可以通過類似如new Ball()的方法創建新的MovieClip,TextField,Sprite,和Video 實例—或是你自定義的類，如下方法：
1.打開fancyBall.fla.將場景中的所有實例元件刪去，在主時間線上加入如下代碼：
| 代碼: | | | var b1:Ball = new Ball(); | |
2.按下ctrl +回車測試，注意，我們會發現沒有任何東西出現在場景中，但是在輸出面板上會顯示：“ball created: instance1”,盡管Flash創建了ball的一個新的實例，但它是不可視的，因為你沒有使用addChild()將它加入到顯示列表中。
3.編輯代碼，將b1實例加入到顯示列表中。測試。
???? 下一部你需要使用document class,它將允許你將代碼從主時間軸的第一幀上移到一個外部文檔中，它類似與之前例子中的通過元件與類連接.
Using the Document Class text box(使用Document class輸入框)
下面示范如何將你的代碼從主時間軸移到一個外部的As文件中。
1.刪去fancyBall.fla第一幀上的代碼。
2.創建一個新的Actionscript文檔保存為BallDocumentClass.as，與fancyBall.fla處于同一目錄下。
3.加入如下代碼在BallDocumentClass.as中：
| 代碼: | | package {
?? import flash.display.MovieClip;
?? public class BallDocumentClass extends MovieClip {
??????private var tempBall:Ball;
??????private var MAX_BALLS:uint = 10;
??????public function BallDocumentClass() {
???????? var i:uint;
???????? for (i = 0; i < MAX_BALLS; i++) {
????????????tempBall = new Ball ();
????????????tempBall.scaleX = Math.random();
????????????tempBall.scaleY = tempBall.scaleX;
????????????tempBall.x = Math.round(Math.random() * (this.stage.stageWidth - tempBall.width));
????????????tempBall.y = Math.round(Math.random() * (this.stage.stageHeight - tempBall.height));
????????????addChild(tempBall);
???????? }????
??????}
?? }
}
| |
4.保存并關閉這個as文檔，打開fancyBall.fla.
5.在屬性面板的document class后面的輸入框中輸入BallDocumentClass，保存文件。
6.測試，你會發現有10個大小位置不同的元件出現在場景中。
使用Document Class允許你將代碼放置在外部文件中，而不是時間線上，可以在許許的fla文件重用代碼，并且在團隊協作版本控制系統(CVS)中,更容易共享代碼。
總結：
?????? 這篇文章只是對As3.0的一個簡單應用介紹，只要告訴大家如何創建簡單的類，如何使用改良的偵聽事件模型，如何使用document class.
Ps by egoldy:學完這篇文章，你會發現自已也可以編寫在fla中看不見一行代碼的程式了，真正的是界面與代碼分離，控制，看上去真的是很酷，如果你也在學習As3.0，別忘了把你的心得分享一下。Cheers J. |