天天看點

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

本篇采用AS3語言在Flash Builder環境中顯示文本Hello Layabox,學完本篇即為完成LayaAir引擎的第一個程式。在學習本篇前務必保證先閱讀完:FlashBuilder開發環境的配置

如果大家已閱讀《用LayaAirIDE建立AS3項目并詳解目錄結構》,并且已建立好項目的,可以跳過第一步。我們建議大家采用LayaAirIDE建立項目。

第一步 建立項目

步驟一: 打開Flash Builder,在菜單欄裡點“檔案”,然後選中“建立”點選 “ActionScript項目”,進入建立項目的視窗。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟二: 在“項目名”輸入欄裡輸入項目名稱,然後在“檔案夾”輸入欄裡輸入項目存儲目錄或者是點選“浏覽”選擇存儲的目錄。最後點選“下一步”進入引擎編譯與引擎庫配置的“建構路徑”視窗。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟三: 在建構路徑配置的“庫路徑”視窗裡,先删除系統自帶的編譯SDK,然後點選“添加SWC”,将引擎包裡的“playerglobal.swc”、“LayaAirFlash.swc”、“glsl2agal.swc”添加進來。如果項目沒有釋出Flash版本的需求,“LayaAirFlash.swc”、“glsl2agal.swc”也可以不添加。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟四:在建構路徑配置的“源路徑”視窗裡點選“添加檔案夾”,輸入“引擎庫所在目錄”或點選“浏覽”選擇“引擎庫所在目錄”,然後點選确定,即完成了引擎庫的導入。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

最後,點選最下方的“完成”按鈕,結束建立項目的引導。

第二步 顯示文字“Hello Layabox”

步驟一:菜單欄 “檔案” 中選中 “建立”,單擊“ActionScript類”,打開建立類檔案的視窗。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟二:在名稱欄輸入HelloLayabox,點選 “完成”建立一個ActionScript類。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟三:将HelloLayabox.as設定為預設應用程式。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟四:輕按兩下打開HelloLayabox.as,開始編寫代碼。将一個“Hello Layabox”的文本添加到舞台,代碼如下:

步驟五:完成代碼編寫後,使用之前文章裡配置的編譯器,點選按鈕開始編譯,編譯完成後會自動啟動chrome運作代碼。

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

運作結果如下圖所示:

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

步驟六:“Hello Layabox”雖然顯示出來了,但是太簡陋了,下面我們就讓“Hello Layabox”變的好看一些,代碼如下:

運作結果如下圖所示:

layabox flash轉html5,FlashBuilder中第一個H5程式“Hello Layabox”

至此,如果您能跟随本篇入門教程,完成上圖的顯示,恭喜您入門成功,我們已經完成了第一個采用AS3語言開發的HTML5程式,也說明了LayaAir的開發環境配置無誤。更多LayaAir引擎開發的API使用方法,請前往官網Layabox開發者中心檢視線上API與線上DEMO。