ActionScript 3.0動畫基礎-2

作者: egoldy性質: 翻譯閱讀次數: 16471發表時間: 2007-06-14 12:08:34

聲明： 此文章為未出版的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。

圖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所示。

圖 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出資訊。可能最簡單的方法是使用第三方的trace面板。它們通常包括兩部分：一個是可執行程式或包含一個用 於顯示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 類。在本書的範例中沒有使用這些代碼，因為在所有的例子中它們並不適用，但是你需要知道當需要時你可以使用它們。而且他們不會影響其它任何效果。 

未完待續