新手必看

新手必看

为什么文件缺失,点击缩略图选择对应的本地文件却没法添加呢?

回复

问题答疑m221800837 发起了问题 • 1 人关注 • 0 个回复 • 367 次浏览 • 2023-04-25 20:47 • 来自相关话题

简易版做到第14个动画,元素不显示了怎么办?

回复

问题答疑mm450813191 发起了问题 • 1 人关注 • 0 个回复 • 402 次浏览 • 2022-11-16 00:54 • 来自相关话题

元件内添加跳转帧并播放行为没有反应

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1570 次浏览 • 2022-04-18 16:05 • 来自相关话题

预览上面有空白

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1596 次浏览 • 2022-04-17 19:20 • 来自相关话题

长图自动播放

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1702 次浏览 • 2022-04-16 15:00 • 来自相关话题

请问一下,变形动画的模糊效果在哪里?

问题答疑ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 1693 次浏览 • 2022-03-24 10:18 • 来自相关话题

2.3.2 动画:选择工具

回复

原创分享mingyueliu 发起了问题 • 3 人关注 • 0 个回复 • 8392 次浏览 • 2016-09-21 14:21 • 来自相关话题

【代码分享】超少代码实现到特定时间活动结束的效果

原创分享qqf35714a4fc 发表了文章 • 0 个评论 • 3611 次浏览 • 2019-06-10 23:45 • 来自相关话题

