开发入门
您可以直接使用 Flash 内置的 AS3 语言进行开发,还可以使用 TS/JS 语言开发:
使用 AS3 语言,您仅需要 FlashCS / FlashCC / AnimateCC 并安装我们提供的插件即可完成全部的开发工作。
使用 TS/JS 语言进行开发,则您可以使用 Flash 创建HTML5中使用的各种资源,并在 TS/JS 编辑器中直接调用。
使用AS3开发
Hello World !
- 一、安装 FlashCS / FlashCC / AnimateCC
- 二、下载并安装转换插件
- 三、运行 FlashCS / FlashCC / AnimateCC 并选择菜单 "文件 > 新建 > Actionscript 3.0"
- 四、选中工具栏的 文本工具:
- 五、在舞台上画出一个文本框:
- 六、在属性栏中将其名称设置为 "mytf" 其它设置如图:
- 七、按快捷键 "F9" 或点击菜单 "窗口 > 动作" 打开动作面板,编写如下AS3代码:
import flash.text.TextField; var mytf:TextField = this.mytf; mytf.text="Hello World!";
- 八、按快捷键 "Ctrl + Enter" 或点击菜单 "控制 > 测试" 预览效果
- 九、输出为 HTML5 版本:
如果您使用的是 FlashCS 系列请选择菜单: "窗口>其它面板>闪归Flash转HTML5" 打开操作面板,并点击"启动转换"按钮。
如果您使用的是 FlashCC / Animate CC 系列 请选择菜单: "窗口>扩展>闪归Flash转HTML5" 打开操作面板,并点击"启动转换"按钮。
- 十、查看并下载 HTML5 版本:
输出完成后会自动打开您的浏览器进入到结果页面,您可以在此页面的下方点击按钮 "提交评价并下载转换结果" 获取转换后的 HTML5 文件。
事实上使用 AS3 这种方式的开发过程和您开发普通的 Flash 是完全一样的。唯一的区别就是多了一步打开 "闪归Flash转HTML5 操作面板",并点击"启动转换"按钮。
使用 Typescript/Javascript 开发
除 AS3 之外,您还可以使用 Typescript 或 Javascript 进行开发。推荐您使用 Typescript ,
因为它提供了强类型及代码提示功能,同时我们也提供有类库的 d.ts 文件,方便您开发。
下面的示例均使用 Typescript 。
纯代码的 Hello World !
- 一、安装一个 TS 编辑器(如 Visual Studio Code),并新建一个名为 test.ts 的 TS 文件。
- 二、下载类库的 fr_libv1.0.0.d.ts 文件 ,解压到与 test.ts 的同目录下。
- 三、在 test.ts 中编写如下代码并保存,此 test.ts 文件将会产生一个同名的js文件:
/// <reference path="fr_libv1.0.0.d.ts" /> _$ES.start(550/*宽*/,400/*高*/,30/*帧频*/,"rgba(255,255,255,1)"/*背景颜色*/, //准备好后会执行这个函数 function(appInfo:_$ES.AppInfo){ //创建一个TextField实例 var tf:_$AS.flash.text.TextField = new _$AS.flash.text.TextField(); //设置默认的格式为 宋体、64字号、红色 tf.defaultTextFormat = new _$AS.flash.text.TextFormat("宋体",64,0xff0000); tf.x = 60; tf.y = 120; tf.width=450; tf.height=75; tf.text="Hello World!"; //获取当前的舞台引用 var stage:_$AS.flash.display.Stage = appInfo.player.stage; //添加到舞台上 stage.addChild(tf); });
请您注意:所有的原 AS3 类库都在 _$AS 包下。如 flash.display.Sprite 在 _$AS.flash.display.Sprite 下。 - 四、在 test.ts 的同目录下创建一个 test.html 文件,并编写如下内容:
<!DOCTYPE html> <head> <meta charset="utf-8" /> </head> <body> <div id="esContent" data-es_url="test.js" data-es_from="javascript"></div> <script data-es_mainjs="" src="http://static.flashreturn.com/libs/v1.0.0/_$ESLoader.js" type="text/javascript"></script> <!-- 可以访问 http://static.flashreturn.com/libs/libv1.0.0.zip 将类库下载到本地 --> </body> </html>
- 五、双击 test.html 用浏览器打开,就可以看到运行结果:
与 Flash 配合的 Hello World !
基本思路是用 Flash 来创建元件,并导出 Actionscript 类,然后在 TS 中实例化这个类并添加到舞台上即可。- 一、安装 FlashCS / FlashCC / AnimateCC 并下载并安装转换插件
- 二、运行 FlashCS / FlashCC / AnimateCC 并选择菜单 "文件 > 新建 > Actionscript 3.0" 。
点击菜单 "插入 > 新建元件" 打开 "创建新元件窗口" ,将元件名称设置为 "文本框元件" ,选中为 "ActionScript 导出"选项 并将类名设置为 "myns.ShowText",完成后点击 "确定" 按钮。
- 三、选中工具栏的 文本工具:
在当前的元件内画出一个文本框,(为了展现对矢量图形的支持,用画笔在文本框周围画了一圈的描边):
在属性栏中将其名称设置为 "mytf" 其它设置如图:
- 四、输出为 HTML5 版本:
如果您使用的是 FlashCS 系列请选择菜单: "窗口>其它面板>闪归Flash转HTML5" 打开操作面板,并点击"启动转换"按钮。
如果您使用的是 FlashCC / Animate CC 系列 请选择菜单: "窗口>扩展>闪归Flash转HTML5" 打开操作面板,并点击"启动转换"按钮。
- 五、查看并下载 HTML5 版本:
输出完成后会自动打开您的浏览器进入到结果页面,您可以在此页面的下方点击按钮 "提交评价并下载转换结果" 获取转换后的结果。
打开获取的转换后的结果里的 .js 文件和 .d.ts 文件解压缩到一个目录下 (如c:\helloworld ),这个示例中分别是 "无标题-1.js" 和 "无标题-1.d.ts"
- 六、安装一个 TS 编辑器(如 Visual Studio Code),并在与转换结果解压缩目录下(如c:\helloworld)下新建一个名为 test.ts 的 TS 文件。
- 七、下载类库的 fr_libv1.0.0.d.ts 文件 ,解压到与 test.ts 的同目录下。
- 八、在 test.ts 中编写如下代码并保存,此 test.ts 文件将会产生一个同名的js文件:
/// <reference path="fr_libv1.0.0.d.ts" /> /// <reference path="无标题-1.d.ts" /> _$ES.start(550/*宽*/,400/*高*/,30/*帧频*/,"rgba(255,255,255,1)"/*背景颜色*/, //准备好后会执行这个函数 function(appInfo:_$ES.AppInfo){ //实例化我们的元件类,注意我们的元件类原来命名为 myns.ShowText //而这里要写为_$AS.myns.ShowText,因为所有的AS3的类都在 _$AS 包下。 var showText:_$AS.myns.ShowText = new _$AS.myns.ShowText(); //我们给元件里的文本框命名为 mytf 所以这里可以通过 .mytf 来访问这个文本框实例 showText.mytf.text="Hello World!"; showText.x = 60; showText.y = 120; //获取当前的舞台引用 var stage:_$AS.flash.display.Stage = appInfo.player.stage; //将元件添加到舞台上 stage.addChild(showText); });
- 九、在 test.ts 的同目录下创建一个 test.html 文件,并编写如下内容:
<!DOCTYPE html> <head> <meta charset="utf-8" /> </head> <body> <div id="esContent" data-es_url="test.js" data-es_flash_resources="无标题-1.js" data-es_from="javascript"></div> <script data-es_mainjs="" src="http://static.flashreturn.com/libs/v1.0.0/_$ESLoader.js" type="text/javascript"></script> <!-- 可以访问 http://static.flashreturn.com/libs/libv1.0.0.zip 将类库下载到本地 --> </body> </html>
通过添加 data-es_flash_resources="无标题-1.js" 属性将 Flash 转换后的同名JS文件作为资源附加进去。如果有多个可用 ";" 分割,如 data-es_flash_resources="无标题-1.js;无标题-2.js;无标题-3.js" - 十、双击 test.html 用浏览器打开,就可以看到运行结果:
点击下载此示例的源文件。
如运行后空白页面,可尝试用如下方法解决:- 1、访问 http://static.flashreturn.com/libs/libv1.0.0.zip 将类库下载到本地, 并修改 <script data-es_mainjs="" src="http://static.flashreturn.com/libs/v1.0.0/_$ESLoader.js" type="text/javascript"></script> 中的 src 属性。
- 2、将 test.html等相关文件部署到网页服务器下,通过 http:// 地址来访问。
与浏览器交互
闪归提供了两种与浏览器交互的方式:
一种是使用 flash.external.ExternalInterface 类,这种方式提供了最好的与 Flash 的兼容性,有 Flash 开发经验的开发人员可直接上手。
一种是“闪归”提供的直接调用方式,您可在 Flash 中使用 AS3语言 来操作浏览器提供的各种API, 转换为 HTML5 应用后就如同您直接使用 Javascript 一样。
使用ExternalInterface类
Flash 调用 Javascript 函数
-
一、在包含转换结果的 html 页面写一个 javascript 函数:
<script type="text/javascript"> function helloJS() { alert('hello javascript'); } </script>
-
二、在 Flash 调用这个 javascript 函数:
flash.external.ExternalInterface.call("helloJS");
- 三、执行结果:
Javascript 调用 Flash 函数
-
一、在 Flash 中注册一个函数,注册名为 "helloAS":
flash.external.ExternalInterface.addCallback("helloAS",function():void{ trace("Hello ActionScript"); });
-
二、在 Javascript 中调用注册的函数:
-
在包含转换结果的html页中,找到如下元素,并记下其 id,在此示例中,其id为"esContent" :
<div id="esContent" data-es_url="fireanyway2.js" data-es_base64="false" data-es_render_mode="1" style="border:1px solid #666666;width:940px;height:640px"></div>
-
调用注册的函数:
<input type="button" value="调用Flash函数" onclick="javascript:callAS();" /> <script type="text/javascript"> function callAS() { //找到 esContent 元素,然后执行注册的 "helloAS" 函数 document.getElementById("esContent").helloAS(); } </script>
-
在包含转换结果的html页中,找到如下元素,并记下其 id,在此示例中,其id为"esContent" :
- 三、执行结果:
AS3直接操作浏览器API
我们使用 ExternalInterface 类与 Javascript 交互的目的是为了调用浏览器提供的各种功能API, 现在您可以直接用 AS3语言 来操作这些 API了! 转换为HTML5应用后就如同您直接使用 Javascript 操作一样。
准备:
下载并安装 1.0.3 及以上版本的 闪归Flash转HTML5插件小试牛刀:
- 打开 Flash 编辑器,并选择菜单:文件>新建>Actionscript 3.0
- 按 F9 打开动作编辑器窗口
- 输入如下代码:
import frToolkit.inJS; import frToolkit.js.alert; if (frToolkit.inJS){ trace("在浏览器中"); frToolkit.js.alert('你好,浏览器!'); }else{ trace("在flash player中"); }
代码说明:-
if (frToolkit.inJS)
这个语句用来判断当前是处于浏览器环境还是Flash Player环境。
如果您点击转换插件的"启动转换",将 Flash 转换为 Html5 应用,则此值为 true,表示在浏览器环境运行。
如果您按下 "Ctrl+回车" 运行这个Flash,则此值为 false,表示是在Flash Player环境运行。
由于我们将要操作浏览器提供的 API,所以只能在转换为 Html5 后方可使用。
-
frToolkit.js.alert("你好,浏览器!");
调用浏览器提供的名为 alert 的 javascript 函数,执行后可弹出一个对话框。
-
if (frToolkit.inJS)
- 运行结果
- "Ctrl+回车" 直接运行:
- 转换后在浏览器中:
- "Ctrl+回车" 直接运行:
厉害一点:
下面的代码将调用浏览器提供的 HTMLCanvasElement 并绘制图形和文字后,转换为一个 BitmapData 对象添加到显示列表中。
- 打开 Flash 编辑器,并选择菜单:文件>新建>Actionscript 3.0
- 按 F9 打开动作编辑器窗口
- 输入如下代码:
import frToolkit.js.HTMLCanvasElement; import frToolkit.js.document; import frToolkit.js.CanvasRenderingContext2D; import frToolkit.inJS; import frToolkit.JSTools; import flash.display.BitmapData; import flash.display.Bitmap; //仅在浏览器环境下执行,因为 Flash Player 并没有 HTMLCanvasElement 这些对象,只有浏览器环境下有。 if (frToolkit.inJS){ //创建一个 HTMLCanvasElement 对象 var canvas:HTMLCanvasElement = frToolkit.js.document.createElement("canvas") as HTMLCanvasElement; //设置高宽 canvas.width=550; canvas.height=400; //获取 canvas2D 上下文 var ctx:CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D; //画一个圆形 ctx.fillStyle = "rgba(46,129,206,1)"; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(250, 60, 50, 0, 2 * Math.PI, true); ctx.closePath(); ctx.fill(); ctx.stroke(); //文字 ctx.font="26px 微软雅黑"; ctx.fillText("我是用 CanvasRenderingContext2D 创建的",20,160); ctx.strokeText("我是用 CanvasRenderingContext2D 创建的",20,160); //将 HTMLCanvasElement 转换为 BitmapData 对象实例 var bmpData:BitmapData = frToolkit.JSTools.imageSourceToBitmapData( canvas ); //添加到显示列表中显示 this.addChild( new Bitmap( bmpData )); }
- 运行结果
- 转换后在浏览器中:
- 转换后在浏览器中:
通过直接操作浏览器提供的API,使得你可以在 Flash 中使用 AS3 语言来直接做以前必须额外调用 Javascript 才能完成的事情!这给您提供了无限的可能!
常见问题
自定义Loading加载条
有时候您希望能创建自己的 loading 加载动画,为此我们提供了3个事件帮助您完成此操作。
- 事件 esAppInfoInit ,当应用数据初始化完成,准备开始加载前触发。
- 事件 esLoadProgress ,每次加载进度改变时触发,触发时会向监听函数传递一个对象,访问这个 对象.detail.progress 可获得当前的进度,取值0-100,可能有小数,且不保证一定会到100,所以不要依靠此值判断是否已经加载完成。
- 事件 esLoadComplete ,加载完成后触发,应监听此事件来确定加载完成,而不应在esLoadProgress中判断进度为100时确定。
如何注册上述事件的监听
-
在包含转换结果的html页中,找到如下元素,并记下其 id,在此示例中,其id为"esContent" :
<div id="esContent" data-es_url="fireanyway2.js" data-es_base64="false" data-es_render_mode="1" style="border:1px solid #666666;width:940px;height:640px"></div>
-
注册事件监听函数:
在包含转换结果的html页中写入如下 javascript 代码:<script type="text/javascript"> var target = document.getElementById("esContent"); //注册 esAppInfoInit 事件 target.addEventListener("esAppInfoInit",function(e){ console.log("初始化完成,准备开始加载。", e); }); //注册 esLoadProgress 事件 target.addEventListener("esLoadProgress",function(e){ console.log("加载中,当前进度:", e.detail.progress); }); //注册 esLoadComplete 事件 target.addEventListener("esLoadComplete",function(e){ console.log("加载完成。", e); }); </script>
一个较完整的替换加载动画的示例
在包含转换结果的html页中写入如下 javascript 代码:<script type="text/javascript"> //找到目标容器 var target = document.getElementById("esContent"); //新的加载条 var newLoadingElement = document.createElement("div"); //注册 esAppInfoInit 事件,在这个事件中移除默认的加载条并替换为新的加载条 target.addEventListener("esAppInfoInit",function(e){ var appInfoSource = e.detail.appInfoSource; var loadingElement = appInfoSource.loadingElement; //移除默认的加载条并替换新的加载条 if (loadingElement.parentElement){ //移除默认加载条 loadingElement.parentElement.removeChild(loadingElement); //应用新的加载条 target.appendChild(newLoadingElement); //将新的加载条居中显示 var rect = target.getBoundingClientRect(); var w = rect.width; var h = rect.height; var marginTop = ((h-30)/2>>0); if (marginTop<0)marginTop = 0; var marginLeft =((w-60)/2>>0) ; if (marginLeft<0)marginLeft= 0; newLoadingElement.style.margin = marginTop +"px "+ marginLeft +"px" ; } }); //注册 esLoadProgress 事件,每当进度改变就将进度数字在新加载条中显示。 target.addEventListener("esLoadProgress",function(e){ var progress = e.detail.progress >>0;//当前的进度数值,有可能带小数,">>0" 可转换为整数。 newLoadingElement.innerText= progress; }); //注册 esLoadComplete 事件,在加载完成后移除加载条 target.addEventListener("esLoadComplete",function(e){ //加载完成后移除加载条 if (newLoadingElement.parentElement) newLoadingElement.parentElement.removeChild(newLoadingElement); }); </script>
加载外部文件/swf动画
加载外部文件(图片、音频、其它文件)
加载外部文件与在 Flash 中并无不同,您可以直接使用如下类进行外部文件的加载:- 使用 flash.display.Loader 类 对图片进行加载
- 使用 flash.media.Sound 类 对音频进行加载
- 使用 flash.net.URLLoader 类对其它文件进行加载
加载外部swf文件
如您要加载名为 a1.swf 的Flash文件- 将 a1.swf 转换为HTML5格式,可以获得一个名为 a1.js 的文件。
-
在主文件中写如下代码加载 a1.swf:
//注意这里是加载 a1.swf ,当转换为 HTML5 版本后,系统会判断如果加载的是 .swf 文件则自动加载同名的 .js 文件 //如这里在转换后会加载 a1.js 文件。此时您只需要将第一步获得的 a1.js 文件放到同目录下即可。 var request:URLRequest = new URLRequest("a1.swf"); var loader:Loader = new Loader() loader.load(request); addChild(loader);
脱离网络本地运行
默认情况下,转换后的结果您需要部署到服务器上才能正常运行,如果您需要脱离网络本地运行则需要通过以下步骤实现:
- 在Flash的转换插件中选中 "支持本地播放" 选项,并点击 "启动转换" 按钮
- 转换完成后会打开浏览器进入到结果页面,您可以在此页面的下方点击按钮 "提交评价并下载转换结果" 下载到本地。
- 将下载的转换结果解压缩到本地目录下,如 "d:\test" 目录下。
- 将类库下载到本地 下载完成后解压缩到转换结果的同目录下,如 "d:\test" 目录。 此时, "d:\test" 下会多一个名为 "v1.0.0" 的目录,此目录即为类库所在目录。
-
在 "d:\test" 下有两个 .html 文件,用记事本打开这两个文件,将里面的
<script data-es_mainjs="" src="http://static.flashreturn.com/libs/v1.0.0/_$ESLoader.js" type="text/javascript"></script>
改为<script data-es_mainjs="" src="v1.0.0/_$ESLoader.js" type="text/javascript"></script>
并保存即可。然后双击这两个 html 文件用浏览器打开即可看到本地运行的结果。
跨域请求数据/文件
当您使用 URLLoader/Loader 等类加载外部的文件或数据时(跨域请求),则目标服务器必须允许跨域请求,这里以 IIS 为例演示 如果让一个网站允许跨域请求。
-
打开 "IIS管理器",选中要允许跨域请求的网站,切换为"功能视图",双击 "HTTP响应标头" 图标进入设置界面。
-
在设置界面,点击右侧操作栏 "添加" 链接,打开添加新响应标头对话框。
-
在添加相应标头对话框中,名称输入 "Access-Control-Allow-Origin",值输入 "*" ,注意不包含双引号。点击确定即可。
这里的值输入为 "*" 表示允许任何域名对当前网站进行跨域请求,如果您只允许某个域名则将此域名设置为值即可,如"http://www.flashreturn.com" ,不包含引号。