ActionScript 3.0動畫基礎-2

作者: egoldy

性質: 翻譯

閱讀次數: 22542

發表時間: 2007-06-14 12:08:34


山东20选5最新开奖结果 www.vyjto.com 聲明: 此文章為未出版的keith peters的ActionScript 3.0 making things move中文版樣章。為書中的第二章。webstudio會在中文版出版之際,友情提供論壇forum支持。轉載請注明出處,謝謝!



接上一篇...

2.4設置ActionScript 3.0應用程序

回顧我之前所講到的內容,有三種創建AS3 swf方法:
1.Flash CS3 IDE
2.Flex Builder 2
3.免費的Flex /AS 3命令行編譯器和Flex 2 SDK
這些方法的每一種都是以一個文檔類(document class)開始,以一個SWF結束,但是如何設置和使用每一種工具是不同的。我們每次拿出一種,從最簡單的(Flash CS3 IDE),到最復雜的(免費的命令行和SDK)。我將使用下面的文檔類,它只是簡單的在舞臺上繪制一個紅色的圓,以用來作些驗證。

package  {
import  flash.display.Sprite;
public  class  Test  extends  Sprite  {
public  function  Test()  {
init();
}
private  function  init():void  {
graphics.beginFill(0xff0000);
graphics.drawEllipse(100,  100,  100,  100);
graphics.endFill();
}
}
} 


注意我剛剛給出的是一個標準的類結構,只是在init方法中帶有幾條繪制命令。

2.4.1使用Flash CS3 IDE

Flash CS3 IDE是最容易執行你的文檔類(document class)的工具。只需要簡單的保存之前的類到你所選擇的目錄下,文件名為Test.as。然后打開Flash CS3,創建一個新的FLA文件將它保存在與類所在的同一目錄下。確保FLA發布為Flash9和AS3 。在屬性面板上,你應注意到一個的新的文本域稱為Document Class(見圖2-1)。只需要簡單的輸入你的類名稱:Test。

/media/upload/2007/06/14/1.jpg
圖2-1. 設置文檔類

 

注意你輸入的是類名稱,而不是文件名稱,因此不需要加入.as后綴名稱。然而,如果你的類在一個包中,你需要輸入完整的包路徑---例如,com.friendsofed.chapter2.Test。
現在你可以象你多年前使用的Flash一樣,簡單的測試或是發布你的影片。Flash將會查找你的類并將它編譯為SWF。當這個SWF運行時,構造函數和init方法將會被執行,那么你將得到你的可愛的紅色的圓形。
當在使用一個文檔類(document class)時,盡量避免在你的FLA的時間線上加入任何代碼—即便只是注解---因為這樣可能會引起與編譯器加入的代碼產生沖突,會阻止你的影片正常的編譯或是運行。

2.4.2使用Flex Builder 2

我已經說過使用Flash CS3 IDE是簡單的創建AS 3應用程序的方法。然而,事實上多數情況是因為許多的Flash設計師或是開發人員,他們已經使用了多年的Flash,并且非常熟悉的原因。
真實的情況是,使用Flex Builder 2創建AS3應用程序可能真正的簡單,一旦你安裝了它你就可以得到它自身的一些工具。你甚至不需要考濾創建多個文件(.as和.fla)和確認他們是否保存在了正確的位置。你要做的只是創建你的類并編譯它們。
假設你已經安裝了Flex Builder 2并且已打開正在運行,首先創建一個新的ActionScript項目。在新彈出的ActionScript項目對話中,輸入一個項目名稱然后點擊結束 (finish)。稍后,當你比較熟練時,你可以在繼續研究其它的對話窗口,它提供給你許多種自定義項目的其它方法,但是現在你需要準備好的是你的項目名 稱,它將要變成你的文檔類(document class)的名稱。(注意”document class”這個術語并不會真正在Flex Builder 2的工具中出現。我只是在三種開發環境中保持一致的說法)。
Flex Builder 2將會為你的項目創建一個目錄(一些目錄和子目錄的方式),并且會為你創建更多的類的結構。你所需要做的就是加入init 方法然后從構造函數中調用它,以及在init方法中加入你想加入的代碼。
然后點擊工具欄上的運行(run)按鈕;就是有一個綠色的園環里面有一個箭頭的那個按鈕。它將會把你的類文件編譯成一個SWF文件,并創建一個html文件來承載它,同時在你的默認瀏覽器下運行。非常的簡單,eh?
如果你希望為你的SWF影片指定不同的參數,如幀頻率,大小或是背景色,在導航區(Navigator view)右擊你的項目名稱,然后選擇屬性。在屬性對話窗口中,選擇ActionScript Compiler。在窗口的當前頁中,你會看到一個文本域為Additional Comiler Arguments(加入編譯器參數)。在這個文本域中,你可以輸入下面的參數來改變你發布的SWF的屬性:
    default-size  width  height
    default-frame-rate  fps
    default-background-color  0xRRGGBB