mugeda.addEventListener("renderready", function(){
    var scene = mugeda.scene;
    var d = new Date();//获取现在的时间
    var x = d.getTime();// 查看全部
mugeda.addEventListener("renderready", function(){
    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文本就会变成
微信截图_20190610233239.png
一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
微信截图_20190610234018.png

我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。

1.4.2 快速入门:发布作品

原创分享wx6a18b9d061 回复了问题 • 8 人关注 • 9 个回复 • 11125 次浏览 • 2018-12-16 19:02 • 来自相关话题

Mugeda常见问题解答

培训教程songyue 发表了文章 • 19 个评论 • 13494 次浏览 • 2016-12-27 14:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答:http://bbs.mugeda.com/?/article/429 
 
为什么导入H5里的视频无法播放? 
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答: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
 
为什么打开内容时,会提示素材缺失? 
答:素材缺失,指的是图片、视频和音频素材在源文件里丢失的情况,这是因为素材没有上传完成造成的。 
以图片为例,当图片上传到素材库时,会有进度条显示上传进度,橙色进度条完成时才算上传成功,如图:
1.png


同时如果在素材库里删除了素材,相关作品中用到的素材也会删除,会显示如下:
2.png

 
为什么我的内容发布后还是会有橙色的广告条? 
答:内容发布后,如果扫描“效果预览”旁的二维码,这时候看到的是预览链接,在最上方会看到橙色的广告条,如果是正式发布链接,则不会出现广告条,特此说明。如图:
3.jpg

(此图二维码是预览地址,有广告条)

4.jpg

(此图二维码是发布地址,无广告条)
 
【预览和发布链接的详细区别】可参考: 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 个评论 • 10623 次浏览 • 2016-09-28 18:09 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 一、    Mugeda是什么?

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

二、    如何进入Mugeda页面?

1)下 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 一、    Mugeda是什么?

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

二、    如何进入Mugeda页面?

1)下载Google浏览器:(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入www.mugeda.com
 进入Mugeda首页。

2)注册Mugeda账号:进入首页后,可点击右上角“注册”,通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。

1.1-2_.jpeg

图1.1-2

三、    Mugeda操作界面简单介绍

帮助手册:点击“立即体验“,会打开Mugeda的帮助手册,点击“预览”按钮即可观看整个平台的功能和基本操作。
 
1.1-3_.jpeg

图1.1-3

简单制作交互动画:Mugeda操作界面和Flash高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外,设计师也无需添加任何代码即可完成复杂的交互。
 
1.1-4_.jpeg

图1.1-4

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

1.1-5_.jpeg

图1.1-5

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

图1.1-6

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

共享、导出作品:Mugeda同时还支持动画作品的共享、导出。如图1.1-7,在“通过二维码共享”对话框中,可以选中“共享源文件”,复制共享作品编辑地址。
 
1.1-7_.jpeg

图1.1-7

同时还可以导出一个HTML5源文件部署在自己的服务器上,同样也不附Mugeda的Logo。除此之外,Mugeda还支持GIF、视频、PNG等格式的导出,基本覆盖现在流行的主流多媒体格式,功能十分强大。导出步骤:“文件”→“导出”→选择导出格式
 
1.1-8_.jpeg

图1.1-8

四、    团队管理

针对企业账号,Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理”,可进入团队管理页面。在管理页面中,可添加企业成员,方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品,十分方便。

1.1-9_.jpeg
 
图1.1-9
1.1-10_.jpeg

图1.1-10

五、    数据服务

Mugeda还提供专业的数据服务。针对每一个作品,我们可以在后台统计页面中浏览到数据。在数据页面,可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
 
1.1-11_.jpeg

图1.1-11

六、    Mugeda动画交互作品展示

下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品:

动画:
 
1.1-12_.png

图1.1-12

广告:

1.1-13_.png

图1.1-13

测试:
 
1.1-14_.png

图1.1-14

贺卡:
 
1.1-15_.png

图1.1-15

电子绘本
 
1.1-16_.png

图1.1-16

课件:
 
1.1-17_.png

图1.1-17

游戏:
 
1.1-18_.png

图1.1-18

2.3.9 动画:分页/加载页

原创分享mingyueliu 发表了文章 • 0 个评论 • 9943 次浏览 • 2016-09-21 15:23 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等





图2.3-67

查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等

2.3-67_.png

图2.3-67

点击“预览”观察效果

2.3-68_.png

图2.3-68

如图,将样式改为“进度环”,其他属性设置不变

2.3-69_.png

图2.3-69

点击“预览”观察效果

2.3-70_.png

图2.3-70

将样式改为“旋转加载”,可观察到加载效果如下:

2.3-71_.png

图2.3-71

将样式改为“旋转加载+百分比”,可观察到加载效果如下

2.3-72_.png

图2.3-72

将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。

如下图,在首页添加一个火箭图片素材,调整大小与位置。鼠标选中该素材右键→“转换为元件”

2.3-73_.png

图2.3-73

双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”,右键→“插入关键帧动画”

2.3-74_.png

图2.3-74

在20帧的位置右键→“插入关键帧”

2.3-75_.png

图2.3-75

鼠标选中第10帧关键帧位置,将火箭图片向上拖动一些位置,制作出火箭上下移动的动画效果

2.3-76_.png

图2.3-76

点击回到“舞台”,新建一个图层1,选中图层1的第一帧,点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条,可适当调整矩形颜色大小等。

2.3-77_.png

图2.3-77

同时选中图层0、图层1的第30帧,鼠标右键→“插入帧”

2.3-78_.png

图2.3-78

选中图层1的有帧位置,右键→“关键帧动画”

2.3-79_.png

图2.3-79

选中图层1的起始关键帧,点击矩形元素,在其“属性面板”内将其“宽”值设为“1”

2.3-80_.png

图2.3-80

添加一个新页面,点击预览动画效果,发现长条矩形出现横向拉长,即加载的动画效果,动画播放完后自动跳至第2页。

2.3-81_.png

图2.3-81

2.3.8 动画:元件动画

原创分享mingyueliu 发表了文章 • 5 个评论 • 11489 次浏览 • 2016-09-21 14:54 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材

2.3-48_.png

图2.3-48

选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件

2.3-49_.png

图2.3-49

双击“舞台”上的车轮,进入元件编辑页面

2.3-50_.png

图2.3-50

在时间轴50帧位置右键→“插入帧”

2.3-51_.png

图2.3-51

在任意有帧的位置右键→“插入关键帧动画”

2.3-52_.png

图2.3-52

点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度

2.3-53_.png

图2.3-53

点击“播放”可观察车轮出现自转一周的动画效果

2.3-54_.png

图2.3-54

点击“舞台”回到“舞台”编辑页面

2.3-55_.png

图2.3-55

点击“预览”发现元件动画可重复不断地播放

2.3-56_.png

图2.3-56

元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台”

2.3-57_.png

图2.3-57
2.3-58_.png

图2.3-58

元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层”

2.3-59_.png

图2.3-59

调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮

2.3-60_.png

图2.3-60

点击“预览”,出现汽车轮胎转动的动画效果

2.3-61_.png

图2.3-61

在“舞台”的40帧位置,右键→“插入帧”

2.3-62_.png

图2.3-62

在有帧的位置右键→“插入关键帧动画”

2.3-63_.png

图2.3-63

选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧。

2.3-64_.png

图2.3-64

选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧。

2.3-65_.png

图2.3-65

点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果

2.3-66_.png

图2.3-66
 

2.3.7 动画:预置动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 7729 次浏览 • 2016-09-21 14:45 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮





图2.3 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮

2.3-43_.png

图2.3-43

在弹出的对话框内选择进入动画效果为“弹入”,同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果

2.3-44_.png

图2.3-44

2.    强调动画

点击“强调动画”文字素材右边的“添加预置动画”按钮,

2.3-45_.png

图2.3-45

在弹出的对话框中选择强调动画效果为“晃动”,可点击预览效果。

2.3-46_.png

图2.3-46

3.    退出动画

同理点击“退出动画”文字素材右边的“添加预置动画”按钮,在弹出的对话框中选择推出动画效果为“蹦出”,可点击预览效果。

2.3-47_.png

图2.3-47

2.3.6 动画:变形动画

原创分享mingyueliu 发表了文章 • 0 个评论 • 9849 次浏览 • 2016-09-21 14:41 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。





图2.3-35

在时间轴20帧的位置,右 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。

2.3-35_.png

图2.3-35

在时间轴20帧的位置,右键→“插入帧”

2.3-36_.png

图2.3-36

在时间轴有帧的位置,右键→“插入曲线变形动画”

2.3-37_.png

图2.3-37

选中最后一帧,鼠标点击“节点”工具

2.3-38_.png

图2.3-38

改变矩形形状为三角形

2.3-39_.png

图2.3-39

点击“播放”,观察矩形变成三角形的动画效果

2.3-40_.png

图2.3-40

同理,点击选中时间轴上的最后一帧,在“属性面板”下改变物体填充色为红色,点击“播放”观察动画效果,发现矩形变成三角形的同时,物体颜色也逐渐由紫色变成红色。

2.3-41_.png

图2.3-41
2.3-42_.png

图2.3-42
 

2.3.5 动画:进度动画

原创分享mingyueliu 发表了文章 • 7 个评论 • 15513 次浏览 • 2016-09-21 14:38 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 进度动画可实现绘制线条过程的效果和文字的打字机效果。

1.    制作图像进度动画

如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。





查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 进度动画可实现绘制线条过程的效果和文字的打字机效果。

1.    制作图像进度动画

如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。

2.3-25_.png

图2.3-25

在其“属性面板”下改变该矩形的填充色为“无色”、线条色为“黑色”

2.3-26_.png

图2.3-26

继续绘制出一个圆角矩形和一个圆形,形成手机外框样式。

2.3-27_.png

图2.3-27

在时间轴30帧位置右键→“插入帧”

2.3-28_.png

图2.3-28

在以插入帧的任意位置右键→“插入进度动画”,时间轴变成紫色

2.3-29_.png

图2.3-29

点击“预览”,发现此时动画变成逐渐绘制的效果。

2.3-30_.png

图2.3-30

2.    制作文字进度动画

如图,点击新建一个图层,点击“文字”工具,在“舞台”上创建一个文本框

2.3-31_.png

图2.3-31

点击编辑文字内容

2.3-32_.png

图2.3-32

在新建图层1上的有帧位置,右键→“插入进度动画”

2.3-33_.png

图2.3-33

点击“预览”,观察字体逐字出来的动画效果

2.3-34_.png

图2.3-34
 

2.3.4 动画:路径动画

原创分享mingyueliu 发表了文章 • 3 个评论 • 14693 次浏览 • 2016-09-21 14:33 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 路径动画即物体沿着指定路径线运动的动画。

本节视频教程请点击此处。

在时间轴上右键→“插入帧”,右键→“插入关键帧动画”





图2.3-17

鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 路径动画即物体沿着指定路径线运动的动画。

本节视频教程请点击此处。

在时间轴上右键→“插入帧”,右键→“插入关键帧动画”

2.3-17_.png

图2.3-17

鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制作出一个关键帧动画效果。

2.3-18_.png

图2.3-18

鼠标选中时间轴上任意绿色部分,右键→“切换路径显示”

2.3-19_.png

图2.3-19

即在“舞台”上显示出一条灰色的路径线

2.3-20_.png

图2.3-20

继续点击时间轴任意绿色部分,右键→“自定义路径”,发现路径变成紫色。

2.3-21_.png

图2.3-21

点击选择“节点”工具

2.3-22_.png

图2.3-22

通过节点控制杆调节动画运动路径

2.3-23_.png

图2.3-23

点击“播放”,发现火箭即沿着设定的运动路径运动。

2.3-24_.png

图2.3-24

2.3.3关键帧动画

原创分享mingyueliu 发表了文章 • 4 个评论 • 9071 次浏览 • 2016-09-21 14:28 • 来自相关话题

关键帧动画是通过设定动画的起始和结束两个关键帧,然后通过软件自动生成动画过程的动画形式。
 
本节视频教程请点击此处。

选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。





图2.3-10

点击选中第30帧位置,右键→“插入帧 查看全部
关键帧动画是通过设定动画的起始和结束两个关键帧,然后通过软件自动生成动画过程的动画形式。
 
本节视频教程请点击此处。

选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。

2.3-10_.png

图2.3-10

点击选中第30帧位置,右键→“插入帧”

2.3-11_.png

图2.3-11

在已插入帧的位置右键→“插入关键帧动画”

2.3-12_.png

图2.3-12

鼠标点击选中结束帧(此处为第30帧)位置,将“舞台”上的物体移动至“舞台”上方

2.3-13_.png

图2.3-13

点击“播放”按钮,发现一个火箭向上移动的动画效果做出来了。

2.3-14_.png


图2.3-14

任何元素属性的变化过程都可通过关键帧动画实现。例如下图,鼠标点击选中结束帧(此处为第30帧)位置,在“属性面板”下改变此时物体的属性:设置透明度为0,改变物体大小与旋转角度。

2.3-15_.png


图2.3-15

可点击“播放”观察动画效果

2.3-16_.png


图2.3-16

2.3.1 动画:时间轴以及图层

原创分享mingyueliu 发表了文章 • 0 个评论 • 7596 次浏览 • 2016-09-21 14:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 

 时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。





图2.3-1

也可点击“播放”按钮进行预览





图2.3-2 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 

 时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。

2.3-1_.png

图2.3-1

也可点击“播放”按钮进行预览

2.3-2_.png

图2.3-2

循环播放:点击“动画”→“循环”,即在预览时动画效果会循环播放,再次点击“动画”→“循环”,即将循环播放功能取消。

2.3-3_.png

图2.3-3

锁定与打开图层:点击最上方“锁定图层”按钮,即可将所有图层锁定,点击每个图层右边的“锁定图层”,即可锁定该图层,该图层在锁定状态下不可被编辑操作。再次点击可打开图层。

2.3-4_.png

图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 个评论 • 6707 次浏览 • 2016-09-19 16:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压 查看全部

 
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压缩。
 
添加声音:点击“媒体”栏下的“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”按钮,添加所选音频素材。

1.3-15_.png

图1.3-15
1.3-16_.png

图1.3-16
“上传”→“添加”,将音频素材添加进舞台

1.3-17_.png

图1.3-17

选中舞台上的音频素材,在其“属性”面板内设置播放属性:“自动播放”:是;“循环播放”:是

1.3-18_.png

图1.3-18

替换图标:选中舞台上的音频素材图标,在“属性”面板内点击“声音图标”右边的图标标志,在弹出的“媒体库”中选择自己想要的图标素材

1.3-19_.png

图1.3-19
1.3-20_.png

图1.3-20
点击保存,并预览效果

1.3-21_.png

图1.3-21

由于是背景音乐,无需将图标显示在画面中,因此可将舞台上图标用鼠标拖动至舞台之外。

1.3-22_.png

图1.3-22

视频处理方式

注:添加的视频格式为mp4,视频大小控制在20M以内,太大的话在手机上播放会出现卡的情况。
点击添加第2页面,在第2页面中,点击“视频”按钮,在弹出的“导入视频”对话框中点击“选择文件”按钮,选择自己想要添加的视频文件。

1.3-23_.png

 
图1.3-23

1.3-24_.png

图1.3-24

点击“上传”→“确定”,将视频素材添加进舞台,点击保存。

1.3-25_.png

图1.3-25

替换视频控制图标:首先点击“素材库”按钮,在“媒体库”对话框中添加自己想要的控制图标素材。

1.3-26_.png

图1.3-26

使用“变形”工具调整素材大小位置

1.3-27_.png

图1.3-27

鼠标选中“选择”工具,点击图标右边的“添加/编辑行为”按钮

1.3-28_.png

图1.3-28

在“编辑行为”对话框中选择“媒体播放控制”→“播放视频”,点击“编辑”按钮

1.3-29_.png

图1.3-29

在“参数”对话框中选择“视频元件”为“视频1”,点击“确认”,点击保存,点击预览效果。

1.3-30_.png

图1.3-30

隐藏播放按钮:在舞台上选中视频素材,在其“属性”面板内将“隐藏播放按钮”设置为“是”,其他视频属性可自由调控。

1.3-31_.png

图1.3-31

注:音频、视频添加至舞台后,可作为元件自动列属在“元件”面板下,这些元件在舞台上被删除后,仍可在“元件”面板中找到。选中需添加的元件,点击“元件”面板下“添加到画布”按钮即可将选中元件添加至舞台,同时也可用鼠标直接将元件拖至舞台放开的方式添加元件至舞台。
1.3-32_.png

图1.3-32
1.3-33_.png

图1.3-33
 

​1.6.2 作品创建前必读: 图片的处理

原创分享mingyueliu 发表了文章 • 0 个评论 • 7413 次浏览 • 2016-09-19 16:40 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 


图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框 查看全部

 


图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框应局限在320*416像素,即宽高分别为320像素、416像素),在安全空间内不要放重要的设计元素。

1.3-5_.png

图1.3-5

压缩素材:将素材导入Mugeda时,我们需要将其压缩。

压缩方法一:PS压缩

在PS中打开PSD素材,除去透明度,按住Ctrl+Shift+Alt+S,打开“储存为Web和设备所用格式”对话框,选择“优化的文件格式”为“PNG8”,点击“存储”将素材存储至所选位置。

1.3-6_.png

图1.3-6

压缩方法二:TinyPNG压缩

输入网址https://tinypng.com/进入TinyPNG官网,将需压缩的文件拖进相应位置
1.3-7_.png

图1.3-7
1.3-8_.png

图1.3-8

等待其自动压缩

1.3-9_.png

图1.3-9

压缩完后,点击“Download all”下载全部压缩文件

1.3-10_.png

图1.3-10

压缩方法三:Mugeda压缩

如下图,在Mugeda页面导入PSD格式,“文件”→“导入”→“Photoshop(PSD)文件”,打开“导入Photoshop(PSD)素材”对话框

1.3-11_.png

图1.3-11

将PSD文件直接拖动至对话框,或点击对话框打开PSD文件

1.3-12_.png

图1.3-12

将PSD文件拖至对话框后,如图点击全选中PSD文件的各个素材,点击“分层导入”

1.3-13_.png


图1.3-13

即可将PSD文件中的每图层上的素材依次分层导入Mugeda。

1.3-14_.png

图1.3-14

1.6.1 作品创建前必读:手机屏幕适配方法

原创分享mingyueliu 发表了文章 • 2 个评论 • 8951 次浏览 • 2016-09-19 15:01 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。





图1.3-1

注:由于设备尺寸千差万 查看全部

 
本节视频教程请点击此处。

 打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。

1.3-1_.png

图1.3-1

注:由于设备尺寸千差万别,因此Mugeda设置了不同的适配方式,默认以及目前最流行的适配方式是“宽度适配,垂直居中”,出于某种考虑也可选择“包含”“覆盖”等其他适配方式。

选择“宽度适配,垂直居中”适配方式,点击“确认”,点击保存。点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。观看效果时,你会发现,不管手机屏幕大小如何,此H5作品在手机上都是全屏的,上下左右不存在留白或留黑的情况。

1.3-2_.png

图1.3-2

回到“文档信息选项”对话框中,将“自适应”适配方式改为“高度适配,水平居中” 

1.3-3_.png

图1.3-3

点击保存,点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。(注:此时,若手机屏幕高度较低,在手机左右两边就会出现黑色的条,这是适配不当的原因。)

1.3-4_.png

图1.3-4

 

​1.51 快速入门:学会使用Mugeda模板

原创分享mingyueliu 发表了文章 • 0 个评论 • 7538 次浏览 • 2016-09-18 17:37 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,





图1.2-83

在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。





图1.2-84

查看全部

 
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
1.2-83_.png


图1.2-83

在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。

1.2-84_.png

图1.2-84

在模板中,替换自己想要的素材,如图,选中背景图片,点击“属性”面板中的图像“编辑”按钮,在弹出的“媒体库”中选择自己想要的背景素材进行替换(注:替换的素材宽高数值必须是与被替换素材等比例缩放的大小)

1.2-85_.png

图1.2-85
1.2-86_.png

图1.2-86

替换“头像”素材:由于该模板中该头像素材已被编成组,因此需鼠标双击该素材,进入“组”操作页面。

1.2-87_.png

图1.2-87

在“组”页面中,可点击“头像”素材,在其“属性”面板中点击图像“编辑”按钮,替换素材。

1.2-88_.png

图1.2-88
1.2-89_.png

图1.2-89

同理,可以相同方式替换模板中的其他素材。

案例模板介绍:回到Mugeda账号首页,在Mugeda官网上可选择“模板”进入模版库中。
在模板库中,点击想要选择的模板右下角“使用”按钮,使用该模板。(注:只有普通版和专业版可以使用该H5模板)

1.2-90_.png

图1.2-90
 

​1.4.1 快速入门:H5作品相关设置-加载、文档信息

原创分享mingyueliu 发表了文章 • 0 个评论 • 6986 次浏览 • 2016-09-18 17:12 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否





图1.2-67

设置颜色:点击有颜色的正方形方框,在出现 查看全部

 

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否

1.2-67_.png

图1.2-67

设置颜色:点击有颜色的正方形方框,在出现的颜色框内选取自己想要的颜色。也可以按住Alt键,鼠标在舞台上选取某一颜色。

1.2-68_.png

图1.2-68

添加加载页面图片:点击“背景图片”“前景图片”右侧“+”标志,在弹出的“媒体库”中选择自己想要的图片素材。

1.2-69_.png

图1.2-69

改变“图片宽度”为100像素(等比例缩放),点击保存、预览。

1.2-70_.png

图1.2-70

方法二:点击第1页面左上角的绿色“+”标志在第1页面前插入一个新页面

1.2-71_.png

图1.2-71

在新首页添加一张图片素材

1.2-72_.png

图1.2-72

在右侧“加载”面板里将样式设为“首页作为加载页面”,点击预览,即首页为加载页面。

1.2-73_.png

图1.2-73
 
编辑文档信息
 
点击“文件”→“文档信息”

1.2-74_.png

图1.2-74

在弹出的“文档信息选项”对话框填写信息,如下图所示,填写转发标题:“来!摇个配偶吧!”;转发描述:“你会摇中谁来当配偶”;导出名称:“单身狗相亲”,点击“选择文件”选择预览图片,点击“确认”,并保存。

1.2-75_.png

图1.2-75
 
以下操作素材可通过:“素材库——新手入门素材”中找到。

1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题

原创分享mingyueliu 发表了文章 • 1 个评论 • 15619 次浏览 • 2016-09-18 16:49 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景 查看全部

 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。

1.2-41_.png

图1.2-41

添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,如下图所示,为图片“摇一摇”素材添加“放大进入”进入动画效果

1.2-42_.png

图1.2-42

为文字“摇一摇”素材添加“颤抖”强调动画效果

1.2-43_.png

图1.2-43

为其他说明文字素材添加“蹦入”进入动画效果,在“动画选项”对话框内改变延迟时间为1.5秒

1.2-44_.png

图1.2-44
1.2-45_.png

图1.2-45

如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”

1.2-46_.png

图1.2-46

选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方

1.2-47_.png

图1.2-47

同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,做出“摇一摇”图片上下分开的动画效果

1.2-48_.png

图1.2-48

点击“播放”按钮,可在舞台上查看动画效果

1.2-49_.png

图1.2-49

设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。

1.2-50_.png

图1.2-50

复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮

1.2-51_.png

图1.2-51

在弹出的“媒体库”中选择相应图像替换该图像。

1.2-52_.png

图1.2-52

同理,替换人物名字素材

1.2-53_.png

图1.2-53

同理,选中第4页面,替换人物图像素材与相应名字素材

1.2-54_.png

图1.2-54
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)

