zoukankan      html  css  js  c++  java
  • Morn简介及使用教程

    [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,点击【创建新项目】,然后输入项目名和项目存放的位置

    morn_ui_1

    3.确定并创建好后,在左边资源面板,点击“添加资源”打开项目的资源目录(在morn里,图片即组件,编辑器根据资源前缀识别成对应的组件,命名详见《Morn资源命名规则》

    morn_ui_2 

    4.复制资源到刚才打开的assets目录,图片要以文件夹的方式存放,编辑器会以文件夹为单位打包为对应的swf(本文最下面提供了组件资源下载,也可以在官网demo里面找到)

    morn_ui_3

    5.在编辑器内按快捷键F5刷新,就能看到资源组件树了(如果提示java失败,请先下载一个32位java环境www.java.com,然后再编辑器使用快捷键Ctrl+F5强制刷新资源)

    morn_ui_4

    6.在编辑器内,使用快捷键Ctrl+N新建一个页面,起名叫Page1

    morn_ui_5

    7.拖拽左面资源区任意组件到视图内,摆放拼装成需要的界面。还可以通过右面的属性面板,设置各种参数以控制不同的显示效果

    morn_ui_6

    很简单吧,编辑器有很多功能,大部分功能都能在菜单和快捷工具栏中找到,并对应快捷键方便使用,有时间可以详细了解下

    morn_ui_7

    更多教程请参考http://blog.mornui.com/?cat=6

    下面说一下如何

    用代码控制UI

    Morn UI库的使用

    1.新建AS3项目到上面的项目目录(我这里是E: est)(这里创建as3项目用的是FlashDevlop,用FlashBuilder类同,注意编译目录改为bin,默认为bin-debug)

    morn_ui_8

    2.解压上面下载的MornUILib文件,复制MornUILib/src下的源码到刚才新建的AS3项目的src目录下

    morn_ui_9

    3.在编辑器内,选中按钮,然后在属性面板var里面输入个名称,比如btn

    morn_ui_10

    4.编辑器内用快捷键Ctrl+S保存,然后按快捷键F12发布代码。发布成功后,Page1会对应生成Page1UI.as并默认发布到项目src/game/ui下,所用资源自动打包为swf,默认发布到项目bin/assets下(路径可配置,快捷键F9)

    morn_ui_11

    5.现在要使用这个页面,那么我们新建一个类,继承自这个Page1UI类,就可以随意控制它了(UI和逻辑分离)

    morn_ui_12

    6.在主文档程序Main.as里面,初始化Morn,加载资源,并实例化这个Page1页面

    morn_ui_13 

    7.编译项目,至此就能正确的运行了

    morn_ui_14

    非常简单吧,Morn UI还有更多功能呢,请参考后续教程

    本文资源及源代码下载:test

    资源单独下载:comp

     
     
    分类: as3游戏
  • 相关阅读:
    dedecms列表页实现文档按权重weight排序
    DEDEcms5.7各个文件的作用与安全防御设置
    我的SEO笔记
    分析网站日志
    网页上链接的添加规范与标准
    解决引用bootstrap样式时遇到的冲突问题
    js滚动到指定位置导航栏固定顶部
    使用rem自适应屏幕
    SQL 操作结果集 -并集、差集、交集、结果集排序
    简洁的左右滑动式轮播图
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3257061.html
Copyright © 2011-2022 走看看