H5快速入门基础手册.doc

一、H5迅速入门
平台简介

Mugeda是什么？
Mugeda是一种专业级H5交互动画制作云平台，基于云平台计算框架，Mugeda无需任何下载和安装。
如何进入 Mugeda界面？
1）下载Google浏览器：（考虑有些浏览器对html5支持不够，建议使用chrome浏览器），打开Google浏览器，输入.com
进入Mugeda首页。
2）注册Mugeda账号：进入首页后，可点击右上角“注册”，通过几步简朴环节注册一种新账号。
也可以点击“及时体验”进入操作界面。
Mugeda功能简介？
1）简朴制作交互动画：Mugeda操作界面和Flash高度相似，因而有Flash基本朋友基本不用通过学习就可迅速制作出一种H5作品。此外，设计师也无需添加任何代码即可完毕复杂交互。
除了设计师，工程师在Mugeda中也大有所为，在“脚本”按钮中，工程师可以写入“JS”代码来制作自己想要交互效果。
2）手机观看：在Mugeda中制作出H5作品支持随时手机观看，点击“通过二维码共享”按钮，可用手机扫描浮现二维码观看作品效果。
3）发布作品：点击橙色“发布”按钮，可发布H5作品，用Mugeda平台发布任何H5作品都没有MugedaLogo，人们可以放心使用。
4）共享、导出作品：Mugeda同步还支持动画作品共享、导出。除此之外，Mugeda还支持GIF、视频、PNG等格式导出，基本覆盖当前流行主流多媒体格式，功能十分强大。导出环节：“文献”→“导出”→选取导出格式。
5）针对公司账号，Mugeda提供专业公司服务。点击操作界面右上角账号管理三角形，在下拉菜单中选取“团队管理”，可进入团队管理页面。在管理页面中，可添加公司成员，以便进行人员及作品管理。公司账号与子账号，子账号与子账号之间可共享作品，十分以便。
6） 数据服务：Mugeda还提供专业数据服务。针对每一种作品，咱们可以在后台记录页面中浏览到数据。在数据页面，可以选取记录时间段、每个时段浏览量与顾客数，以便运营人员进行详细分析。基于微信传播，Mugeda还提供朋友圈、单聊、群聊以及其她四种传播来源数据。
迅速入门
添加预置动画

预置动画是Mugeda依照大众需求在自己框架里设立好动画效果。 鼠标选中“选取”工具，点击舞台上素材，右边“添加预置动画”按钮（红色圆圈按钮），弹出“添加预置动画”对话框。
制作翻页动画

类似PPT翻页效果
学会使用Mugeda模板

Mugeda提供免费模板和付费模板，其中动画和交互都已经添加好了，顾客可依照自己需求重新编辑。
二、界面与舞台
界面与舞台简介

Mugeda舞台涉及惯用菜单栏、工具箱（快捷工具栏）、时间线（时间轴）、工具条、页面栏、舞台和属性栏。
舞台缩放和物体缩放功能

缩放功能分为两某些：
1、舞台缩放：对舞台显示内容缩放，这个不变化物体实际大小，只是变化显示大小；
2、物体缩放：对物体缩放，这个会变化物体实际大小；

翻页有关设立

【翻页】中设立有如下几种方式：
1、翻页效果： 平移、覆盖、浮现、淡入、三维翻转、门轴翻转
2、退出效果： 无、缩小、淡出、缩小淡出
3、翻页方向： 上下翻页、左右翻页
4、循环： 是、否
5、翻页时间： 默认600毫秒，可以自己设立
6、翻页图标： 默认是箭头，支持直接从素材库上传；如果不想要翻页图标，可以在【翻页图标】处上传一种透明底PNG

核心帧和页面命名

给核心帧和页面命名好处：要修改动画，例如删帧或者增帧，删页或者增页，这时如果采用是跳转帧/跳转页话，就要一种个去修改，很麻烦，给核心帧/页面命名就以便多了。
加载有关设立

个性化加载界面制作。
阐明：浏览器100%才干看到加载页面设立

物体属性设立

涉及设立坐标，变化物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动等功能用法。
元件界面简介

重要解说新建元件添加到舞台、复制元件、新建文献夹、导出/编辑/删除元件用法。