1.2-55_.png

图1.2-55

弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”

1.2-56_.png

图1.2-56
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框

1.2-57_.png

图1.2-57

设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。

1.2-58_.png

图1.2-58

设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”

1.2-59_.png

图1.2-59

在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1

1.2-60_.png

图1.2-60
1.2-61_.png

图1.2-61

复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”

1.2-62_.png

图1.2-62

选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材

1.2-63_.png

图1.2-63

:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮

1.2-64_.png

图1.2-64

在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。

1.2-65_.png

图1.2-65

二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。

1.2-66_.png

图1.2-66
 

1.2.5 快速入门: 添加背景音乐

原创分享mingyueliu 发表了文章 • 9 个评论 • 14021 次浏览 • 2016-09-18 16:37 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮





图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮


查看全部


本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮

1.2-34_.png

图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮

1.2-35_.png

图1.2-35

选择音乐文件

1.2-36_.png

图1.2-36

上传自己所选的音乐文件,点击“添加”按钮

1.2-37_.png

图1.2-37

将添加至舞台的音乐图标移至舞台之外即可。

1.2-38_.png

图1.2-38

调节背景音乐属性:选中舞台上的背景音乐素材,在其“属性栏”内设置自动播放、循环播放。

1.2-39_.png

图1.2-39

