用 FlexSDK 將 as 編譯成 swf

因為我的 eeePC 沒辦法安裝肥大的軟體,只好想辦法在不安裝軟體的情況下讓自己的小小 eeePC 也能夠編譯 swf,後來發現,其實這個方法還蠻簡單的,而且可以完全不會出現 fla 的檔案,完全用 as 來控制產生 swf 動畫,整個感覺乾淨很多;結果因為太方便,搞到我後來就算在工作的大台電腦上,也懶得花時間開 Flash 軟體,乾脆直接用這樣的方法來編譯 swf 檔案。

首先,你需要 Adobe 官方的 Flex SDK 3 的免費編譯軟體,放心,它跟 Flash 不一樣,你可以免費使用它而不用擔心被告,如果不清楚該怎麼下載的人,可以根據下面的圖示來下載:

FlexSDK3 下載說明FlexSDK3 下載說明

我下載的是 Adobe Flex SDK 3.2.0.3958 最新的那個版本,不過它並不是 stable 的版本,如果你不喜歡用最新版本的話,其實可以挑選其他你喜歡的版本,下載到你電腦當中的任何一個地方。下載完以後直接解壓縮出來,你應該會看到一個資料夾,裡面有下面這些檔案:

FlexSDK 3 裡面的資料夾內容FlexSDK 3 裡面的資料夾內容

好啦!現在請你把這整個 flex_sdk_3 的資料夾放到你喜歡的地方,基本上,因為我不想打太多字,所以我是直接放到 C:\ 下面,你可以把它重新命名,我把它重新命名成為 FlexSDK3 ,但是請不要使用中文檔名以免造成莫名其妙的錯誤。接著就請開個自己的 flash 專案資料夾,放的路徑同樣建議不要有中文,因此請不要放在桌面上,我是直接放到 AppServ 的 www 根目錄下面的,這樣以後如果要加上 php ,測試起來也比較方便。

建立一個新的 as 檔案,命名為 ate.as,裡面打上下面的內容:

package {
	import flash.display.Sprite;
	import flash.text.TextField;

	public class ate extends Sprite {
		private var container:Sprite;
		private var text:TextField;
		public function ate():void {
			container = new Sprite();
			text = new TextField();
			text.text = 'Hello ActionScript!';
			addChild(container);
			container.addChild(text);
		}
	}
}

先不要管這串程式碼是在幹嘛的,它的主要功能就是在 flash 場景上面輸出一串 ‘Hello ActionScript!’ 的字,接者我們要用剛剛下載下來的 SDK 檔案把 ate.as 編譯成 ate.swf 檔。由於我是在 Windows 環境下面,所以就直接以命令提示字元作為範例,Linux 的部分以後有空我再補上吧!

打開你的命令提示字元,如果不知道它躲在哪裡,直接按[開始],點選[執行],輸入 cmd,就會跳出下面的視窗:

命令提示�元命令提示字元

看到這個視窗的時候請不要緊張,因為以後你想要編譯你的 as 檔案就全靠他了!仔細看看這個視窗,通常游標會落在你的文件夾下面,但是我的習慣會把我的路徑移到我的 flash 專案所在位置,因此我會直接輸入:

cd c:\AppServ\www\as\

上面的路徑就是你剛剛那個 as 檔案的所在位置,當然不用跟我一樣,按 Enter 執行之後,游標前面的路徑會變成 as 所在的位置,這個時候,你可以先用 dir 指令看看這個位置下面有些什麼東西:

使用 dir 指令觀看檔案使用 dir 指令觀看檔案

基本上,它會把你這個資料夾下面所有的東西都列出來,所以你應該要可以看到你剛剛所建立的 as 檔案,接下來,請輸入下面的指令:

c:\FlexSDK3\bin\mxmlc.exe ate.as

