文档

2024-07-03 09:52| 来源: 网络整理| 查看: 265

开发入门

您可以直接使用 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文件： /// _$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 文件，并编写如下内容：五、双击 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文件： /// /// _$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 文件，并编写如下内容：通过添加 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 将类库下载到本地，并修改中的 src 属性。 2、将 test.html等相关文件部署到网页服务器下，通过 http:// 地址来访问。如还有问题可进入 QQ群:156771472 寻求帮助。与浏览器交互

闪归提供了两种与浏览器交互的方式：一种是使用 flash.external.ExternalInterface 类，这种方式提供了最好的与 Flash 的兼容性，有 Flash 开发经验的开发人员可直接上手。一种是“闪归”提供的直接调用方式，您可在 Flash 中使用 AS3语言来操作浏览器提供的各种API，转换为 HTML5 应用后就如同您直接使用 Javascript 一样。

使用ExternalInterface类

Flash 调用 Javascript 函数一、在包含转换结果的 html 页面写一个 javascript 函数： function helloJS() { alert('hello javascript'); } 二、在 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" ：调用注册的函数：新建>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 函数，执行后可弹出一个对话框。运行结果 "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" ：注册事件监听函数：在包含转换结果的html页中写入如下 javascript 代码： 0) ; if (marginLeft>0;//当前的进度数值，有可能带小数，">>0" 可转换为整数。 newLoadingElement.innerText= progress; }); //注册 esLoadComplete 事件，在加载完成后移除加载条 target.addEventListener("esLoadComplete",function(e){ //加载完成后移除加载条 if (newLoadingElement.parentElement) newLoadingElement.parentElement.removeChild(newLoadingElement); });

【本文地址】

文档

文档

今日新闻

推荐新闻