请选择 进入手机版 | 继续访问电脑版
查看: 3606|回复: 1

[基础教程] LayaFlash方案用Flash develop开发Html5游戏——入门篇

[复制链接]
最佳答案
0 
麋鹿了 发表于 2015-6-3 15:00:26 | 显示全部楼层 |阅读模式
本帖最后由 麋鹿了 于 2015-6-8 10:58 编辑

一、环境安装 1.1 安装LayaFlash.exe

下载地址:
http://www.layabox.com/

默认安装路径是:C:\Program Files\LayaBox\LayaFlash
Laya.swc路径:C:\Program Files\LayaBox\LayaFlash\Laya\swcs\Laya.swc
1.png
1.2 配置浏览器调试环境

下载并安装谷歌(chrome)浏览器 http://61.240.129.43/softdl.360t ... le_43.0.2357.65.exe

二、编译配置

1.Flash develop快速编译H5配置

点击菜单里的 Macros->Edit Macros… 如下图:
2.png
3.png
4.png
步骤说明:
第1步:添加一条宏命令;
第2步:选中此宏命令;
第3步:打开字符串集合编辑器;
第4步:在字符串集合编辑器里输入字符串集合并点击确定保存:

SaveAllModified
RunProcessCaptured|C:\Program Files\LayaBox\LayaFlash\Laya\laya.js.exe;"$(ProjectPath)"

其中C:\Program Files\LayaBox\LayaFlash需要替换为LayaFlash的安装路径。
第5步:设置宏命令名称Laya-PublishH5
第6步: 设置自己喜欢并且未冲突的快捷键;
第7步:保存。


三、新建项目并编译H5

1.新建AS3项目HelloLayaFlash


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

Main.as代码如下:
  1. package{   
  2.     import flash.display.Sprite;   
  3.     import flash.events.Event;   
  4.     import flash.text.TextField;   
  5.     import flash.text.TextFormat;   
  6. [SWF(width='600',height='600',frameRate='60',backgroundColor='#ffffff')]   
  7. public class Main extends Sprite  
  8.   {      
  9.       public function Main()        
  10.       {                     
  11.             IFlash.setSize(600,600);// 设置舞台宽高           
  12.        IFlash.setBgcolor("#ffffff");   //设置舞台背景颜色,默认 #000000         
  13.             IFlash.setOrientationEx(1);//设置手机横竖屏显示,默认横屏 @param               value 0 竖屏 1 横屏           
  14.        IFlash.showInfo(true);//设置是否显示FPS信息,默认true 显示                     
  15.       if (stage) init();         
  16.            else addEventListener(Event.ADDED_TO_STAGE, init);      
  17.         }      
  18.      private function init(e:Event = null):void      
  19.       {            
  20.               removeEventListener(Event.ADDED_TO_STAGE, init);           
  21.               var textFormat:TextFormat = new TextFormat();           
  22.               textFormat.color = 0xFF0000;           
  23.               textFormat.size = 80;           
  24.               textFormat.font = "Arial";            
  25.               var textField:TextField = new TextField();           
  26.               textField.defaultTextFormat = textFormat;         
  27.               textField.text = "Hello LayaFlash";         
  28.               textField.width = textField.textWidth;           
  29.               textField.height = textField.textHeight;           
  30.               textField.x = (stage.stageWidth - textField.width)/2;         
  31.               textField.y = (stage.stageHeight - textField.height)/2;           
  32.               this.addChild(textField);           
  33.                trace("Hello LayaFlash");      
  34.           }   
  35.      }
  36. }
复制代码
2.用Flash develop调试项目查看效果
12.png
3.编译H5

点击菜单里的 Macros-> Laya-PublishH5 如下图所示:
7.png
执行此操作后会在 项目输出目录/h5 文件下生成文件hellolayaflash.max.html、hellolayaflash.max.js 如下图:
8.png

4.用Chrome调试查看效果

用Chrome打开生成的h5文件:hellolayaflash.max.html 效果如下图所示:

13.png



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



官网地址:www.layabox.com
微信公众号:layaBox
Layabox开发者群:330223972
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表