游戏开发者社区

[ActionScript 3] Layabox视频教程第二篇《flash动画一键编译成Html5资源动画》

查看: 11321|回复: 36

Rank: 5Rank: 5

威望
0 点
义气
100 点
发表于 2015-2-5 00:17:17 |显示全部楼层
http://layabox.com/video/FD-02_baofeng.mp4请点击视频查看!

一、环境安装 1. 配置浏览器调试环境

下载并安装谷歌(chrome)浏览器 右击chrome浏览器快捷图标,选择 属性-->快捷方式-->目标 在目标中 设置启动参数:--allow-file-access-from-files
修改启动参数的原因:谷歌浏览器(chrome)默认禁止本地浏览时加载本地其他文件; 如图所示:




注意: 目标里,chrome.exe的路径如果有空格,需要加引号如: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

二、新建项目并编译H5

1.新建AS3项目,播放SWF动画

打开Flash develop,新建AS3项目HelloSwf,将Laya.swc加入库里。



Main.as代码如下:

[Actionscript3] 纯文本查看 复制代码
package {
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.system.ApplicationDomain;
    import flash.system.LoaderContext;
  
    public class Main extends Sprite {
        public function Main() {
        IFlash.setSize(600, 600); //设置舞台宽高
        IFlash.setBgcolor("#ffffff"); //设置舞台背景颜色,默认#000000
        IFlash.setOrientationEx(1); //设置手机横竖屏显示,默认横屏@paramvalue0竖屏1横屏
        IFlash.showInfo(true); //设置是否显示FPS信息,默认true显示
        if (stage)
            init();
        else
           addEventListener(Event.ADDED_TO_STAGE, init);
        }
  
        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
            loader.load(newURLRequest("res/data.swf"), context);
       } 
       private function onCompleteHandler(e:Event):void {
            varMClip: Class = ApplicationDomain.currentDomain.getDefinition('Dragon_5') as Class;
            var movie:MovieClip = new MClip();
            movie.x = (stage.stageWidth / 2);
            movie.y = (stage.stageHeight / 2) + 100;
            addChild(movie);
       }
    }
}


2.用Flash develop调试项目查看效果

效果如下图所示:


3.编译H5

点击菜单里的 Macros(宏)-> Laya_Publish_H5 如下图所示:




执行此操作后会在 项目输出目录/h5 文件下生成文件helloswf.max.html 、helloswf.max.js 如下图:



4.处理资源

打开资源处理工具把资源:项目输出目录/res/data.swf转化为适用于H5的格式。





1.打开LayaFlash,选择资源转换

2.将data.swf,或data.swf文件所在的文件夹拖入资源转化区域

3.点击更改,选择SWF路径和输出路径

4.点击"开始转换"按钮

5.资源转化完成后,在资源输出目录下生成了以下文件:

data.swf:h5项目里需要用到的资源数据文件

data文件夹:里面是从data.swf里提取出来的图片

6.将data.swf和data文件夹放在H5项目目录下对应的文件夹里。



5.用Chrome调试查看效果

(1)、编译H5项目成功后,会自动启动Chrome打开生成的H5文件:helloswf.max.html
(2)、用Chrome打开生成的h5文件:helloswf.max.html
效果如下图所示:



Demo下载地址:http://www.layabox.com/download/demos/FlashDevelop.rar

Flash builder教程链接:LayaFlash方案用Flash builder开发Html5游戏——进阶篇

了解更多layabox信息,请到官网查看layabox.com

举报

Rank: 13Rank: 13Rank: 13Rank: 13

威望
1 点
义气
45 点
发表于 2015-2-5 00:22:52
111111111111

点评

Lǎo_Lǐ  不好意思。复制错了,这么快,佩服,已经改了,谢谢提醒!  发表于 2015-2-5 00:24:18

举报

Rank: 5Rank: 5

威望
0 点
义气
100 点
发表于 2015-2-5 00:23:47
design888 发表于 2015-2-5 00:22
你确定是【NB】Layabox  不是什么“野蛮女友”?  
麻烦认真一点嘛

刷新一下

举报

Rank: 5Rank: 5

威望
0 点
义气
100 点
发表于 2015-2-5 10:19:49
第三期已经开始准备了,敬请大家关注!

举报

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

威望
0 点
义气
5 点

赤子之心勋章

发表于 2015-2-5 11:20:45
嗯,挺不错的,期待第三期。

举报

Rank: 5Rank: 5

威望
0 点
义气
100 点
发表于 2015-2-5 13:30:47
觉法净 发表于 2015-2-5 11:20
嗯,挺不错的,期待第三期。

谢谢关注,第三期会尽快推出!

举报

Rank: 6Rank: 6Rank: 6

威望
0 点
义气
5 点
发表于 2015-2-5 13:44:03
又不给用光出教程干嘛?

点评

laya小豪  这个目前还是需要一些时间,教程出来也可以进行学习  发表于 2015-2-5 14:26:14

举报

Rank: 3Rank: 3Rank: 3

威望
21 点
义气
0 点
发表于 2015-2-5 14:27:17
请大家再耐心等待一下,关于教程我们会尽快出第3期,工具我们也会在以后慢慢推进发布

举报

Rank: 7Rank: 7Rank: 7Rank: 7

威望
0 点
义气
5 点
发表于 2015-2-5 15:10:18
不错不错,工具啥时候出啊到低

举报

Rank: 3Rank: 3Rank: 3

威望
21 点
义气
0 点
发表于 2015-2-5 15:51:44
可能会在5月之后,这个还有待商榷,我们这边也会尽快推动推出

举报

Rank: 11Rank: 11Rank: 11Rank: 11Rank: 11

威望
1 点
义气
215 点
发表于 2015-2-5 16:00:19
继续关注 献花 赞一个

举报

Rank: 3Rank: 3Rank: 3

威望
21 点
义气
0 点
发表于 2015-2-5 16:16:23
感谢大家的支持,我们也会更加努力

举报

Rank: 3Rank: 3Rank: 3

威望
21 点
义气
0 点
发表于 2015-2-5 17:01:40
感谢大家支持,我们马上推出第三期

举报

Rank: 5Rank: 5

威望
0 点
义气
100 点
发表于 2015-2-6 00:20:58
nong 发表于 2015-2-5 16:00
继续关注 献花 赞一个

谢谢关注!

举报

Rank: 3Rank: 3Rank: 3

威望
21 点
义气
0 点
发表于 2015-2-6 09:42:03
期待第三次速度跟进,我们也努力的学习一下

举报

您需要登录后才可以回帖 登录 | 注册

关闭

江湖传闻

手机版|9RIA.com ( 京ICP备11007422号-2 

GMT+8, 2017-7-28 14:39 , Processed in 0.136050 second(s), 19 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部