只需要將它們都寫成一行,添上你想要準確數值,如圖2-2所示。

/media/upload/2007/06/14/2.jpg
圖 2-2. 加入編譯器參數


有許多的其它命令行參數你都可以在這里加入,它們都可以在Flex Builder 2和AS3的文檔中找到。但是上面例出是是你最常用到的。
你也可以在文檔類(document class)內部通過metadata來設置這些數值。這些方法將在下一節的結尾處講解。

2.4.3使用免費的命令行編譯器

   好,很報謙的說我不能收回上面所說的話并且告訴你這種方法與其它方式相比同樣簡單。它是一個完全的自定義編譯AS 3方式。但是更好的一點是,它也是完全免費的!象大多數命令行工具一樣,它也具有可以被其它應用程序調用的好處,因此你可以從你最喜歡的編輯器中設置或運 行它的快捷方式,如做為Apache Ant創建一個過程的一部分,等等。在這一節中我只是簡要的描述如何使編譯器編譯過程。希望你一旦掌握它,你可以解決怎樣讓編譯器與其它開發工具集成工 作。當這本書正在寫的過程中,FlashDevelop,免費的ActionScript編輯器,可以在www.flashdevelop.org得到, 已經開始開發對于AS3.0 的支持。當這本書上架時,毫無疑問它是全可以支持AS3的。

