HTML5是一种热门的跨平台开发技术，随着引擎技术的发展，如今LayaAir引擎的产品性能已达到原生APP的水准，甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。认真学习完本篇教程，可以帮您打开全平台开发之门。
LayaAir支持ActionScript3、TypeScript、JavaScript三种语言，因此入门教程也分为三个版本，本篇文章是面向ActionScript3程序员的版本。
另外，本篇LayaAir引擎入门教程是面向已拥有一定开发础基础的程序员，如果对本篇文章中涉及的开发语言尚不熟悉的开发者，请先行学习掌握相关的语言基础后再阅读本文。
特别强调一下，通过与一些早期参与测试的开发者反馈交流，发现一个很重要的问题，那就是很多有经验的程序员自以为对Flash开发模式很熟悉了，跳过教程中的步骤，直接照着DEMO代码写，出现了报错走不通的情况。而严格遵寻教程中指引，一步一步操作的开发者，并未出现问题。因此，建议无论是新手还是老手，一定要在第一次使用LayaAir引擎开发时，严格遵照本篇教程的步骤操作，直到正确完成第一个DEMO。
第一节 开发前的准备
1.1代码编辑器的准备
对于AS3程序员来说，最常用的就是Flash Bulider和FlashDevelop。如果以上两种编辑器都没有安装，请任选以上两种编辑器工具之一，并下载安装。本文以FlashDevelop编辑器为代码开发环境进行介绍。
1.2 LayaAirIDE下载
一个强大的可视化编辑工具，可以大幅提升开发效率，也可以交由美术和策划直接使用，减轻代码开发压力。LayaAirIDE正是一款可视化集成开发工具，当前已集成代码编辑器，UI、粒子、动画等常用可视化编辑工具，还支持DragonBones骨骼编辑器、tileMapEditor地图编辑器等第三方工具。在系统方面，LayaAirIDE支持windows7或以上的windows系统，以及MAC系统。
LayaAir引擎与IDE最新版本的官方入口URL地址：
http://ldc.layabox.com/
1.3 LayaAir Engine下载
LayaAir Engine分为AS3TSJS三个版本，本篇仅介绍AS3版本。
下载解压后，我们可以看到AS3版本的目录结构如下图所示：
“LayaAirSamples”目录内为FlashDevelop工程的引擎基础库示例代码。 “LayaUISample”目录内为LayaAirIDE的UI使用示例代码。 “libs”引擎代码目录，LayaAir引擎代码处于该目录的src子目录中。 “laya.js.exe”为AS3代码编译器，用于将AS3代码编译为JS代码。 “playerglobal.swc”用于替换AS3原生编译器SDK，去除原生API语法提示。 “入门教程.doc”是新手必读文档，保障引擎开发环境的正确配置。
1.4 安装Google Chrome浏览器
使用Laya.js.exe进行代码编译后，默认调用Chrome浏览器打开运行，因此，建议安装此浏览器进行项目调试。
第二节 配置FlashDevelop编译环境
要想使用AS3作为HTML5的开发语言，需要通过laya.js.exe编译器将AS3代码编译为JS代码才可以运行。下面将针对FlashDevelop的编译环境配置进行说明。
步骤一：打开FlashDevelop，通过“Ctrl F10”快捷键调出编辑宏面板。
步骤二：首先点击“添加”增加一条宏命令，然后选中刚刚增加的宏命令，在“Label”栏修改宏命令的菜单名称为“LayaJsCompiler”，以及在“Shortcut”栏设置宏菜单快捷键为“Alt F5”（快捷键设置仅作参考，不要和别的快捷键冲突）。
步骤三：在“Entries”栏的右侧位置点击“...”操作区域，打开“字符串集合编辑器”窗口，输入宏指令：
代码语言：javascript复制SaveAllModified
RunProcessCaptured|D:LayaBoxLayaAirlaya.js.exe;"$(ProjectPath)";iflash=false;
（Tips：”D:LayaBoxLayaAirlaya.js.exe“应为laya.js.exe的实际所在路径）
步骤四：点击”确定“完成宏指令配置后，已经完成宏命令“LayaJsCompiler”全部配置，并即时生效，直接点击“关闭”按钮即可。
第三节 新建FlashDevelop项目
步骤一：打开FlashDevelop，在“项目”菜单栏点击“新建项目”。
步骤二：选择”AS3 Project“类型，输入项目名称，选择项目存放位置后，点击“确定”完成新建项目的操作。
第四节 配置项目
4.1 引用引擎库
步骤一：在项目面板点击“项目属性”按钮，打开项目属性配置窗口。
步骤二：点击“添加类路径”选择LayaAir引擎所在目录，然后点击“确定”完成LayaAir引擎库的引用。
4.2 配置playerglobal.swc
步骤一：在新建的项目studyLayaAirAS3下添加一个libs文件夹。
步骤二：将下载解压后的LayaAir引擎根目录下“playerglobal.swc”通过鼠标点中拖拽的方式，拖到刚创建的libs文件夹下，并添加到库。
第五节 显示文字“Hello Layabox”
5.1 新建类文件HelloLayabox
步骤一：右键“src目录”添加一个新类。(提示：添加的类文件必须在src目录下，或者通过“添加类路径”引用进来，否则是无法被编译的)
步骤二：将类名称设置为HelloLayabox
5.2 在H5页面上显示“Hello Layabox”
步骤一：将HelloLayabox设为文档类
步骤二：将一个“Hello Layabox”的文本添加到舞台，代码如下：
代码语言：javascript复制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”变的更好看些，代码如下：
代码语言：javascript复制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模式渲染的写法为
代码语言：javascript复制
Laya.init(600, 500);WebGL模式渲染的AS3写法为
代码语言：javascript复制
Laya.init(600, 500,WebGL);开启WebGL模式后，在支持WebGL的环境下，会优先采用WebGL 3D模式渲染，在不支持WebGL的环境下，会自动切换为Canvas 2D渲染模式。
启用WebGL模式的LayaAir引擎，在FPS性能方面可以媲美APP，也超出Canvas模式很多，但编译出的JS文件体积也会变大，所以开发者可以依据项目自身情况自行取舍WebGL模式是否开启。
写在最后
在本篇文章中仅对引擎部分进行了入门级指引，请大家保持对Layabox开发者中心的关注，我们更多教程会逐步的丰富起来，及时更新到开发者中心。感谢大家的信赖，在开发过程中如有任何问题，请及时通过问答社区反馈给我们，我们将尽最大的努力快速处理和解决。
