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;     /** @author Charley */     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;     /**   * @author Charley   */  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的開發環境配置無誤。

不懂的可以加我的QQ群： 172719352（LayaAir引擎交流群 ）歡迎你的到來哦，看了博文給點腳印唄，謝謝啦~~