【Morn UI系列教程】Morn简介及使用教程
网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足。
Morn UI学习了Flash IDE使用的方便性(比如图层功能,对齐,缩放,层次切换等等),同时吸取Flex组件化的特点,抛弃了Flex臃肿的结构,具有轻量级,高性能,可视化,易扩展等特性,满足了各种个性化开发需求,详情可以到http://www.mornui.com/了解
下面说一下Morn Builder(可视化编辑器)使用方式
使用可视化UI编辑器(Morn Builder)制作游戏界面
提示:编辑器需要32位java环境,如果没有,请去http://www.java.com/下载安装完毕后,再执行下面教程
1.到网站http://blog.mornui.com/?page_id=17下载Morn UI编辑器及MornUILib组件库源码
2.解压并打开builder下的Main.exe,点击【创建新项目】,然后输入项目名和项目存放的位置
3.确定并创建好后,在左边资源面板,点击“添加资源”打开项目的资源目录(在morn里,图片即组件,编辑器根据资源前缀识别成对应的组件,命名详见《Morn资源命名规则》)
4.复制资源到刚才打开的assets目录,图片要以文件夹的方式存放,编辑器会以文件夹为单位打包为对应的swf(本文最下面提供了组件资源下载,也可以在官网demo里面找到)
5.在编辑器内按快捷键F5刷新,就能看到资源组件树了(如果提示java失败,请先下载一个32位java环境www.java.com,然后再编辑器使用快捷键Ctrl+F5强制刷新资源)
6.在编辑器内,使用快捷键Ctrl+N新建一个页面,起名叫Page1
7.拖拽左面资源区任意组件到视图内,摆放拼装成需要的界面。还可以通过右面的属性面板,设置各种参数以控制不同的显示效果
很简单吧,编辑器有很多功能,大部分功能都能在菜单和快捷工具栏中找到,并对应快捷键方便使用,有时间可以详细了解下
更多教程请参考http://blog.mornui.com/?cat=6
下面说一下如何
用代码控制UI
Morn UI库的使用
1.新建AS3项目到上面的项目目录(我这里是E:\test)(这里创建as3项目用的是FlashDevlop,用FlashBuilder类同,注意编译目录改为bin,默认为bin-debug)
2.解压上面下载的MornUILib文件,复制MornUILib/src下的源码到刚才新建的AS3项目的src目录下
3.在编辑器内,选中按钮,然后在属性面板var里面输入个名称,比如btn
4.编辑器内用快捷键Ctrl+S保存,然后按快捷键F12发布代码。发布成功后,Page1会对应生成Page1UI.as并默认发布到项目src/game/ui下,所用资源自动打包为swf,默认发布到项目bin/assets下(路径可配置,快捷键F9)
5.现在要使用这个页面,那么我们新建一个类,继承自这个Page1UI类,就可以随意控制它了(UI和逻辑分离)
6.在主文档程序Main.as里面,初始化Morn,加载资源,并实例化这个Page1页面
7.编译项目,至此就能正确的运行了
非常简单吧,Morn UI还有更多功能呢,请参考后续教程
【Morn UI系列教程】Morn简介及使用教程的更多相关文章
- Morn简介及使用教程
[Morn UI系列教程]Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Morn UI学 ...
- [网页游戏开发]Morn简介及使用教程
网页游戏开发利器,morn系列教程之Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Mor ...
- [网页游戏开发]进一步了解Morn UI及工作流
Morn UI工作流 Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题 ...
- Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- [渣译文] SignalR 2.0 系列: SignalR简介
原文:[渣译文] SignalR 2.0 系列: SignalR简介 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ...
- SignalR 2.0 系列: SignalR简介
SignalR 2.0 系列: SignalR简介 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ASP.NET S ...
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(34)-Fiddler如何抓取微信小程序的包-上篇
1.简介 有些小伙伴或者是童鞋们说小程序抓不到包,该怎么办了???其实苹果手机如果按照宏哥前边的抓取APP包的设置方式设置好了,应该可以轻松就抓到包了.那么安卓手机小程序就比较困难,不是那么友好了.所 ...
- ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
随机推荐
- 网站服务器压力Web性能测试(2):Webbench:最多模拟3万个并发连接数测试压力
1.Webbench最多可以模拟3万个并发连接数来测试服务器压力,可以设置压力测试时间和测试请求的成功率.安装Webbench命令: wget https://home.tiscali.cz/~cz2 ...
- freemark基础知识
前言:使用freemarker对应生成一个html文件,保存到磁盘,访问文件就不一定使用tomcat,可以使用nginx(http服务器)访问.可以使用freemaker工具生成.只生成一次,html ...
- [How to]使用自定义cell进行tableview的创建,适用于cell样式不发生变化的情况。
1.简介 在tableview中又默认的cell格式,其中组织如下: <截取自官网文档> 最终的在页面上默认的cell也只能像上述那样的显示效果,如果这种要是无法满足我们的界面要求,那么我 ...
- 虚拟存储管理中几种缺页中断算法(最佳置换法OPT)
缺页中断就是要访问的页不在主存,需要操作系统将其调入主存后再进行访问. 在进行内存访问时,若所访问的页已在主存,则称此次访问成功: 若所访问的页不在主存,则称此次访问失败,并产生缺页中断. 最佳置换法 ...
- 3:django models Making queries 高级进阶--聚合运算
在前一遍文章django models Making queries里面我们提到了django常用的一些检索数据库的内容, 下面我们来看一下更为高级的检索聚合运算 这是我们要用到的模型 class A ...
- ES6 一种新的数据结构--Map跟Objct的区别
var map1=new Map(); var keys={key:'val'}; map1.set(keys,'content'); ==> {Object {key: "val&q ...
- 查看linux版本及lsb_release安装及一些想法
https://blog.csdn.net/darkdragonking/article/details/61194308
- 一款简洁而强大的前端框架—JQuery
jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...
- git 命令小结
一.git 版本管理 1.git log: 获取当前版本之前的所有操作 2.git log --pretty=oneline:获取当前版本的前三和后三个操作 3.git reflog :获取当前项目下 ...
- flex布局各种情况总结分析及实例演示
2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 通过笔者大量实践,发现 ...