2)    添加背景音乐方法二:点击“工具栏”内的“声音”按钮,在弹出的“导入声音”对话框中上传音乐素材。

1.2-40_.png

图1.2-40
 

1.2.4 快速入门:制作翻页动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 8393 次浏览 • 2016-09-18 16:24 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。





图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。





图1 查看全部

 

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。

1.2-26_.png

图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。

1.2-27_.png

图1.2-27

替换背景图片:选中复制的第2页,选中舞台上的背景图片素材,点击属性栏内的“编辑”按钮,在弹出的“媒体库”对话框中选择要更替的图片素材,点击“添加”按钮,替换原有图片。

1.2-28_.png

图1.2-28
1.2-29_.png

图1.2-29

同理复制第3页面,替换背景图片。点击保存并预览效果。

1.2-30_.png

图1.2-30

:若在预览中出现某素材动画效果不断循环重复的情况,可在上方菜单栏选择“动画”→去掉“循环”效果。

1.2-31_.png

图1.2-31
1.2-32_.png

图1.2-32

制作翻页效果:在“翻页”菜单栏内设置翻页属性。
  • 翻页效果:三维翻转;
  • 退出效果:无;
  • 翻页方向:左右翻页;
  • 循环:是;
  • 翻页时间:600毫秒;
  • 保存并预览效果。


1.2-33_.png

图1.2-33
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.3 快速入门:在时间轴上制作关键帧动画

原创分享mingyueliu 发表了文章 • 2 个评论 • 10143 次浏览 • 2016-09-18 16:17 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​ 
 


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。





图1.2-15

剪切、复制物 查看全部

 


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。

1.2-15_.png

图1.2-15

剪切、复制物体:点击选中logo素材,右键→剪切

1.2-16_.png

图1.2-16
新建图层:如下图点击“新建图层”按钮,新建一个图层。鼠标选中新建图层第1帧空白帧,在舞台上右键→粘贴,将Logo素材粘贴进新图层中。

1.2-17_.png

图1.2-17

插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”

1.2-18_.png

图1.2-18

插入关键帧动画:鼠标选中图层1第1帧,将其向后拖动至第7帧(可自主调节帧数),右键→“插入关键帧动画”

1.2-19_.png

图1.2-19
1.2-20_.png

图1.2-20

插入关键帧:选中图层1第11帧,右键→“插入关键帧”,同理在第12、13、14帧插入关键帧。

1.2-21_.png

图1.2-21
1.2-22_.png

图1.2-22

制作进入动画:选中图层1上物体所在首帧,即第7帧,按住Shift键,鼠标将Logo素材拖至舞台上方之外

1.2-23_.png

图1.2-23

选中图层1第12帧,按住Shift键,按一下键盘下滑键,将Logo素材向下移动一点距离,同理,选中第14帧,将Logo素材向上移动一点距离,制作出进入后上下摆动的动画效果。点击“预览”观察效果。

1.2-24_.png

图1.2-24

保存作品:点击“保存”按钮,在弹出的“保存”对话框中将作品命名为“玩转H5”,点击“保存”。

1.2-25_.png

图1.2-25

以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.2 快速入门:添加预置动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 9339 次浏览 • 2016-09-18 16:01 • 来自相关话题

  想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。



查看全部

 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。

1.2-8_.png

图1.2-8
1.2-9_.png

图1.2-9

以相同方式为舞台上其他两个素材添加预置动画效果。可点击“预览”按钮,观察动画效果。

1.2-10_.png

图1.2-10

调整预置动画时间:我们发现,此时三个素材的动画都是同时出现的,接下来要调整预置动画出现时间,使其有个先后顺序。点击“玩转H5”素材右边的“编辑预置动画”按钮(蓝色圆圈按钮),在弹出的“动画选项”对话框中,调整动画出现属性:时长1.5秒;延迟0秒;顺时针;

1.2-11_.png

图1.2-11
1.2-12_.png

图1.2-12

同理,如下图分别调整文字、Logo两个其他素材的预置动画属性:

1.2-13_.png

图1.2-13
1.2-14_.png

图1.2-14

注:预置动画是Mugeda根据大众需求在自己的框架里设置好的动画效果,这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
 
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.1 快速入门:上传、添加素材

原创分享mingyueliu 发表了文章 • 0 个评论 • 11096 次浏览 • 2016-09-18 15:56 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。





图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所 查看全部

 

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。

1.2-1_.png

图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所在的文件夹,选择所要上传的图片。

1.2-2_.png

图1.2-2

1.2-3_.png

图1.2-3

如下图,点击“上传”按钮,上传所选图片。上传成功后,点击“选择”按钮,将图片成功放置舞台,作为作品背景。

1.2-4_.png

图1.2-4

:上传成功后的素材可在“媒体库”中找到。点击“素材库”按钮,在弹出的“媒体库”对话框中,“私有”菜单下的“default”文件夹即是存储新上传素材位置。同时,也可在“媒体库”中点击“+”标志上传新素材。

1.2-5_.png

图1.2-5

添加素材:在“媒体库”中找到已上传好的素材。如下图,在“共享组”下的“新手入门素材·平台”中选择图片素材(“玩转H5”图片、文字、Logo三个素材),点击“添加”按钮添加至舞台。

1.2-6_.png

图1.2-6

调整素材:点击选择“变形”工具,调整舞台上素材的大小与位置。

1.2-7_.png

图1.2-7
 
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

为什么文件缺失,点击缩略图选择对应的本地文件却没法添加呢?

回复

问题答疑m221800837 发起了问题 • 1 人关注 • 0 个回复 • 367 次浏览 • 2023-04-25 20:47 • 来自相关话题

简易版做到第14个动画,元素不显示了怎么办?

回复

问题答疑mm450813191 发起了问题 • 1 人关注 • 0 个回复 • 402 次浏览 • 2022-11-16 00:54 • 来自相关话题

元件内添加跳转帧并播放行为没有反应

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1570 次浏览 • 2022-04-18 16:05 • 来自相关话题

