问题答疑

问题答疑

提出您在创作作品时遇到的问题和疑惑
BUG反馈

BUG反馈

反馈您在使用Mugeda时遇到的BUG
原创分享

原创分享

分享您的原创作品,创作经验,操作技巧
新功能需求

新功能需求

写下您期待Mugeda增加的新功能
Mugeda培训

Mugeda培训

加入我们的培训,提高您的技巧

高难度deng deng deng deng音乐竞猜

回复

13917730466 发起了问题 • 2 人关注 • 0 个回复 • 165 次浏览 • 2016-11-04 02:16 • 来自相关话题

等灯登凳

13917730466 发表了文章 • 1 个评论 • 98 次浏览 • 2016-11-04 02:07 • 来自相关话题

111
111

2.9.7 API的应用:获取Mugeda后台数据

songyue 发表了文章 • 0 个评论 • 472 次浏览 • 2016-11-03 15:04 • 来自相关话题

方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是 查看全部
方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是存在跨域问题的,这个时候推荐使用jsonp的方式来请求数据,如果你的动画部署在自己的服务器上,这个时候就不会存在跨域问题,你可以使用ajax方式来请求数据。

推荐在动画中引入jQuery,这样你可以使用jQuery ajax方法来发送请求,以下是例子,其中url需要执行你自己后台的请求地址,注意,跨域情况下使用jsonp的请求需要服务器后台支持。

1.没有跨域的情况:
$.ajax({ 
  url: '/submit', 
  type: 'POST', 
  data: {name: 'test'}, 
  success: function (response) { 
     //TODO; 
  } 
});


2.跨域的情况:
$.ajax({ 
  url: "/submit.jsonp", 
  jsonp: "callback", 
  dataType: "jsonp", 
  data: {name: 'test'}, 
  success: function( response ) { 
     //TODO; 
  } 
});


2.9.6 API的应用:工具API
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码

逻辑判断(逻辑表达式)

回复

test099 发起了问题 • 10 人关注 • 0 个回复 • 696 次浏览 • 2016-11-01 11:03 • 来自相关话题

新建作品——页面显示绿色是什么意思呢?

mingyueliu 发表了文章 • 0 个评论 • 149 次浏览 • 2016-10-20 15:40 • 来自相关话题

新建作品——页面显示绿色是什么意思呢?





 
绿色部分是舞台上显示的区域






注:如果舞台显示完整,是不会出现绿色框的。
新建作品——页面显示绿色是什么意思呢?

2.jpeg

 
绿色部分是舞台上显示的区域

1.jpg


注:如果舞台显示完整,是不会出现绿色框的。

图片在手机显示的时候,怎么样处理可以点击图片自动缩放

test099 回复了问题 • 2 人关注 • 1 个回复 • 157 次浏览 • 2016-10-20 10:31 • 来自相关话题

技术常见问题汇总目录

mingyueliu 发表了文章 • 0 个评论 • 357 次浏览 • 2016-10-19 10:32 • 来自相关话题

强烈建议Mu友们“关注”哦,在文章的右上角点击“关注”即可。每周更新
 
6月21日—6月24日技术问题汇总
6月25日—7月1日 技术问题汇总
7月2日—7月8日 技术问题汇总
7月9日—7月15日问题汇总
7月16日—7月22日 问题汇总
7月23日—7月29 技术问题汇总
7月30日—8月05 查看全部
强烈建议Mu友们“关注”哦,在文章的右上角点击“关注”即可。每周更新
 
6月21日—6月24日技术问题汇总
6月25日—7月1日 技术问题汇总
7月2日—7月8日 技术问题汇总
7月9日—7月15日问题汇总
7月16日—7月22日 问题汇总
7月23日—7月29 技术问题汇总
7月30日—8月05日 技术问题汇总
8月6日—8月12日 技术问题汇总
8月13日—8月19日 技术问题汇总
8月20日—8月26日 技术问题汇总
8月27日—9月2日 技术问题汇总
9月3日—9月9日 技术问题汇总
9月19日—9月25日 技术问题汇总
9月26日—9月30日 技术问题汇总
10月01日—10月09日 技术问题汇总
10月10日—10月16日 技术问题汇总
10月17日—10月23日 技术问题汇总
10月24日—10月30日 技术问题汇总
10月31日—11月6日 技术问题汇总
11月7日—11月13日 技术问题汇总
11月14日—11月20日 技术问题汇总
11月21日—11月27日 技术问题汇总
11月28日—12月4日 技术问题汇总
12月5日—12月11日 技术问题汇总
12月12日—12月18日 技术问题汇总
12月19日—12月25日 技术问题汇总
12月26日—1月01日 技术问题汇总
1月02日—1月08日 技术问题汇总
1月09日—1月15日 技术问题汇总
1月16日—1月22日 技术问题汇总
2017年
2月06日—2月12日 技术问题汇总
 2月13日—2月19日 技术问题汇总
2月20日—2月26日 技术问题汇总
2月27日—3月05日 技术问题汇总
3月06日—3月12日 技术问题汇总
3月13日—3月19日 技术问题汇总
3月20日—3月26日 技术问题汇总
 3月27日—4月2日 技术问题汇总
4月3日—4月9日 技术问题汇总
4月10日—4月16日 技术问题汇总
____________________________
5月10日—5月15日 技术问题汇总
5月16日—5月21日 技术问题汇总
5月22日—5月28日 技术问题汇总

 
 
 

【公告】Mugeda优化了声音播放的相关问题

mingyueliu 发表了文章 • 0 个评论 • 309 次浏览 • 2016-10-11 14:30 • 来自相关话题

近期优化了声音播放的相关问题,优化内容如下:

1. 改进了声音自动播放的问题;
2. 改进了声音播放延时的问题;

操作方法:

在属性面板为声音打开预加载,或者在行为面板中为行为声音打开预加载,都会为声音开启预加载策略。
打开预加载后,在loading界面阶段,将下载整个声音数据。
随后,在支持 查看全部
近期优化了声音播放的相关问题,优化内容如下:

1. 改进了声音自动播放的问题;
2. 改进了声音播放延时的问题;

操作方法:

在属性面板为声音打开预加载,或者在行为面板中为行为声音打开预加载,都会为声音开启预加载策略。
打开预加载后,在loading界面阶段,将下载整个声音数据。
随后,在支持的设备上,实现自动无延迟的播放声音。

4.jpeg


5.jpeg


效果:使用上面的处理后,声音在各种设备上表现。

3.jpeg


