as3用FlashBuilder/FlashDevelop开发html5环境配置

jekeyhui99

第一步： LayaAir Engine下载

    1.1 引擎下载

     使用LayaAirIDE开发的话，下载LayaAirIDE会自带引擎包。若开发者使用第三方工具开发，那需要先下载引擎。在官网首页或者开发者中心菜单中，拥有引擎下载的链接入口，打开链接后会出现引擎各个版本的下载列表，每一个版本均提供AS3、TS、JS三种开发语言，选择对应的开发语言包，直接点击下载即可(http://ldc.layabox.com/index.php ... =lists&catid=28)。

    1.2 引擎包目录结构介绍     

由于本篇介绍的是FlashDevelop开发环境，所以我们下载AS3版本的引擎包。当下载解压后，可以看到AS3版本的目录结构如下图所示：

• “LayaAirFlash”目录内是发布Flash的版本才需要的引擎库代码。
• “libs”引擎代码目录，LayaAir引擎库代码处于该目录的src子目录中。
• “laya.js.exe”为Windows系统下的AS3代码编译器，用于将AS3代码编译为JS代码。
• “LayaJSMac”为苹果MAC系统下的AS3代码编译器，用于将AS3代码编译为JS代码。
• “playerglobal.swc”用于替换AS3原生编译器SDK，去除原生API语法提示，增加引擎API提示。
  
  

第二步 安装Google Chrome浏览器

    当执行AS3代码编译后，默认调用Chrome浏览器打开运行项目，需要安装此浏览器进行项目调试。已安装的可跳过本步骤。

第三步 配置FlashDevelop中的AS3编译环境

    步骤一：打开FlashDevelop，在菜单栏里找到“宏”并打开“编辑宏”面板。

    步骤二：首先点击“添加”增加一条宏命令，然后选中刚刚增加的宏命令，在“Label”栏修改宏命令的菜单名称为“LayaCompiler”，以及在“Shortcut”栏设置宏菜单快捷键为“Alt+F5”（快捷键设置仅作参考，不要和别的快捷键冲突）。

    步骤三：在“Entries”栏的右侧位置点击“...”操作区域，打开“字符串集合编辑器”窗口。

    步骤四：在字符串集合编辑器面板里，输入宏指令：

1 2	SaveAllModified RunProcessCaptured|D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe;"$(ProjectPath)";iflash=false;

（Tips：“D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe”应为laya.js.exe的实际所在路径。MAC系统下为“D:\LayaBox\LayaAirAs3_1.5.5\as\LayaJSMac”）

    步骤五：点击”确定“完成宏指令配置后，已经完成宏命令“LayaJsCompiler”全部配置，并即时生效，直接点击“关闭”按钮即可。

至此，建立项目前的LayaAir引擎下载，浏览器下载，FlashDevelop环境下的AS3编译器配置就结束了。

第四步 配置Flash Builder中的AS3编译环境

    步骤一：打开Flash Builder，找到“外部工具 配置”并打开该配置窗口。

    步骤二：在配置窗口内，右键选中“程序”，点击“新建”，打开新建配置窗口。

    步骤三：首先修改外部程序名称为“LayaCompiler”。然后点击“浏览文件系统”找到“laya.js.exe”或者直接复制”laya.js.exe”的路径粘贴到“位置”输入栏。最后在“自变量”栏里输入"${project_loc}\.actionScriptProperties;iflash=false"，点击”应用“即可完成本次配置。

（Tips：“D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe”应为laya.js.exe的实际所在路径。MAC系统下为“D:\LayaBox\LayaAirAs3_1.5.5\as\LayaJSMac”）

至此，建立项目前的LayaAir引擎下载，浏览器下载，Flash Builder环境下的AS3编译器配置就结束了。

jekeyhui99

第三节 新建项目

步骤一： 打开Flash Builder，在菜单栏里点“文件”，然后选中“新建”点击 “ActionScript项目”，进入创建项目的窗口。

步骤二： 在“项目名”输入栏里输入项目名称，然后在“文件夹”输入栏里输入项目存储目录或者是点击“浏览”选择存储的目录。最后点击“下一步”进入引擎编译与引擎库配置的“构建路径”窗口。

步骤三： 在构建路径的配置窗口里，点击“添加SWC”，按下图步骤的操作，将引擎包里的“playerglobal.swc”添加进来。然后删除系统自带的编译SDK，仅保留“playerglobal.swc”即可。最后点击“源路径”配置引擎库。

步骤四：在“源路径”面板点击“添加文件夹”，输入“引擎库所在目录”或点击“浏览”选择“引擎库所在目录”，然后点击确定和完成，即完成了引擎库的导入。

第四节 显示文字“Hello Layabox”

步骤一：菜单栏 “文件” 中选中 “新建”，单击“ActionScript类”，打开新建类文件的窗口。

步骤二：在名称栏输入HelloLayabox，点击 “完成”新建一个ActionScript类

步骤三：将HelloLayabox.as设置为默认应用程序后，然后将一个“Hello Layabox”的文本添加到舞台，代码如下：

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);      
        }
         
    }  
}

步骤四：完成代码编写后，使用之前配置的编译器，开始编译，编译完成后会自动启动chrome运行代码。

运行结果如下图所示：

步骤五：“Hello Layabox”虽然显示出来了，但是太简陋了，下面我们就让“Hello Layabox”变的好看一些，代码如下：

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的开发环境配置无误。更多LayaAir引擎开发的API使用方法，请前往官网Layabox开发者中心查看在线API与在线DEMO。

在线API文档地址：

http://layaair.ldc.layabox.com/api/

在线DEMO文档地址：

http://layaair.ldc.layabox.com/demo/

第五节 WebGL开启

LayaAir引擎默认采用Canvas模式渲染，如果想要启动WebGL模式，需要在初始化舞台的时候的进行设置，例如：

默认Canvas模式渲染的写法为

Laya.init(600, 500);

WebGL模式渲染的AS3写法为

Laya.init(600, 500,WebGL);

开启WebGL模式后，在支持WebGL的环境下，会优先采用WebGL 3D模式渲染，在不支持WebGL的环境下，会自动切换为Canvas 2D渲染模式。

启用WebGL模式的LayaAir引擎，在FPS性能方面可以媲美APP，也超出Canvas模式很多，但编译出的JS文件体积也会变大，所以开发者可以依据项目自身情况自行取舍WebGL模式是否开启。

写在最后

在本篇文章中仅对引擎部分进行了入门级指引，请大家保持对Layabox开发者中心的关注，我们更多教程会逐步的丰富起来，及时更新到开发者中心。感谢大家的信赖，在开发过程中如有任何问题，请及时通过问答社区反馈给我们，我们将尽最大的努力快速处理和解决。