H5快速入门手册.docx
- 文档编号:15086058
- 上传时间:2023-06-30
- 格式:DOCX
- 页数:20
- 大小:790.33KB
H5快速入门手册.docx
《H5快速入门手册.docx》由会员分享,可在线阅读,更多相关《H5快速入门手册.docx(20页珍藏版)》请在冰点文库上搜索。
H5快速入门手册
一、H5快速入门
平台介绍
Mugeda是什么?
Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。
如何进入 Mugeda界面?
1)下载Google浏览器:
(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入
进入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;"> window._mrmcp={ "creative_path": "pa5/",//指向动画文件夹的位置 "script_id": "box",//包含动画script元素的id "render_mode": "embedded" }
2、动态插入
在不允许直接修改html的情况下,可以通过代码的方式,动态的将动画加到网页中。
假设网页中存在id为container1和container2的空div:
320px;height: 512px;position: relative;">
320px;height: 512px;position: relative;">
//下面的代码,动态的将2个动画插入这两个空div中。
varscript=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(){
varscript=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);
mugeda对象的事件
mugeda对象包含动画加载过程中的事件,如下代码所示:
varmugeda=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、增删物体
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- H5 快速 入门 手册