预览上面有空白

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1596 次浏览 • 2022-04-17 19:20 • 来自相关话题

长图自动播放

回复

问题答疑wxf32862b2b8 发起了问题 • 1 人关注 • 0 个回复 • 1702 次浏览 • 2022-04-16 15:00 • 来自相关话题

请问一下,变形动画的模糊效果在哪里?

回复

问题答疑ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 1693 次浏览 • 2022-03-24 10:18 • 来自相关话题

2.3.2 动画:选择工具

回复

原创分享mingyueliu 发起了问题 • 3 人关注 • 0 个回复 • 8392 次浏览 • 2016-09-21 14:21 • 来自相关话题

1.4.2 快速入门:发布作品

回复

原创分享wx6a18b9d061 回复了问题 • 8 人关注 • 9 个回复 • 11125 次浏览 • 2018-12-16 19:02 • 来自相关话题

【代码分享】超少代码实现到特定时间活动结束的效果

原创分享qqf35714a4fc 发表了文章 • 0 个评论 • 3611 次浏览 • 2019-06-10 23:45 • 来自相关话题

mugeda.addEventListener("renderready", function(){
    var scene = mugeda.scene;
    var d = new Date();//获取现在的时间
    var x = d.getTime();// 查看全部
mugeda.addEventListener("renderready", function(){
    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文本就会变成
微信截图_20190610233239.png
一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
微信截图_20190610234018.png

我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。

Mugeda常见问题解答

培训教程songyue 发表了文章 • 19 个评论 • 13494 次浏览 • 2016-12-27 14:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答:http://bbs.mugeda.com/?/article/429 
 
为什么导入H5里的视频无法播放? 
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答: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
 
为什么打开内容时,会提示素材缺失? 
答:素材缺失,指的是图片、视频和音频素材在源文件里丢失的情况,这是因为素材没有上传完成造成的。 
以图片为例,当图片上传到素材库时,会有进度条显示上传进度,橙色进度条完成时才算上传成功,如图:
1.png


同时如果在素材库里删除了素材,相关作品中用到的素材也会删除,会显示如下:
2.png

 
为什么我的内容发布后还是会有橙色的广告条? 
答:内容发布后,如果扫描“效果预览”旁的二维码,这时候看到的是预览链接,在最上方会看到橙色的广告条,如果是正式发布链接,则不会出现广告条,特此说明。如图:
3.jpg

(此图二维码是预览地址,有广告条)

4.jpg

(此图二维码是发布地址,无广告条)
 
【预览和发布链接的详细区别】可参考: 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 个评论 • 10623 次浏览 • 2016-09-28 18:09 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 一、    Mugeda是什么?

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

二、    如何进入Mugeda页面?

1)下 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 一、    Mugeda是什么?

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

二、    如何进入Mugeda页面?

1)下载Google浏览器:(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入www.mugeda.com
 进入Mugeda首页。

2)注册Mugeda账号:进入首页后,可点击右上角“注册”,通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。

1.1-2_.jpeg

图1.1-2

三、    Mugeda操作界面简单介绍

帮助手册:点击“立即体验“,会打开Mugeda的帮助手册,点击“预览”按钮即可观看整个平台的功能和基本操作。
 
1.1-3_.jpeg

图1.1-3

简单制作交互动画:Mugeda操作界面和Flash高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外,设计师也无需添加任何代码即可完成复杂的交互。
 
1.1-4_.jpeg

图1.1-4

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

1.1-5_.jpeg

图1.1-5

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

图1.1-6

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

共享、导出作品:Mugeda同时还支持动画作品的共享、导出。如图1.1-7,在“通过二维码共享”对话框中,可以选中“共享源文件”,复制共享作品编辑地址。
 
1.1-7_.jpeg

图1.1-7

同时还可以导出一个HTML5源文件部署在自己的服务器上,同样也不附Mugeda的Logo。除此之外,Mugeda还支持GIF、视频、PNG等格式的导出,基本覆盖现在流行的主流多媒体格式,功能十分强大。导出步骤:“文件”→“导出”→选择导出格式
 
1.1-8_.jpeg

图1.1-8

四、    团队管理

针对企业账号,Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理”,可进入团队管理页面。在管理页面中,可添加企业成员,方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品,十分方便。

1.1-9_.jpeg
 
图1.1-9
1.1-10_.jpeg

图1.1-10

五、    数据服务

Mugeda还提供专业的数据服务。针对每一个作品,我们可以在后台统计页面中浏览到数据。在数据页面,可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
 
1.1-11_.jpeg

图1.1-11

六、    Mugeda动画交互作品展示

下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品:

动画:
 
1.1-12_.png

图1.1-12

广告:

1.1-13_.png

图1.1-13

测试:
 
1.1-14_.png

图1.1-14

贺卡:
 
1.1-15_.png

图1.1-15

电子绘本
 
1.1-16_.png

图1.1-16

课件:
 
1.1-17_.png

图1.1-17

游戏:
 
1.1-18_.png

图1.1-18

2.3.9 动画:分页/加载页

原创分享mingyueliu 发表了文章 • 0 个评论 • 9943 次浏览 • 2016-09-21 15:23 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等





图2.3-67

查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等

2.3-67_.png

图2.3-67

点击“预览”观察效果

2.3-68_.png

图2.3-68

如图,将样式改为“进度环”,其他属性设置不变

2.3-69_.png

图2.3-69

点击“预览”观察效果

2.3-70_.png

图2.3-70

将样式改为“旋转加载”,可观察到加载效果如下:

2.3-71_.png

图2.3-71

将样式改为“旋转加载+百分比”,可观察到加载效果如下

2.3-72_.png

图2.3-72

将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。

如下图,在首页添加一个火箭图片素材,调整大小与位置。鼠标选中该素材右键→“转换为元件”

2.3-73_.png

图2.3-73

双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”,右键→“插入关键帧动画”

2.3-74_.png

图2.3-74

在20帧的位置右键→“插入关键帧”

2.3-75_.png

图2.3-75

鼠标选中第10帧关键帧位置,将火箭图片向上拖动一些位置,制作出火箭上下移动的动画效果

2.3-76_.png

图2.3-76

点击回到“舞台”,新建一个图层1,选中图层1的第一帧,点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条,可适当调整矩形颜色大小等。

2.3-77_.png

图2.3-77

同时选中图层0、图层1的第30帧,鼠标右键→“插入帧”

2.3-78_.png

图2.3-78

选中图层1的有帧位置,右键→“关键帧动画”

2.3-79_.png

图2.3-79

选中图层1的起始关键帧,点击矩形元素,在其“属性面板”内将其“宽”值设为“1”

2.3-80_.png

图2.3-80

添加一个新页面,点击预览动画效果,发现长条矩形出现横向拉长,即加载的动画效果,动画播放完后自动跳至第2页。

2.3-81_.png

图2.3-81

2.3.8 动画:元件动画

原创分享mingyueliu 发表了文章 • 5 个评论 • 11489 次浏览 • 2016-09-21 14:54 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材

2.3-48_.png

图2.3-48

选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件

2.3-49_.png

图2.3-49

双击“舞台”上的车轮,进入元件编辑页面

2.3-50_.png

图2.3-50

在时间轴50帧位置右键→“插入帧”

2.3-51_.png

图2.3-51

在任意有帧的位置右键→“插入关键帧动画”

2.3-52_.png

图2.3-52

点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度

2.3-53_.png

图2.3-53

点击“播放”可观察车轮出现自转一周的动画效果

2.3-54_.png

图2.3-54

点击“舞台”回到“舞台”编辑页面

2.3-55_.png

图2.3-55

点击“预览”发现元件动画可重复不断地播放

2.3-56_.png

图2.3-56

元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台”

2.3-57_.png

图2.3-57
2.3-58_.png

图2.3-58

元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层”

2.3-59_.png

图2.3-59

调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮

2.3-60_.png

图2.3-60

点击“预览”,出现汽车轮胎转动的动画效果

2.3-61_.png

图2.3-61

在“舞台”的40帧位置,右键→“插入帧”

2.3-62_.png

图2.3-62

在有帧的位置右键→“插入关键帧动画”

2.3-63_.png

图2.3-63

选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧。

2.3-64_.png

图2.3-64

选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧。

2.3-65_.png

图2.3-65

点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果

2.3-66_.png

图2.3-66
 

2.3.7 动画:预置动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 7729 次浏览 • 2016-09-21 14:45 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮





图2.3 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮

2.3-43_.png

图2.3-43

在弹出的对话框内选择进入动画效果为“弹入”,同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果

2.3-44_.png

图2.3-44

2.    强调动画

点击“强调动画”文字素材右边的“添加预置动画”按钮,

2.3-45_.png

图2.3-45

在弹出的对话框中选择强调动画效果为“晃动”,可点击预览效果。

2.3-46_.png

图2.3-46

3.    退出动画

同理点击“退出动画”文字素材右边的“添加预置动画”按钮,在弹出的对话框中选择推出动画效果为“蹦出”,可点击预览效果。

2.3-47_.png

图2.3-47

2.3.6 动画:变形动画

原创分享mingyueliu 发表了文章 • 0 个评论 • 9849 次浏览 • 2016-09-21 14:41 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。





图2.3-35

在时间轴20帧的位置,右 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。

2.3-35_.png

图2.3-35

在时间轴20帧的位置,右键→“插入帧”

2.3-36_.png

图2.3-36

在时间轴有帧的位置,右键→“插入曲线变形动画”

2.3-37_.png

图2.3-37

选中最后一帧,鼠标点击“节点”工具

2.3-38_.png

图2.3-38

改变矩形形状为三角形

2.3-39_.png

图2.3-39

点击“播放”,观察矩形变成三角形的动画效果

2.3-40_.png

图2.3-40

同理,点击选中时间轴上的最后一帧,在“属性面板”下改变物体填充色为红色,点击“播放”观察动画效果,发现矩形变成三角形的同时,物体颜色也逐渐由紫色变成红色。

2.3-41_.png

图2.3-41
2.3-42_.png

图2.3-42
 

2.3.5 动画:进度动画

原创分享mingyueliu 发表了文章 • 7 个评论 • 15513 次浏览 • 2016-09-21 14:38 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 进度动画可实现绘制线条过程的效果和文字的打字机效果。

1.    制作图像进度动画

如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。





查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 进度动画可实现绘制线条过程的效果和文字的打字机效果。

1.    制作图像进度动画

如下图,在图层0的第1帧位置,鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。

2.3-25_.png

图2.3-25

在其“属性面板”下改变该矩形的填充色为“无色”、线条色为“黑色”

2.3-26_.png

图2.3-26

继续绘制出一个圆角矩形和一个圆形,形成手机外框样式。

2.3-27_.png

图2.3-27

在时间轴30帧位置右键→“插入帧”

2.3-28_.png

图2.3-28

在以插入帧的任意位置右键→“插入进度动画”,时间轴变成紫色

2.3-29_.png

图2.3-29

点击“预览”,发现此时动画变成逐渐绘制的效果。

2.3-30_.png

图2.3-30

2.    制作文字进度动画

如图,点击新建一个图层,点击“文字”工具,在“舞台”上创建一个文本框

2.3-31_.png

图2.3-31

点击编辑文字内容

2.3-32_.png

图2.3-32

在新建图层1上的有帧位置,右键→“插入进度动画”

2.3-33_.png

图2.3-33

点击“预览”,观察字体逐字出来的动画效果

2.3-34_.png

图2.3-34
 

2.3.4 动画:路径动画

原创分享mingyueliu 发表了文章 • 3 个评论 • 14693 次浏览 • 2016-09-21 14:33 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 路径动画即物体沿着指定路径线运动的动画。

本节视频教程请点击此处。

在时间轴上右键→“插入帧”,右键→“插入关键帧动画”





图2.3-17

鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 路径动画即物体沿着指定路径线运动的动画。

本节视频教程请点击此处。

在时间轴上右键→“插入帧”,右键→“插入关键帧动画”

2.3-17_.png

图2.3-17

鼠标选中最后一个关键帧位置,将“舞台”上的火箭移至“舞台”上方,制作出一个关键帧动画效果。

2.3-18_.png

图2.3-18

鼠标选中时间轴上任意绿色部分,右键→“切换路径显示”

2.3-19_.png

图2.3-19

即在“舞台”上显示出一条灰色的路径线

2.3-20_.png

图2.3-20

继续点击时间轴任意绿色部分,右键→“自定义路径”,发现路径变成紫色。

2.3-21_.png

图2.3-21

点击选择“节点”工具

2.3-22_.png

图2.3-22

通过节点控制杆调节动画运动路径

2.3-23_.png

图2.3-23

点击“播放”,发现火箭即沿着设定的运动路径运动。

2.3-24_.png

图2.3-24

2.3.3关键帧动画

原创分享mingyueliu 发表了文章 • 4 个评论 • 9071 次浏览 • 2016-09-21 14:28 • 来自相关话题

关键帧动画是通过设定动画的起始和结束两个关键帧,然后通过软件自动生成动画过程的动画形式。
 
本节视频教程请点击此处。

选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。





图2.3-10

点击选中第30帧位置,右键→“插入帧 查看全部
关键帧动画是通过设定动画的起始和结束两个关键帧,然后通过软件自动生成动画过程的动画形式。
 
本节视频教程请点击此处。

选中图层0的第1个关键帧位置,点击“素材库”按钮添加一个图片素材至舞台,即将该图片素材添加进第1个关键帧位置。

2.3-10_.png

图2.3-10

点击选中第30帧位置,右键→“插入帧”

2.3-11_.png

图2.3-11

在已插入帧的位置右键→“插入关键帧动画”

2.3-12_.png

图2.3-12

鼠标点击选中结束帧(此处为第30帧)位置,将“舞台”上的物体移动至“舞台”上方

2.3-13_.png

图2.3-13

点击“播放”按钮,发现一个火箭向上移动的动画效果做出来了。

2.3-14_.png


图2.3-14

任何元素属性的变化过程都可通过关键帧动画实现。例如下图,鼠标点击选中结束帧(此处为第30帧)位置,在“属性面板”下改变此时物体的属性:设置透明度为0,改变物体大小与旋转角度。

2.3-15_.png


图2.3-15

可点击“播放”观察动画效果

2.3-16_.png


图2.3-16

2.3.1 动画:时间轴以及图层

原创分享mingyueliu 发表了文章 • 0 个评论 • 7596 次浏览 • 2016-09-21 14:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 

 时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。





图2.3-1

也可点击“播放”按钮进行预览





图2.3-2 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 

 时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。
在时间轴上,我们可以以拖拉的方式进行预览动画效果。

2.3-1_.png

图2.3-1

也可点击“播放”按钮进行预览

2.3-2_.png

图2.3-2

循环播放:点击“动画”→“循环”,即在预览时动画效果会循环播放,再次点击“动画”→“循环”,即将循环播放功能取消。

2.3-3_.png

图2.3-3

锁定与打开图层:点击最上方“锁定图层”按钮,即可将所有图层锁定,点击每个图层右边的“锁定图层”,即可锁定该图层,该图层在锁定状态下不可被编辑操作。再次点击可打开图层。

2.3-4_.png

图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 个评论 • 6707 次浏览 • 2016-09-19 16:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压 查看全部

 
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选择专门的音频处理软件进行压缩。
 
添加声音:点击“媒体”栏下的“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”按钮,添加所选音频素材。

1.3-15_.png

图1.3-15
1.3-16_.png

图1.3-16
“上传”→“添加”,将音频素材添加进舞台

1.3-17_.png

图1.3-17

选中舞台上的音频素材,在其“属性”面板内设置播放属性:“自动播放”:是;“循环播放”:是

1.3-18_.png

图1.3-18

替换图标:选中舞台上的音频素材图标,在“属性”面板内点击“声音图标”右边的图标标志,在弹出的“媒体库”中选择自己想要的图标素材

1.3-19_.png

图1.3-19
1.3-20_.png

图1.3-20
点击保存,并预览效果

1.3-21_.png

图1.3-21

由于是背景音乐,无需将图标显示在画面中,因此可将舞台上图标用鼠标拖动至舞台之外。

1.3-22_.png

图1.3-22

视频处理方式

注:添加的视频格式为mp4,视频大小控制在20M以内,太大的话在手机上播放会出现卡的情况。
点击添加第2页面,在第2页面中,点击“视频”按钮,在弹出的“导入视频”对话框中点击“选择文件”按钮,选择自己想要添加的视频文件。

1.3-23_.png

 
图1.3-23

1.3-24_.png

图1.3-24

点击“上传”→“确定”,将视频素材添加进舞台,点击保存。

1.3-25_.png

图1.3-25

替换视频控制图标:首先点击“素材库”按钮,在“媒体库”对话框中添加自己想要的控制图标素材。

1.3-26_.png

图1.3-26

使用“变形”工具调整素材大小位置

1.3-27_.png

图1.3-27

鼠标选中“选择”工具,点击图标右边的“添加/编辑行为”按钮

1.3-28_.png

图1.3-28

在“编辑行为”对话框中选择“媒体播放控制”→“播放视频”,点击“编辑”按钮

1.3-29_.png

图1.3-29

在“参数”对话框中选择“视频元件”为“视频1”,点击“确认”,点击保存,点击预览效果。

1.3-30_.png

图1.3-30

隐藏播放按钮:在舞台上选中视频素材,在其“属性”面板内将“隐藏播放按钮”设置为“是”,其他视频属性可自由调控。

1.3-31_.png

图1.3-31

注:音频、视频添加至舞台后,可作为元件自动列属在“元件”面板下,这些元件在舞台上被删除后,仍可在“元件”面板中找到。选中需添加的元件,点击“元件”面板下“添加到画布”按钮即可将选中元件添加至舞台,同时也可用鼠标直接将元件拖至舞台放开的方式添加元件至舞台。
1.3-32_.png

图1.3-32
1.3-33_.png

图1.3-33
 

​1.6.2 作品创建前必读: 图片的处理

原创分享mingyueliu 发表了文章 • 0 个评论 • 7413 次浏览 • 2016-09-19 16:40 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 


图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框 查看全部

 


图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320*520大小,那么安全框应局限在320*416像素,即宽高分别为320像素、416像素),在安全空间内不要放重要的设计元素。

1.3-5_.png

图1.3-5

压缩素材:将素材导入Mugeda时,我们需要将其压缩。

压缩方法一:PS压缩

在PS中打开PSD素材,除去透明度,按住Ctrl+Shift+Alt+S,打开“储存为Web和设备所用格式”对话框,选择“优化的文件格式”为“PNG8”,点击“存储”将素材存储至所选位置。

1.3-6_.png

图1.3-6

压缩方法二:TinyPNG压缩

输入网址https://tinypng.com/进入TinyPNG官网,将需压缩的文件拖进相应位置
1.3-7_.png

图1.3-7
1.3-8_.png

图1.3-8

等待其自动压缩

1.3-9_.png

图1.3-9

压缩完后,点击“Download all”下载全部压缩文件

1.3-10_.png

图1.3-10

压缩方法三:Mugeda压缩

如下图,在Mugeda页面导入PSD格式,“文件”→“导入”→“Photoshop(PSD)文件”,打开“导入Photoshop(PSD)素材”对话框

1.3-11_.png

图1.3-11

将PSD文件直接拖动至对话框,或点击对话框打开PSD文件

1.3-12_.png

图1.3-12

将PSD文件拖至对话框后,如图点击全选中PSD文件的各个素材,点击“分层导入”

1.3-13_.png


图1.3-13

即可将PSD文件中的每图层上的素材依次分层导入Mugeda。

1.3-14_.png

图1.3-14

1.6.1 作品创建前必读:手机屏幕适配方法

原创分享mingyueliu 发表了文章 • 2 个评论 • 8951 次浏览 • 2016-09-19 15:01 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。





图1.3-1

注:由于设备尺寸千差万 查看全部

 
本节视频教程请点击此处。

 打开一个H5作品,点击操作页面上方“文件”→“文档信息”,弹出“文档信息选项”对话框。在对话框的“自适应”中,可自由选择不同适应方式。

1.3-1_.png

图1.3-1

注:由于设备尺寸千差万别,因此Mugeda设置了不同的适配方式,默认以及目前最流行的适配方式是“宽度适配,垂直居中”,出于某种考虑也可选择“包含”“覆盖”等其他适配方式。

选择“宽度适配,垂直居中”适配方式,点击“确认”,点击保存。点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。观看效果时,你会发现,不管手机屏幕大小如何,此H5作品在手机上都是全屏的,上下左右不存在留白或留黑的情况。

1.3-2_.png

图1.3-2

回到“文档信息选项”对话框中,将“自适应”适配方式改为“高度适配,水平居中” 

1.3-3_.png

图1.3-3

点击保存,点击“通过二维码共享”按钮,用手机扫描生成的二维码观看手机适配效果。(注:此时,若手机屏幕高度较低,在手机左右两边就会出现黑色的条,这是适配不当的原因。)

1.3-4_.png

图1.3-4

 

​1.51 快速入门:学会使用Mugeda模板

原创分享mingyueliu 发表了文章 • 0 个评论 • 7538 次浏览 • 2016-09-18 17:37 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,





图1.2-83

在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。





图1.2-84

查看全部

 
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
1.2-83_.png


图1.2-83

在“选择模板”对话框中选择自己想要的模板,点击“确定”将模板编辑页面移入新作品操作页面。

1.2-84_.png

图1.2-84

在模板中,替换自己想要的素材,如图,选中背景图片,点击“属性”面板中的图像“编辑”按钮,在弹出的“媒体库”中选择自己想要的背景素材进行替换(注:替换的素材宽高数值必须是与被替换素材等比例缩放的大小)

1.2-85_.png

图1.2-85
1.2-86_.png

图1.2-86

替换“头像”素材:由于该模板中该头像素材已被编成组,因此需鼠标双击该素材,进入“组”操作页面。

1.2-87_.png

图1.2-87

在“组”页面中,可点击“头像”素材,在其“属性”面板中点击图像“编辑”按钮,替换素材。

1.2-88_.png

图1.2-88
1.2-89_.png

图1.2-89

同理,可以相同方式替换模板中的其他素材。

案例模板介绍:回到Mugeda账号首页,在Mugeda官网上可选择“模板”进入模版库中。
在模板库中,点击想要选择的模板右下角“使用”按钮,使用该模板。(注:只有普通版和专业版可以使用该H5模板)

1.2-90_.png

图1.2-90
 

​1.4.1 快速入门:H5作品相关设置-加载、文档信息

原创分享mingyueliu 发表了文章 • 0 个评论 • 6986 次浏览 • 2016-09-18 17:12 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否





图1.2-67

设置颜色:点击有颜色的正方形方框,在出现 查看全部

 

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否

1.2-67_.png

图1.2-67

设置颜色:点击有颜色的正方形方框,在出现的颜色框内选取自己想要的颜色。也可以按住Alt键,鼠标在舞台上选取某一颜色。

1.2-68_.png

图1.2-68

添加加载页面图片:点击“背景图片”“前景图片”右侧“+”标志,在弹出的“媒体库”中选择自己想要的图片素材。

1.2-69_.png

图1.2-69

改变“图片宽度”为100像素(等比例缩放),点击保存、预览。

1.2-70_.png

图1.2-70

方法二:点击第1页面左上角的绿色“+”标志在第1页面前插入一个新页面

1.2-71_.png

图1.2-71

在新首页添加一张图片素材

1.2-72_.png

图1.2-72

在右侧“加载”面板里将样式设为“首页作为加载页面”,点击预览,即首页为加载页面。

1.2-73_.png

图1.2-73
 
编辑文档信息
 
点击“文件”→“文档信息”

1.2-74_.png

图1.2-74

在弹出的“文档信息选项”对话框填写信息,如下图所示,填写转发标题:“来!摇个配偶吧!”;转发描述:“你会摇中谁来当配偶”;导出名称:“单身狗相亲”,点击“选择文件”选择预览图片,点击“确认”,并保存。

1.2-75_.png

图1.2-75
 
以下操作素材可通过:“素材库——新手入门素材”中找到。

1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题

原创分享mingyueliu 发表了文章 • 1 个评论 • 15619 次浏览 • 2016-09-18 16:49 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景 查看全部

 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。

1.2-41_.png

图1.2-41

添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,如下图所示,为图片“摇一摇”素材添加“放大进入”进入动画效果

1.2-42_.png

图1.2-42

为文字“摇一摇”素材添加“颤抖”强调动画效果

1.2-43_.png

图1.2-43

为其他说明文字素材添加“蹦入”进入动画效果,在“动画选项”对话框内改变延迟时间为1.5秒

1.2-44_.png

图1.2-44
1.2-45_.png

图1.2-45

如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”

1.2-46_.png

图1.2-46

选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方

1.2-47_.png

图1.2-47

同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,做出“摇一摇”图片上下分开的动画效果

1.2-48_.png

图1.2-48

点击“播放”按钮,可在舞台上查看动画效果

1.2-49_.png

图1.2-49

设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。

1.2-50_.png

图1.2-50

复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮

1.2-51_.png

图1.2-51

在弹出的“媒体库”中选择相应图像替换该图像。

1.2-52_.png

图1.2-52

同理,替换人物名字素材

1.2-53_.png

图1.2-53

同理,选中第4页面,替换人物图像素材与相应名字素材

1.2-54_.png

图1.2-54
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)