這一串指令的意思就是呼叫 c:\FlexSDK3\bin\ 資料夾當中的 mxmlc.exe 執行檔對 ate.as 檔案進行編譯,你可以進去 c:\FlexSDK3\bin\ 下面看看,就可以看到這個 Windoow 專用的 mxmlc.exe 編譯器執行檔。按下 Enter 執行之後,進到你的 Flash 專案資料夾當中,你就可以看到一個同名的 swf 檔案了!點選 swf 檔案,你就會看到下面這個畫面:

執行 swf 檔案執行 swf 檔案

如果你的電腦需要可以 debug 的 flash 撥放器的話,可以直接下載 Flash Debugger ,我是下載 Download the Windows Flash Player 10 Projector content debugger (EXE, 4.87 MB) 這個執行檔來用,因為執行檔比較可以方便我帶來帶去。

不過,話說回來,這個畫面實在是有夠醜,之前使用 Flash 編輯 fla 的時候,在 Publish 的時候都可以設定背景色、檔案大小、甚至影格速率等等,現在直接用 command 指令來編譯 swf 檔案,到底應該在什麼地方做發佈設定呢?

其實,你可以直接在 command 指令當中做發佈設定,例如:

c:\FlexSDK3\bin\mxmlc.exe ate.as -default-background-color=0xff0000

可是這樣實在很討厭,上面那一行只有設定背景色,還不包括設定寬高與影格速率,全部加上去真是有夠長,我一點也不想要每次執行的時候就要打一次夭壽長的指令,不如把這樣的設定寫在 as 檔案裡面,省得我每次都要打上一長串落落長的 command 指令。想要幫你的as檔案加上發佈設定其實很簡單,請在 package 裡面,import 之後, class 宣告之前加入下面這一行設定:

[SWF(width = "120", height = "120", backgroundColor = "#ffffff", frameRate = "30")]

這些設定應該都簡明易懂,我就不再多做說明了,回到你的命令提示字元視窗當中,直接按「↑」選擇剛剛你所打過那串沒有加上發佈設定的編譯指令重新執行一次,打開重新編譯過的 swf 檔案,你就會發現, swf 的背景與大小就不再是醜醜的預設值了!

因為有這個方便的方法,我就可以完全透過純粹的 as 檔案來產生 swf 檔,包括發佈設定,當然就算是在容量很小的 eeePC 當中也不用擔心無法編寫 flash 檔案進行測試,如果你也跟我一樣沒辦法使用 Flash IDE 編輯器,又沒辦法安裝好用的 FlashDevelop ,就可以試試看這個最陽春但是卻很好用的方法來編譯出你所要的 swf 檔案喔!

5 thoughts on “用 FlexSDK 將 as 編譯成 swf

  1. 编译的时候报这个错误,请帮忙看下!
    Loading configuration file F:\QQDownload\flex_sdk_3.2.0.3958\frameworks\flex-config.xml
    F:\TDDOWNLOAD\20091016173414\src\com\vanceinfo\meathill\test.as: Error: A file found in a source-path must have an externally visible definition. If a
    definition in the file is meant to be externally visible, please put the definition in a package.

    • To 听雨屋檐人:

      首先,您所有的 as 檔案裡面都必須要有 package 的定義,還有一點就是如果你所 import 的 class 放在某個目錄之下,ex: org/event/file.as,那麼你在 file.as 裡面,也必須加上路徑的定義:

      package org.event{
      ….
      ]

      因為我沒有你的程式碼,所以只能針對可能出現的問題來提出建議,以下為相關的參考資料,您可以多加利用 :):

      Reason: You have not updated your ActionScript class to use the new package keyword. In ActionScript 3, you define a classes’ package separately, not in the class signature.

      Solution: Use the package keyword to define the package for your class — package org.osflash.arp.samples.pizza.flex2.view { public class OrderForm { //… } }.

  2. 不好意思 我照您那樣說試了 畫面都有出來 但是只沒跑出 字串在螢幕上 可以幫我解答一下嗎?? 謝謝

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s