新手必看
为什么文件缺失,点击缩略图选择对应的本地文件却没法添加呢?
回复问题答疑 • m221800837 发起了问题 • 1 人关注 • 0 个回复 • 368 次浏览 • 2023-04-25 20:47
请问一下,变形动画的模糊效果在哪里?
问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 1695 次浏览 • 2022-03-24 10:18
【代码分享】超少代码实现到特定时间活动结束的效果
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3611 次浏览 • 2019-06-10 23:45
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();// 查看全部
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。
1.4.2 快速入门:发布作品
原创分享 • wx6a18b9d061 回复了问题 • 8 人关注 • 9 个回复 • 11129 次浏览 • 2018-12-16 19:02
Mugeda常见问题解答
培训教程 • songyue 发表了文章 • 19 个评论 • 13496 次浏览 • 2016-12-27 14:47
如何压缩图片、声音和视频?
答:http://bbs.mugeda.com/?/article/429
为什么导入H5里的视频无法播放?
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式 查看全部
如何压缩图片、声音和视频?
答:http://bbs.mugeda.com/?/article/429
为什么导入H5里的视频无法播放?
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式,视频编码必须是H.264,音频编码必须是AAC。
Mugeda里的模板如何使用?
答:单页模板使用说明http://bbs.mugeda.com/?/article/297
精品模板使用说明http://bbs.mugeda.com/?/article/401
如何实现H5里可以定制文字和图片的功能?
答:定制文字教程http://bbs.mugeda.com/?/article/363
定制图片教程http://bbs.mugeda.com/?/article/351
H5作品文件要如何设置?
答: http://bbs.mugeda.com/?/article/296
屏幕适配要如何设置?如渲染模式、自适应、选择发布模式、如何设置强制横屏竖屏?
答:http://bbs.mugeda.com/?/article/418
我想让一个物体不断循环动,怎么实现?
答:用元件动画可以实现,相关教程http://bbs.mugeda.com/?/article/323
如何复制帧/图层?
答:http://bbs.mugeda.com/?/article/427
为什么无法导入PSD?
答:导入PSD及注意事项说明http://bbs.mugeda.com/?/article/412
逻辑表达式要怎么写?
答:7种逻辑表达式的写法http://bbs.mugeda.com/?/article/406
Mugeda API的使用方法?
答:具体文档http://card.mugeda.com/mugedaApiDoc/index.html
如何使用回调函数?
答:具体文档http://bbs.mugeda.com/?/article/416
为什么我的背景音乐无法播放?
答:Mugeda支持的声音格式为mp3和wav;
保证声音文件大小10M以内(通常建议压缩处理后声音文件大小500kb左右)。
为什么我的背景音乐只在一页中播放?
答:整个作品的背景音乐在属性栏——背景音乐处添加
其他Mugeda声音使用相关问题请参考http://bbs.mugeda.com/?/article/13
为什么打开内容时,会提示素材缺失?
答:素材缺失,指的是图片、视频和音频素材在源文件里丢失的情况,这是因为素材没有上传完成造成的。
以图片为例,当图片上传到素材库时,会有进度条显示上传进度,橙色进度条完成时才算上传成功,如图:
同时如果在素材库里删除了素材,相关作品中用到的素材也会删除,会显示如下:
为什么我的内容发布后还是会有橙色的广告条?
答:内容发布后,如果扫描“效果预览”旁的二维码,这时候看到的是预览链接,在最上方会看到橙色的广告条,如果是正式发布链接,则不会出现广告条,特此说明。如图:
(此图二维码是预览地址,有广告条)
(此图二维码是发布地址,无广告条)
【预览和发布链接的详细区别】可参考: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=964413431636375&vid=s1415c5xz65
我想让画面上的一个物体停下来,用手指点击再播放,怎么做?
答:这个属于动画控制,建议学习下基础课程: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=982606913102231&vid=c1415r781id
为什么我做的H5打不开了,说是涉及违规内容被举报?
答:请先自查作品是否违规:http://bbs.mugeda.com/?/article/272
如果你确实没有违反的话,可以重新发布一遍。
Mugeda是什么?
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 10626 次浏览 • 2016-09-28 18:09
本节视频教程请点击此处。
一、 Mugeda是什么?
Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。
二、 如何进入Mugeda页面?
1)下 查看全部
本节视频教程请点击此处。
一、 Mugeda是什么?
Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。
二、 如何进入Mugeda页面?
1)下载Google浏览器:(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入www.mugeda.com
进入Mugeda首页。
2)注册Mugeda账号:进入首页后,可点击右上角“注册”,通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。
图1.1-2
三、 Mugeda操作界面简单介绍
帮助手册:点击“立即体验“,会打开Mugeda的帮助手册,点击“预览”按钮即可观看整个平台的功能和基本操作。
图1.1-3
简单制作交互动画:Mugeda操作界面和Flash高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外,设计师也无需添加任何代码即可完成复杂的交互。
图1.1-4
除了设计师,工程师在Mugeda中也大有所为,在“脚本”按钮中,工程师可以写入“JS”代码来制作自己想要的交互效果。
图1.1-5
手机观看:在Mugeda中制作出的H5作品支持随时手机观看,点击“通过二维码共享”按钮,可用手机扫描出现的二维码观看作品效果。
图1.1-6
发布作品:点击橙色“发布”按钮,可发布H5作品,用Mugeda平台发布的任何H5作品都没有Mugeda的Logo,大家可以放心使用。
共享、导出作品:Mugeda同时还支持动画作品的共享、导出。如图1.1-7,在“通过二维码共享”对话框中,可以选中“共享源文件”,复制共享作品编辑地址。
图1.1-7
同时还可以导出一个HTML5源文件部署在自己的服务器上,同样也不附Mugeda的Logo。除此之外,Mugeda还支持GIF、视频、PNG等格式的导出,基本覆盖现在流行的主流多媒体格式,功能十分强大。导出步骤:“文件”→“导出”→选择导出格式
图1.1-8
四、 团队管理
针对企业账号,Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理”,可进入团队管理页面。在管理页面中,可添加企业成员,方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品,十分方便。
图1.1-9
图1.1-10
五、 数据服务
Mugeda还提供专业的数据服务。针对每一个作品,我们可以在后台统计页面中浏览到数据。在数据页面,可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
图1.1-11
六、 Mugeda动画交互作品展示
下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品:
动画:
图1.1-12
广告:
图1.1-13
测试:
图1.1-14
贺卡:
图1.1-15
电子绘本
图1.1-16
课件:
图1.1-17
游戏:
图1.1-18
2.3.9 动画:分页/加载页
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 9943 次浏览 • 2016-09-21 15:23
本节视频教程请点击此处。
如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等
图2.3-67
查看全部
本节视频教程请点击此处。
如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等
图2.3-67
点击“预览”观察效果
图2.3-68
如图,将样式改为“进度环”,其他属性设置不变
图2.3-69
点击“预览”观察效果
图2.3-70
将样式改为“旋转加载”,可观察到加载效果如下:
图2.3-71
将样式改为“旋转加载+百分比”,可观察到加载效果如下
图2.3-72
将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。
如下图,在首页添加一个火箭图片素材,调整大小与位置。鼠标选中该素材右键→“转换为元件”
图2.3-73
双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”,右键→“插入关键帧动画”
图2.3-74
在20帧的位置右键→“插入关键帧”
图2.3-75
鼠标选中第10帧关键帧位置,将火箭图片向上拖动一些位置,制作出火箭上下移动的动画效果
图2.3-76
点击回到“舞台”,新建一个图层1,选中图层1的第一帧,点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条,可适当调整矩形颜色大小等。
图2.3-77
同时选中图层0、图层1的第30帧,鼠标右键→“插入帧”
图2.3-78
选中图层1的有帧位置,右键→“关键帧动画”
图2.3-79
选中图层1的起始关键帧,点击矩形元素,在其“属性面板”内将其“宽”值设为“1”
图2.3-80
添加一个新页面,点击预览动画效果,发现长条矩形出现横向拉长,即加载的动画效果,动画播放完后自动跳至第2页。
图2.3-81
2.3.8 动画:元件动画
原创分享 • mingyueliu 发表了文章 • 5 个评论 • 11491 次浏览 • 2016-09-21 14:54
本节视频教程请点击此处。
元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。
如图,点击“素材库”,在“舞台”上添加一个车 查看全部
本节视频教程请点击此处。
元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。
如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材
图2.3-48
选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件
图2.3-49
双击“舞台”上的车轮,进入元件编辑页面
图2.3-50
在时间轴50帧位置右键→“插入帧”
图2.3-51
在任意有帧的位置右键→“插入关键帧动画”
图2.3-52
点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度
图2.3-53
点击“播放”可观察车轮出现自转一周的动画效果
图2.3-54
点击“舞台”回到“舞台”编辑页面
图2.3-55
点击“预览”发现元件动画可重复不断地播放
图2.3-56
元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台”
图2.3-57
图2.3-58
元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层”
图2.3-59
调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮
图2.3-60
点击“预览”,出现汽车轮胎转动的动画效果
图2.3-61
在“舞台”的40帧位置,右键→“插入帧”
图2.3-62
在有帧的位置右键→“插入关键帧动画”
图2.3-63
选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧。
图2.3-64
选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧。
图2.3-65
点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果
图2.3-66
2.3.7 动画:预置动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 7729 次浏览 • 2016-09-21 14:45
本节视频教程请点击此处。
预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。
1. 添加进入动画
如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮
图2.3 查看全部
本节视频教程请点击此处。
预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。
1. 添加进入动画
如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮
图2.3-43
在弹出的对话框内选择进入动画效果为“弹入”,同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果
图2.3-44
2. 强调动画
点击“强调动画”文字素材右边的“添加预置动画”按钮,
图2.3-45
在弹出的对话框中选择强调动画效果为“晃动”,可点击预览效果。
图2.3-46
3. 退出动画
同理点击“退出动画”文字素材右边的“添加预置动画”按钮,在弹出的对话框中选择推出动画效果为“蹦出”,可点击预览效果。
图2.3-47
2.3.6 动画:变形动画
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 9853 次浏览 • 2016-09-21 14:41
本节视频教程请点击此处。
曲线变形动画可以实现一个形状变成另一个形状的动画效果。
如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。
图2.3-35
在时间轴20帧的位置,右 查看全部
本节视频教程请点击此处。
曲线变形动画可以实现一个形状变成另一个形状的动画效果。
如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。
图2.3-35
在时间轴20帧的位置,右键→“插入帧”
图2.3-36
在时间轴有帧的位置,右键→“插入曲线变形动画”
图2.3-37
选中最后一帧,鼠标点击“节点”工具
图2.3-38
改变矩形形状为三角形
图2.3-39
点击“播放”,观察矩形变成三角形的动画效果
图2.3-40
同理,点击选中时间轴上的最后一帧,在“属性面板”下改变物体填充色为红色,点击“播放”观察动画效果,发现矩形变成三角形的同时,物体颜色也逐渐由紫色变成红色。
图2.3-41
图2.3-42
2.3.5 动画:进度动画
原创分享 • mingyueliu 发表了文章 • 7 个评论 • 15518 次浏览 • 2016-09-21 14:38
本节视频教程请点击此处。
进度动画可实现绘制线条过程的效果和文字的打字机效果。
1. 制作图像进度动画
如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。
图 查看全部
本节视频教程请点击此处。
进度动画可实现绘制线条过程的效果和文字的打字机效果。
1. 制作图像进度动画
如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。
图2.3-25
在其“属性面板”下改变该矩形的填充色为“无色”、线条色为“黑色”
图2.3-26
继续绘制出一个圆角矩形和一个圆形,形成手机外框样式。
图2.3-27
在时间轴30帧位置右键→“插入帧”
图2.3-28
在以插入帧的任意位置右键→“插入进度动画”,时间轴变成紫色
图2.3-29
点击“预览”,发现此时动画变成逐渐绘制的效果。
图2.3-30
2. 制作文字进度动画
如图,点击新建一个图层,点击“文字”工具,在“舞台”上创建一个文本框
图2.3-31
点击编辑文字内容
图2.3-32
在新建图层1上的有帧位置,右键→“插入进度动画”
图2.3-33
点击“预览”,观察字体逐字出来的动画效果
图2.3-34
2.3.4 动画:路径动画
原创分享 • mingyueliu 发表了文章 • 3 个评论 • 14694 次浏览 • 2016-09-21 14:33
路径动画即物体沿着指定路径线运动的动画。
本节视频教程请点击此处。
在时间轴上右键→“插入帧”,右键→“插入关键帧动画”
图2.3-17
鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制 查看全部
路径动画即物体沿着指定路径线运动的动画。
本节视频教程请点击此处。
在时间轴上右键→“插入帧”,右键→“插入关键帧动画”
图2.3-17
鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制作出一个关键帧动画效果。
图2.3-18
鼠标选中时间轴上任意绿色部分,右键→“切换路径显示”
图2.3-19
即在“舞台”上显示出一条灰色的路径线
图2.3-20
继续点击时间轴任意绿色部分,右键→“自定义路径”,发现路径变成紫色。
图2.3-21
点击选择“节点”工具
图2.3-22
通过节点控制杆调节动画运动路径
图2.3-23
点击“播放”,发现火箭即沿着设定的运动路径运动。
图2.3-24
2.3.3关键帧动画
原创分享 • mingyueliu 发表了文章 • 4 个评论 • 9074 次浏览 • 2016-09-21 14:28
本节视频教程请点击此处。
选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。
图2.3-10
点击选中第30帧位置,右键→“插入帧 查看全部
本节视频教程请点击此处。
选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。
图2.3-10
点击选中第30帧位置,右键→“插入帧”
图2.3-11
在已插入帧的位置右键→“插入关键帧动画”
图2.3-12
鼠标点击选中结束帧(此处为第30帧)位置,将“舞台”上的物体移动至“舞台”上方
图2.3-13
点击“播放”按钮,发现一个火箭向上移动的动画效果做出来了。
图2.3-14
任何元素属性的变化过程都可通过关键帧动画实现。例如下图,鼠标点击选中结束帧(此处为第30帧)位置,在“属性面板”下改变此时物体的属性:设置透明度为0,改变物体大小与旋转角度。
图2.3-15
可点击“播放”观察动画效果
图2.3-16
2.3.1 动画:时间轴以及图层
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7598 次浏览 • 2016-09-21 14:15
时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。
图2.3-1
也可点击“播放”按钮进行预览
图2.3-2 查看全部
时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。
图2.3-1
也可点击“播放”按钮进行预览
图2.3-2
循环播放:点击“动画”→“循环”,即在预览时动画效果会循环播放,再次点击“动画”→“循环”,即将循环播放功能取消。
图2.3-3
锁定与打开图层:点击最上方“锁定图层”按钮,即可将所有图层锁定,点击每个图层右边的“锁定图层”,即可锁定该图层,该图层在锁定状态下不可被编辑操作。再次点击可打开图层。
图2.3-4
2.3.2 动画:选择工具
2.3.3关键帧动画
2.3.4 动画:路径动画
2.3.5 动画:进度动画
2.3.6 动画:变形动画
2.3.7 动画:预置动画
2.3.8 动画:元件动画
2.3.9 动画:分页/加载页
2.3.10 动画:遮罩
2.3.11 动画:动画运动
1.6.3 作品创建前必读: 声音及视频处理
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6709 次浏览 • 2016-09-19 16:47
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
声音处理方式
注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压 查看全部
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
声音处理方式
注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压缩。
添加声音:点击“媒体”栏下的“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”按钮,添加所选音频素材。
图1.3-15
图1.3-16
“上传”→“添加”,将音频素材添加进舞台
图1.3-17
选中舞台上的音频素材,在其“属性”面板内设置播放属性:“自动播放”:是;“循环播放”:是
图1.3-18
替换图标:选中舞台上的音频素材图标,在“属性”面板内点击“声音图标”右边的图标标志,在弹出的“媒体库”中选择自己想要的图标素材
图1.3-19
图1.3-20
点击保存,并预览效果
图1.3-21
由于是背景音乐,无需将图标显示在画面中,因此可将舞台上图标用鼠标拖动至舞台之外。
图1.3-22
视频处理方式
注:添加的视频格式为mp4,视频大小控制在20M以内,太大的话在手机上播放会出现卡的情况。
点击添加第2页面,在第2页面中,点击“视频”按钮,在弹出的“导入视频”对话框中点击“选择文件”按钮,选择自己想要添加的视频文件。
图1.3-23
图1.3-24
点击“上传”→“确定”,将视频素材添加进舞台,点击保存。
图1.3-25
替换视频控制图标:首先点击“素材库”按钮,在“媒体库”对话框中添加自己想要的控制图标素材。
图1.3-26
使用“变形”工具调整素材大小位置
图1.3-27
鼠标选中“选择”工具,点击图标右边的“添加/编辑行为”按钮
图1.3-28
在“编辑行为”对话框中选择“媒体播放控制”→“播放视频”,点击“编辑”按钮
图1.3-29
在“参数”对话框中选择“视频元件”为“视频1”,点击“确认”,点击保存,点击预览效果。
图1.3-30
隐藏播放按钮:在舞台上选中视频素材,在其“属性”面板内将“隐藏播放按钮”设置为“是”,其他视频属性可自由调控。
图1.3-31
注:音频、视频添加至舞台后,可作为元件自动列属在“元件”面板下,这些元件在舞台上被删除后,仍可在“元件”面板中找到。选中需添加的元件,点击“元件”面板下“添加到画布”按钮即可将选中元件添加至舞台,同时也可用鼠标直接将元件拖至舞台放开的方式添加元件至舞台。
图1.3-32
图1.3-33
1.6.2 作品创建前必读: 图片的处理
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7416 次浏览 • 2016-09-19 16:40
图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框 查看全部
图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框应局限在320*416像素,即宽高分别为320像素、416像素),在安全空间内不要放重要的设计元素。
图1.3-5
压缩素材:将素材导入Mugeda时,我们需要将其压缩。
压缩方法一:PS压缩
在PS中打开PSD素材,除去透明度,按住Ctrl+Shift+Alt+S,打开“储存为Web和设备所用格式”对话框,选择“优化的文件格式”为“PNG8”,点击“存储”将素材存储至所选位置。
图1.3-6
压缩方法二:TinyPNG压缩
输入网址https://tinypng.com/进入TinyPNG官网,将需压缩的文件拖进相应位置
图1.3-7
图1.3-8
等待其自动压缩
图1.3-9
压缩完后,点击“Download all”下载全部压缩文件
图1.3-10
压缩方法三:Mugeda压缩
如下图,在Mugeda页面导入PSD格式,“文件”→“导入”→“Photoshop(PSD)文件”,打开“导入Photoshop(PSD)素材”对话框
图1.3-11
将PSD文件直接拖动至对话框,或点击对话框打开PSD文件
图1.3-12
将PSD文件拖至对话框后,如图点击全选中PSD文件的各个素材,点击“分层导入”
图1.3-13
即可将PSD文件中的每图层上的素材依次分层导入Mugeda。
图1.3-14
1.6.1 作品创建前必读:手机屏幕适配方法
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 8953 次浏览 • 2016-09-19 15:01
本节视频教程请点击此处。
打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。
图1.3-1
注:由于设备尺寸千差万 查看全部
本节视频教程请点击此处。
打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。
图1.3-1
注:由于设备尺寸千差万别,因此Mugeda设置了不同的适配方式,默认以及目前最流行的适配方式是“宽度适配,垂直居中”,出于某种考虑也可选择“包含”“覆盖”等其他适配方式。
选择“宽度适配,垂直居中”适配方式,点击“确认”,点击保存。点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。观看效果时,你会发现,不管手机屏幕大小如何,此H5作品在手机上都是全屏的,上下左右不存在留白或留黑的情况。
图1.3-2
回到“文档信息选项”对话框中,将“自适应”适配方式改为“高度适配,水平居中”
图1.3-3
点击保存,点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。(注:此时,若手机屏幕高度较低,在手机左右两边就会出现黑色的条,这是适配不当的原因。)
图1.3-4
1.51 快速入门:学会使用Mugeda模板
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7540 次浏览 • 2016-09-18 17:37
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
图1.2-83
在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。
图1.2-84
查看全部
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
图1.2-83
在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。
图1.2-84
在模板中,替换自己想要的素材,如图,选中背景图片,点击“属性”面板中的图像“编辑”按钮,在弹出的“媒体库”中选择自己想要的背景素材进行替换(注:替换的素材宽高数值必须是与被替换素材等比例缩放的大小)
图1.2-85
图1.2-86
替换“头像”素材:由于该模板中该头像素材已被编成组,因此需鼠标双击该素材,进入“组”操作页面。
图1.2-87
在“组”页面中,可点击“头像”素材,在其“属性”面板中点击图像“编辑”按钮,替换素材。
图1.2-88
图1.2-89
同理,可以相同方式替换模板中的其他素材。
案例模板介绍:回到Mugeda账号首页,在Mugeda官网上可选择“模板”进入模版库中。
在模板库中,点击想要选择的模板右下角“使用”按钮,使用该模板。(注:只有普通版和专业版可以使用该H5模板)
图1.2-90
1.4.1 快速入门:H5作品相关设置-加载、文档信息
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6987 次浏览 • 2016-09-18 17:12
方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否
图1.2-67
设置颜色:点击有颜色的正方形方框,在出现 查看全部
方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否
图1.2-67
设置颜色:点击有颜色的正方形方框,在出现的颜色框内选取自己想要的颜色。也可以按住Alt键,鼠标在舞台上选取某一颜色。
图1.2-68
添加加载页面图片:点击“背景图片”“前景图片”右侧“+”标志,在弹出的“媒体库”中选择自己想要的图片素材。
图1.2-69
改变“图片宽度”为100像素(等比例缩放),点击保存、预览。
图1.2-70
方法二:点击第1页面左上角的绿色“+”标志在第1页面前插入一个新页面
图1.2-71
在新首页添加一张图片素材
图1.2-72
在右侧“加载”面板里将样式设为“首页作为加载页面”,点击预览,即首页为加载页面。
图1.2-73
编辑文档信息
点击“文件”→“文档信息”
图1.2-74
在弹出的“文档信息选项”对话框填写信息,如下图所示,填写转发标题:“来!摇个配偶吧!”;转发描述:“你会摇中谁来当配偶”;导出名称:“单身狗相亲”,点击“选择文件”选择预览图片,点击“确认”,并保存。
图1.2-75
以下操作素材可通过:“素材库——新手入门素材”中找到。
1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 15626 次浏览 • 2016-09-18 16:49
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。
上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景 查看全部
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。
上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。
图1.2-41
添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,如下图所示,为图片“摇一摇”素材添加“放大进入”进入动画效果
图1.2-42
为文字“摇一摇”素材添加“颤抖”强调动画效果
图1.2-43
为其他说明文字素材添加“蹦入”进入动画效果,在“动画选项”对话框内改变延迟时间为1.5秒
图1.2-44
图1.2-45
如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”
图1.2-46
选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方
图1.2-47
同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,做出“摇一摇”图片上下分开的动画效果
图1.2-48
点击“播放”按钮,可在舞台上查看动画效果
图1.2-49
设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。
图1.2-50
复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮
图1.2-51
在弹出的“媒体库”中选择相应图像替换该图像。
图1.2-52
同理,替换人物名字素材
图1.2-53
同理,选中第4页面,替换人物图像素材与相应名字素材
图1.2-54
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)
图1.2-55
弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”
图1.2-56
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框
图1.2-57
设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。
图1.2-58
设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”
图1.2-59
在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1
图1.2-60
图1.2-61
复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”
图1.2-62
选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材
图1.2-63
注:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮
图1.2-64
在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。
图1.2-65
二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。
图1.2-66
1.2.5 快速入门: 添加背景音乐
原创分享 • mingyueliu 发表了文章 • 9 个评论 • 14023 次浏览 • 2016-09-18 16:37
本节视频教程请点击此处。
添加背景音乐
1) 方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮
图1.2-34
在弹出的“导入声音”对话框中点击“选择文件”按钮
查看全部
本节视频教程请点击此处。
添加背景音乐
1) 方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮
图1.2-34
在弹出的“导入声音”对话框中点击“选择文件”按钮
图1.2-35
选择音乐文件
图1.2-36
上传自己所选的音乐文件,点击“添加”按钮
图1.2-37
将添加至舞台的音乐图标移至舞台之外即可。
图1.2-38
调节背景音乐属性:选中舞台上的背景音乐素材,在其“属性栏”内设置自动播放、循环播放。
图1.2-39
2) 添加背景音乐方法二:点击“工具栏”内的“声音”按钮,在弹出的“导入声音”对话框中上传音乐素材。
图1.2-40
1.2.4 快速入门:制作翻页动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 8394 次浏览 • 2016-09-18 16:24
制作翻页动画
添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。
图1.2-26
复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。
图1 查看全部
制作翻页动画
添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。
图1.2-26
复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。
图1.2-27
替换背景图片:选中复制的第2页,选中舞台上的背景图片素材,点击属性栏内的“编辑”按钮,在弹出的“媒体库”对话框中选择要更替的图片素材,点击“添加”按钮,替换原有图片。
图1.2-28
图1.2-29
同理复制第3页面,替换背景图片。点击保存并预览效果。
图1.2-30
注:若在预览中出现某素材动画效果不断循环重复的情况,可在上方菜单栏选择“动画”→去掉“循环”效果。
图1.2-31
图1.2-32
制作翻页效果:在“翻页”菜单栏内设置翻页属性。
- 翻页效果:三维翻转;
- 退出效果:无;
- 翻页方向:左右翻页;
- 循环:是;
- 翻页时间:600毫秒;
- 保存并预览效果。
图1.2-33
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.3 快速入门:在时间轴上制作关键帧动画
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 10145 次浏览 • 2016-09-18 16:17
快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。
图1.2-15
剪切、复制物 查看全部
快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。
图1.2-15
剪切、复制物体:点击选中logo素材,右键→剪切
图1.2-16
新建图层:如下图点击“新建图层”按钮,新建一个图层。鼠标选中新建图层第1帧空白帧,在舞台上右键→粘贴,将Logo素材粘贴进新图层中。
图1.2-17
插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”
图1.2-18
插入关键帧动画:鼠标选中图层1第1帧,将其向后拖动至第7帧(可自主调节帧数),右键→“插入关键帧动画”
图1.2-19
图1.2-20
插入关键帧:选中图层1第11帧,右键→“插入关键帧”,同理在第12、13、14帧插入关键帧。
图1.2-21
图1.2-22
制作进入动画:选中图层1上物体所在首帧,即第7帧,按住Shift键,鼠标将Logo素材拖至舞台上方之外
图1.2-23
选中图层1第12帧,按住Shift键,按一下键盘下滑键,将Logo素材向下移动一点距离,同理,选中第14帧,将Logo素材向上移动一点距离,制作出进入后上下摆动的动画效果。点击“预览”观察效果。
图1.2-24
保存作品:点击“保存”按钮,在弹出的“保存”对话框中将作品命名为“玩转H5”,点击“保存”。
图1.2-25
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.2 快速入门:添加预置动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 9339 次浏览 • 2016-09-18 16:01
本节视频教程请点击此处。
快速入门:添加预置动画
鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。
查看全部
本节视频教程请点击此处。
快速入门:添加预置动画
鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。
图1.2-8
图1.2-9
以相同方式为舞台上其他两个素材添加预置动画效果。可点击“预览”按钮,观察动画效果。
图1.2-10
调整预置动画时间:我们发现,此时三个素材的动画都是同时出现的,接下来要调整预置动画出现时间,使其有个先后顺序。点击“玩转H5”素材右边的“编辑预置动画”按钮(蓝色圆圈按钮),在弹出的“动画选项”对话框中,调整动画出现属性:时长1.5秒;延迟0秒;顺时针;
图1.2-11
图1.2-12
同理,如下图分别调整文字、Logo两个其他素材的预置动画属性:
图1.2-13
图1.2-14
注:预置动画是Mugeda根据大众需求在自己的框架里设置好的动画效果,这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.1 快速入门:上传、添加素材
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 11099 次浏览 • 2016-09-18 15:56
创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。
图1.2-1
上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所 查看全部
创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。
图1.2-1
上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所在的文件夹,选择所要上传的图片。
图1.2-2
图1.2-3
如下图,点击“上传”按钮,上传所选图片。上传成功后,点击“选择”按钮,将图片成功放置舞台,作为作品背景。
图1.2-4
注:上传成功后的素材可在“媒体库”中找到。点击“素材库”按钮,在弹出的“媒体库”对话框中,“私有”菜单下的“default”文件夹即是存储新上传素材位置。同时,也可在“媒体库”中点击“+”标志上传新素材。
图1.2-5
添加素材:在“媒体库”中找到已上传好的素材。如下图,在“共享组”下的“新手入门素材·平台”中选择图片素材(“玩转H5”图片、文字、Logo三个素材),点击“添加”按钮添加至舞台。
图1.2-6
调整素材:点击选择“变形”工具,调整舞台上素材的大小与位置。
图1.2-7
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
为什么文件缺失,点击缩略图选择对应的本地文件却没法添加呢?
回复问题答疑 • m221800837 发起了问题 • 1 人关注 • 0 个回复 • 368 次浏览 • 2023-04-25 20:47
【代码分享】超少代码实现到特定时间活动结束的效果
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3611 次浏览 • 2019-06-10 23:45
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();// 查看全部
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。
Mugeda常见问题解答
培训教程 • songyue 发表了文章 • 19 个评论 • 13496 次浏览 • 2016-12-27 14:47
如何压缩图片、声音和视频?
答:http://bbs.mugeda.com/?/article/429
为什么导入H5里的视频无法播放?
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式 查看全部
如何压缩图片、声音和视频?
答:http://bbs.mugeda.com/?/article/429
为什么导入H5里的视频无法播放?
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式,视频编码必须是H.264,音频编码必须是AAC。
Mugeda里的模板如何使用?
答:单页模板使用说明http://bbs.mugeda.com/?/article/297
精品模板使用说明http://bbs.mugeda.com/?/article/401
如何实现H5里可以定制文字和图片的功能?
答:定制文字教程http://bbs.mugeda.com/?/article/363
定制图片教程http://bbs.mugeda.com/?/article/351
H5作品文件要如何设置?
答: http://bbs.mugeda.com/?/article/296
屏幕适配要如何设置?如渲染模式、自适应、选择发布模式、如何设置强制横屏竖屏?
答:http://bbs.mugeda.com/?/article/418
我想让一个物体不断循环动,怎么实现?
答:用元件动画可以实现,相关教程http://bbs.mugeda.com/?/article/323
如何复制帧/图层?
答:http://bbs.mugeda.com/?/article/427
为什么无法导入PSD?
答:导入PSD及注意事项说明http://bbs.mugeda.com/?/article/412
逻辑表达式要怎么写?
答:7种逻辑表达式的写法http://bbs.mugeda.com/?/article/406
Mugeda API的使用方法?
答:具体文档http://card.mugeda.com/mugedaApiDoc/index.html
如何使用回调函数?
答:具体文档http://bbs.mugeda.com/?/article/416
为什么我的背景音乐无法播放?
答:Mugeda支持的声音格式为mp3和wav;
保证声音文件大小10M以内(通常建议压缩处理后声音文件大小500kb左右)。
为什么我的背景音乐只在一页中播放?
答:整个作品的背景音乐在属性栏——背景音乐处添加
其他Mugeda声音使用相关问题请参考http://bbs.mugeda.com/?/article/13
为什么打开内容时,会提示素材缺失?
答:素材缺失,指的是图片、视频和音频素材在源文件里丢失的情况,这是因为素材没有上传完成造成的。
以图片为例,当图片上传到素材库时,会有进度条显示上传进度,橙色进度条完成时才算上传成功,如图:
同时如果在素材库里删除了素材,相关作品中用到的素材也会删除,会显示如下:
为什么我的内容发布后还是会有橙色的广告条?
答:内容发布后,如果扫描“效果预览”旁的二维码,这时候看到的是预览链接,在最上方会看到橙色的广告条,如果是正式发布链接,则不会出现广告条,特此说明。如图:
(此图二维码是预览地址,有广告条)
(此图二维码是发布地址,无广告条)
【预览和发布链接的详细区别】可参考: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=964413431636375&vid=s1415c5xz65
我想让画面上的一个物体停下来,用手指点击再播放,怎么做?
答:这个属于动画控制,建议学习下基础课程: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=982606913102231&vid=c1415r781id
为什么我做的H5打不开了,说是涉及违规内容被举报?
答:请先自查作品是否违规:http://bbs.mugeda.com/?/article/272
如果你确实没有违反的话,可以重新发布一遍。
Mugeda是什么?
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 10626 次浏览 • 2016-09-28 18:09
本节视频教程请点击此处。
一、 Mugeda是什么?
Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。
二、 如何进入Mugeda页面?
1)下 查看全部
本节视频教程请点击此处。
一、 Mugeda是什么?
Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。
二、 如何进入Mugeda页面?
1)下载Google浏览器:(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入www.mugeda.com
进入Mugeda首页。
2)注册Mugeda账号:进入首页后,可点击右上角“注册”,通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。
图1.1-2
三、 Mugeda操作界面简单介绍
帮助手册:点击“立即体验“,会打开Mugeda的帮助手册,点击“预览”按钮即可观看整个平台的功能和基本操作。
图1.1-3
简单制作交互动画:Mugeda操作界面和Flash高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外,设计师也无需添加任何代码即可完成复杂的交互。
图1.1-4
除了设计师,工程师在Mugeda中也大有所为,在“脚本”按钮中,工程师可以写入“JS”代码来制作自己想要的交互效果。
图1.1-5
手机观看:在Mugeda中制作出的H5作品支持随时手机观看,点击“通过二维码共享”按钮,可用手机扫描出现的二维码观看作品效果。
图1.1-6
发布作品:点击橙色“发布”按钮,可发布H5作品,用Mugeda平台发布的任何H5作品都没有Mugeda的Logo,大家可以放心使用。
共享、导出作品:Mugeda同时还支持动画作品的共享、导出。如图1.1-7,在“通过二维码共享”对话框中,可以选中“共享源文件”,复制共享作品编辑地址。
图1.1-7
同时还可以导出一个HTML5源文件部署在自己的服务器上,同样也不附Mugeda的Logo。除此之外,Mugeda还支持GIF、视频、PNG等格式的导出,基本覆盖现在流行的主流多媒体格式,功能十分强大。导出步骤:“文件”→“导出”→选择导出格式
图1.1-8
四、 团队管理
针对企业账号,Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理”,可进入团队管理页面。在管理页面中,可添加企业成员,方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品,十分方便。
图1.1-9
图1.1-10
五、 数据服务
Mugeda还提供专业的数据服务。针对每一个作品,我们可以在后台统计页面中浏览到数据。在数据页面,可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
图1.1-11
六、 Mugeda动画交互作品展示
下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品:
动画:
图1.1-12
广告:
图1.1-13
测试:
图1.1-14
贺卡:
图1.1-15
电子绘本
图1.1-16
课件:
图1.1-17
游戏:
图1.1-18
2.3.9 动画:分页/加载页
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 9943 次浏览 • 2016-09-21 15:23
本节视频教程请点击此处。
如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等
图2.3-67
查看全部
本节视频教程请点击此处。
如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等
图2.3-67
点击“预览”观察效果
图2.3-68
如图,将样式改为“进度环”,其他属性设置不变
图2.3-69
点击“预览”观察效果
图2.3-70
将样式改为“旋转加载”,可观察到加载效果如下:
图2.3-71
将样式改为“旋转加载+百分比”,可观察到加载效果如下
图2.3-72
将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。
如下图,在首页添加一个火箭图片素材,调整大小与位置。鼠标选中该素材右键→“转换为元件”
图2.3-73
双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”,右键→“插入关键帧动画”
图2.3-74
在20帧的位置右键→“插入关键帧”
图2.3-75
鼠标选中第10帧关键帧位置,将火箭图片向上拖动一些位置,制作出火箭上下移动的动画效果
图2.3-76
点击回到“舞台”,新建一个图层1,选中图层1的第一帧,点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条,可适当调整矩形颜色大小等。
图2.3-77
同时选中图层0、图层1的第30帧,鼠标右键→“插入帧”
图2.3-78
选中图层1的有帧位置,右键→“关键帧动画”
图2.3-79
选中图层1的起始关键帧,点击矩形元素,在其“属性面板”内将其“宽”值设为“1”
图2.3-80
添加一个新页面,点击预览动画效果,发现长条矩形出现横向拉长,即加载的动画效果,动画播放完后自动跳至第2页。
图2.3-81
2.3.8 动画:元件动画
原创分享 • mingyueliu 发表了文章 • 5 个评论 • 11491 次浏览 • 2016-09-21 14:54
本节视频教程请点击此处。
元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。
如图,点击“素材库”,在“舞台”上添加一个车 查看全部
本节视频教程请点击此处。
元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。
如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材
图2.3-48
选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件
图2.3-49
双击“舞台”上的车轮,进入元件编辑页面
图2.3-50
在时间轴50帧位置右键→“插入帧”
图2.3-51
在任意有帧的位置右键→“插入关键帧动画”
图2.3-52
点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度
图2.3-53
点击“播放”可观察车轮出现自转一周的动画效果
图2.3-54
点击“舞台”回到“舞台”编辑页面
图2.3-55
点击“预览”发现元件动画可重复不断地播放
图2.3-56
元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台”
图2.3-57
图2.3-58
元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层”
图2.3-59
调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮
图2.3-60
点击“预览”,出现汽车轮胎转动的动画效果
图2.3-61
在“舞台”的40帧位置,右键→“插入帧”
图2.3-62
在有帧的位置右键→“插入关键帧动画”
图2.3-63
选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧。
图2.3-64
选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧。
图2.3-65
点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果
图2.3-66
2.3.7 动画:预置动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 7729 次浏览 • 2016-09-21 14:45
本节视频教程请点击此处。
预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。
1. 添加进入动画
如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮
图2.3 查看全部
本节视频教程请点击此处。
预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。
1. 添加进入动画
如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮
图2.3-43
在弹出的对话框内选择进入动画效果为“弹入”,同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果
图2.3-44
2. 强调动画
点击“强调动画”文字素材右边的“添加预置动画”按钮,
图2.3-45
在弹出的对话框中选择强调动画效果为“晃动”,可点击预览效果。
图2.3-46
3. 退出动画
同理点击“退出动画”文字素材右边的“添加预置动画”按钮,在弹出的对话框中选择推出动画效果为“蹦出”,可点击预览效果。
图2.3-47
2.3.6 动画:变形动画
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 9853 次浏览 • 2016-09-21 14:41
本节视频教程请点击此处。
曲线变形动画可以实现一个形状变成另一个形状的动画效果。
如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。
图2.3-35
在时间轴20帧的位置,右 查看全部
本节视频教程请点击此处。
曲线变形动画可以实现一个形状变成另一个形状的动画效果。
如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。
图2.3-35
在时间轴20帧的位置,右键→“插入帧”
图2.3-36
在时间轴有帧的位置,右键→“插入曲线变形动画”
图2.3-37
选中最后一帧,鼠标点击“节点”工具
图2.3-38
改变矩形形状为三角形
图2.3-39
点击“播放”,观察矩形变成三角形的动画效果
图2.3-40
同理,点击选中时间轴上的最后一帧,在“属性面板”下改变物体填充色为红色,点击“播放”观察动画效果,发现矩形变成三角形的同时,物体颜色也逐渐由紫色变成红色。
图2.3-41
图2.3-42
2.3.5 动画:进度动画
原创分享 • mingyueliu 发表了文章 • 7 个评论 • 15518 次浏览 • 2016-09-21 14:38
本节视频教程请点击此处。
进度动画可实现绘制线条过程的效果和文字的打字机效果。
1. 制作图像进度动画
如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。
图 查看全部
本节视频教程请点击此处。
进度动画可实现绘制线条过程的效果和文字的打字机效果。
1. 制作图像进度动画
如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。
图2.3-25
在其“属性面板”下改变该矩形的填充色为“无色”、线条色为“黑色”
图2.3-26
继续绘制出一个圆角矩形和一个圆形,形成手机外框样式。
图2.3-27
在时间轴30帧位置右键→“插入帧”
图2.3-28
在以插入帧的任意位置右键→“插入进度动画”,时间轴变成紫色
图2.3-29
点击“预览”,发现此时动画变成逐渐绘制的效果。
图2.3-30
2. 制作文字进度动画
如图,点击新建一个图层,点击“文字”工具,在“舞台”上创建一个文本框
图2.3-31
点击编辑文字内容
图2.3-32
在新建图层1上的有帧位置,右键→“插入进度动画”
图2.3-33
点击“预览”,观察字体逐字出来的动画效果
图2.3-34
2.3.4 动画:路径动画
原创分享 • mingyueliu 发表了文章 • 3 个评论 • 14694 次浏览 • 2016-09-21 14:33
路径动画即物体沿着指定路径线运动的动画。
本节视频教程请点击此处。
在时间轴上右键→“插入帧”,右键→“插入关键帧动画”
图2.3-17
鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制 查看全部
路径动画即物体沿着指定路径线运动的动画。
本节视频教程请点击此处。
在时间轴上右键→“插入帧”,右键→“插入关键帧动画”
图2.3-17
鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制作出一个关键帧动画效果。
图2.3-18
鼠标选中时间轴上任意绿色部分,右键→“切换路径显示”
图2.3-19
即在“舞台”上显示出一条灰色的路径线
图2.3-20
继续点击时间轴任意绿色部分,右键→“自定义路径”,发现路径变成紫色。
图2.3-21
点击选择“节点”工具
图2.3-22
通过节点控制杆调节动画运动路径
图2.3-23
点击“播放”,发现火箭即沿着设定的运动路径运动。
图2.3-24
2.3.3关键帧动画
原创分享 • mingyueliu 发表了文章 • 4 个评论 • 9074 次浏览 • 2016-09-21 14:28
本节视频教程请点击此处。
选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。
图2.3-10
点击选中第30帧位置,右键→“插入帧 查看全部
本节视频教程请点击此处。
选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。
图2.3-10
点击选中第30帧位置,右键→“插入帧”
图2.3-11
在已插入帧的位置右键→“插入关键帧动画”
图2.3-12
鼠标点击选中结束帧(此处为第30帧)位置,将“舞台”上的物体移动至“舞台”上方
图2.3-13
点击“播放”按钮,发现一个火箭向上移动的动画效果做出来了。
图2.3-14
任何元素属性的变化过程都可通过关键帧动画实现。例如下图,鼠标点击选中结束帧(此处为第30帧)位置,在“属性面板”下改变此时物体的属性:设置透明度为0,改变物体大小与旋转角度。
图2.3-15
可点击“播放”观察动画效果
图2.3-16
2.3.1 动画:时间轴以及图层
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7598 次浏览 • 2016-09-21 14:15
时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。
图2.3-1
也可点击“播放”按钮进行预览
图2.3-2 查看全部
时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。
图2.3-1
也可点击“播放”按钮进行预览
图2.3-2
循环播放:点击“动画”→“循环”,即在预览时动画效果会循环播放,再次点击“动画”→“循环”,即将循环播放功能取消。
图2.3-3
锁定与打开图层:点击最上方“锁定图层”按钮,即可将所有图层锁定,点击每个图层右边的“锁定图层”,即可锁定该图层,该图层在锁定状态下不可被编辑操作。再次点击可打开图层。
图2.3-4
2.3.2 动画:选择工具
2.3.3关键帧动画
2.3.4 动画:路径动画
2.3.5 动画:进度动画
2.3.6 动画:变形动画
2.3.7 动画:预置动画
2.3.8 动画:元件动画
2.3.9 动画:分页/加载页
2.3.10 动画:遮罩
2.3.11 动画:动画运动
1.6.3 作品创建前必读: 声音及视频处理
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6709 次浏览 • 2016-09-19 16:47
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
声音处理方式
注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压 查看全部
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
声音处理方式
注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压缩。
添加声音:点击“媒体”栏下的“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”按钮,添加所选音频素材。
图1.3-15
图1.3-16
“上传”→“添加”,将音频素材添加进舞台
图1.3-17
选中舞台上的音频素材,在其“属性”面板内设置播放属性:“自动播放”:是;“循环播放”:是
图1.3-18
替换图标:选中舞台上的音频素材图标,在“属性”面板内点击“声音图标”右边的图标标志,在弹出的“媒体库”中选择自己想要的图标素材
图1.3-19
图1.3-20
点击保存,并预览效果
图1.3-21
由于是背景音乐,无需将图标显示在画面中,因此可将舞台上图标用鼠标拖动至舞台之外。
图1.3-22
视频处理方式
注:添加的视频格式为mp4,视频大小控制在20M以内,太大的话在手机上播放会出现卡的情况。
点击添加第2页面,在第2页面中,点击“视频”按钮,在弹出的“导入视频”对话框中点击“选择文件”按钮,选择自己想要添加的视频文件。
图1.3-23
图1.3-24
点击“上传”→“确定”,将视频素材添加进舞台,点击保存。
图1.3-25
替换视频控制图标:首先点击“素材库”按钮,在“媒体库”对话框中添加自己想要的控制图标素材。
图1.3-26
使用“变形”工具调整素材大小位置
图1.3-27
鼠标选中“选择”工具,点击图标右边的“添加/编辑行为”按钮
图1.3-28
在“编辑行为”对话框中选择“媒体播放控制”→“播放视频”,点击“编辑”按钮
图1.3-29
在“参数”对话框中选择“视频元件”为“视频1”,点击“确认”,点击保存,点击预览效果。
图1.3-30
隐藏播放按钮:在舞台上选中视频素材,在其“属性”面板内将“隐藏播放按钮”设置为“是”,其他视频属性可自由调控。
图1.3-31
注:音频、视频添加至舞台后,可作为元件自动列属在“元件”面板下,这些元件在舞台上被删除后,仍可在“元件”面板中找到。选中需添加的元件,点击“元件”面板下“添加到画布”按钮即可将选中元件添加至舞台,同时也可用鼠标直接将元件拖至舞台放开的方式添加元件至舞台。
图1.3-32
图1.3-33
1.6.2 作品创建前必读: 图片的处理
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7416 次浏览 • 2016-09-19 16:40
图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框 查看全部
图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框应局限在320*416像素,即宽高分别为320像素、416像素),在安全空间内不要放重要的设计元素。
图1.3-5
压缩素材:将素材导入Mugeda时,我们需要将其压缩。
压缩方法一:PS压缩
在PS中打开PSD素材,除去透明度,按住Ctrl+Shift+Alt+S,打开“储存为Web和设备所用格式”对话框,选择“优化的文件格式”为“PNG8”,点击“存储”将素材存储至所选位置。
图1.3-6
压缩方法二:TinyPNG压缩
输入网址https://tinypng.com/进入TinyPNG官网,将需压缩的文件拖进相应位置
图1.3-7
图1.3-8
等待其自动压缩
图1.3-9
压缩完后,点击“Download all”下载全部压缩文件
图1.3-10
压缩方法三:Mugeda压缩
如下图,在Mugeda页面导入PSD格式,“文件”→“导入”→“Photoshop(PSD)文件”,打开“导入Photoshop(PSD)素材”对话框
图1.3-11
将PSD文件直接拖动至对话框,或点击对话框打开PSD文件
图1.3-12
将PSD文件拖至对话框后,如图点击全选中PSD文件的各个素材,点击“分层导入”
图1.3-13
即可将PSD文件中的每图层上的素材依次分层导入Mugeda。
图1.3-14
1.6.1 作品创建前必读:手机屏幕适配方法
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 8953 次浏览 • 2016-09-19 15:01
本节视频教程请点击此处。
打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。
图1.3-1
注:由于设备尺寸千差万 查看全部
本节视频教程请点击此处。
打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。
图1.3-1
注:由于设备尺寸千差万别,因此Mugeda设置了不同的适配方式,默认以及目前最流行的适配方式是“宽度适配,垂直居中”,出于某种考虑也可选择“包含”“覆盖”等其他适配方式。
选择“宽度适配,垂直居中”适配方式,点击“确认”,点击保存。点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。观看效果时,你会发现,不管手机屏幕大小如何,此H5作品在手机上都是全屏的,上下左右不存在留白或留黑的情况。
图1.3-2
回到“文档信息选项”对话框中,将“自适应”适配方式改为“高度适配,水平居中”
图1.3-3
点击保存,点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。(注:此时,若手机屏幕高度较低,在手机左右两边就会出现黑色的条,这是适配不当的原因。)
图1.3-4
1.51 快速入门:学会使用Mugeda模板
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7540 次浏览 • 2016-09-18 17:37
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
图1.2-83
在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。
图1.2-84
查看全部
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
图1.2-83
在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。
图1.2-84
在模板中,替换自己想要的素材,如图,选中背景图片,点击“属性”面板中的图像“编辑”按钮,在弹出的“媒体库”中选择自己想要的背景素材进行替换(注:替换的素材宽高数值必须是与被替换素材等比例缩放的大小)
图1.2-85
图1.2-86
替换“头像”素材:由于该模板中该头像素材已被编成组,因此需鼠标双击该素材,进入“组”操作页面。
图1.2-87
在“组”页面中,可点击“头像”素材,在其“属性”面板中点击图像“编辑”按钮,替换素材。
图1.2-88
图1.2-89
同理,可以相同方式替换模板中的其他素材。
案例模板介绍:回到Mugeda账号首页,在Mugeda官网上可选择“模板”进入模版库中。
在模板库中,点击想要选择的模板右下角“使用”按钮,使用该模板。(注:只有普通版和专业版可以使用该H5模板)
图1.2-90
1.4.1 快速入门:H5作品相关设置-加载、文档信息
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6987 次浏览 • 2016-09-18 17:12
方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否
图1.2-67
设置颜色:点击有颜色的正方形方框,在出现 查看全部
方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否
图1.2-67
设置颜色:点击有颜色的正方形方框,在出现的颜色框内选取自己想要的颜色。也可以按住Alt键,鼠标在舞台上选取某一颜色。
图1.2-68
添加加载页面图片:点击“背景图片”“前景图片”右侧“+”标志,在弹出的“媒体库”中选择自己想要的图片素材。
图1.2-69
改变“图片宽度”为100像素(等比例缩放),点击保存、预览。
图1.2-70
方法二:点击第1页面左上角的绿色“+”标志在第1页面前插入一个新页面
图1.2-71
在新首页添加一张图片素材
图1.2-72
在右侧“加载”面板里将样式设为“首页作为加载页面”,点击预览,即首页为加载页面。
图1.2-73
编辑文档信息
点击“文件”→“文档信息”
图1.2-74
在弹出的“文档信息选项”对话框填写信息,如下图所示,填写转发标题:“来!摇个配偶吧!”;转发描述:“你会摇中谁来当配偶”;导出名称:“单身狗相亲”,点击“选择文件”选择预览图片,点击“确认”,并保存。
图1.2-75
以下操作素材可通过:“素材库——新手入门素材”中找到。
1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 15626 次浏览 • 2016-09-18 16:49
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。
上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景 查看全部
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。
上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。
图1.2-41
添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,如下图所示,为图片“摇一摇”素材添加“放大进入”进入动画效果
图1.2-42
为文字“摇一摇”素材添加“颤抖”强调动画效果
图1.2-43
为其他说明文字素材添加“蹦入”进入动画效果,在“动画选项”对话框内改变延迟时间为1.5秒
图1.2-44
图1.2-45
如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”
图1.2-46
选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方
图1.2-47
同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,做出“摇一摇”图片上下分开的动画效果
图1.2-48
点击“播放”按钮,可在舞台上查看动画效果
图1.2-49
设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。
图1.2-50
复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮
图1.2-51
在弹出的“媒体库”中选择相应图像替换该图像。
图1.2-52
同理,替换人物名字素材
图1.2-53
同理,选中第4页面,替换人物图像素材与相应名字素材
图1.2-54
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)
图1.2-55
弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”
图1.2-56
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框
图1.2-57
设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。
图1.2-58
设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”
图1.2-59
在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1
图1.2-60
图1.2-61
复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”
图1.2-62
选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材
图1.2-63
注:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮
图1.2-64
在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。
图1.2-65
二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。
图1.2-66
1.2.5 快速入门: 添加背景音乐
原创分享 • mingyueliu 发表了文章 • 9 个评论 • 14023 次浏览 • 2016-09-18 16:37
本节视频教程请点击此处。
添加背景音乐
1) 方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮
图1.2-34
在弹出的“导入声音”对话框中点击“选择文件”按钮
查看全部
本节视频教程请点击此处。
添加背景音乐
1) 方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮
图1.2-34
在弹出的“导入声音”对话框中点击“选择文件”按钮
图1.2-35
选择音乐文件
图1.2-36
上传自己所选的音乐文件,点击“添加”按钮
图1.2-37
将添加至舞台的音乐图标移至舞台之外即可。
图1.2-38
调节背景音乐属性:选中舞台上的背景音乐素材,在其“属性栏”内设置自动播放、循环播放。
图1.2-39
2) 添加背景音乐方法二:点击“工具栏”内的“声音”按钮,在弹出的“导入声音”对话框中上传音乐素材。
图1.2-40
1.2.4 快速入门:制作翻页动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 8394 次浏览 • 2016-09-18 16:24
制作翻页动画
添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。
图1.2-26
复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。
图1 查看全部
制作翻页动画
添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。
图1.2-26
复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。
图1.2-27
替换背景图片:选中复制的第2页,选中舞台上的背景图片素材,点击属性栏内的“编辑”按钮,在弹出的“媒体库”对话框中选择要更替的图片素材,点击“添加”按钮,替换原有图片。
图1.2-28
图1.2-29
同理复制第3页面,替换背景图片。点击保存并预览效果。
图1.2-30
注:若在预览中出现某素材动画效果不断循环重复的情况,可在上方菜单栏选择“动画”→去掉“循环”效果。
图1.2-31
图1.2-32
制作翻页效果:在“翻页”菜单栏内设置翻页属性。
- 翻页效果:三维翻转;
- 退出效果:无;
- 翻页方向:左右翻页;
- 循环:是;
- 翻页时间:600毫秒;
- 保存并预览效果。
图1.2-33
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.3 快速入门:在时间轴上制作关键帧动画
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 10145 次浏览 • 2016-09-18 16:17
快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。
图1.2-15
剪切、复制物 查看全部
快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。
图1.2-15
剪切、复制物体:点击选中logo素材,右键→剪切
图1.2-16
新建图层:如下图点击“新建图层”按钮,新建一个图层。鼠标选中新建图层第1帧空白帧,在舞台上右键→粘贴,将Logo素材粘贴进新图层中。
图1.2-17
插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”
图1.2-18
插入关键帧动画:鼠标选中图层1第1帧,将其向后拖动至第7帧(可自主调节帧数),右键→“插入关键帧动画”
图1.2-19
图1.2-20
插入关键帧:选中图层1第11帧,右键→“插入关键帧”,同理在第12、13、14帧插入关键帧。
图1.2-21
图1.2-22
制作进入动画:选中图层1上物体所在首帧,即第7帧,按住Shift键,鼠标将Logo素材拖至舞台上方之外
图1.2-23
选中图层1第12帧,按住Shift键,按一下键盘下滑键,将Logo素材向下移动一点距离,同理,选中第14帧,将Logo素材向上移动一点距离,制作出进入后上下摆动的动画效果。点击“预览”观察效果。
图1.2-24
保存作品:点击“保存”按钮,在弹出的“保存”对话框中将作品命名为“玩转H5”,点击“保存”。
图1.2-25
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.2 快速入门:添加预置动画
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 9339 次浏览 • 2016-09-18 16:01
本节视频教程请点击此处。
快速入门:添加预置动画
鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。
查看全部
本节视频教程请点击此处。
快速入门:添加预置动画
鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。
图1.2-8
图1.2-9
以相同方式为舞台上其他两个素材添加预置动画效果。可点击“预览”按钮,观察动画效果。
图1.2-10
调整预置动画时间:我们发现,此时三个素材的动画都是同时出现的,接下来要调整预置动画出现时间,使其有个先后顺序。点击“玩转H5”素材右边的“编辑预置动画”按钮(蓝色圆圈按钮),在弹出的“动画选项”对话框中,调整动画出现属性:时长1.5秒;延迟0秒;顺时针;
图1.2-11
图1.2-12
同理,如下图分别调整文字、Logo两个其他素材的预置动画属性:
图1.2-13
图1.2-14
注:预置动画是Mugeda根据大众需求在自己的框架里设置好的动画效果,这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
以上操作素材可通过:“素材库——新手入门素材”中找到哦
1.2.1 快速入门:上传、添加素材
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 11099 次浏览 • 2016-09-18 15:56
创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。
图1.2-1
上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所 查看全部
创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。
图1.2-1
上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所在的文件夹,选择所要上传的图片。
图1.2-2
图1.2-3
如下图,点击“上传”按钮,上传所选图片。上传成功后,点击“选择”按钮,将图片成功放置舞台,作为作品背景。
图1.2-4
注:上传成功后的素材可在“媒体库”中找到。点击“素材库”按钮,在弹出的“媒体库”对话框中,“私有”菜单下的“default”文件夹即是存储新上传素材位置。同时,也可在“媒体库”中点击“+”标志上传新素材。
图1.2-5
添加素材:在“媒体库”中找到已上传好的素材。如下图,在“共享组”下的“新手入门素材·平台”中选择图片素材(“玩转H5”图片、文字、Logo三个素材),点击“添加”按钮添加至舞台。
图1.2-6
调整素材:点击选择“变形”工具,调整舞台上素材的大小与位置。
图1.2-7
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
Mugeda百科全书——文本教程目录
原创分享 • mingyueliu 发表了文章 • 34 个评论 • 72285 次浏览 • 2016-09-18 15:01
1、快速入门
1.1 Mugeda是什么?
1.2.1 快速入门:上传、添加素材
1.2.2 快速入门:添加预置动画
1.2.3 快速入门:在时间轴上制作关键帧动画
1.2.4 快速入门:制作翻页动画
1.2.5 快速入门: 添加背景音乐
1.3 快速入门:快速制作一个摇一摇随机 查看全部
一、新手必看
1、快速入门
1.1 Mugeda是什么?
1.2.1 快速入门:上传、添加素材
1.2.2 快速入门:添加预置动画
1.2.3 快速入门:在时间轴上制作关键帧动画
1.2.4 快速入门:制作翻页动画
1.2.5 快速入门: 添加背景音乐
1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题
1.4.1 快速入门:H5作品相关设置-加载、文档信息
1.4.2 快速入门:发布作品
1.5 快速入门:学会使用Mugeda模板
1.6 快速入门:导出视频和GIF动画的相关规则
2、作品创建前必读
1.6.1 作品创建前必读:手机屏幕适配方法
1.6.2 作品创建前必读: 图片的处理
1.6.3 作品创建前必读: 声音及视频处理
1.6.3 作品创建前必读: 移动端H5页面音频/视频规范
二、功能详解
1、Mugeda界面与舞台
2.1.1 Mugeda界面与舞台:界面概览
2.1.2 Mugeda界面与舞台:菜单栏
2.1.3 Mugeda界面与舞台:快捷工具栏
2.1.4 Mugeda界面与舞台:时间轴
2.1.5 Mugeda界面与舞台:工具条
2.1.6 Mugeda界面与舞台:页面栏
2.1.7 Mugeda界面与舞台:什么是舞台?
2.1.8 Mugeda界面与舞台:属性面板
2. 素材与媒体
2.2.1 素材与媒体:图片/图片序列/GIF/PNG/SVG/JPG等
2.2.2 素材与媒体:文本/富文本
2.2.3 素材与媒体:网页
2.2.4 素材与媒体:幻灯片
2.2.5 素材与媒体:视频
2.2.6 素材与媒体:声音
2.2.7 素材与媒体:绘制素材
2.2.8 素材与媒体:云字体
2.2.9 素材与媒体:可视化图表
2.2.10 素材与媒体:建组 、裁剪组
3:动画
2.3.1 动画:时间轴以及图层
2.3.2 动画:选择工具
2.3.3关键帧动画
2.3.4 动画:路径动画
2.3.5 动画:进度动画
2.3.6 动画:变形动画
2.3.7 动画:预置动画
2.3.8 动画:元件动画
2.3.9 动画:分页/加载页
2.3.10 动画:遮罩
2.3.11 动画:动画运动
4:行为
2.4.1 行为:行为添加以及触发事件
2.4.2 行为:帧的行为
2.4.4 行为:播放元件片段
2.4.5 行为:改变元素属性
2.4.6 行为:改变图片
2.4.7 行为:设置定时器
2.4.8 行为:手机事件
2.4.9 行为:视频控制
2.4.10 行为:声音控制
2.4.11 行为:录制声音
2.4.12 行为:选择上传图片
2.4.13 行为:修改图表数据
2.4.14 行为:提交表单
2.4.15 行为:定义分享信息
5、控件
2.5.1 行为:陀螺仪
2.5.2 行为:定时器
2.5.3 行为:随机数
2.5.4 行为:擦玻璃
2.5.5 行为:绘画板功能
2.5.6 行为:点赞
6:微信功能
2.6.1 微信功能:微信头像
2.6.2 微信功能:微信昵称
2.6.3 微信定制:定制图片
2.6.4 微信定制:录制用户声音
2.6.5 微信功能:定义分享信息
7:表单
2.7.1 表单:输入文字(输入框)
2.7.2 表单:单选框
2.7.3 表单:多选框
2.7.4 表单:下拉菜单(列表框)
2.7.5 表单:表单提交
2.7.6 表单:默认表单/定制文字
2.8.1 关联绑定:动画关联
2.8.2 关联绑定:属性关联
2.8.3 关联绑定:自动关联
9、API
2.9.1 【API的应用】在动画中添加代码
2.9.2 【API的应用】Mugeda API的整体结构
2.9.3 【API的应用】Mugeda对象
2.9.4 【API的应用】scene对象
2.9.5 【API的应用】aObject对象
2.9.6 【API的应用】工具API
2.9.7 【API的应用】获取Mugeda后台数据
10、判断
2.10.1 判断:条件判断
2.10.2 判断:逻辑表达式判断
三:案例讲解
1、展示动画
3.1.1 【展示动画】邀请函
3.1.2 【展示动画】招聘
3.1.3 【展示动画】简历
3.1.4 【展示动画】贺卡
3.1.5 【展示动画】公司广告
3.1.6【展示动画】长按手指控制动画播放
3.1.7【展示动画】2016网易娱乐圈画传
3.1.8【展示动画】一只挖空心思的行礼箱
3.1.9【展示动画】科幻风格H5的制作
3.1.10【展示动画】拖动长图类H5制作
3.1.11【展示动画】小爷吴亦凡
2、UI原型
3.2.1【UI原型】图标动效
3.2.2 【UI原型】用Mugeda巧做GIF
3、小游戏
3.3.1 【游戏测试】手速测试
3.3.2 【游戏测试:】手术刀
3.3.3 【游戏测试】选择题
3.3.4 【游戏测试:】随机测试
4、微信定制
3.4.1 【微信定制 】和宝宝聊天
3.4.2 【微信定制 】和奥运冠军合影
5:热门案例
3.5.1:【H5案例课】接东西小游戏H5
3.5.2:【H5案例课】拍拍员工被玩坏了
3.5.3:【H5案例课】交互动画类H5制作
3.5.4:【H5案例课】什么,才是福
3.5.5:【H5案例课】VR扫红包
3.5.6:【H5案例课】H5版Flappy Bird
3.5.7:【H5案例课】H5酷炫特效制作
3.5.8:【H5案例课】跳一跳小游戏
3.5.9:【H5案例课】连连看H5小游戏
3.5.10:【H5案例课】求职H5简历
3.5.11:【H5案例课】世界名画抖抖抖起来了
3.5.12:【H5案例课】教你做魔性H5弹幕
3.5.13:【H5案例课】画一个小人
3.5.13:【H5案例课】剪刀石头布小游戏
3.5.14:【H5案例课】足球小游戏
3.5.15:【H5案例课】房地产楼书H5制作
3.5.16:【H5案例课】在H5中插入“直播+弹幕”
3.5.17:【H5案例课】换装小游戏
3.5.18:【H5案例课】接东西H5小游戏
3.5.18:【H5案例课】天猫双十一宇宙邀请函
3.5.19:【H5案例课】重力感应类H5
3.5.20:【H5案例课】教你玩转密室逃脱类H5
3.5.21:【H5案例课】快闪制作
3.5.22:【H5案例课】交互视频类H5
3.5.23:【H5案例课】制作局部镜头特效
3.5.24:【H5案例课】测试题类型H5
更多课程持续更新中……
四:新功能教程
4.1.1【新功能教程】缩放功能
4.1.2【新功能教程】复制/粘贴/拖拽/添加图片
4.1.3【新功能教程】虚拟现实场景组件
4.1.4【新功能教程】最新上线的小功能
4.1.5【新功能教程】拖动组件的运用
4.1.6【新功能教程】连线题的制作
4.1.7【新功能教程】投票组件的使用
4.1.8【新功能教程】辅助线功能
4.1.9【新功能教程】改变行为属性增加边框颜色和填充色
4.1.10【新功能教程】滤镜效果
4.1.11【新功能教程】首页加载的静态导出
4.1.12【新功能教程】投票、抽奖实时数据管理
4.1.13【新功能教程】文字变形动画
4.1.14【新功能教程】运动曲线编辑
4.1.15【新功能教程】计数器组件
4.1.16【新功能教程】屏幕适配范围与安全框
4.1.17【新功能教程】VR全景视频
4.1.18【新功能教程】视频的跳转并播放功能(精确到秒)
关于付费及发票
六:常见问题 ( Mu友友情贡献)
【代码分享】显示前一个人的微信头像 作者:zgs
【代码分享】VR功能实现GIF热点,获取VR坐标的功能 作者:zgs
【使用前必看】素材资源一贴整合(图片、声音、视频) 作者:mugedacn
【代码分享】三级菜单下拉框 作者:zgs
【代码分享】在mugeda内实现视频直播的方法 作者:zg
【高级互动】如何用木疙瘩做游戏? 作者:Total恺
查看定制的图片地址 作者:zhongyue
转发后保留文本内容 作者:zhongyue
使用回调函数跳转链接以及弹出默认系统提示 作者:zhongyue
分享后的行为代码 作者:zhongyue
【代码入门】如何在mugeda中,实现H5作品和外部 网页之间实现数据连接 作者:qq1f07c
如何在mugeda上无代码实现倒计时(天、时、分、秒) 作者:qq1f07c
使用回调函数跳转链接以及弹出默认系统提示 作者:zgs
两种在标题中显示数量的方法(在作品中实时获取浏览量信息的方法) 作者:zgs
【代码分享】贴边UI功能! 作者: Total恺
如何导入超过20M的视频文件/如何使用视频分享通用代码? 作者: lian007
【代码分享】倒计时代码 作者: lx_mgd
如何自定义绑定微信公众号 作者:zgs