1.2-55_.png

图1.2-55

弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”

1.2-56_.png

图1.2-56
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框

1.2-57_.png

图1.2-57

设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。

1.2-58_.png

图1.2-58

设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”

1.2-59_.png

图1.2-59

在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1

1.2-60_.png

图1.2-60
1.2-61_.png

图1.2-61

复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”

1.2-62_.png

图1.2-62

选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材

1.2-63_.png

图1.2-63

:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮

1.2-64_.png

图1.2-64

在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。

1.2-65_.png

图1.2-65

二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。

1.2-66_.png

图1.2-66
 

1.2.5 快速入门: 添加背景音乐

原创分享mingyueliu 发表了文章 • 9 个评论 • 14021 次浏览 • 2016-09-18 16:37 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮





图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮


查看全部


本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮

1.2-34_.png

图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮

1.2-35_.png

图1.2-35

选择音乐文件

1.2-36_.png

图1.2-36

上传自己所选的音乐文件,点击“添加”按钮

1.2-37_.png

图1.2-37

将添加至舞台的音乐图标移至舞台之外即可。

1.2-38_.png

图1.2-38

调节背景音乐属性:选中舞台上的背景音乐素材,在其“属性栏”内设置自动播放、循环播放。

1.2-39_.png

图1.2-39