三、素材解决及媒体使用
上传图片：Mugeda支持图片格式涉及GIF、PNG、SVG、JPG文献，还可以以序列帧形式添加图片。
文本/文本段落：鼠标在“媒体”工具内选取“文字”按钮，在“舞台”空白处点击浮现文字工具选框。鼠标通过双击选框进入编辑文字工具，点击“舞台”空白处退出，编辑。鼠标在“媒体”工具内选取“文本段落”按钮，在“舞台”开白处点击浮现文本段落选框。双击进行编辑内容。
插入网页：在“媒体”工具栏下，鼠标点击“网页”按钮，在“舞台”上以拖方式插入一种网页；在“舞台”右边“属性面板”内可设立调节“网页”元素属性，例如：宽、高、外围线条（如图可点击颜色版右上角框内红色“×”去除外；围线框颜色）、透明度、透视度、旋转角度等；在“属性面板”内“网页地址”栏内输入需跳转网址。
幻灯片：幻灯片即是在指定区域内添加多张图片，通过滑动方式进行切换。在“媒体”工具栏下，鼠标点击“幻灯片”按钮，在“舞台”上以拖拉方式插入一种幻灯片。
上传视频和声音：为防止浮现设备不兼容等问题，视频格式建议为mp4，大小在20M以内。如图在“媒体”工具栏下，鼠标点击“视频”按钮，在弹出“导入视频”对话框内点击“选取文献”选取所要上传视频文献。
由于多数设备支持mp3，因而在Mugeda内编辑音频格式建议为mp3。
在“媒体”工具栏内选取“声音”按钮，在弹出“导入声音”对话框中点击“选取文献”，选取所要上传音频文献。
绘制素材：点击“绘制”工具栏内各个工具，可在“舞台”上绘制各种图形，在“属性面板”下调节各个图形填充色、线条色以及线条粗度等。
云字体：可以将自己电脑里字体上传到云字体库中并使用。
曲线图表：在舞台中直接绘制可视化表格。
建组：全选多张图片，鼠标右键→“组”→“组合”； 将“移动/旋转”重设为“不容许”，“组类型”为“裁剪内容”，“容许滚动”设为“垂直滚动”；
选取“变形”工具将“组”大小调节为不大于“舞台”；点击“预览”，发现图片组合在裁剪范畴内可上下垂直移动。
全景功能：全景功能场景组件，可以用来显示360度全景图片，并添加热点进行交互。
粘贴第三方文字和图片：1、当前可以直接将剪切板文字添加到物体；2、当前可以直接将剪切板图片添加到物体。
惯用编辑操作：惯用编辑操作涉及锁定物体、节点工具、途径工具、排列、对齐、变形、组合、合并及转换为元件功能。
四、动画类型
时间轴和图层：时间轴是制作动画核心功能，时间轴把图层和图像帧准时间进行组合、播放来形成动画。在时间轴上，咱们可以以拖拉方式进行预览动画效果。图层类似于Photoshop中概念。
选取工具：选取工具栏下涉及“选取”“节点”“变形”“设立舞台缩放”以及“快捷工具”四种工具。
Mugeda动画类型：核心帧动画、途径动画、进度动画、曲线变形动画、预置动画、元件动画、遮罩动画、动画运动
分页/加载页：在舞台右侧“加载”页面，在其下拉菜单内可自行设立加载属性。例如填写“提示文字”、设立文字大小、颜色，添加背景图片、前景图片等。
标尺和辅助线使用：在菜单栏，选取【视图】—【标尺】，就可调出标尺工具。
复制帧/图层：选取某一种图层所有帧，右键选取【复制帧】，在没有帧地方右键【粘贴帧】。选中要复制图层所有帧，右键【复制帧】，在要粘贴页面中新建图层（和复制图层数相似），选取没有帧地方，【右键】粘贴帧。
五、交互行为
行为添加以及触发事件：交互行为都在物体右边“添加/编辑行为”按钮里添加。其中涉及“动画播放控制”“媒体播放控制”“属性控制”“微信定制”“手机功能”五大某些。“动画播放控制”涉及“暂停”“播放”“下一帧”“上一帧”等行为功能；“媒体播放控制”涉及“播放声音”“停止所有声音”“控制声音”“播放视频”等行为功能。；“属性控制”涉及“变化元素属性”“设立定期器”“跳转链接”“提交表单”等行为功能。“微信定制”涉及“定制图片”“录制声音”“显示微信头像”“显示微信昵称”“定义分享信息”等行为功能。
帧行为：帧行为有“播放”“暂停”“下一帧”“上一帧”“跳转并播放”“跳转并停止”。
页行为：页行为涉及“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为。
播放元件片段：控制元件播放，让其只播放某些片段，在H5交互游戏中用比较多。
变化元素属性：在元素相应“属性”面板下，无论是宽、高、左、上、透明度等可提取到数值都可作为变化元素属性属性。
变化图片：变化图片即当点击或触发变化图片行为时，图片即会被变化。
设立定期器：设立定期器行为有暂停定期器、继续定期器、重置定期器。
手机功能：手机功能涉及打电话、发短信、发送邮件、地图等功能。
跳转链接：添加跳转链接有两种办法：
其一，在弹出“编辑行为”对话框中选取“属性控制”→“跳转链接”→触发条件：点击。点击“编辑”按钮进入“参数”对话框；
其二，在元素右侧“属性”面板下“动作”下拉菜单中选取“链接”，在弹出链接选框中输入相应链接，选取相应“打开位置”。
六、控件使用
陀螺仪：手机重力感应运用就是陀螺仪功能，可以控制绕X轴旋转角、绕Y轴旋转角、绕Z轴旋转角。
定期器：定期器是一种带有定期功能文本，随定期器时间变化，文本显示变化时间，方向分为倒计时和顺计时两种。使用场景也许是游戏计时，或者动画中某物体某一属性随时间做相应关联变化等等。
随机数：在被选中元素“属性”面板下可设立随机数各种属性：最小值、最大值、更新间隔等，运用随机数可以做抽奖和交互小游戏。
擦玻璃：“控件”工具栏中“擦玻璃”控件，可以实现擦除前景图片，露出背景图片功能，还可以设立橡皮擦大小和剩余比例（即：擦除图片大小和擦出剩余多少显示背景图片）。
点赞：点赞功能为系统默认累加，每个顾客只能容许点赞一次。
绘画板：如果想在作品中使用手绘图功能，可以使用【绘画板】控件。
七、微信功能
微信头像/微信昵称：微信头像/微信昵称功能可以在H5上显示顾客头像及昵称。
定制图片：可以实现顾客上传自定义图片功能。
录制声音：可以实现录制声音及播放声音功能。
分享信息：定义分享信息涉及在微信里转发给朋友或朋友圈时一种转发标题、转发描述和朋友圈转发标题。
八、表单
自定义表单：自定义表单工具涉及“输入框”“单选框”“多选框”“列表框”。
默认表单：Mugeda提供默认默认表单，可设立选项涉及表单名称，提交方式，提交目的，确认信息，选取背景颜色和字体颜色等。没有在内选项，还可以点击“添加表单项”按钮添加。
定制文字：选中“定制文字”按钮素材，在其“属性”面板下选取“动作”为“表单”，点击“定制文字”按钮素材绿色“添加/编辑行为”按钮。
九、关联绑定及逻辑判断
舞台动画关联：“舞台”上动画关联即用一种物体控制整个“舞台”动画播放。
元件动画关联：“元件”动画关联与“舞台”动画关联相似，区别是将对象由“舞台”转变为“元件”。
属性关联：在“属性”面板下，所有属性右边都会有“关联”按钮，可关联属性有：关联对象、关联属性、关联方式、被控量等。
自动关联：在“舞台”上添加一种矩形作为被控对象，添加一种圆形作为控制物，在圆形“属性”面板下调节“拖动/旋转”属性为“水平拖动”，可以实现一种物体控制另一种物体类似功能。
公式关联：用公式关联控制物体属性及行为。
条件判断：条件判断即通过一种物体属性条件，判断物体行为与否执行。
逻辑表达式判断：逻辑表达式判断即当物体条件符合所设定表达式。
十、Mugeda API
API应用：在动画中添加代码

