H5快速入门手册范本.docx

H5快速入门手册范本.docx

《H5快速入门手册范本.docx》由会员分享，可在线阅读，更多相关《H5快速入门手册范本.docx（20页珍藏版）》请在冰豆网上搜索。

H5快速入门手册范本

一、H5快速入门

平台介绍

Mugeda是什么？

Mugeda是一个专业级H5交互动画制作云平台，基于云平台计算框架，Mugeda无需任何下载和安装。

如何进入 Mugeda界面？

1）下载Google浏览器：

（考虑有些浏览器对html5的支持不够，建议使用chrome浏览器），打开Google浏览器，输入www.mugeda.

进入Mugeda首页。

2）注册Mugeda账号：

进入首页后，可点击右上角“注册”，通过几步简单的步骤注册一个新账号。

也可以点击“立即体验”进入操作界面。

Mugeda功能介绍？

1）简单制作交互动画：

Mugeda操作界面和Flash高度相似，因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。

此外，设计师也无需添加任何代码即可完成复杂的交互。

除了设计师，工程师在Mugeda中也大有所为，在“脚本”按钮中，工程师可以写入“JS”代码来制作自己想要的交互效果。

2）手机观看：

在Mugeda中制作出的H5作品支持随时手机观看，点击“通过二维码共享”按钮，可用手机扫描出现的二维码观看作品效果。

3）发布作品：

点击橙色“发布”按钮，可发布H5作品，用Mugeda平台发布的任何H5作品都没有Mugeda的Logo，大家可以放心使用。

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提供默认的默认表单，可设置的选项包括表单名称，提交方式，提交目标，确认信息，选择背景颜色和字体颜色等。

没有在的选项，还可以点击“添加表单项”按钮添加。

定制文字：

选中“定制文字”按钮素材，在其“属性”面板下选择“动作”为“表单”，点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮。

九、关联绑定及逻辑判断

舞台动画关联：

“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。

元件动画关联：

“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。

属性关联：

在“属性”面板下，所有属性右边都会有“关联”按钮，可关联的属性有：

关联对象、关联属性、关联方式、被控量等。

自动关联：

在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”，可以实现一个物体控制另一个物体的类似功能。

公式关联：

用公式关联控制物体的属性及行为。

条件判断：

条件判断即通过一个物体的属性条件，判断物体行为是否执行。

逻辑表达式判断：

逻辑表达式判断即当物体条件符合所设定的表达式。

十、MugedaAPI

API的应用：

在动画中添加代码

MugedaAPI提供了一组接口，可以通过代码的方式操作动画。

常用于制作游戏和带有交互性的动画。

使用MugedaAPI需要了解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中二维码的方式预览动画。

此时脚本是通过javascript的newFunction的方式在存中运行。

调试一般采用javascript中的console.log、debugger方法进行调试。

（2）动画被导出之后，所有脚本会写入导出包中，action开头的一个js文件中。

动画运行时，在浏览器调试台中可以看到这个脚本文件，在其中加断点、调试。

通过导入脚本的方式导入

在IDE菜单中，点击“文件”→“导入”→“脚本”，在对话框中，输入脚本文件的url。

url可以指向服务器上的js文件，或者指向本机的地址。

在动画加载时，url指向的脚本文件会在开始阶段被加载。

可以通过浏览器调试这个文件。

外部调用

另一种方式，是将动画嵌入自己的网页，在网页中直接调用mugedaAPI来控制动画。

API的应用：

MugedaAPI的整体结构

MugedaAPI整体上分为三个层次：

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（）{

varmugeda=window['Mugeda']['currentAni'];

}）;

如果网页中嵌入了多个动画，每个动画都会引发上面的回调函数。

2、动画加载后

如果需要在动画加载后获取mugeda对象，如果网页中只有一个动画，只需要用下面的代码就可以了（注：

window为动画所在的window）。

varmugeda=window['Mugeda']['currentAni'];

如果页面中包含多个动画，需要用下面的方式遍历找到需要动画的mugeda对象。

window['Mugeda']['animations'].forEach（function（mugeda）{

//此时可以通过mugeda的其他属性，例如mugeda.title找到想要的mugeda对象

}）;

其他话题：

如何将Mugeda动画嵌入自己的网页中？

Mugeda动画除了可以在手机浏览器中全屏播放外，还可以将其作为网页中的一部分，放在自己的网页中。

目前，在PC端的chrome、firefox、IE11等现代浏览器中都能正常播放。

可以通过两种方式将动画嵌入网页。

一、iframe方式

如果您使用的是Mugeda提供的发布功能，得到了发布地址，可以在网页中，直接加入iframe的方式嵌入动画。

;

如果您是通过导出动画包的方式（zip文件），将文件解压托管到自己的网络空间中，也可以通过上面的方式，将iframe的src属性指向导出包中的index.html文件的地址。

二、直接嵌入方式

有些时候，可能不希望通过iframe加载动画，例如，在早期ios版本中，iframe可能有一些性能或兼容性问题，或者希望拥有更好的可控性，可以将Mugeda直接嵌入网页中。

1、静态载入

在每个动画导出包中，都包含loader.js文件。

在html代码中加入以下的片段，指向这个文件。

320px;height:

512px;position:

relative;">