因為公司使用的是CS3,最近有需要開發AIR的程式,原本打算是直接以Flash的IDE來進行開發,但CS3預設版本並沒有支援AIR的開發(喔~該死),所以不得不去給它更新升級一下。 所以在這邊記錄一下打造可以開發AIR的Flash CS3的過程與大家分享。當然如果你是使用CS4以上版本的Flash,可以直覺無視以下的文章

一、安裝ARE(AIR Runtime Environment)

與Java的JRE(Java Runtime Environment)概念一樣,要執行AIR也需要安裝能執行AIR的執行環境。所以我們首先就從[官方下載點] 選擇並安裝符合你的作業系統的ARE

CS3_00.png

二、為CS3增加AIR的擴充並更新

CS在未升級擴充之前,並無法從新增「Flash 檔案(Adobe AIR)」這類型的檔案,所以我們得讓他『阿婆鬼』一下!我們參訪[CS3官方更新下載頁面] 的文章中,下載適用CS3的AIR更新檔。這邊要注意到的是他的更新檔有兩個,你必須先更新[9.0.2版(台灣)]之後才能夠更新[9.0.3版(台灣)]版。(老實說我覺得官方排版很亂不直覺,所以直接給載點囉,如果有其它語系的使用者,請再仔細看)。同時順便下載版本較新一點的[Flash Player 9],這樣比較不會有問題(或許吧),下載完成執行壓縮檔中的Players\Release\Install Flash Player 9 Plugin.exe進行更新。現在再度開啟Flash CS3,畫面將會如下:

CS3_01.png

三、編寫並測試AIR

為了知道AIR有沒有安裝成功並正常運作,這邊我們使用建立一個快速的範例就能知道了唷,首先透明上一個步驟所出現的「Flash 檔案(Adobe AIR)」這類型的檔案」建立一個新的AIR檔案,在影格1按下F6建立空白關鍵影格,接著按F9輸入(或貼上)下面的程式碼:

import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.net.URLRequest;

var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("http://www.google.com");
html.width = stage.stageWidth;
html.height = stage.stageHeight;
html.load(urlReq);
addChild(html);

按Ctrl + S儲存檔案並命名為「AIR_TEST」(或是你想要的名稱),接著按Ctrl + Enter進行編譯。由於上面程式碼使用了僅AIR才有HTMLLoader,如果你沒有出現任何錯誤,而且又看到下面畫面,表示AIR已經安裝成功並正常運作囉

CS3_02.png

四、發佈AIR應用程式

當AIR的程式發開完畢後,下一步就是要給它發佈成可以安裝的應用程式類型(也就是可以從作業系統程式集中新增/移除的那種),我們透過「命令 > AIR - 應用程式與安裝程式設定」

CS3_03.png

開啟設定頁面如下圖

CS3_04.png

從圖片的各項設定的名稱,各位應該一看就了解要輸入什麼了,我就不再多說什麼。不過這邊要特別提到的是「圖示」設定可以改變應用程式安裝後最後的桌面圖示

CS3_05.png

如果想要有自己風格的圖示的開發者,可以自己設計或是從[iconfinder]找一個適合的圖示(最好是選用Allowed for commercial use),比較不會有侵權問題。另外就是「數位簽名」,你必須設定數位簽名後,你所發佈的應用程式才能夠在別台電腦上進行安裝,若你未設定簽名,發佈的AIR將會變成副檔名為.airi成為待簽署的應用程式而無法安裝。你可以使用現在存有的數位簽名(像是公司組織所使用的),或則你也可以為你自己建立一個

CS3_06.png

為自己建立的數位簽名,每個欄位都要填寫(可能是為了對自己發佈的應用程式負責吧XD),然後點擊「另存成」來選擇數位簽名檔存放的位置(筆者這邊就在桌面上隨便建一個囉)

CS3_07.png

選擇剛剛自行建立的數位簽名並輸入密碼後按「確定」,繼續按「發佈 AIR 檔」後,就會在同層目錄產生一個AIR的應用程式安裝檔

CS3_08.png

如果你已經有安裝ARE後,點擊執行後將會出現安裝視窗

CS3_09.png

安裝完畢後,你將會在桌面上看到這個應用程式的捷徑圖示囉(如果安裝時有打勾的話)

CS3_10.png

執行它就能出現剛剛在測試中,除了圖示有變之外一模一樣的畫面

CS3_11.png

以上簡單的分享希望各位能喜歡

arrow
arrow
    全站熱搜

    低溫烘培 發表在 痞客邦 留言(2) 人氣()