你需要做的第一件事情是從www.adobe.com上先下載免費的Flex 2 SDK。它是一個zip壓縮包,你可以將它們釋放到你喜歡的地方。最好是將它放在一個非常容易訪問的地方,如pc機上c:\flex_2_sdk,或者在 Mac機器上 /Applications/flex_2_sdk。
編譯器自身其實有三個版本。有一個mxmlc.exe,用于windows系統執行編譯,mxmlc,用于Mac 應用程序。這兩者都在你所安裝的主目錄下的bin目錄下。最后,還有一個mxmlc.jar,其實是Java的編譯器,它將工作在Mac或Pc上。 Java編譯器在lib目錄下,與bin是同一級的目錄。如果你準備好研究Java,你可以試一下Java版本,但是對于如何調用和處理文件路徑都會有許 多不同,因此為了更容易解釋,我將直接講解bin目錄下的程序,我發現它工作起來會更容易一些。

   (值得注意到的是Adobe確實在Mac和PC版本市場上做的非常好,兩種版本幾乎是以同樣的方式運行的。除PC版本有.exe文件擴展之外,其它大部分是難以區分的,這使得我們在編寫工作上更加容易?。?
現在你已經安裝好了你的編譯器,你可以創建并保存好你的類。因為免費的SDK沒有任何類型的編輯器,你需要使用你認為比較舒服的編輯器,并保存為 無格式的文本文件。然后打開一個命令窗口或是終端,導航到你保存有類文件的路徑下,然后運行編譯器,將你的類路徑作為參數傳遞給編譯器,如下:
C:/flex_2_sdk/bin/mxmlc.exe  Test.as
或者是在Mac系統中如下樣子:
/Applications/flex_2_sdk/mxmlc  Test.as
當編譯器工作時它會拋出一系列的信息,直到結束。如果在編譯過程中有錯誤,它會告訴你相關的內容,以及哪個位置,當發生錯誤時它會精確指示出哪一行和哪一個字符。
現在你在與類相同的目錄的下就會得到一個SWF文件,名為Test.swf。運行這個SWF,你將會看到一個紅色的圓形。祝賀你,你現在已經是一個很強的AS3用戶了。
當然,每次你在測試影片時你需要鍵入比較長的mxmlc路徑,因為這個原因,一些人不愿意去使用命令行工具。讓你認識到你已經有許多種方法可以讓 它自動化是很重要的。例如,幾乎每一個好點的編輯軟件都會允許你將一個工具設置為快捷方式或是工具按鈕,通過參數設置來完成。你只需要將編譯器的路徑設置 為工具,當前文檔的路徑設置為參數即可,這樣你就可以做到一鍵編譯了。

另一種自動化編譯的方式是使用批處理文件或可以重復你手動輸入內容的AppleScript文件。你只需要運行那個批處理文件或是腳本文件,它會 為你做所有的工作。如果你真的很想了解,你可以深入Apache Ant,它是專為此目的而設計的一個程序。創建一個描述你的編譯器路徑和傳遞給編譯器的各種參數內容的xml文件,Ant會解析它并運行程序。它真的可以 做很多事情,因此如果你在使用AS 3做大型的開發,Ant是非常值得學習的。
現在已經有許許多多的編譯器可以選擇使用了,每一個都有他或她自已的開發環境偏好設置,因此我不能逐一詳細的介紹如何設置這些編輯器。但是,如 果你查看我的個人Blog,地址是www.bit-101.com/blog,你將會發現一些關于FlashDevelop編輯器與As3集成使用的信息 和其它的一些工具。
你可能已經注意到了關于設置編譯器的描述中,沒有關于設置基本的文檔(document)屬性如SWF的大小,幀頻,或是背景色的方法??梢雜辛街址椒ɡ賜瓿繕柚?。第一種方法是通過在命令行上加入參數如下:
-default-background-color=color
-default-frame-rate=fps
-default-size=width,height

你只需要在命令中將它們加在類名稱的后面如下:PC機
(路徑)mxmlc.exe  Test.as  -default-background-color=0xff0000
Mac:
(path)mxmlc  Test.as  -default-size=800,600

注意你可以加入你所需要的更多的參數,只是在命令行中使用空格隔開。這就是自動化操作得心應手之處。
另一種設置基本文檔(document)屬性是通過在類中正確的位置上加入metadata。Metadata是由一些可以編譯的聲明組成,它們 并不是真正的ActionScript聲明,但是確何在編譯過程被編譯器使用。SWF metadata標簽允許你在類文件中設置前面四種屬性,如下:
[SWF(backgroundColor="0xffffff",  width="800", height="600",  
frameRate="31")]

這一行放置在包(package)內,緊貼在聲明的前面。

2.4.4trace注意事項

在許多范例中,特別是這本書的前面,我直接告訴你trace出一些值或是信息,如在前面的MyBaseClass和MySubClasses范例 中。如果你正在使用Flash CS3 IDE,這些范例都會正常的工作,你除了需要trace聲明之外不需要在寫相關的其它內容,你所trace的信息都會顯示在Flash的輸出面板上。
如果你正在使用Flex Builder 2,你也可以直接書寫trace。有一個不同的地方是你需要調試(debug)運行你的影片,而不是直接運行它。這非常簡單只需要點擊工具條上的調試 (Debug)按鈕而不是運行按鈕。你的影片將會在外部的瀏覽器上運行,但是如果你切換回Flex Builder,你的trace信息將顯示在控制臺(console)上。
最后,如果你使用的是免費的Flex 2 SDK,你需要做點工作以使它可以trace出信息??贍蘢羆虻サ姆椒ㄊ鞘褂玫諶降膖race面板。它們通常包括兩部分:一個是可執行程序或包含一個用 于顯示trace信息文本的SWF,另一個是一個自定義的trace類。你需要將trace類放在你的類路徑中,當編譯時使用-source-path命 令行參數加上類路徑。例如,假設你把trace類放在C:/AS3Classed/中。當在編譯時你可以按如下命令行書寫:
-source-path="C:/AS3Classes/"
它將會允許編譯器在你的項目中編譯trace類。
那么,當你想要trace時,你只需要調用指定的trace面板方法。例如,不能按下面的方式書寫:
trace("Hello  world");
你可能需要這樣寫:
Logger.debug("Hello  world");
當trace類嵌套在一個包(package)中時你可能需要先導入它。當然,你需要先查閱關于如何使用trace面板的相關文檔。我發現一個很 漂亮而且也是非常易用的叫XPanel,可以在www.ajaxmaker.com/xpanel/xpanel.htm上行到。
如果你在使用免費的SDK和一個trace面板,記得要先在它的范例中查看它是使用什么方法來取代原有的trace方法來進行trace的。

2.4.5縮放影片

最后一個是我們在編碼前要注意的設置問題:如果你是在Flash IDE或是獨立的Flash Player中測試影片,它將會進行100%的縮放或以自身實際大小來顯示。但是如果你在一個瀏覽器中或其它程序中顯示SWFs,它可能會發生一些縮放來 適應所有的空間,會扭曲你的影片中的內容。如果有這樣的事情發生,你可以在類的init()方法中加入如下兩行:
stage.scaleMode  =  StageScaleMode.NO_SCALE;
stage.align  =  StageAlign.TOP_LEFT;
這樣將會阻止影片的縮放并且始終在窗口的左上角播放。如果你使用上面的代碼,要確保導入 flash.display.StageScaleMode和flash.display.StageAlign 類。在本書的范例中沒有使用這些代碼,因為在所有的例子中它們并不適用,但是你需要知道當需要時你可以使用它們。而且他們不會影響其它任何效果。

未完待續

討論此教程

關于我們

萬博思圖(北京)信息技術有限公司,專業的flash,flex開發團隊,5年經驗。公司致力于互聯網上的業務的開展,對于互動網站行銷,互聯網應用程序開發有成熟的解決方案。我們關注互聯網市場動態,關注新技術,更注重在新的領域不斷探索發現。
萬博思圖業務內容主要包括企業品牌Flash網站開發,企業形象宣傳Flash設計,動畫,多媒體演示,Flex企業級應用程序開發,擁有眾多成功案例,歡迎來電咨詢。
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝陽區光華路15號院泰達時代中心4號樓704 郵編: 100026 EMAIL: [email protected]
電話: 010-59070059   (新號:010-59897050 010-59897060)  手機: 13693660520 傳真: 010-59070059-801
京公網安備:110108006741      京ICP備:05013074號-1
王先生