Mugeda API提供了一组接口，可以通过代码方式操作动画。惯用于制作游戏和带有交互性动画。使用Mugeda API需要理解javascript。
在动画中添加代码
在IDE中有三种方式，可以使得您代码和动画进行互动。
通过脚本对话框
1、脚本加入方式
在IDE中，点击工具栏上脚本按钮，在脚本窗口中添加脚本。脚本分为“全局”脚本和“页”脚本。全局脚本是整个动画脚本，页脚本跟随页面，当页面被复制时，页脚本同样会被复制。
全局脚本和页脚本运营顺序是：全局脚本→页1脚本→页2脚本……
全局和页脚本间变量是隔离，如果需要通讯，可以将变量挂在mugeda对象上或者window对象上。例如：
// 在全局脚本中
window.abc = 1;

// 在页1中
alert(window.abc)；// 弹出1
在全局脚本中，可以直接使用mugeda对象。在页脚本中，除了可以直接使用mugeda对象外，还可以直接使用pageIndex对象，pageIndex是一种整数，批示脚本页号。例如，在页1脚本中，可以查询到脚本页号：
`alert(pageIndex)；// 弹出数字0`

如果后来调节了页与页之间顺序，pageIndex会自动变化。
2、调试
这种方式加入脚本，如果需要调试，需要区别如下两种方式：
（1）在IDE中，通过点击工具栏上“预览”按钮预览动画，或扫描IDE中二维码方式预览动画。此时脚本是通过javascriptnew Function方式在内存中运营。调试普通采用javascript中console.log、debugger办法进行调试。
（2）动画被导出之后，所有脚本会写入导出包中，action开头一种js文献中。动画运营时，在浏览器调试台中可以看到这个脚本文献，在其中加断点、调试。
通过导入脚本方式导入
在IDE菜单中，点击“文献”→“导入”→“脚本”，在对话框中，输入脚本文献url。url可以指向服务器上js文献，或者指向本机地址。在动画加载时，url指向脚本文献会在开始阶段被加载。可以通过浏览器调试这个文献。
外部调用
另一种方式，是将动画嵌入自己网页，在网页中直接调用mugeda API来控制动画。
API应用：Mugeda API整体构造

