LayaAir引擎學習日志7----AS3語言中FlashDevelop中顯示文本Hello Layabox(AS3)

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

第一步 建立FlashDevelop項目

    步驟一：打開FlashDevelop，在菜單欄找到“項目”然後點選“建立項目”。

    步驟二：選擇”AS3 Project“類型，輸入項目名稱，選擇項目存放位置後，點選“确定”完成建立項目的操作。

第二步 配置項目

2.1 引用引擎庫       

    步驟一：在項目面闆點選“項目屬性”按鈕，打開項目屬性配置視窗。

    步驟二：點選“添加類路徑”選擇LayaAir引擎所在目錄，然後點選“确定”完成LayaAir引擎庫的引用。

2.2 将swc添加到庫

    在下載下傳引擎的時候，引擎包解壓縮後，我們可以看到3個swc檔案，分别為根目錄的“playerglobal.swc”和LayaAirFlash目錄下的“LayaAirFlash.swc”、子目錄下的“glsl2agal.swc”。playerglobal.swc是用于在開發過程中使用LayaAir引擎API提示。另兩個swc檔案是釋出Flash版本用到的。如果不考慮釋出Flash版本，“LayaAirFlash.swc”、“glsl2agal.swc”也可以不添加到庫。

    步驟一：在建立的項目studyLayaAirAS3下添加一個libs檔案夾。

    步驟二：将下載下傳解壓後的LayaAir引擎根目錄下“playerglobal.swc”通過滑鼠點中拖拽的方式，拖到剛建立的libs檔案夾下。或者是複制粘貼的方式，粘貼到libs檔案夾下。然後右鍵點中swc檔案，再左鍵點選“添加到庫”，分别添加到庫中。

第三步 顯示文字“Hello Layabox”

3.1 建立類檔案HelloLayabox

    步驟一：右鍵“src目錄”添加一個新類。(提示：添加的類檔案必須在src目錄下，或者通過“添加類路徑”引用進來，否則是無法被編譯的)

    步驟二：将類名稱設定為HelloLayabox

3.2 在H5頁面上顯示“Hello Layabox”

    步驟一：将HelloLayabox.as設為文檔類。

    步驟二：将一個“Hello Layabox”的文本添加到舞台，代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

package { import laya.display.Text; public class HelloLayabox { public function HelloLayabox() { //建立舞台，預設背景色是黑色的 Laya.init( 600 ,  300 ); var txt:Text =  new Text(); //設定文本内容 txt.text =  "Hello Layabox" ; //設定文本顔色為白色，預設顔色為黑色 txt.color =  '#ffffff' ; //将文本内容添加到舞台  Laya.stage.addChild(txt); } } }

    步驟三：完成代碼編寫後，使用之前定義的編譯快捷鍵（Alt+F5），把AS3代碼編譯成HTML5。

        編譯完成後，編譯器自動啟動chrome檢視顯示結果。

    步驟四：如上圖所示，“Hello Layabox”已經顯示出來了，但是比較簡陋，下面我們就讓“Hello Layabox”變的更好看些，代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

package { import laya.display.Text; public class HelloLayabox { public function HelloLayabox() { //建立舞台 Laya.init( 600 ,  300 ); //舞台預設背景色是黑色的 var txt:Text =  new Text(); txt.text =  "Hello Layabox" ; //設定文本顔色 txt.color =  '#FF0000' ; //設定文本字型大小，機關是像素 txt.fontSize =  66 ; //設定字型描邊 txt.stroke =  5 ;   //描邊為5像素 txt.strokeColor =  '#FFFFFF' ; //設定為粗體 txt.bold =  true ; //設定文本的顯示起點位置X,Y txt.pos( 60 ,  100 ); //設定舞台背景色 Laya.stage.bgColor =  '#23238E' ; //将文本内容添加到舞台 Laya.stage.addChild(txt); } } }

    運作結果如下圖所示：

    至此，如果您能跟随本篇入門教程，完成上圖的顯示，恭喜您入門成功，我們已經完成了第一個采用AS3語言開發的HTML5程式，也說明了LayaAir的開發環境配置無誤。

不懂的可以關注我的公衆号，裡面有你想要的（有問題公衆号留言必回答）https://mp.weixin.qq.com/s?__biz=MzIyOTM4MDMxNw==&mid=2247483836&idx=1&sn=4bac1428b9d9470000ca159aba4038d8&chksm=e842d80edf355118659c51356e5a92ff5c995729b7f361a1d0207060721852d2b8d7ec4bad03&token=1082408202&lang=zh_CN#rd