说明:
1) 安卓4- 是指安卓4(含)及以下的机型;
2) 安卓5+ 是指安卓5(含)及以上的机型;
3) 需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关;
4) 需要App支持是指在App中需要调用API设置自动播放。 
具体来讲:
在安卓中需要设置setMediaPlaybackRequiresUserGesture(false)
在iOS中需要设置UIWebView.mediaPlaybackRequiresUserAction=NO
5) 如果微信中没有启用X5内核(判断方式:访问http://debugtbs.qq.com/, 如果出现“您使用的为非X5内核浏览器”字样就不是X5内核),则需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关,才可以启用自动播放。

上表说明的情况适用于市面上大部分的机型。但是考虑到安卓设备碎片化严重,不排除有个别机型有例外。例如,非针对中国市场的手机(例如:从美国带回中国使用的手机),可能由于在Google Play上安装或者同步过软件可能导致在微信中不能自动播放声音。

1.png


2.png


由于安卓设备的碎片化问题,我们不承诺所有的设备和场景都能做到自动播放和无延时播放,但是对于绝大部分场景,目前的方案已经可以很好的解决上述问题。
 

3.4.2 微信定制 :和奥运冠军合影

mingyueliu 发表了文章 • 0 个评论 • 394 次浏览 • 2016-10-10 17:49 • 来自相关话题

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

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

如下图,点击添加一张合影照素材,再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方,移动“椭圆”至合影者头像位置,修改各素材大小、颜色等;





图3.4-25

点击椭圆的“添加/ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,点击添加一张合影照素材,再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方,移动“椭圆”至合影者头像位置,修改各素材大小、颜色等;

3.4-25_.png

图3.4-25

点击椭圆的“添加/编辑行为”按钮;

3.4-26_.png

图3.4-26

选择编辑行为为:“微信定制”→“定制图片”→触发条件:“点击”;

3.4-27_.png

图3.4-27

在“微信”工具条下点击“录音”工具,在“舞台”上添加两个图标,调整两个图标的位置如下图;

3.4-28_.png

图3.4-28

点击“预览”观察效果;

3.4-29_.png

图3.4-29

3.4.1 微信定制 :和宝宝聊天

mingyueliu 发表了文章 • 1 个评论 • 374 次浏览 • 2016-10-10 17:43 • 来自相关话题

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

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

如下图,新建“底”图层,添加“微信输入框”图片素材,新建“第一个”图层,添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图





图3.4-1

选中“第一个”图层上的两个图片素材 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,新建“底”图层,添加“微信输入框”图片素材,新建“第一个”图层,添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图

3.4-1_.png

图3.4-1

选中“第一个”图层上的两个图片素材,右键→“组”→“组合”

3.4-2_.png

图3.4-2

点击其“添加预置动画”按钮

3.4-3_.png

图3.4-3

选择“浮入”的动画效果

3.4-4_.png

图3.4-4

点击蓝色的“编辑预置动画”按钮

3.4-5_.png

图3.4-5

在弹出的“动画选项”对话框中选择“时长”为“1”秒,默认“延迟”为“0”秒,“方向”为“下浮”,点击“确认”

3.4-6_.png

图3.4-6

新建“图层2”

3.4-7_.png

图3.4-7

鼠标选中“底”“第一个”两个图层的第2帧

3.4-8_.png

图3.4-8

右键→“插入帧”

3.4-9_.png

图3.4-9

点击选中“图层2”的第2帧,右键→“插入关键帧”

3.4-10_.png

图3.4-10

如下图,在“图层2”第2帧上添加回复的头像、微信对话框图、文本框,为文本框命名为“聊天”,并调整各素材大小、位置等。

3.4-11_.png

图3.4-11

3.4-12_.png

图3.4-12

选中“图层2”的第1帧,点击“输入框”工具,在“舞台”上添加一个输入框

3.4-13_.png

图3.4-13

为输入框命名为“输入”

3.4-14_.png

图3.4-14

在“图层2”第1帧上添加一个矩形

3.4-15_.png

图3.4-15

修改矩形透明度为“0”,点击该矩形的“添加/编辑行为”按钮

3.4-16_.png

图3.4-16

在“编辑行为”对话框中添加两个行为:

“跳转下一帧”:“动画播放控制”→“下一帧”→触发条件:“点击”
“改变元素属性”:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮,设置参数
元素名称:“聊天”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“{{输入}}”,点击“确认”

3.4-17_.png

图3.4-17

3.4-18_.png

图3.4-18

点击“预览”观察效果

3.4-19_.png

图3.4-19

点击“桃子”头像的“添加/编辑行为”对话框;

3.4-20_.png

图3.4-20

在“编辑行为”对话框中选择“微信定制”→“显示微信头像”→触发条件:“出现”;

3.4-21_.png

图3.4-21

如下图,在“微信”工具条下点击添加一个“微信昵称”,命名为“昵称”;

3.4-22_.png

图3.4-22

点击“分享”面板,可输入分享信息为“{{昵称}}在和宝宝聊天”,同理可输入转发描述、朋友圈转发标题等内容,如下图。

3.4-23_.png

图3.4-23

点击“保存”,点击“通过二维码共享”按钮,可用手机扫描二维码观察效果;

3.4-24_.png

图3.4-24
 

3.3.4 游戏测试:随机测试

mingyueliu 发表了文章 • 0 个评论 • 428 次浏览 • 2016-10-10 17:39 • 来自相关话题

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

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

如下图,在第1页面添加一张背景图






图3.3-130

新建“图层1”,添加“福袋”图片素材,点击“福袋”右边的“添加预置动画”按钮






图3.3-131

选择“悬摆” 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,在第1页面添加一张背景图

3.3-130_.png


图3.3-130

新建“图层1”,添加“福袋”图片素材,点击“福袋”右边的“添加预置动画”按钮

3.3-131_.png


图3.3-131

选择“悬摆”动画效果

3.3-132_.png


图3.3-132

在其“属性”面板下打开“预置动画”的“循环播放”功能

3.3-133_.png


图3.3-133

选中“图层1”上的第2帧,点击“素材库”按钮,选择要添加的两张图片素材,勾选“以序列帧形式添加”,点击“添加”

3.3-134_.png


图3.3-134

补充“图层0”上的第2、3帧,点击“图层0”时间轴第3帧,右键→“插入帧”

3.3-135_.png


图3.3-135

点击“福袋”的“添加/编辑行为”按钮,添加两个编辑行为:
“播放”行为:“动画播放控制”→“播放”→触发条件:“点击”
“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”


3.3-136_.png


图3.3-136

点击“图层1”上的第4帧,点击“素材库”按钮,在“媒体库”中选择五张所需图片素材,勾选“以序列帧形式添加”,点击“添加”

3.3-137_.png


图3.3-137

继续在“图层1”的第9、10帧上分别添加两张图片素材

3.3-138_.png


图3.3-138

补充“图层0”上的帧数,选中“图层0”上第10帧,右键→“插入帧”

3.3-139_.png


图3.3-139

新建“控制层”图层,点击“随机数”按钮在“舞台”上添加一个随机数,在其“属性”面板下为随机数命名为“抽奖”

3.3-140_.png


图3.3-140

并设置其最大值最小值为“100”“1”

3.3-141_.png


图3.3-141

如图,在第3帧出现的“爆炸”图片素材上,点击其“添加/编辑行为”按钮,设置行为:“动画播放控制”→“跳转到帧并停止”→触发条件:“出现”,点击“编辑”按钮

3.3-142_.png


图3.3-142

在“参数”对话框中设置相关属性
帧号:4;5;6;7;8
执行条件:“检查元素状态”
元素名称:“抽奖”
考察属性:“文本取值”
逻辑条件:“大于”
参考值:“10”,点击“确认”返回“编辑行为”对话框

3.3-143_.png


图3.3-143

如图,再添加一个“跳转到帧并停止”,触发条件为“出现”,点击“编辑”按钮

3.3-144_.png


图3.3-144

在弹出的“参数”对话框中设置相关属性
帧号:9;10
执行条件:“检查元素状态”
元素名称:“抽奖”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“10”,点击“确认”

3.3-145_.png


图3.3-145

可点击“预览”观察动画效果

3.3-146_.png


图3.3-146

如图,可修改随机数的最大值最小值,改变随机数的随机范围以修改中大小奖的概率

3.3-147_.png


图3.3-147

3.3.3 游戏测试:选择题

mingyueliu 发表了文章 • 0 个评论 • 395 次浏览 • 2016-10-10 17:24 • 来自相关话题

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

如下图,在新建第1页面添加背景图片。添加两个文本框,分别输入文字内容为“小学教学课件”(标题)、“开始”(点击开始按钮),在其“属性”面板下调整素材大小、颜色以及位置等属性。






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

如下图,在新建第1页面添加背景图片。添加两个文本框,分别输入文字内容为“小学教学课件”(标题)、“开始”(点击开始按钮),在其“属性”面板下调整素材大小、颜色以及位置等属性。

3.3-90_.png


图3.3-90
点击“开始”文本框的“添加/编辑行为”按钮

3.3-91_.png


图3.3-91
在其“编辑行为”对话框中添加两个行为
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”

3.3-92_.png


图3.3-92
新建第2页,同理添加背景图片,添加四个文本框,分别输入“1+1=(?)”(题目)、“1”“2”“3”(答案选项),调整各元素的大小、位置等

3.3-93_.png


图3.3-93

同理,添加背景图片,添加三个文本框,分别输入“你答对了”“0”“题”(答案结果提示)

3.3-94_.png


图3.3-94
如下图,在“属性”面板下为“0”文本框命名为“分数”

3.3-95_.png


图3.3-95

点击正确答案选项文本框(此题为“2”)的“添加/编辑行为”按钮

3.3-96_.png


图3.3-96
在其“编辑行为”对话框中添加两个行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”;
“改变元素属性”行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮,在“参数”对话框中设置
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“在现有值基础上增加”
取值:“1”,点击“确认”

3.3-97_.png


图3.3-97

3.3-98_.png


图3.3-98
点击错误答案“1”文本框的“添加/编辑行为”按钮

3.3-99_.png


图3.3-99
添加“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”

3.3-100_.png


图3.3-100
同理,如下图,设置错误答案“3”文本框的编辑行为为“跳转下一页”

3.3-101_.png


图3.3-101
如下图,点击“复制页面”按钮,复制多个“问题”页面

3.3-102_.png


图3.3-102
在新页面上修改每一个题目以及答案选项

3.3-103_.png


图3.3-103
依次类推添加多个题目以及选项,丰富选择题内容
四、拖动选择
如下图,添加一个背景图片,添加四个文本框,分别输入文字内容为“守”“株”“待”“兔”,调节字体大小、颜色、位置等属性。

3.3-104_.png


图3.3-104
同理,添加四个矩形元素,在“属性”面板下调节填充色为透明色,线条类型为“点线”

3.3-105_.png


图3.3-105
排版:全选四个矩形,右键→“对齐”→“上”

3.3-106_.png


图3.3-106
排版:全选四个矩形,右键→“对齐”→“均分宽度”

3.3-107_.png


图3.3-107
分别在“属性”面板下为“守”“株”“待”“兔”四个文本框命名为“守”“株”(视频中为“zhu”)“待”“兔”

3.3-108_.png


图3.3-108
分别在“守”“株”“待”“兔”四个“属性”面板下为其设置“拖动/旋转”类型为“自由拖动”

3.3-109_.png


图3.3-109
新建文本框,输入内容为“0”,命名为“判断”

3.3-110_.png


图3.3-110
点击第一个矩形元素的“添加/编辑行为”按钮,设置编辑行为:“属性控制”→“改变元素属性”→触发条件:“拖动物体放下”,点击“编辑”按钮

3.3-111_.png


图3.3-111
设置“参数”
元素名称:“判断”
元素属性:“文本取值”
赋值方式:“在现有值基础上增加”
取值:“1”
拖动物体名称:“守”,点击“确认”

3.3-112_.png


图3.3-112

分别复制第一个矩形的编辑行为至第二、三、四个矩形上:选中第一个矩形,右键→“复制行为”

3.3-113_.png


图3.3-113
分别选中第二、三、四个矩形,右键→“粘贴行为”

3.3-114_.png


图3.3-114
点击第二个矩形的绿色编辑行为按钮,进入“编辑行为”对话框

3.3-115_.png


图3.3-115
点击“改变元素属性”行为的“编辑”按钮,进入“参数”对话框

3.3-116_.png


图3.3-116
改变“拖动物体名称”为“株”(视频中为“zhu”),点击“确认”

3.3-117_.png


图3.3-117
同理,改变第三、四个矩形的编辑行为中“拖动物体名称”分别为“待”“兔”

3.3-118_.png


图3.3-118

3.3-119_.png


图3.3-119
新建第2页面,添加背景图片、文本框,在文本框中输入文字内容为“恭喜你答对了”,修改字体、大小、位置等属性

3.3-120_.png


图3.3-120
点击“分数”文本框的“添加/编辑行为”按钮

3.3-121_.png


图3.3-121
添加两个编辑行为
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”;
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“属性改变”,点击“编辑”按钮,设置参数
执行条件:“检查元素状态”
元素名称:“判断”
参考属性:“文本取值”
逻辑条件:“等于”
参考值:“4”

3.3-122_.png


图3.3-122

3.3-123_.png


图3.3-123
新建第3页面,添加背景图片、文本框,在文本框中输入文字内容为“很遗憾再接再厉”,修改字体、大小、位置等属性

3.3-124_.png


图3.3-124
如下图,点击回到第1页面,添加定时器,修改“长度”为“10”秒

3.3-125_.png


图3.3-125
点击定时器“添加/编辑行为”按钮

3.3-126_.png


图3.3-126
在“编辑行为”对话框中选择:“动画播放控制”→“跳转到页”→触发条件:“定时器时间到”,点击“编辑”按钮

3.3-127_.png


图3.3-127
在“参数”对话框中选择“页号”为“3”,点击“确认”

3.3-128_.png


图3.3-128
点击“预览”观察效果

3.3-129_.png


图3.3-129

3.3.2 游戏测试:手术刀

mingyueliu 发表了文章 • 0 个评论 • 422 次浏览 • 2016-10-10 17:07 • 来自相关话题

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

如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色






图3.3-26

点击新建第2页面,点击“素材库”添加一个手术刀图像元 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色

3.3-26_.png


图3.3-26

点击新建第2页面,点击“素材库”添加一个手术刀图像元素,点击“线条”工具在“舞台”上绘制一个线条,并修改其线条类型为“点线”

3.3-27_.png


图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图

3.3-28_.png


图3.3-28
再添加一个文本框,命名为“分数”,输入内容为“0”,并调整大小、字体颜色等属性

3.3-29_.png


图3.3-29
新建“图层1”,将“图层0”上的手术刀剪切粘贴进“图层1”上,改变手术刀“Z轴旋转角度”为“-90”,调整其大小位置如下图

3.3-30_.png


图3.3-30
新建“图层2”,在该图层添加一个手指点击的图片素材,同时添加一个文本框,输入文字内容为“按住屏幕,开始手术”,调整字体大小、颜色等属性如下图

3.3-31_.png


图3.3-31
修改“图层0”名称为“底部”,“图层1”名称为“手术刀”,“图层2”名称为“提示”

3.3-32_.png


图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置,右键→“插入帧”

3.3-33_.png


图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧

3.3-34_.png


图3.3-34
选中“手术刀”图层关键帧之后的任意一帧,右键→“插入关键帧动画”

3.3-35_.png


图3.3-35
点击选中“手术刀”图层的最后一帧,将“舞台”上的手术刀移至最上“杀人”位置

3.3-36_.png


图3.3-36
新建“图层3”,在该图层第2帧右键→“插入关键帧”

3.3-37_.png


图3.3-37
将原来的虚线复制一份,粘贴进“图层3”第2帧上,修改线条颜色为红色,线条类型为“实线”

3.3-38_.png


图3.3-38
点击“图层3”关键帧之后的任意一帧,右键→“插入曲线变形动画”

3.3-39_.png


图3.3-39
选择“图层3”第2帧,使用“节点”工具将曲线的最上一个节点向下移至底端

3.3-40_.png


图3.3-40
点击“预览”观察效果,发现红线会随着手术刀向上的动画也向上延伸


3.3-41_.png



图3.3-41
如下图,当手术刀移至“完美”阶段时,时间轴运动到27帧

3.3-42_.png


图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧,右键→“插入关键帧”

3.3-43_.png


图3.3-43
同理,观察到当手术刀移至“及格”阶段时,时间轴运动到19帧

3.3-44_.png


图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧,右键→“插入关键帧”

3.3-45_.png


图3.3-45
为手术刀素材命名为“刀子”

3.3-46_.png


图3.3-46
观察,当手术刀在最底端位置时,其“上”值为“467.6”

3.3-47_.png


图3.3-47
观察,当手术刀在“及格”位置时,其“上”值为“184.9”

3.3-48_.png


图3.3-48
观察,当手术刀在“完美”位置时,其“上”值为“51.9”

3.3-49_.png


图3.3-49
观察,当手术刀在“杀人”位置时,其“上”值为“2”

3.3-50_.png


图3.3-50
如下图,选中“分数”文本框,在其“属性”面板下点击文字内容右边的“关联”按钮,在下拉的关联属性菜单栏下设置
关联对象:“刀子”
关联属性:“上”
关联方式:“自动关联”
当主控量=“467.6”(手术刀在最底端位置)时被控量=“0” 
当主控量=“184.9”(手术刀在“及格”位置)时被控量=“60” 
当主控量=“51.9”(手术刀在“完美”位置)时被控量=“100” 
当主控量=“2”(手术刀在“杀人”位置)时被控量=“0” 

3.3-51_.png


图3.3-51

3.3-52_.png


图3.3-52

为手指点击图像添加一个出现即暂停行为:如下图,点击手指右边的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-53_.png


图3.3-53
新建图层“控制层”,并将“图层3”重命名为“红线”

3.3-54_.png


图3.3-54

在“控制层”图层添加一个矩形,调整大小使其符合“舞台”大小,并调整其透明度为“0”

3.3-55_.png


图3.3-55
点击矩形右下角的“添加/编辑行为”按钮,为其添加两个编辑行为:
“动画播放控制”→“播放”→触发条件:“手指按下”
“动画播放控制”→“下一页”→触发条件:“手指抬起”

3.3-56_.png


图3.3-56
新建第3页面,暂时添加一张图片素材

3.3-57_.png


图3.3-57
点击“预览”观察动画效果

3.3-58_.png


图3.3-58
制作第3页:如下图,在第3页添加一个文本框,输入文字内容为“0”,调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮,设置关联属性
关联对象:“分数”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值

3.3-59_.png


图3.3-59
点击“舞台”上的图片元素,右键→“转换为元件”

3.3-60_.png


图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中,点击时间轴上第4帧,右键→“插入帧”

3.3-61_.png


图3.3-61
点击图片元件的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-62_.png


图3.3-62
同时选中时间轴上的2、3、4帧,右键→“插入关键帧”

3.3-63_.png


图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮,在弹出的“媒体库”中选择所需的图片素材,点击“添加”,替换原有的图片

3.3-64_.png


图3.3-64


3.3-65_.png


图3.3-65
同理,替换第3、4帧上的图片


3.3-66_.png


图3.3-66

3.3-67_.png


图3.3-67
点击回到“舞台”,将元件命名为“评判”

3.3-68_.png


图3.3-68
点击到第2页面,点击“控制层”上矩形的“添加/编辑行为”按钮

3.3-69_.png


图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为:“动画播放控制”→“跳转到帧并停止”

3.3-70_.png


图3.3-70
修改“触发条件”为“手指抬起”,依次填写描述为“100分”“80”“60”“死”

3.3-71_.png


图3.3-71
点击“100分”行为的“编辑”按钮

3.3-72_.png


图3.3-72
设置“参数”
帧号:“3”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“100”,点击“确认”

3.3-73_.png


图3.3-73
同理点击“80”行为的“编辑”按钮

3.3-74_.png


图3.3-74
设置“参数”
帧号:“2”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“80”,点击“确认”

3.3-75_.png


图3.3-75
同理点击“60”行为的“编辑”按钮

3.3-76_.png


图3.3-76
设置“参数”
帧号:“1”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“60”,点击“确认”

3.3-77_.png


图3.3-77
同理点击“死”行为的“编辑”按钮

3.3-78_.png


图3.3-78
设置“参数”
帧号:“4”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“刀子”
考察属性:“上”
逻辑条件:“小于等于”
参考值:“51”(手术刀在“完美”左右位置),点击“确认”

3.3-79_.png


图3.3-79
注意:Mugeda的行为逻辑是从上往下的顺序执行的,我们首先会执行“播放”的行为,然后是“跳转下一页”的行为,其次是100分的“跳转到帧并停止”行为,同理依次执行其他行为。若中间有一个行为条件不满足,则不会继续执行下一行为。

3.3-80_.png


图3.3-80
点击“预览”观察动画效果

3.3-81_.png


图3.3-81
制作“再来一次”按钮:在第3页面添加按钮素材,添加文本框,输入文本框内容为“再来一次”

3.3-82_.png


图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮

3.3-83_.png


图3.3-83
在“参数”对话框中填写帧号为“1”,点击“确认”

3.3-84_.png


图3.3-84
回到“编辑行为”对话框后再加一个行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-85_.png


图3.3-85
设置“参数”
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为

3.3-86_.png


图3.3-86
点击到第1页面,点击“开始游戏”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”

3.3-87_.png


图3.3-87

3.3-88_.png


图3.3-88
点击“预览”动画效果

3.3-89_.png

 

3.3.1 游戏测试:手速测试

mingyueliu 发表了文章 • 0 个评论 • 406 次浏览 • 2016-10-10 17:01 • 来自相关话题

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

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容为“0”

3.3-1_.png


图3.3-1
为各个素材命名:
命名文本框素材为“分数”
命名宇航员图片素材为“宇航员”

3.3-2_.png


图3.3-2

3.3-3_.png


图3.3-3

如下图,新建“控制”图层,添加一个定时器,将其移至“舞台”之外,在定时器“属性”面板内设置相关属性:
精度:“毫秒”
记时方向:“倒计时”
是否循环:“循环”
不可见时:“暂停记时器”
长度:“3”秒

3.3-4_.png


图3.3-4
命名定时器为“up”

3.3-5_.png


图3.3-5
移动宇航员图片至“舞台”上方,在其“属性”面板下点击“上”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“up”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“3”时被控量=“-200”(宇航员在“舞台”上方的位置)
当主控量=“0”时被控量=“541”(宇航员在“舞台”下方的位置)

3.3-6_.png


图3.3-6
点击“预览”观察效果

3.3-7_.png


图3.3-7
点击“随机数”按钮,在“舞台”上添加一个随机数,为其命名为“角度”

3.3-8_.png


图3.3-8
调整随机数的最大值、最小值分别为“-90”“90”,更新间隔为“3”秒

3.3-9_.png


图3.3-9
选中“宇航员”,在其“属性”面板下点击“Z轴旋转”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“角度”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“宇航员”每次的Z轴旋转角度与随机数的文本取值相等

3.3-10_.png


图3.3-10
选中文本框,在其“属性”面板下点击字体内容右边的“关联”按钮,在下拉的关联属性菜单栏内设置
关联对象:“宇航员”
关联属性:“上”
关联方式:“自动关联”
当主控量=“75”时被控量=“0” 
当主控量=“175.7”(宇航员在圆圈正中心位置)时被控量=“100” 
当主控量=“275”时被控量=“0”,设置分数与“宇航员”位置相关 

3.3-11_.png


图3.3-11
点击“预览”观察效果

3.3-12_.png


图3.3-12
可点击“保存”

3.3-13_.png


图3.3-13
选中所有图层的第2帧,右键→“插入帧”

3.3-14_.png


图3.3-14
点击“控制”图层的第2帧,右键→“插入关键帧”

3.3-15_.png


图3.3-15
选中第2帧上的两个控制元素,右键→“删除物体”

3.3-16_.png


图3.3-16
点击拍照图片按钮右边的“添加/编辑行为”按钮

3.3-17_.png


图3.3-17
在“编辑行为”对话框中添加“跳转下一帧”以及“暂停”两个行为
“跳转下一帧”行为:“动画播放控制”→“下一帧”→触发条件:“点击”
“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

3.3-18_.png


图3.3-18
选中“按钮”图层第2帧,右键→“插入关键帧”

3.3-19_.png


图3.3-19
删除“按钮”图层第2帧上的拍照按钮图片素材

3.3-20_.png


图3.3-20
同时,在“按钮”图层第2帧上点击添加一个文本框素材,输入文字内容“再来一次”,调整文本框大小、位置、字体、颜色等属性

3.3-21_.png


图3.3-21
点击“再来一次”文本框“添加/编辑行为”按钮,进入“编辑行为”对话框,选择“动画播放控制”→“上一帧”→触发条件:“点击”

3.3-22_.png


图3.3-22
同理,添加“改变元素属性”编辑行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-23_.png


图3.3-23
设置“参数”为
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”

3.3-24_.png


图3.3-24
点击“预览”观察效果

3.3-25_.png


图3.3-25

3.2 UI原型:图标动效

mingyueliu 发表了文章 • 0 个评论 • 444 次浏览 • 2016-10-10 16:31 • 来自相关话题

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






添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

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

小图标动画.png


添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

3.2-1_.png


图3.2-1
添加动画:在图层第10帧的位置右键→“插入帧”

3.2-2_.png


图3.2-2
右键→“插入关键帧动画”

3.2-3_.png


图3.2-3
选中第1帧,在“舞台”上将火箭垂直拖动至“舞台”底端

3.2-4_.png


图3.2-4
按照Ctrl键将火箭等比例缩小

3.2-5_.png


图3.2-5
制作路径:选中“舞台”上的火箭,右键→“路径”→“自定义路径”

3.2-6_.png


图3.2-6
使用“节点”工具调整火箭路径的弧度

3.2-7_.png


图3.2-7
在第1帧的位置上,选中“变形”工具,调整火箭的角度,使火箭头对准路径起始的方向

3.2-8_.png


图3.2-8
同理,选中最后一帧,使用“变形”工具调整火箭的角度使其符合路径的方向

3.2-9_.png


图3.2-9
选中第1帧,在其“属性”面板下调整“运动”效果为“阻尼退出”

3.2-10_.png


图3.2-10
如下图,将“图层0”重命名为“火箭”,新建图层“圆”

3.2-11_.png


图3.2-11
在“圆”图层上添加一个圆形使其覆盖住火箭,鼠标选中“圆”图层不放将其拖动至“火箭”图层下方,调整图层之间的覆盖位置。

3.2-12_.png


图3.2-12
调整“舞台”上的圆形的填充色、线条色如下图

3.2-13_.png


图3.2-13
选中“火箭”图层最后一帧,鼠标调整“舞台”上火箭的位置至圆形中央位置

3.2-14_.png


图3.2-14
选中“圆”图层第10帧,右键→“插入关键帧”

3.2-15_.png


图3.2-15
选中“圆”图层10帧之前的任意一帧,在“舞台”上选中圆形,右键→“删除物体”

3.2-16_.png


图3.2-16
选中所有图层20帧,右键→“插入帧”

3.2-17_.png


图3.2-17
选中“圆”图层10帧之后的任意一帧,右键→“插入关键帧动画”

3.2-18_.png


图3.2-18
选中“圆”图层第一个关键帧(即第10帧),使用“变形”工具按照Ctrl键将“舞台”上的圆形等比例缩小

3.2-19_.png


图3.2-19
鼠标按照“圆”图层最后一帧不放,将其向前拖动至16帧,缩小圆形动画的运动时间

3.2-20_.png


图3.2-20
选中“圆”图层第8、9两帧,右键→“删除帧(可多选)”,即将“圆”图层第一个关键帧移至第8帧

3.2-21_.png


图3.2-21
选中“圆”图层第20帧,右键→“插入帧”,将后面两个空缺帧补齐

3.2-22_.png


图3.2-22
选中“圆”图层第一个关键帧(即第8帧),在圆形元素“属性”面板下调整“运动”效果为“阻尼退出”

3.2-23_.png


图3.2-23
选中“圆”图层动画定格帧(第14帧),点击“舞台”的圆形,右键→“复制”

3.2-24_.png


图3.2-24
新建图层“边框”,在第14帧右键→“插入关键帧”。

3.2-25_.png


图3.2-25
选中第14帧关键帧位置,按Ctrl+Shift+V,将原先复制的圆形原位粘贴进“舞台”

3.2-26_.png


图3.2-26
选中“边框”图层上的圆形,右键→“组”→“取消组合”

3.2-27_.png


图3.2-27
修改圆形的填充色为透明色,调节线条颜色为浅蓝,大小为“5”

3.2-28_.png


图3.2-28
选中“边框”图层14帧以后的任意一帧,右键→“插入进度动画”

3.2-29_.png


图3.2-29
制作光线效果:新建图层“光1”,在第9帧右键→“插入关键帧”

3.2-30_.png


图3.2-30
在该关键帧上添加线条,调整位置、大小、颜色如下图

3.2-31_.png


图3.2-31
同理,新建“光2”“光3”“光4”,分别在第9帧插入关键帧,并在“舞台”上添加相应的线条,制作出发散的光线效果。

3.2-32_.png


图3.2-32
制作光线动画效果:同时选中“光1”至“光4”四个图层第9帧之后的任意一帧,右键→“插入曲线变形动画”

3.2-33_.png


图3.2-33
在“光4”图层的最后一帧,选择“节点”工具,将“舞台”上的该线条拉动缩小长度,并稍调整位置

3.2-34_.png


图3.2-34
同理,缩小其他三个图层在最后一帧位置上的线条长度

3.2-35_.png


图3.2-35
在9帧之后选中“光1”至“光4”四个图层的某些帧,右键→“删除帧(可多选)”

3.2-36_.png


图3.2-36
调节“光1”至“光4”每个图层第一个关键帧的“运动”效果为“淡出”

3.2-37_.png


图3.2-37
新建“云”图层,添加云的图片素材,使用“变形”工具调整云的大小、位置

3.2-38_.png


图3.2-38
在“云”图层的第13帧,右键→“插入关键帧”

3.2-39_.png


图3.2-39
选中13帧之前的任意一帧,点击“舞台”上的云素材,右键→“删除物体”

3.2-40_.png


图3.2-40
选中“云”图层13帧之后的任意一帧,右键→“插入关键帧动画”

3.2-41_.png


图3.2-41
在“云”图层第13帧,鼠标垂直向下拖动“舞台”上的云素材,使其位置向下移动一点。同时,在“属性”面板下调节“运动”效果为“阻尼退出”



3.2-42_.png


图3.2-42
鼠标选中“云”图层将其拖动至“边框”图层下方

3.2-43_.png


图3.2-43
新建图层“遮罩”,在“遮罩”图层13帧右键→“插入关键帧”

3.2-44_.png


图3.2-44
复制“圆”图层上的圆形,按Ctrl+Shift+V原位粘贴到“遮罩”图层第13帧

3.2-45_.png


图3.2-45
选择“遮罩”图层,点击“转为遮罩层”按钮

3.2-46_.png


图3.2-46

3.2-47_.png


图3.2-47
如下图,在“云”图层下方新建“星星”图层,自动转为“遮罩”图层下的被遮图层,选中“星星”图层第20帧,右键→“插入关键帧”


3.2-48_.png


图3.2-48
在该关键帧上添加星星图片素材

3.2-49_.png


图3.2-49
选中“遮罩”图层,点击“转为遮罩层”按钮,将“遮罩”图层的“遮罩”功能暂时取消

3.2-50_.png


图3.2-50
如下图,选中“火箭”至“圆”图层的第30帧,右键→“插入帧”

3.2-51_.png


图3.2-51
选中“星星”图层第一个关键帧之后的任意一帧,右键→“插入关键帧动画”

3.2-52_.png


图3.2-52
为方便观察,将“遮罩”图层上的圆形修改填充颜色,并点击图层上眼睛状按钮,隐藏该图层

3.2-53_.png


图3.2-53
选中“星星”图层起始帧(即第20帧),鼠标将“舞台”上的星星素材向上拖动一些位置,并在“属性”面板下将“运动”效果选择为“淡出”

3.2-54_.png


图3.2-54
点击“遮罩”图层眼睛状按钮,将其转换为可见

3.2-55_.png


图3.2-55
选中“遮罩”图层,点击“转为遮罩层”按钮

3.2-56_.png


图3.2-56
选中“星星”图层,点击“添加到遮罩”按钮,将“星星”图层添加进“遮罩”图层的遮罩范围内

3.2-57_.png


图3.2-57
新建“文字”图层,在25帧右键→“插入关键帧”

3.2-58_.png


图3.2-58
在“舞台”上添加一个文本框,输入文字内容,调整大小、字体、颜色等属性

3.2-59_.png


图3.2-59
在“文字”图层第一个关键帧之后的任意一帧右键→“插入进度动画”,使文字出现打字机进入的效果

3.2-60_.png


图3.2-60
新建“音乐”图层,点击“素材库”选择添加所需的音频素材,点击“添加”

3.2-61_.png


图3.2-61
将音频图标移至“舞台”之外,在音频元素的“属性”面板下选择“自动播放”为“是”

3.2-62_.png


图3.2-62
鼠标选中“声音”图层第1帧,按住不放将其拖至第2帧

3.2-63_.png


图3.2-63
最后,分别选中“光1”至“光4”四个图层的最后一帧,分别在“舞台”上调整光线线条位置、大小,优化光线扩散的动画效果。

3.2-64_.png


图3.2-64

3.1.5 展示动画:公司广告

mingyueliu 发表了文章 • 0 个评论 • 508 次浏览 • 2016-10-10 15:22 • 来自相关话题

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

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






1.添加序列图片制作元件

如图,在“元件”面板下点击新建一个元件,命名为“打开盒子”
 




图3.1-239

点击“素材库”按钮, 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览

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

酷炫手机.png


1.添加序列图片制作元件

如图,在“元件”面板下点击新建一个元件,命名为“打开盒子”
 
3.1-239_.png

图3.1-239

点击“素材库”按钮,在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片,勾选右下角的“以序列帧形式添加”,点击“添加”
 
3.1-240_.png


图3.1-240

我们发现,图片会以每张添加进每一帧的形式添加进“舞台”,可点击“播放”按钮播放动画
 
3.1-241_.png


图3.1-241

同理,导入“手机旋转”的元件
 
3.1-242_.png


图3.1-242

在“元件”面板下新建元件,命名为“手机展开”

3.1-243_.png

 
图3.1-243

以相同方式在“媒体库”中点击以序列帧形式添加序列图片
 
3.1-244_.png


图3.1-244

2.在“舞台”上添加元件

点击回到“舞台”,鼠标将“元件”面板下的“打开盒子”元件直接拖至“舞台”,并调整元件位置、大小等属性。

3.1-245_.png

 
图3.1-245
新建“背景”图层,将其拖拉至“图层0”下层。点击“素材库”,在“舞台”上选择添加一个背景图片。

3.1-246_.png

 
图3.1-246

如下图,重命名“图层0”为“盒子”,新建“手机”图层。在“手机”图层上鼠标将“元件”面板下的“手机展开”元件拖拉至“舞台”上
 
3.1-247_.png


图3.1-247
修改“舞台”上各元素的大小、位置如下图
 
3.1-248_.png


图3.1-248
双击“打开盒子”元件,进入该元件编辑页面,我们观察到当元件动画在第9帧时,盒子有差不多已打开的效果。
 
3.1-249_.png


图3.1-249
点击回到“舞台”,选中所有图层的第10帧,右键→“插入帧”
 
3.1-250_.png


图3.1-250
鼠标选中“手机”图层的第1帧,按照不放将其拖动至第9帧
 
3.1-251_.png


图3.1-251
点击“动画”→勾选掉“循环”功能
 
3.1-252_.png


图3.1-252
双击“舞台”上的“打开盒子”元件进入“打开盒子”元件编辑页面,鼠标选中最后一帧,点击最后一帧上的图片的“添加/编辑行为”按钮

3.1-253_.png


图3.1-253
在“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-254_.png


图3.1-254
同理,双击“手机展开”元件,在元件编辑页面中,选中最后一帧,点击最后一帧上放置的图片的“添加/编辑行为”按钮
 
3.1-255_.png


图3.1-255
同理,设置编辑行为:选择“动画播放控制”→“暂停”→触发条件:“出现”

3.1-256_.png

 
图3.1-256
回到“舞台”,点击“预览”观察效果

3.1-257_.png

 
图3.1-257
点击添加第2页面,在第2页面添加相关素材
 
3.1-258_.png


图3.1-258

3.制作关联动画

点击新建“手机旋转”图层,鼠标在“元件”面板下选中“手机旋转”元件,将其直接拖拉至“舞台”上,调整元件位置、大小。

3.1-259_.png

 
图3.1-259

选中滑杆素材,在其“属性”面板下设置“拖动/旋转”为“水平拖动”

3.1-260_.png


图3.1-260
在“属性”面板下为滑杆元素取名为“滑杆”
 
3.1-261_.png


图3.1-261

选中“手机旋转”元件,在其“属性”面板下选择“动画关联”为“启动”,点击右边的“关联”按钮,设置关联属性
关联对象:“滑杆”
关联属性:“左”
开始值:“25”(“滑杆”在开始时在左边的左值)
结束值:“194”(“滑杆”在结束时在右边的左值)
播放模式:“同步”
 
3.1-262_.png


图3.1-262

将“滑杆”放置线条中央,在其“属性”面板下打开“结束时复位”功能,即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。
 
3.1-263_.png


图3.1-263

4.制作点击效果按钮

如下图,在“元件”面板下点击新建一个“按钮”元件
 
3.1-264_.png


图3.1-264
点击添加一个圆形,并修改其填充色为“透明”,线条边框为白色
 
3.1-265_.png


图3.1-265

为便于观察,我们先回到“舞台”页面,鼠标点击空白处选中“舞台”,在其“属性”面板下将填充色调为黑色
 
3.1-266_.png


图3.1-266
在“元件”面板下找到“按钮”元件,双击进入“按钮”元件页面,发现“舞台”变成黑色,可观察到白色的“按钮”元素
 
3.1-267_.png


图3.1-267
点击“快捷工具”隐藏掉圆形按钮右边的两个快捷图标
 
3.1-268_.png


图3.1-268

选中时间轴第10帧,右键→“插入帧”

3.1-269_.png

 
图3.1-269

右键→“插入关键帧动画” 

3.1-270_.png


图3.1-270

选中第5帧,右键→“插入关键帧”

3.1-271_.png

 
图3.1-271
按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小

3.1-272_.png

 
图3.1-272

选中第5帧,在“属性”面板内将该位置的圆形透明度设为“50”
 
3.1-273_.png


图3.1-273
鼠标点击回到“舞台”,选中第2页面,新建“按钮”图层,在“元件”面板下将“按钮”元件直接拖至“舞台”,调整“按钮”元件的位置、大小等。
 
3.1-274_.png


图3.1-274

5.制作手机缩小动画

如下图,同时选中第2页面的所有图层第30帧,右键→“插入帧”
 
3.1-275_.png


图3.1-275
选中“手机旋转”图层任意一帧,右键→“插入关键帧动画”
 
3.1-276_.png


图3.1-276
鼠标选中“手机旋转”图层最后一帧,将其拖动至第10帧位置
 
3.1-277_.png


图3.1-277
在第10帧位置使用“变形”工具改变“手机旋转”元件的大小、位置以及旋转角度,如下图
 
3.1-278_.png


图3.1-278
选中“手机旋转”图层第1帧,在“属性”面板下改变其“运动”效果为“淡出”
 
3.1-279_.png


图3.1-279

6.新建元件

在“元件”面板下新建“手机硬件展开”元件,在其元件编辑页面中添加所需要的图片素材,如下图,每一张素材分别添加进一个图层内
 
3.1-280_.png


图3.1-280
选中元件中所有图层第10帧,右键→“插入帧”
 
3.1-281_.png


图3.1-281
选中所有图层,右键→“插入关键帧动画”
 
3.1-282_.png


图3.1-282
在每个图层的第1帧上依次将图片素材拼合至右下角的图片中
 
3.1-283_.png


图3.1-283
依次选中每个图层的第1帧,分别在其“属性”面板下找到“运动”,选择“淡出”效果
 
3.1-284_.png


图3.1-284
新建图层“暂停”,在“暂停”图层最后一帧右键→“插入关键帧”
 
3.1-285_.png


图3.1-285
在“暂停”图层最后一帧添加一个矩形在“舞台”上,点击“快捷工具”显现出原先隐藏的快捷图标,点击“添加/编辑行为”按钮

3.1-286_.png

 
图3.1-286
选择“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-287_.png


图3.1-287
最后将矩形透明度设为“0”

3.1-288_.png

 
图3.1-288

7.继续设置第2页动画

点击选中第2页面,新建图层“手机硬件展开”,在“元件”面板下找到“手机硬件展开”元件,鼠标将其拖动至“舞台”,调整其位置、大小等
 
3.1-289_.png


图3.1-289
鼠标直接将“手机硬件展开”图层下拉一层,使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下,方便调整。

3.1-290_.png

 
图3.1-290
在“舞台”上调整“手机硬件展开”与“手机旋转”两个元件大小、位置、角度,使其重叠在一起,如下图
 
3.1-291_.png


图3.1-291
选中“手机旋转”图层10帧之后的所有帧,右键→“删除帧(可多选)”

3.1-292_.png

 
图3.1-292
鼠标选中“手机硬件展开”图层的第1帧,将其拖动移至第11帧
 
3.1-293_.png


图3.1-293
选中“手机旋转”第1帧,在“属性”面板下将“运动”效果改为“淡入”

3.1-294_.png

 
图3.1-294
选中“手机旋转”图层最后一帧,在“属性”面板下改变其“Y轴旋转”角度为“180”,“Z轴旋转”角度为“8”
 
3.1-295_.png


图3.1-295
选中“按钮”图层第2帧,右键→“插入关键帧”

3.1-296_.png

 
图3.1-296
在“舞台”上选中新插入的关键帧上的物体
 
3.1-297_.png


图3.1-297
右键→“删除物体”
 
3.1-298_.png


图3.1-298
在“按钮”图层第21帧位置右键→“插入关键帧”

3.1-299_.png

 
图3.1-299
选中“按钮”图层第1帧,复制“舞台”上的物体:右键“舞台上的物体”→“复制”
 

3.1-300_.png



图3.1-300
鼠标点击选中“按钮”图层第21帧关键帧位置,按照Ctrl+Shift+V粘贴物体,将其移至合适位置
 
3.1-301_.png


图3.1-301
在“舞台”上复制粘贴一个“按钮”,调整其位置大小
 
3.1-302_.png


图3.1-302
建议不断点击“预览”按钮已调节效果
 
3.1-303_.png


图3.1-303
新建图层“说明”,在该图层22帧(“按钮”出现后)位置上右键→“插入关键帧”
 
3.1-304_.png


图3.1-304
在该帧上插入线条、文本框,输入文字内容,调节颜色、大小等属性如下图
 
3.1-305_.png


图3.1-305
选中两个物体,右键→“复制”

3.1-306_.png

 
图3.1-306
在“说明”图层第30帧位置右键→“插入关键帧”
 
3.1-307_.png


图3.1-307
在最后一个关键帧上将原来的两个物体移至第二个“按钮”上
 
3.1-308_.png


图3.1-308
调节大小、文字内容等

3.1-309_.png

 
图3.1-309
在“说明”图层第22至最后一帧之间,右键→“插入进度动画”
 
3.1-310_.png


图3.1-310
选中“手机旋转”图层的第11帧,右键→“插入关键帧”
 
3.1-311_.png


图3.1-311
选中所有图层40帧位置,右键→“插入帧”
 
3.1-312_.png


图3.1-312
在“说明”图层最后一个关键帧之后的帧数上右键→“插入进度动画”
 
3.1-313_.png


图3.1-313
8.添加编辑行为
如下图,新建一个“暂停”图层,在该图层上添加一个“矩形”
 
3.1-314_.png


图3.1-314
点击“矩形”的“添加/编辑行为”按钮
 
3.1-315_.png


图3.1-315
设置“编辑行为”:“动画播放控制”→“暂停”→触发条件:“出现”
 
3.1-316_.png


图3.1-316
选中“暂停”图层的第21帧,右键→“插入关键帧”
 
3.1-317_.png


图3.1-317
选中“暂停”图层的第29帧,右键→“插入关键帧”
 
3.1-318_.png


图3.1-318
选中“暂停”图层的第2帧,右键→“插入关键帧”


 
3.1-319_.png


图3.1-319
在第2帧中删除暂停物体

3.1-320_.png

 
图3.1-320
同理,删除第22帧上的暂停物体
 
图3.1-321
 
3.1-322_.png


图3.1-322
点击“按钮”图层第一帧上的按钮的“添加/编辑行为”
 
3.1-323_.png


图3.1-323
设置“编辑行为”为:“动画播放控制”→“播放”→触发条件:“点击”
 
3.1-324_.png


图3.1-324
选中“按钮”图层第21帧上的大按钮,点击“添加/编辑行为”按钮,设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮
 
3.1-325_.png


图3.1-325
跳转帧号为“22”,点击“确认”

3.1-326_.png

 
图3.1-326
同理选中“按钮”图层第21帧上的小按钮,点击“添加/编辑行为”按钮
 
3.1-327_.png


图3.1-327
设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮
 
3.1-328_.png


图3.1-328
跳转帧号为“30”,点击“确认”
 
3.1-329_.png


图3.1-329
选中“暂停”图层第30帧之后的所有帧数,右键→“删除帧(可多选)”
 
3.1-330_.png


图3.1-330
点击“预览”观察效果
 
3.1-331_.png


图3.1-331

9.制作第3页

如下图,点击添加第3页面,在第3页面添加一张背景图片素材
 
3.1-332_.png


图3.1-332
新建一个“手机”图层,在“元件”面板下将“手机展开”元件拖动至“舞台”上,调节大小与位置
 
3.1-333_.png


图3.1-333
新建“文字”图层,在所有图层的第20帧上右键→“插入帧”
 
3.1-334_.png


图3.1-334
在“文字”图层的第15帧,右键→“插入关键帧”

3.1-335_.png

 
图3.1-335
如下图,在第15帧位置上分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素,在“属性”面板下输入文字内容,分别调整文本域矩形元素的大小、字体、颜色、位置等属性
 
3.1-336_.png


图3.1-336
如下图,同时选中矩形与“马上预约”文本框,右键→“组”→“组合”,组合成一个“按钮”
 
3.1-337_.png


图3.1-337
点击“按钮”右边的“添加/编辑行为”
 
3.1-338_.png


图3.1-338
选择“属性控制”→“跳转链接”→触发条件:“点击”,点击“编辑”按钮
 
3.1-339_.png


图3.1-339
可在“参数”对话框中填写需跳转的网址,点击“确认”

3.1-340_.png

 
图3.1-340
点击“即将隆重上市”文本框的“添加预置动画”按钮
 
3.1-341_.png


图3.1-341
添加“淡入”的动画效果
 
3.1-342_.png


图3.1-342
同理为“马上预约”按钮添加“淡入”的预置动画效果。之后再点击“编辑预置动画”按钮,设置延迟时间为“1”秒,点击“确认”

3.1-343_.png

 
图3.1-343

3.1-344_.png

 
图3.1-344
如下图,在第2页面新建图层“禁止翻页”,添加一个矩形,点击矩形“添加/编辑行为”按钮
 
3.1-345_.png


图3.1-345
选择“动画播放控制”→“禁止翻页”→触发条件:“出现”
 
3.1-346_.png


图3.1-346
点击“我已了解”按钮的“添加/编辑行为”
 
3.1-347_.png


图3.1-347
选择“动画播放控制”→“下一页”→触发条件:“点击”
 
3.1-348_.png


图3.1-348
选择“滑杆”所在的“背景”图层,点击第2帧,右键→“插入关键帧”
 
3.1-349_.png


图3.1-349
在第二帧关键帧上删除滑杆元素
 
3.1-350_.png


图3.1-350

3.1.4 展示动画:贺卡

mingyueliu 发表了文章 • 0 个评论 • 416 次浏览 • 2016-10-10 14:38 • 来自相关话题

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






 操作步骤:如下图,新建元件“海”,在元件页面中点击“媒体库”,添加一张海的素材图片






图3.1-172

点击图片,右键→“复 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

可定制贺卡.png


 操作步骤:如下图,新建元件“海”,在元件页面中点击“媒体库”,添加一张海的素材图片

3.1-172_.png


图3.1-172

点击图片,右键→“复制”

3.1-173_.png


图3.1-173
按照Ctrl+Sift+V原位粘贴进当前位置

3.1-174_.png


图3.1-174

将两张图片左右衔接排列成如下图位置,与“舞台”右对齐

3.1-175_.png


图3.1-175

为两张图添加帧动画:在第420帧位置右键→“插入帧”

3.1-176_.png


图3.1-176

右键→“插入关键帧动画”

3.1-177_.png


图3.1-177

在动画最后一帧将图片素材平移位置使其与“舞台”左对齐

3.1-178_.png


图3.1-178

如下图,新建图层“水2”,修改“图层0”名称为“水1”

3.1-179_.png


图3.1-179

在“水2”图层第1帧上添加进一张相同的海的素材

3.1-180_.png


图3.1-180

将“水2”图层上的图片素材透明度调为“50”度

3.1-181_.png


图3.1-181

点击“播放”按钮,观察“舞台”上水的运动动画出现波动效果。

3.1-182_.png


图3.1-182

新建图层“过渡色”,点击“素材库”按钮添加一张过渡色图片素材,将其移动至海水图片上方位置

3.1-183_.png


图3.1-183

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

3.1-184_.png


图3.1-184

将“舞台”上的“图层0”改名为“背景”,点击“素材库”添加背景图片素材,并将背景图片素材移动至与“舞台”上对齐

3.1-185_.png


图3.1-185

新建图层“海”,在“元件”面板下将原先做好的“海”元件用鼠标直接拖动至“舞台”

3.1-186_.png


图3.1-186

将“元件”移动至“舞台”底端,并使其与“舞台”右对齐

3.1-187_.png


图3.1-187

新建图层“月亮”,添加月亮图片素材至“舞台”,调整月亮图片素材位置、大小等

3.1-188_.png


图3.1-188

在所有图层的60帧上右键→“插入帧”

3.1-189_.png


图3.1-189

选中“月亮”图层上的任何一帧,右键→“插入关键帧动画”

3.1-190_.png


图3.1-190

在“月亮”图层第1帧上,按住Shift键将月亮素材垂直往下移动

3.1-191_.png


图3.1-191

鼠标选中“月亮”图层,将其拖动至“海”图层下面

3.1-192_.png


图3.1-192

新建图层“文字”,在“文字”图层第40帧上右键→“插入关键帧”

3.1-193_.png


图3.1-193

在“文字”图层第40帧空白关键帧上添加文字图片素材

3.1-194_.png


图3.1-194

选中“海上生明月”文字图片素材,点击其“预置动画”按钮,添加“移入”的预置动画效果

3.1-195_.png


图3.1-195

3.1-196_.png


图3.1-196

点击“编辑预置动画”按钮,默认时长、延迟时间,调节方向为“从下”

3.1-197_.png


图3.1-197

3.1-198_.png


图3.1-198

同理,添加“天涯共此时”文字图片素材的预置动画效果,让其动画延迟“1”秒,其余与“海上生明月”素材动画效果一致

3.1-199_.png


图3.1-199

点击“保存”按钮,命名作品为“中秋”

3.1-200_.png


图3.1-200

在所有图层80帧位置右键→“插入帧”

3.1-201_.png


图3.1-201

在“文字”图层第70帧位置右键→“插入关键帧”

3.1-202_.png


图3.1-202

在70帧位置,点击“海上生明月”素材“编辑预置动画”按钮

3.1-203_.png


图3.1-203

在出现的“动画”对话框中点击“删除”→“确认删除”,删除掉该预置动画

3.1-204_.png


图3.1-204

同理删除掉70帧上“天涯共此时”文字图片素材的预置动画效果
重新添加预置动画:点击“海上生明月”素材“添加预置动画”按钮

3.1-205_.png


图3.1-205

选择“移出”的动画效果

3.1-206_.png


图3.1-206

点击“编辑预置动画”按钮,设置其延迟时间为“1”秒,其他默认

3.1-207_.png


图3.1-207

同理添加“天涯共此时”图片素材的预置动画效果为“移出”,不修改动画选项

3.1-208_.png


图3.1-208

点击新建图层“人物”,在该图层70帧位置右键→“插入关键帧”

3.1-209_.png


图3.1-209

在第70帧空白关键帧上添加人物剪影素材

3.1-210_.png


图3.1-210

在“人物”图层70帧之后的任意一帧上右键→“插入关键帧动画”

3.1-211_.png


图3.1-211

在第70帧上将“人物”素材平移至“舞台”右侧之外

3.1-212_.png


图3.1-212

鼠标选中70帧之后的所有图层部分帧数

3.1-213_.png


图3.1-213

右键→“插入帧”

3.1-214_.png


图3.1-214

调整人物素材的“运动”效果为“淡出”

3.1-215_.png


图3.1-215

新建“定制文字”图层,在最后一帧,右键→“插入关键帧”

3.1-216_.png


图3.1-216

为方便排版,将“文字”图层最后一帧删除,点击选中最后一帧,右键→“删除帧(可多选)”

3.1-217_.png


图3.1-217

如图,点击“定制文字”图层最后一帧,在“舞台”上添加一个“中秋快乐”文字图片素材,以及三个文本框素材,输入文字内容,调节各个素材的大小、位置、文字颜色、字体等属性。

3.1-218_.png


图3.1-218

为各个素材添加预置动画:如下图,点击“中秋快乐”素材的“添加预置动画”按钮,选择“移入”的动画效果

3.1-219_.png


图3.1-219

3.1-220_.png


图3.1-220

点击其“编辑预置动画”按钮,修改方向为“从右”,其余默认,点击“确认”

3.1-221_.png


图3.1-221

设置修改三个文本框的预置动画效果都为“移入”,时长默认“1.5”秒,方向为“从右”。只延迟时间稍作改变,三个文字框从上往下分别延迟“1”秒、“1.5”秒、“2”秒

3.1-222_.png


图3.1-222

3.1-223_.png


图3.1-223

3.1-224_.png


图3.1-224

继续在“定制文字”图层最后一帧添加一个矩形、文本框,调节其大小、颜色、透明度以及文字内容等属性,参考下图。

3.1-225_.png


图3.1-225

选中矩形、文本框两个元素,右键→“组”→“组合”

3.1-226_.png


图3.1-226

为该组合添加一个“淡入”的预置动画效果

3.1-227_.png


图3.1-227

设置该预置动画的延迟时间为“3”秒

3.1-228_.png


图3.1-228

点击“预览”观察效果

3.1-229_.png


图3.1-229

为第一个文本框命名为“收卡人”

3.1-230_.png


图3.1-230

为第二个文本框命名为“祝福词”

3.1-231_.png


图3.1-231

为第三个文本框命名为“发卡人”

3.1-232_.png


图3.1-232

选择“定制”按钮,在其“属性”面板下选择“动作”为“表单”,点击右边的“编辑”按钮

3.1-233_.png


图3.1-233

在“编辑表单”对话框内设置
表单名称:“定制文字”
提交方式:“GET”
提交目标:“微信定制入口”
确认消息:“定制成功!”
修改背景颜色、字体颜色、字体大小等
点击“添加表单项”

3.1-234_.png


图3.1-234

在“添加表单项”中添加
名称:“收卡人”(即第一个文本框)
描述:“收卡人”
类型“输入框”
点击“保存”

3.1-235_.png


图3.1-235

同理再添加一个表单项
名称:“祝福词”(即第二个文本框)
描述:“祝福词”
类型“文本域”
点击“保存”

3.1-236_.png


图3.1-236

同理再添加一个表单项
名称:“发卡人”(即第三个文本框)
描述:“发卡人”
类型“输入框”
点击“保存”,最后点击“确认”

3.1-237_.png


图3.1-237

点击“保存”,点击“预览”观察定制效果

3.1-238_.png


图3.1-238

最后可通过右侧“属性栏”添加背景音乐。

3.1.3 展示动画:简历

mingyueliu 发表了文章 • 0 个评论 • 321 次浏览 • 2016-10-10 11:07 • 来自相关话题

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






 1.制作图标

如下图,在“舞台”上添加一个五边形,选择“节点”工具






图3.1-101
鼠标选中多边形边上的节点,将其往多边 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

个人简历.png


 1.制作图标

如下图,在“舞台”上添加一个五边形,选择“节点”工具

3.1-101_.png


图3.1-101
鼠标选中多边形边上的节点,将其往多边形中心方向拖动,形成一个五角星图标

3.1-102_.png


图3.1-102
在“舞台”上分别添加一个圆形、矩形

3.1-103_.png


图3.1-103
选择“节点”工具,点击选中矩形,按住Ctrl键,鼠标移动到矩形最上一边,箭头出现一个“+”的符号,点击添加一个节点

3.1-104_.png


图3.1-104
同理,在矩形最上一边再添加两个节点,使其平均分布在矩形最上一边

3.1-105_.png


图3.1-105
鼠标选中中间的节点,按住Shift键将其往上拖动

3.1-106_.png


图3.1-106
选中最上方节点,按住Ctrl键水平拉动最上方节点的杠杆,使尖角变成有弧度的圆角

3.1-107_.png


图3.1-107
如下图调整左右两边角的弧度

3.1-108_.png


图3.1-108
移动圆形至如下图位置,如果圆形在矩形底下,则可选中圆形,右键→排列→移至顶层

3.1-109_.png


图3.1-109

同时选中两个图形,右键→对齐→左右居中

3.1-110_.png


图3.1-110

右键→合并→合并

3.1-111_.png


图3.1-111

选择“节点”工具,选中矩形下边两个节点,按照Shift键鼠标将其向上拖动

3.1-112_.png


图3.1-112
则可以画出一个头像图标

3.1-113_.png

图3.1-113

2.制作第1页加载页面

如下图,在第1页面添加背景图片、文字等元素,在右边“加载”页面中选择“样式”为“首页作为加载页”

3.1-114_.png


图3.1-114

3.制作第2页微信对话页面

制作微信头像:如下图,在“舞台”上添加一个圆形,在圆形“属性”面板下点击背景图片的“+”标志

3.1-115_.png

图3.1-115

在弹出的“媒体库”中找到自己想要的头像图片,点击“添加”

3.1-116_.png

图3.1-116

即可制作出圆形的头像

3.1-117_.png

图3.1-117

添加素材:如下图,在第2页面添加图片、文字等元素。
注意:分别新建一个图层放置每一则对白的元素,例如新建“对白1”图层放置第一则对白的头像、文字以及对话框等

3.1-118_.png

图3.1-118

第一则对白中的“微信昵称”需点击“微信”工具条下的“微信昵称”按钮添加,其余对白中的文字可直接点击“文字”按钮添加文字内容

3.1-119_.png


图3.1-119
添加动画:在所有图层的第10帧上右键→“插入帧”

3.1-120_.png


图3.1-120
选中四个对白图层的一帧,右键→“插入关键帧动画”

3.1-121_.png


图3.1-121
点击锁状按钮,锁定不需做动画的图层

3.1-122_.png


图3.1-122
同时选中四则对白元素,在时间轴第1帧位置,按照Shift键垂直向下拖动“舞台”上的对白元素

3.1-123_.png


图3.1-123
双击“对白2”的时间轴,选中“对白2”图层上的时间单元

3.1-124_.png


图3.1-124
鼠标选中将其往后拖动至“对白1”动画完成之后的位置

3.1-125_.png


图3.1-125
同理拖动“对白3”“对白4”的时间单元至如下位置

3.1-126_.png


图3.1-126
点击其余图层的锁状按钮解锁,选中动画最后一帧的所有图层,右键→“插入帧”

3.1-127_.png


图3.1-127
选中 “对白1”图层的第1帧,在“属性”面板下选择“运动”为“淡出”

3.1-128_.png


图3.1-128
同理在“对白2”“对白3”“对白4”图层动画的第一帧上也分别将其“运动”效果设为“淡出”

3.1-129_.png


图3.1-129
分别在“对白1”“对白2”“对白3”“对白4”图层动画的第1帧上将其透明度设为“0”

3.1-130_.png


图3.1-130
如下图,我们在“菜单”图层上添加的是“舞台”底端菜单栏下的背景矩形,在“按钮”图层上添加的是四个菜单图标。选中“按钮”“菜单”两个图层动画的最后一帧,右键→“插入关键帧”

3.1-131_.png


图3.1-131
鼠标选中“按钮”图层的第28帧(即最后一则对白出现时),在“舞台”上对准图标右键→“删除物体”

3.1-132_.png


图3.1-132
同理鼠标选中“菜单”图层的第28帧(即最后一则对白出现时),在“舞台”上对准菜单背景矩形,右键→“删除物体”

3.1-133_.png


图3.1-133

添加预置动画效果:
选中菜单背景矩形,点击“添加预置动画”按钮

3.1-134_.png


图3.1-134
选择“移入”效果

3.1-135_.png


图3.1-135
再选择菜单背景矩形,点击“编辑预置动画”按钮

3.1-136_.png


图3.1-136
设置动画选项:时长“1”秒,延时“0”秒,方向“从下”,点击“确认”

3.1-137_.png


图3.1-137

同理,设置四个图标的欲置动画效果都为“移入”,时长为“1”秒,方向“向下”。但注意“技能”图标延迟“0.2”秒,“经验”图标延迟“0.4”秒,“联系”图标延迟“0.6”秒,出现先后移入的效果

3.1-138_.png


图3.1-138

3.1-139_.png


图3.1-139

3.1-140_.png


图3.1-140

4.添加编辑行为

如下图,在第3、4、5页分别添加作品、技能、经验、联系的相关素材

3.1-141_.png


图3.1-141

3.1-142_.png


图3.1-142

3.1-143_.png


图3.1-143

3.1-144_.png


图3.1-144

添加跳转页面动画:
如图,回到第2页动画最后一帧,点击“作品”图标的“添加/编辑页面”按钮

3.1-145_.png


图3.1-145

在“编辑行为”对话框中选择“动画播放控制”→“跳转到页” →触发事件:“点击”,点击“编辑”按钮

3.1-146_.png


图3.1-146

在“参数”对话框中填写“页号”为“3”,“翻页方式”为“淡入”,点击“确认”

3.1-147_.png


图3.1-147

同理,添加“技能”“经验”“联系”图标的“跳转到页”编辑行为,分别跳转到第“4”“5”“6”页

3.1-148_.png


图3.1-148

3.1-149_.png


图3.1-149

3.1-150_.png


图3.1-150

如下图,选中第2页的“作品”图标,点击“编辑”→“复制行为”

3.1-151_.png


图3.1-151

选中第4页的“作品”图标,点击“编辑”→“粘贴行为”,即可将第2页面的“作品”图标设置的“跳转到页”编辑行为复制到第4页

3.1-152_.png


图3.1-152

同理,将第2页面的“作品”图标编辑行为复制到第5、6页;将第2页面的“技能”图标编辑行为复制到第3、5、6页;将第2页面的“经验”图标编辑行为复制到第3、4、6页;将第2页面的“联系”图标编辑行为复制到第3、4、5页;

禁止翻页:如下图,在第2页面新建图层“禁止翻页”,在该图层上添加一个矩形,点击矩形“添加/编辑行为”按钮

3.1-153_.png


图3.1-153

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

3.1-154_.png


图3.1-154

5.制作第3页面动画

如图,点击第3页面,在“作品组”图层添加相关的素材

3.1-155_.png


图3.1-155

右键→“组”→“组合”

3.1-156_.png


图3.1-156

在组的“属性”面板下选择“组类型”为“裁剪内容”,“允许滚动”设置为“垂直滚动”,鼠标选中“变形”工具调节组的位置

3.1-157_.png


图3.1-157

同时,也可为组内的“H5游戏”文字设置一个跳转动画,跳转到第2帧的网页链接(此处略谈)

3.1-158_.png


图3.1-158

6.制作第4页面动画

点击第4页面,添加“曲线图表”(具体可参看图表制作章节)

3.1-159_.png


图3.1-159

7.制作第5页面动画

点击选中第5页面,如下图,在“经验”图层上添加相关素材

3.1-160_.png


图3.1-160

新建“陀螺仪”图层,在该图层上添加一个陀螺仪,将其移至“舞台”之外,并在“属性”面板下将其命名为“陀螺仪”

3.1-161_.png


图3.1-161

在陀螺仪的“属性”面板下选择“类型”为“绕Y轴旋转角”

3.1-162_.png


图3.1-162

选中“经验”图层上的所有元素,右键→“组”→“组合”

3.1-163_.png


图3.1-163

在“组”的“属性”面板下点击“X轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-45”
当主控量=“180”时被控量=“45”

3.1-164_.png


图3.1-164

同理在“组”的“属性”面板下点击“Y轴旋转”的“关联”按钮,在下拉菜单中设置:
关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-50”
当主控量=“180”时被控量=“50”

3.1-165_.png


图3.1-165

同理在“组”的“属性”面板下点击“Z轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-5”
当主控量=“180”时被控量=“5”

3.1-166_.png


图3.1-166

可在手机上观察效果

8.制作第6页面动画

如下图,点击第6页面,分别在“简介”“文字”图层上添加头像、联系方式等相关素材

3.1-167_.png


图3.1-167

如图,新建“定时器”图层,在该图层上添加一个定时器,并在“属性”面板下将其命名为“定时器”

3.1-168_.png


图3.1-168

点击选中头像,在其“属性”面板下点击“Z轴旋转”的“关联”按钮,设置关联属性:

关联对象:“定时器”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“30”时被控量=“0”
当主控量=“0”时被控量=“360”

3.1-169_.png


图3.1-169

设置定时器属性:精度为“毫秒”,“记时方向”为“倒计时”,“是否循环”为“循环”

3.1-170_.png


图3.1-170

同时,我们也可在该作品中添加背景音乐以及补充其他信息,美化简历。
点击“预览”或扫描二维码观察效果

3.1-171_.png


图3.1-171

3.1.2 展示动画:招聘

mingyueliu 发表了文章 • 0 个评论 • 303 次浏览 • 2016-10-09 18:14 • 来自相关话题

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






 1.添加素材、排版

如下图,在新建页面上添加图片素材、矩形、文本框,调整其位置、大小、文字内容、文字大小、颜色等属性






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

招聘.png


 1.添加素材、排版

如下图,在新建页面上添加图片素材、矩形、文本框,调整其位置、大小、文字内容、文字大小、颜色等属性

3.1-67_.png


图3.1-67

同理添加三组相同的素材,排版如下:

3.1-68_.png

图3.1-68

在添加图片时,我们应注意,将每一个职位的素材分别合并成组,并放在不同的图层内。例如,将“总顾问”一组放置“顾问”图层,将“市场总监”一组放置“市场总监”图层,将“快递员”一组放置“快递员”图层上。

3.1-69_.png


图3.1-69

2.添加动画效果

在时间轴上选择所有图层的第30帧,右键→“插入帧”

3.1-70_.png

图3.1-70

点击无需添加动画的图层3、4的类似锁状的按钮,将其锁住,选中“快递员”“市场总监”“顾问”三个图层的时间线,右键→“插入关键帧动画”

3.1-71_.png


图3.1-71

如下图,为方便编辑,可选中三个组,将其向右移动至合适编辑的位置

3.1-72_.png


图3.1-72

选中“快递员”图层第1帧,调整“快递员”组的“Y轴旋转”角度为“-50”

3.1-73_.png


图3.1-73

选中“市场总监”图层第1帧,调整“市场总监”组的“Y轴旋转”角度为“-40”

3.1-74_.png


图3.1-74

将所有素材拖动至原来位置,即使第一组“总顾问”放在“舞台”正中间。

3.1-75_.png

图3.1-75

选中动画最后一帧,即第30帧,将“舞台”上的所有元素向左拖动,使最后一组“快递员”组放在“舞台”正中间。

3.1-76_.png

图3.1-76

可点击“播放”按钮观察整体的动画效果

3.1-77_.png

图3.1-77

同时,在动画最后一帧,即第30帧,点击设置“市场总监”组的“Y轴旋转”为“40”

3.1-78_.png

图3.1-78

移动元素至合适位置,在动画最后一帧,即第30帧,点击设置“总顾问”组的“Y轴旋转”为“50”

3.1-79_.png

图3.1-79

最后,在最后一帧将所有元素移到合适位置,即将最后一组“快递员”组放在“舞台”正中间。

3.1-80_.png

图3.1-80

3.添加按钮

如下图,新建一个图层,命名为“按钮”,在“按钮”图层上添加一个矩形,使其高度与“舞台”相同,宽度大于“舞台”

3.1-81_.png

图3.1-81

将按钮矩形“透明度”设置为“0”,并为其命名为“透明按钮”

3.1-82_.png

图3.1-82

点击“舞台”空白处,在“舞台”的“属性”面板下找到“动画关联”,选择“启用”,点击“关联”按钮

3.1-83_.png

图3.1-83

设置“关联”属性
关联对象:“透明按钮”
关联属性:“左”
开始值:“-203”(“透明按钮”最右端与舞台右端重合时的位置)
结束值:“0”
播放模式:“同步”
注意:为方面观察,也可先将“透明按钮”透明度调整为“20”

3.1-84_.png

图3.1-84

选中“透明按钮”,在其“属性”面板下找到“拖动/旋转”按钮,选择“水平拖动”

3.1-85_.png

图3.1-85

可点击“预览”观察效果,若观察到动画移至重复播放,可回到“舞台”,点击“动画”,勾除“循环”

3.1-86_.png

图3.1-86

4.添加表单

为方便编辑,将图层4(放置“我要应聘”按钮)移至最上层,并改名为“表单按钮”。注意:此处为区分,已将原先的“按钮”图层重命名为“透明按钮”

3.1-87_.png


图3.1-87

选中“我要应聘”按钮元素,在其“属性”面板下找到“动作”,选择“表单”,点击右边的“编辑”按钮

3.1-88_.png


图3.1-88

在弹出的“编辑表单”中设置
表单名称:“应聘”
提交方式:“GET”
提交目标:“提交数据到后台”
确认消息:“提交成功”
背景颜色、字体颜色、字体大小等
点击“添加表单项”

3.1-89_.png


图3.1-89

在“添加表单项”对话框中填写
名称:“姓名”
描述:“姓名”
类型:“输入框”,点击“保存”

3.1-90_.png


图3.1-90

同理,再添加一个表单项,设置内容为
名称:“应聘职位”
描述:“应聘职位”
类型:“单选框”
取值:“总顾问、市场总监、快递员”(一行为一个选项)
点击“保存”

3.1-91_.png


图3.1-91

同理,再添加一个表单项,设置内容为
名称:“电话”
描述:“电话”
类型:“电话号码”,点击“保存”

3.1-92_.png


图3.1-92

点击“确认”回到“舞台”,点击“保存”,点击“预览”观察效果

3.1-93_.png


图3.1-93

5.添加背景音乐

如图,在“媒体库”中添加音乐素材

3.1-94_.png

图3.1-94

将音乐素材移动至“舞台”之外,点击“舞台”空白处,在“背景音乐”中选择“声音1”

3.1-95_.png

图3.1-95

点击“预览”观察效果

3.1-96_.png

图3.1-96

同时,也可设置“分享”与“加载”

3.1-97_.png

图3.1-97

6.查看后台表单数据

点击操作界面右上角“动画作品”

3.1-98_.png

图3.1-98

在“动画作品”界面点击该作品“统计”按钮

3.1-99_.png

图3.1-99

在“数据”界面选择“表单数据”,即可查看所提交的表单信息。

3.1-100_.png

图3.1-100

3.1.1 展示动画:邀请函

mingyueliu 发表了文章 • 0 个评论 • 478 次浏览 • 2016-10-09 17:36 • 来自相关话题

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






1.添加素材

如下图,在“舞台”上添加一个长形图片素材





图3.1-1

使用“变形”工具调整长图大小位置如下





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

邀请卡.png


1.添加素材

如下图,在“舞台”上添加一个长形图片素材

3.1-1_.png

图3.1-1

使用“变形”工具调整长图大小位置如下

3.1-2_.png

图3.1-2

在“舞台”下端空白部分添加一个矩形,调整矩形宽高使其符合“舞台”

3.1-3_.png

图3.1-3

在矩形“属性”面板下点击设置矩形填充颜色,按照Alt键使用吸管吸取图片素材上的背景颜色,统一矩形颜色。

3.1-4_.png

图3.1-4

3.1-5_.png

图3.1-5

如下图,点击在“舞台”上添加一个文本框,在其“属性”面板下调整其颜色、大小、位置等属性

3.1-6_.png

图3.1-6

同理,添加一个矩形,修改其填充色、边框颜色、大小、位置等属性如下图

3.1-7_.png

图3.1-7

同理,点击添加一个输入框

3.1-8_.png

图3.1-8

按需求在其“属性”面板下调整输入框位置、大小、文字颜色、字体等使其符合整体样式

3.1-9_.png

图3.1-9

按照Ctrl键同时选中输入框与背景矩形框,右键→“复制”

3.1-10_.png

图3.1-10

按住Ctrl+Shift+V粘贴至当前位置

3.1-11_.png


图3.1-11
按照Shift键将新粘贴进的对象移动至合适位置

3.1-12_.png


图3.1-12
添加矩形背景按钮和文本框,输入文本框内容为“提交”,调整二者的大小、位置、颜色等属性至合适程度,如下图

3.1-13_.png


图3.1-13
按照Ctrl键选中矩形背景按钮与文字框,右键→“组”→“组合”

3.1-14_.png


图3.1-14

点击选中第一个输入框,在其“属性”面板下修改“提示文字”为“请输入姓名”

3.1-15_.png

图3.1-15

同理,点击选中第二个输入框,在其“属性”面板下修改“提示文字”为“请输入电话”,“类型”为“电话号码”,“必填项”为“是”

3.1-16_.png

图3.1-16

分别为两个输入框命名为“姓名”“电话”

3.1-17_.png

图3.1-17

3.1-18_.png


图3.1-18

2.添加行为

点击“提交”按钮右边的“添加/编辑行为”按钮

3.1-19_.png


图3.1-19
在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件:“点击”,点击“编辑”按钮

3.1-20_.png


图3.1-20
在“参数”对话框内,选择“提交目标”为“默认数据服务”,勾选“提交对象”为“姓名”“电话”,点击“确认”

3.1-21_.png


图3.1-21
点击“预览”观察效果

3.1-22_.png


图3.1-22
如下图,点击添加第2页,点击“舞台”空白处,在“舞台”的“属性”面板下修改填充颜色:点击填充颜色框,按照Alt键吸取第1页背景图片的颜色,统一舞台颜色。

3.1-23_.png


图3.1-23
在第2页点击添加文本框,输入文字内容如下图,并在其“属性”面板下修改文本框文字大小、字体、颜色等属性

3.1-24_.png


图3.1-24
回到第1页,选中“提交”按钮,右键→“复制”

3.1-25_.png


图3.1-25
点击回到第2页,按照Ctrl+Shift+V粘贴至当前位置


3.1-26_.png


图3.1-26
双击按钮进入“组”页面,修改文本框文字内容为“我想再看看活动时间”

3.1-27_.png


图3.1-27
回到“舞台”,点击选中按钮,在其“属性”面板下找到“动作”,选择“无”,取消掉表单行为

3.1-28_.png


图3.1-28

3.1-29_.png


图3.1-29
点击第2页右下角“复制页面”按钮,复制第2页至第3页面

3.1-30_.png


图3.1-30
修改文本框“老朋友 提交失败 再来一次吧”,如下图

3.1-31_.png


图3.1-31
双击按钮组进入“组”页面,修改按钮文字内容为“OK,再来一次”

3.1-32_.png


图3.1-32
点击“保存”并填写名称为“邀请卡”

3.1-33_.png


图3.1-33
回到第1页,点击选中第1帧,即全选第一页素材

3.1-34_.png


图3.1-34
右键→“组”→“组合”,将第1页第1帧上的所有元素合并成一个组

3.1-35_.png


图3.1-35
在该组合的“属性”面板下找到“拖动/旋转”选项,选择“垂直拖动”。

3.1-36_.png


图3.1-36
按照Shift键将组合往下拖动,手动使其顶部与“舞台”顶部对齐

3.1-37_.png


图3.1-37
也可在“属性”面板下调整其“上”值为“0”,使其顶部与“舞台”顶部对齐

3.1-38_.png


图3.1-38
双击“组”进入组页面,点击“提交”按钮右边的“添加/编辑行为”按钮

3.1-39_.png


图3.1-39
在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮

3.1-40_.png


图3.1-40
在“参数”对话框选择“操作成功后”为“跳转到页”,点击其右边的“编辑”按钮

3.1-41_.png


图3.1-41
在新弹出的“参数”对话框内选择“页号”为“2”,“翻页方式”为“平移”,点击“确认”

3.1-42_.png


图3.1-42
同理,选择“操作失败后”为“跳转到页”,点击其右边的“编辑”按钮

3.1-43_.png


图3.1-43
在新弹出的“参数”对话框内选择“页号”为“3”,“翻页方式”为“平移”,点击“确认”

3.1-44_.png


图3.1-44
回到“舞台”页面,点击“预览”观察效果

3.1-45_.png


图3.1-45
接下来,在“舞台”上添加一个矩形,点击矩形“添加/编辑行为”按钮

3.1-46_.png


图3.1-46
在其“编辑行为”对话框内选择“动画播放控制”→“禁止翻页”→触发条件:“出现”,即设置了当该矩形出现即禁止系统默认的上下翻页行为。

3.1-47_.png


图3.1-47
如图,在第2页面,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮

3.1-48_.png


图3.1-48
在“参数”对话框内设置“页号”为“1”,“翻页方式”为“平移”,点击“确认”

3.1-49_.png


图3.1-49
回到第1页,选中“组”,为其命名为“首页”

3.1-50_.png


图3.1-50
在第2页,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,添加“改变元素属性”行为:选择“属性控制”→“改变元素属性”→触发条件:“点击”,点击该行为的“编辑”按钮

3.1-51_.png


图3.1-51
如图,在“参数”对话框内设置:
元素名称:“首页”
元素属性:“上”
赋值方式:“用设置的值替换现有的值”
取值:“-370”
点击“确认”,即设置行为:点击“我想再看看活动时间”按钮时,页面跳转至第1页,且“首页”组合的“上”值为“-370”,即活动时间刚好显示在“舞台”中间的位置

3.1-52_.png


图3.1-52
点击“预览”效果

3.1-53_.png


图3.1-53
如图,点击选中第3页失败页面,点击“ok,再来一次”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框内选择:“动画播放控制”→“跳转到页”→触发条件:“点击”,点击该行为的“编辑”按钮

3.1-54_.png


图3.1-54
设置参数“页号”为“1”,“翻页方式”为“平移”,点击“确认”

3.1-55_.png


图3.1-55

3.添加背景音乐

点击“素材库”,选择添加已上传的“声音”素材至“舞台”

3.1-56_.png


图3.1-56
将音频移至“舞台”之外,鼠标点击“舞台”空白处,在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”(即刚刚添加的音乐素材)

3.1-57_.png


图3.1-57
点击“预览”背景音乐

3.1-58_.png


图3.1-58

4.设置“加载”界面

如下图,点击“加载”界面,选择“样式”为“进度条”,“提示”为“嘿,老朋友,好久不见”,并修改文字大小,是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。

3.1-59_.png


图3.1-59

如下图,点击“分享”界面,填写分享信息,上传添加分享图标等。

3.1-60_.png


图3.1-60

5.发布

点击“发布”按钮

3.1-61_.png


图3.1-61


在“发布动画”页面输入“备注名”为“邀请卡”,勾选同意书,点击“下一步”

3.1-62_.png


图3.1-62
发布成功

3.1-63_.png


图3.1-63

6.查看表单统计数据

我们可在Mugeda账号主页的“动画作品”中看到最新的作品缩略图。

3.1-64_.png


图3.1-64
点击动画缩略图右下角三点的按钮,点击“统计”

3.1-65_.png


图3.1-65
即在“数据”→“表单数据”下可观察到刚刚提交的表单内容

3.1-66_.png


图3.1-66