2)    添加背景音乐方法二:点击“工具栏”内的“声音”按钮,在弹出的“导入声音”对话框中上传音乐素材。

1.2-40_.png

图1.2-40
 

1.2.4 快速入门:制作翻页动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 8393 次浏览 • 2016-09-18 16:24 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。





图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。





图1 查看全部

 

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。

1.2-26_.png

图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。

1.2-27_.png

图1.2-27

替换背景图片:选中复制的第2页,选中舞台上的背景图片素材,点击属性栏内的“编辑”按钮,在弹出的“媒体库”对话框中选择要更替的图片素材,点击“添加”按钮,替换原有图片。

1.2-28_.png

图1.2-28
1.2-29_.png

图1.2-29

同理复制第3页面,替换背景图片。点击保存并预览效果。

1.2-30_.png

图1.2-30

:若在预览中出现某素材动画效果不断循环重复的情况,可在上方菜单栏选择“动画”→去掉“循环”效果。

1.2-31_.png

图1.2-31
1.2-32_.png

图1.2-32

制作翻页效果:在“翻页”菜单栏内设置翻页属性。
  • 翻页效果:三维翻转;
  • 退出效果:无;
  • 翻页方向:左右翻页;
  • 循环:是;
  • 翻页时间:600毫秒;
  • 保存并预览效果。