Mugeda API整体上分为三个层次：mugeda对象、scene对象、aObject。
每个mugeda对象与单个动画相应，是访问单个动画入口。
通过访问mugeda对象，可以得到mugeda总体信息。如：大小、标题。
动画中，每个时间轴相应于scene对象，主舞台和元件实例均有相应scene对象。
通过操作scene，可以获取事件轴信息，对播放位置做跳转。
每个动画物体和aObject对象相相应，控制aObject，就可以控制物体位置、透明度、可见性。
API应用：Mugeda对象

mugeda对象是整个API最顶层命名空间。
mugeda对象获取
在脚本编辑器中，mugeda对象已经注入，可以直接在代码中写mugeda使用。
如果将动画嵌入网页，按照动画加载前和动画加载后，获取mugeda对象方式不同样。
1、动画加载前
如果需要在动画加载前获取mugeda对象，可以通过在动画所在document上设立侦听方式获取。
document.addEventListener('mugedaReady'，function(){
var mugeda = window['Mugeda']['currentAni'];
});
如果网页中嵌入了各种动画，每个动画都会引起上面回调函数。
2、动画加载后
如果需要在动画加载后获取mugeda对象，如果网页中只有一种动画，只需要用下面代码就可以了（注：window为动画所在window）。
var mugeda = window['Mugeda']['currentAni'];
如果页面中包括各种动画，需要用下面方式遍历找到需要动画mugeda对象。
window['Mugeda']['animations'].forEach(function(mugeda){
// 此时可以通过mugeda其她属性，例如mugeda.title找到想要mugeda对象
});
其她话题：如何将Mugeda动画嵌入自己网页中？
Mugeda动画除了可以在手机浏览器中全屏播放外，还可以将其作为网页中一某些，放在自己网页中。当前，在PC端chrome、firefox、IE11等当代浏览器中都能正常播放。
可以通过两种方式将动画嵌入网页。
一、iframe方式
如果您使用是Mugeda提供发布功能，得到了发布地址，可以在网页中，直接加入iframe方式嵌入动画。
<iframe frameborder="0" width="320" height="512" src="发布后地址"> </iframe>;
如果您是通过导出动画包方式（zip文献），将文献解压托管到自己网络空间中，也可以通过上面方式，将iframesrc属性指向导出包中index.html文献地址。
二、直接嵌入方式
有些时候，也许不但愿通过iframe加载动画，例如，在初期ios版本中，iframe也许有某些性能或兼容性问题，或者但愿拥有更好可控性，可以将Mugeda直接嵌入网页中。
1、静态载入
在每个动画导出包中，都包括loader.js文献。在html代码中加入如下片段，指向这个文献。
<div style="width:320px;height:512px;position:relative;">
<script>
window._mrmcp = {
"creative_path"："pa5/"，// 指向动画文献夹位置
"script_id"："box"，// 包括动画script元素id
"render_mode"："embedded"
}
</script>
<script src="pa5/loader.js" id="box"></script>
</div>
2、动态插入
在不容许直接修改html状况下，可以通过代码方式，动态将动画加到网页中。假设网页中存在id为container1和container2空div：
<div id="container1" style="width:320px;height:512px;position:relative;"></div>

