Web三維技術：Flash Builder+away3d平台搭建（含示範視頻）

Web三維技術：Flash Builder+away3d平台搭建

作者：一點一滴的Beer http://beer.cnblogs.com/

前言：作為頁面中實驗裝置的顯示層，需要一個swf作為顯示的UI。雖然可以用FlashMX進行簡單的flash設計，但是FlashMX一般是偏向於動畫設計，而不是程式設計，所以在進行相關的開發時，支援性不是太好，於是筆者就想到了轉用Flex Builder來進行開發。

一、開發語言和開發環境

　　ActionScript是 Macromedia（現已被Adobe收購）為其Flash產品開發的 ，最初是一種簡單的指令碼語言，現在最新版本3.0，是一種完全的物件導向的程式設計語言，功能強大，類庫豐富，文法類似JavaScript，多用於Flash互動性、娛樂性、實用性開發，網頁製作和RIA應用程式開發。

　　ActionScript 是一種基於ECMAScript的指令碼語言，可用於編寫Adobe Flash動畫和應用程式。 由於ActionScript和JavaScript都是基於ECMAScript文法的，理論上它們互相可以很流暢地從一種語言翻譯到另一種。不過JavaScript的文件物件模型（DOM）是以瀏覽器視窗，文檔和表單為主的，ActionScript的文件物件模型（DOM）則以SWF格式動畫為主，可包括動畫，音頻，文字和事件處理。

     由於軟體和庫檔案存在版本多樣的問題，所以在進行介紹之前進行說明。本文中所示範例子使用的軟體版本如下：

　　　　Flash Builder：4.5

　　　　Flex SDK：4.5.1

　　　　Away3D：3.5.0

　　　　Flash Player：10 debug版本或者更高

1.1 Flash Builder整合式開發環境

　　Adobe Flash Builder 4.5 軟體（曾為 Adobe Flex Builder）是基於 Eclipse 的開發工具，使用 ActionScript 和開源 Flex 架構快速構建具有表現力的移動、Web 和傳統型應用程式。軟體可以在Adobe首頁上去下載。

　　安裝了Flash Builder4.5之後，Flex SDK4.5也自動被整合到了開發環境中了。然後就可以利用此IDE進行一般的Flex開發了，但是如果要進行3d開發，則還需要引入3d的引擎庫。

　　Flash Builder 4.5下載頁面：https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=zh_cn

1.2 Away3D引擎庫

　　提供了一個3d引擎庫。在Flash Builder中建立項目，然後引入此庫，可以迅速進行3d的Flash開發。

　　Away3D引擎屬於一個免費開源的項目，而且持續開發和更新中，所有存在版本眾多的問題。目前我們主要使用的是穩定版本的3.5版。在Away3d的首頁中可以下載到如下資源：Away3d庫、Away3d Examples常式、Away3d Documents參考文檔。

　　Away3d 3.5下載頁面：http://away3d.com/download/away3d_3.5.0

1.3 Flash Player播放器

　　編程的語言ActionScript目前主要分為2.0和3.0兩個版本，Flash播放器相當於ActionScript的編譯環境，對於不同版本的ActionScript需要不同的播放器支援，如果使用了低版本的Flash Player則會出現編譯無法通過。對於Away3d_3.5庫，需要至少Flash Player10的支援。如果希望能夠在Flash Builder中對原始碼進行調試，則需要到Adobe首頁上下載一個debug版本的Flash Player10。

　　在Adobe首頁上下載Flash Player的時候，除了有發布版和調試版之分，也有IE和非IE之分。如果你使用的是IE或者基於IE核心的瀏覽器，則下載基於IE的debug版Flash Player10，如果是使用Chrome或者Firefox這些非IE核心的瀏覽器，則下載相應的播放器。

　　Flash Player 10下載頁面：http://www.adobe.com/support/flashplayer/downloads.html

　　先到網上下載到上述的軟體後，就可以遵循下述步驟進行環境搭建：

1.卸載本機上的舊版本的Flash Player，安裝Flash Player10。 2.安裝Flash Builder4.5到指定目錄，例如： "D:\Program Files\Adobe\Adobe Flash Builder 4.5" 如果成功安裝，則Flex Sdk4.5也會被成功安裝上，在目錄： "D:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks" 裡麵包含了不同版本的Flex SDK，今後如果Adobe發布新的SDK，則只需要下載新的SDK然後解壓到此目錄中即可。 3.解壓Away3d的庫檔案到指定目錄。例如： "D:\FlashBuilder_Libs\Away3d_lib" 在後面進行Away3d開發時，需要引用此路徑中的庫檔案。

　　完成上述工作後，就可以進行Away3d的Flex開發了。

二、建立ActionScript項目

　　關於如何建立一般的Flex項目，在此不再贅述，有興趣的可以到網上找到很多相關例子。本文重點在讓Away3d 3.5提供的Examples成功跑起來。

2.1項目建立與設計

　　開啟Flash Builder，然後建立項目，選擇"ActionScript Project"，然後輸入項目名稱點擊Finish。在Package Explorer中右擊項目選擇"Properties"進行相關設定。設定內容包括：

1.設定Flex SDK版本。

　　一般情況下，在建立項目的時候就已經對SDK進行了指定，但是如果在項目建立完畢後需要修改SDK，可以在此介面下進行修改:ActionScript Build PathàLibrary path

2.設定Away3d庫的引用路徑。

　　在ActionScript Build PathàSource path中，可以添加Away3d的引擎庫，也就是我們下載下來解壓下來的檔案夾，添加解壓目錄src中的內容。

3.設計編譯器版本

　　ActionScript的編譯環境就是Flash Player，Away3d 3.5需要10以下的版本的播放器的支援。在Flash Builder4.5中沒有必要對此進行設定，因為預設的就是10.2的版本，但是如果今後3d庫升級需要更高版本的播放器支援，則需要在此進行相應的設定。

2.2Away3d Examples項目移植

　　將從Away3d首頁上下載的3.5版本對應的"examples_3_5_0.zip"解壓，然後將根目錄下的檔案複製到建立的ActionScript項目的根目錄下進行覆蓋。在Flash Builder中對項目的目錄進行重新整理。然後就可以了。

　　如果想要運行某檔案，例如："Basic_LoadModel.as"則只需要右擊此檔案，然後選擇"Set as Default Application"，再右擊選擇Run asà Web Application，然後就可以在瀏覽器中看到啟動並執行了。

　　在項目的bin-debug目錄下面，會產生對應的swf檔案，這個可以獨立啟動並執行。

　　Away3d Examples的示範效果見如下視頻：

http://v.youku.com/v_show/id_XMjgzMzI2MDgw.html

2011-7-8

於武漢大學

------------------------------------------------------------------

Author:一點一滴的Beer

Email /Gtalk:dreamzsm@gmail.com

From:http://www.cnblogs.com/beer

Notes:歡迎轉貼，但請在頁面中加個連結註明出處

original:http://www.cnblogs.com/beer/archive/2011/05/05/2037449.html