1.2-33_.png

图1.2-33
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.3 快速入门:在时间轴上制作关键帧动画

原创分享mingyueliu 发表了文章 • 2 个评论 • 10143 次浏览 • 2016-09-18 16:17 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​ 
 


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。





图1.2-15

剪切、复制物 查看全部

 


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。

1.2-15_.png

图1.2-15

剪切、复制物体:点击选中logo素材,右键→剪切

1.2-16_.png

图1.2-16
新建图层:如下图点击“新建图层”按钮,新建一个图层。鼠标选中新建图层第1帧空白帧,在舞台上右键→粘贴,将Logo素材粘贴进新图层中。

1.2-17_.png

图1.2-17

插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”

1.2-18_.png

图1.2-18

插入关键帧动画:鼠标选中图层1第1帧,将其向后拖动至第7帧(可自主调节帧数),右键→“插入关键帧动画”

1.2-19_.png

图1.2-19
1.2-20_.png

图1.2-20

插入关键帧:选中图层1第11帧,右键→“插入关键帧”,同理在第12、13、14帧插入关键帧。

1.2-21_.png

图1.2-21
1.2-22_.png

图1.2-22

制作进入动画:选中图层1上物体所在首帧,即第7帧,按住Shift键,鼠标将Logo素材拖至舞台上方之外

1.2-23_.png

图1.2-23

选中图层1第12帧,按住Shift键,按一下键盘下滑键,将Logo素材向下移动一点距离,同理,选中第14帧,将Logo素材向上移动一点距离,制作出进入后上下摆动的动画效果。点击“预览”观察效果。

1.2-24_.png

图1.2-24

保存作品:点击“保存”按钮,在弹出的“保存”对话框中将作品命名为“玩转H5”,点击“保存”。

1.2-25_.png

图1.2-25

以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.2 快速入门:添加预置动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 9339 次浏览 • 2016-09-18 16:01 • 来自相关话题

  想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。



查看全部

 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。

1.2-8_.png

图1.2-8
1.2-9_.png

图1.2-9

以相同方式为舞台上其他两个素材添加预置动画效果。可点击“预览”按钮,观察动画效果。

1.2-10_.png

图1.2-10

调整预置动画时间:我们发现,此时三个素材的动画都是同时出现的,接下来要调整预置动画出现时间,使其有个先后顺序。点击“玩转H5”素材右边的“编辑预置动画”按钮(蓝色圆圈按钮),在弹出的“动画选项”对话框中,调整动画出现属性:时长1.5秒;延迟0秒;顺时针;

1.2-11_.png

图1.2-11
1.2-12_.png

图1.2-12

同理,如下图分别调整文字、Logo两个其他素材的预置动画属性:

1.2-13_.png

图1.2-13
1.2-14_.png

图1.2-14

注:预置动画是Mugeda根据大众需求在自己的框架里设置好的动画效果,这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
 
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.1 快速入门:上传、添加素材

原创分享mingyueliu 发表了文章 • 0 个评论 • 11096 次浏览 • 2016-09-18 15:56 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。





图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所 查看全部

 

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。

1.2-1_.png

图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所在的文件夹,选择所要上传的图片。

1.2-2_.png

图1.2-2

1.2-3_.png

图1.2-3

如下图,点击“上传”按钮,上传所选图片。上传成功后,点击“选择”按钮,将图片成功放置舞台,作为作品背景。

1.2-4_.png

图1.2-4

:上传成功后的素材可在“媒体库”中找到。点击“素材库”按钮,在弹出的“媒体库”对话框中,“私有”菜单下的“default”文件夹即是存储新上传素材位置。同时,也可在“媒体库”中点击“+”标志上传新素材。

1.2-5_.png

图1.2-5

添加素材:在“媒体库”中找到已上传好的素材。如下图,在“共享组”下的“新手入门素材·平台”中选择图片素材(“玩转H5”图片、文字、Logo三个素材),点击“添加”按钮添加至舞台。

1.2-6_.png

图1.2-6

调整素材:点击选择“变形”工具,调整舞台上素材的大小与位置。

1.2-7_.png

图1.2-7
 
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

Mugeda百科全书——文本教程目录

原创分享mingyueliu 发表了文章 • 34 个评论 • 72238 次浏览 • 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 快速入门:快速制作一个摇一摇随机 查看全部
默认标题_自定义px_2018.09_.03_.png


一、新手必看
 
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












点击这里学习Mu友提供的实用攻略