<div id="container2" style="width:320px;height:512px;position:relative;"></div>
// 下面代码，动态将2个动画插入这两个空div中。
<script>
var script = document.createElement("script");
script.src = "pa5/loader.js";
script.id = "script1.js";
window._mrmcp = {
"creative_path"："pa5/",
"script_id"："script1",
"render_mode"："embedded"
}
script.onload = function(){
var script = document.createElement("script");
script.src = "pa6/loader.js";
script.id = "script2.js";
window._mrmcp = {
"creative_path"："pa6/",
"script_id"："script2",
"render_mode"："embedded"
}
document.getElementById("container2").appendChild(script);
}
document.getElementById("container1").appendChild(script);
</script>
mugeda对象事件
mugeda对象包括动画加载过程中事件，如下代码所示：
var mugeda = window["Mugeda"]["currentAni"];
mugeda.addEventListener("scriptready"，function(){
// 当动画脚本加载完毕后引起回调，this指向mugeda对象（下同）。
});
mugeda.addEventListener("imageready"，function(){
// 当动画预加载图片完毕后引起回调。
});
mugeda.addEventListener("renderready"，function(){
// 当动画准备完毕，开始播放前那一刻引起回调。
});
mugeda.addEventListener("click"，function(){
// 在舞台上侦听点击事件
});
其她话题：动画在显示加载界面时，究竟在加载什么？
动画需要加载必要文献后才可以正常播放：
js文献：在脚本窗口中输入脚本、通过“导入”，“脚本”对话框加入脚本，播放器依赖文献脚本。
图片：需要预先加载一某些图片（当前是预先加载第一页图片），以免渲染开始动画时，图片没有加载而浮现空白画面。
加载时，图片和脚本并行加载。当所有脚本加载完毕，在mugeda对象上引起scriptready事件，此时，可以访问到所有脚本；当所有图片加载完毕后，引起imageready事件。当两个时间都引起后，引起renderready事件。

API应用：scene对象

对于主舞台、元件实例这样拥有时间轴动画元素，都拥有相应scene对象。通过操作scene对象，可以使用编程方式，获取当前播放位置、跳转播放位置、获取主舞台上物体等操作。
获取scene对象
对主舞台，直接通过下面方式获取：

对元件实例，一方面需要在舞台上对元件实例命名（例如“A”），然后通过下面方式获取：

scene对象属性
scene对象包括了主舞台和元件实例时间轴和播放进度信息。
1、获取当前播放位置和状态

其中currentId为currentDecimalId取整值。

2、获取时间轴信息
可以通过下面代码，获取时间轴长度和页信息：

3、获取命名帧实际帧号
在IDE中，可觉得核心帧命名，从而在行为中以便跳转到命名帧。下面函数提供了命名帧到实际帧号转换。

scene事件
当主舞台或者元件实例重绘前，引起enterframe事件。在事件回调中，可以操作动画，变化物体位置，或调节将动画重定向到其她帧。

**scene办法
**
scene包括系列控制播放进程办法，此外，scene代表舞台或者元件实例，管理着舞台或元件实例容器中所有子物体。
1、控制播放进程
在主舞台scene或元件实例scene上使用下面办法，可以控制她们播放进程：

2、播放片段
可以通过代码，将一小段时间轴标记为片段，将动画播放范畴限定在片段中。如下：

3、物体遍历
舞台和元件作为容器，包括一系列动画元素。在IDE中，可觉得物体命名，下面代码通过名字查找到舞台上元件实例A中物体B。

上述例子容许反遍历（由子元素寻找父元素），例如：

4、增删物体

API应用：工具API

微信转发
在微信中，经常需要定义微信转发标题、描述、转发地址。除了在IDE文档信息中填写这些信息以外，还可以通过代码动态更改这些值，代码如下：

上述函数可以多次调用，每调用一次，用新值覆盖旧值。上述4个参数可以省略1~3个。
信息提示
Mugeda渲染器提供通用信息提示函数，代码如下：

API应用：在动画中添加代码、Mugeda API整体构造、Mugeda对象、scene对象、aObject对象、工具API、获取Mugeda后台数据、使用自定义回调函数、将Mugeda布置在第三方服务器。