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