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

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

操作方法：

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





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



说明：
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上安装或者同步过软件可能导致在微信中不能自动播放声音。





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

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

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

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


图3.4-25

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


图3.4-26

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


图3.4-27

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


图3.4-28

点击“预览”观察效果；


图3.4-29

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

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

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


图3.4-1

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


图3.4-2

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


图3.4-3

选择“浮入”的动画效果


图3.4-4

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


图3.4-5

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


图3.4-6

新建“图层2”


图3.4-7

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


图3.4-8

右键→“插入帧”


图3.4-9

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


图3.4-10

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


图3.4-11


图3.4-12

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


图3.4-13

为输入框命名为“输入”


图3.4-14

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


图3.4-15

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


图3.4-16

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

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


图3.4-17


图3.4-18

点击“预览”观察效果


图3.4-19

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


图3.4-20

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


图3.4-21

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


图3.4-22

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


图3.4-23

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


图3.4-24
 

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

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

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



图3.3-130

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



图3.3-131

选择“悬摆”动画效果



图3.3-132

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



图3.3-133

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



图3.3-134

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



图3.3-135

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




图3.3-136

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



图3.3-137

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



图3.3-138

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



图3.3-139

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



图3.3-140

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



图3.3-141

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



图3.3-142

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



图3.3-143

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



图3.3-144

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



图3.3-145

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



图3.3-146

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



图3.3-147

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

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



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



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



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



图3.3-93

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



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



图3.3-95

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



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



图3.3-97



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



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



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



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



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



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



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



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



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



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



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



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



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



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



图3.3-112

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



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



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



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



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



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



图3.3-118



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



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



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



图3.3-122



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



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



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



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



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



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



图3.3-129

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

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



图3.3-26

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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





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



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



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



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



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



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



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



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



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



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



图3.3-51



图3.3-52

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



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



图3.3-54

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



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



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



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



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



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



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



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



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



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



图3.3-64




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




图3.3-66



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



图3.3-87



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


 

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

添加素材：

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



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



图3.3-2



图3.3-3

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



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



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



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



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



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



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



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



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



图3.3-12
可点击“保存”



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



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



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



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



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



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



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



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



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



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



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



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



图3.3-25

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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





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



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



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



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



图3.2-46



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




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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



图3.2-64

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

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



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

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

图3.1-239

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


图3.1-240

我们发现，图片会以每张添加进每一帧的形式添加进“舞台”，可点击“播放”按钮播放动画
 


图3.1-241

同理，导入“手机旋转”的元件
 


图3.1-242

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


 
图3.1-243

以相同方式在“媒体库”中点击以序列帧形式添加序列图片
 


图3.1-244

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

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


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


 
图3.1-246

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


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


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


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


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


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


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



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


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


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


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


 
图3.1-257
点击添加第2页面，在第2页面添加相关素材
 


图3.1-258

3.制作关联动画

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


 
图3.1-259

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



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


图3.1-261

选中“手机旋转”元件，在其“属性”面板下选择“动画关联”为“启动”，点击右边的“关联”按钮，设置关联属性
关联对象：“滑杆”
关联属性：“左”
开始值：“25”（“滑杆”在开始时在左边的左值）
结束值：“194”（“滑杆”在结束时在右边的左值）
播放模式：“同步”
 


图3.1-262

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


图3.1-263

4.制作点击效果按钮

如下图，在“元件”面板下点击新建一个“按钮”元件
 


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


图3.1-265

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


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


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


图3.1-268

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


 
图3.1-269

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



图3.1-270

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


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


 
图3.1-272

选中第5帧，在“属性”面板内将该位置的圆形透明度设为“50”
 


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


图3.1-274

5.制作手机缩小动画

如下图，同时选中第2页面的所有图层第30帧，右键→“插入帧”
 


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


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


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


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


图3.1-279

6.新建元件

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


图3.1-280
选中元件中所有图层第10帧，右键→“插入帧”
 


图3.1-281
选中所有图层，右键→“插入关键帧动画”
 


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


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


图3.1-284
新建图层“暂停”，在“暂停”图层最后一帧右键→“插入关键帧”
 


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


 
图3.1-286
选择“动画播放控制”→“暂停”→触发条件：“出现”
 


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


 
图3.1-288

7.继续设置第2页动画

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


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


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


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


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


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


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


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


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


图3.1-297
右键→“删除物体”
 


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


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




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


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


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


图3.1-303
新建图层“说明”，在该图层22帧（“按钮”出现后）位置上右键→“插入关键帧”
 


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


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


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


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


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


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


图3.1-310
选中“手机旋转”图层的第11帧，右键→“插入关键帧”
 


图3.1-311
选中所有图层40帧位置，右键→“插入帧”
 


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


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


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


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


图3.1-316
选中“暂停”图层的第21帧，右键→“插入关键帧”
 


图3.1-317
选中“暂停”图层的第29帧，右键→“插入关键帧”
 


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


 


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


 
图3.1-320
同理，删除第22帧上的暂停物体
 
图3.1-321
 


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


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


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


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


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


图3.1-327
设置“动画播放控制”→“跳转到帧并播放”→触发条件：“点击”，点击“编辑”按钮
 


图3.1-328
跳转帧号为“30”，点击“确认”
 


图3.1-329
选中“暂停”图层第30帧之后的所有帧数，右键→“删除帧（可多选）”
 


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


图3.1-331

9.制作第3页

如下图，点击添加第3页面，在第3页面添加一张背景图片素材
 


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


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


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


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


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


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


图3.1-338
选择“属性控制”→“跳转链接”→触发条件：“点击”，点击“编辑”按钮
 


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


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


图3.1-341
添加“淡入”的动画效果
 


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


 
图3.1-343


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


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


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


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


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


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


图3.1-350

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



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



图3.1-172

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



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



图3.1-174

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



图3.1-175

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



图3.1-176

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



图3.1-177

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



图3.1-178

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



图3.1-179

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



图3.1-180

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



图3.1-181

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



图3.1-182

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



图3.1-183

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



图3.1-184

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



图3.1-185

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



图3.1-186

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



图3.1-187

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



图3.1-188

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



图3.1-189

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



图3.1-190

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



图3.1-191

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



图3.1-192

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



图3.1-193

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



图3.1-194

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



图3.1-195



图3.1-196

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



图3.1-197



图3.1-198

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



图3.1-199

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



图3.1-200

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



图3.1-201

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



图3.1-202

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



图3.1-203

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



图3.1-204

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



图3.1-205

选择“移出”的动画效果



图3.1-206

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



图3.1-207

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



图3.1-208

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



图3.1-209

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



图3.1-210

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



图3.1-211

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



图3.1-212

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



图3.1-213

右键→“插入帧”



图3.1-214

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



图3.1-215

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



图3.1-216

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



图3.1-217

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



图3.1-218

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



图3.1-219



图3.1-220

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



图3.1-221

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



图3.1-222



图3.1-223



图3.1-224

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



图3.1-225

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



图3.1-226

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



图3.1-227

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



图3.1-228

点击“预览”观察效果



图3.1-229

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



图3.1-230

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



图3.1-231

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



图3.1-232

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



图3.1-233

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



图3.1-234

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



图3.1-235

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



图3.1-236

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



图3.1-237

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



图3.1-238

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

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

 1.制作图标

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



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



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



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



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



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



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



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



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



图3.1-109

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



图3.1-110

右键→合并→合并



图3.1-111

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



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


图3.1-113

2.制作第1页加载页面

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



图3.1-114

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

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


图3.1-115

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


图3.1-116

即可制作出圆形的头像


图3.1-117

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


图3.1-118

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



图3.1-133

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



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



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



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



图3.1-137

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



图3.1-138



图3.1-139



图3.1-140

4.添加编辑行为

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



图3.1-141



图3.1-142



图3.1-143



图3.1-144

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



图3.1-145

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



图3.1-146

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



图3.1-147

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



图3.1-148



图3.1-149



图3.1-150

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



图3.1-151

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



图3.1-152

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

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



图3.1-153

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



图3.1-154

5.制作第3页面动画

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



图3.1-155

右键→“组”→“组合”



图3.1-156

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



图3.1-157

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



图3.1-158

6.制作第4页面动画

点击第4页面，添加“曲线图表”（具体可参看图表制作章节）



图3.1-159

7.制作第5页面动画

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



图3.1-160

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



图3.1-161

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



图3.1-162

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



图3.1-163

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

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



图3.1-164

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



图3.1-165

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

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



图3.1-166

可在手机上观察效果

8.制作第6页面动画

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



图3.1-167

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



图3.1-168

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

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



图3.1-169

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



图3.1-170

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



图3.1-171

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

 1.添加素材、排版

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



图3.1-67

同理添加三组相同的素材，排版如下：


图3.1-68

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



图3.1-69

2.添加动画效果

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


图3.1-70

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



图3.1-71

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



图3.1-72

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



图3.1-73

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



图3.1-74

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


图3.1-75

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


图3.1-76

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


图3.1-77

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


图3.1-78

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


图3.1-79

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


图3.1-80

3.添加按钮

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


图3.1-81

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


图3.1-82

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


图3.1-83

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


图3.1-84

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


图3.1-85

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


图3.1-86

4.添加表单

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



图3.1-87

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



图3.1-88

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



图3.1-89

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



图3.1-90

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



图3.1-91

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



图3.1-92

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



图3.1-93

5.添加背景音乐

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


图3.1-94

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


图3.1-95

点击“预览”观察效果


图3.1-96

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


图3.1-97

6.查看后台表单数据

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


图3.1-98

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


图3.1-99

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


图3.1-100

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



1.添加素材

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


图3.1-1

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


图3.1-2

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


图3.1-3

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


图3.1-4


图3.1-5

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


图3.1-6

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


图3.1-7

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


图3.1-8

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


图3.1-9

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


图3.1-10

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



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



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



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



图3.1-14

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


图3.1-15

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


图3.1-16

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


图3.1-17



图3.1-18

2.添加行为

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



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



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



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



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



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



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



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




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



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



图3.1-28



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



图3.1-55

3.添加背景音乐

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



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



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



图3.1-58

4.设置“加载”界面

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



图3.1-59

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



图3.1-60

5.发布

点击“发布”按钮



图3.1-61


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



图3.1-62
发布成功



图3.1-63

6.查看表单统计数据

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



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



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



图3.1-66

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

 复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
 
1、现在可以直接将剪切板的文字添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的菜单操作）将一段文字复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将该文字粘贴成一个文本对象；
 
2、现在可以直接将剪切板的图片添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的操作，例如QQ的屏幕截屏）将一张图片复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将图片在“选择图片”对话框中打开并准备上传；

 
3、可以直接将文件拖动到舞台并放下，即可打开上传图片对话框并上传图片；

 
相关教学视频本周会上线，请留意论坛和群内消息哟~

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。  
 点击查看全景演示
 
本节视频教程请点击此处。

简介： 
虚拟现实场景组件，可以用来显示360度全景图片，并添加热点进行交互。  
 
具体教程： 
1、添加组件 
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加：

 
在画布上拖动鼠标画出组件的位置。松开鼠标后，即可进入编辑场景图片的界面。

 
插入场景图片时，注意图片格式，规定如下：

 
选择图片后，会出现更多的编辑选项，各区域说明如下图所示：

 
1) 场景预览区：这里可以看到载入的图片渲染的场景效果，可以用鼠标拖动进行全景浏览； 
2) 场景列表区：显示所有添加的场景，可以对场景添加、删除、编辑、排序； 
3) 热点和场景编辑：用来切换热点和场景；
4) 全局配置：用来设置导航条以及导航条中出现的条目的选择；
 
很多编辑区域均配有即时帮助：

 
2、编辑场景 
场景具有如下属性：   
1) 图片：即全景的导入图片，支持等距长方投影和三维六面贴图两种格式； 
2) 预览图：在全景载入之前的一个小尺寸图片，可选； 
3) 缩略图：如果选择显示导航条，缩略图会显示在导航条上提示用户，尺寸是64*64； 
4) 标题：每一个场景的名称，会显示在导航条上；
 
3、热点编辑 
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下，可以添加、删除、移动热点，并未热点指定图形、动画和行为。   
 
击热点列表下的添加图标，可以进入热点添加模式。

 
进入热点添加模式后，加号图标会变成橙色提醒用户。

 
在热点添加模式下，在场景预览区域点击即可添加新的热点。

 
点击热点列表中的任一热点，可以在列表中和预览窗口中定位热点，便于识别。

 
每个热点可编辑的属性有：   
1) 热点名称：用于区分和识别不同热点的名称； 
2) 图标：显示在场景中的图标； 
3) 尺寸：图标的显示大小； 
4) 行为：点击热点后激活的行为； 
5) 操作：对行为进行编辑或者删除热点；  
 
具体说明两点：图标和行为。
 
3、热点图标和行为 
3.1 热点图标 
热点图标Mugeda提供预置的图标，如图：

 
以外，用户可以上传任意的图片作为热点图标，在“+”位置添加，如图：

 
并指定相应的尺寸即可，如图：

 
3.2 热点行为 点击热点后，可以触发一系列的行为。该操作和为物体添加行为类似。

 
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时，需要指定场景名称和热点名称。其中，热点名称可选，如果不指定，切换场景后会切换到预览窗口所显示的区域。

 
4、场景属性

 
1) 显示导航：在屏幕下方出现的导航条。当包含2个以上的场景时，建议选择; 
2) 允许陀螺仪控制：是否在导航条上显示陀螺仪控制的切换图标； 
3) 左右分离视角：是否在导航条上显示左右分离视角；这个目前比较小众，建议不选；
 
5、场景渲染 
场景渲染时，可以用鼠标或者手指拖动切换视。如果选择了显示导航，还会出现一个导航条提供进一步的选择包括：上一场景、显示缩略图、VR效果、收起导航栏、下一场景。

 
6、如何产生全景内容 
产生全景内容的方式有两种：   
1) 用可以产生全景内容的App
例如：Google Street View, Sphere, 百度圈景，等等。在苹果和安卓应用商店可以搜到。   
2) 用全景拍摄设备。这些设备从简单到专业有很多选择，例如Insta360在京东的旗舰店： http://insta360.jd.com/  
 
相关教学视频本周会上线，请留意论坛和群内消息哟~

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

 逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；

如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”，具体公式为“{{圆判断.left }}==29”，即设置了当“圆判断”圆形的左值等于29时，点击矩形跳转下一页；


图2.9-14

点击“预览”观察效果，由于此时“舞台”上的“圆判断”圆形左值正好是29，即点击矩形可跳转至下一页。


图2.9-15

同理，也可将公式改为“{{圆判断.left }}>15”，因“舞台”上的“圆判断”圆形左值等于29，即大于15，因此点击矩形仍可跳转至下一页。


图2.9-16

逻辑表达式可执行多种判断条件，如图，在“舞台”上添加一个输入框，命名为“sr”；


图2.9-17

同理，回到矩形“下一页”编辑行为的“参数”对话框，将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时，点击矩形才可跳转至下一页。
注意：“&&”表示“并且”


图2.9-18

点击“预览”观察效果；


图2.9-19

同理，将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时，点击矩形才可跳转至下一页。点击“预览”观察效果。
注意：“||”表示“或者”


图2.9-20

附件：逻辑表达式概念文档


 

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

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

如下图，点击在“舞台”上添加一个矩形；


图2.9-1

为矩形添加两个行为：
 
“跳转下一页”：点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件：“点击”，点击“确认”
“禁止翻页”：在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“点击”，点击“确认”


图2.9-2

新建下一页，为便于识别，在下一页中添加一张背景图片素材。


图2.9-3

回到上一页，新建一个输入框，为其命名为“判断”；


图2.9-4

点击矩形的“添加/编辑行为”按钮；


图2.9-5

在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮；


图2.9-6

在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”；
元素名称：“判断”
考察属性：“文本取值”
逻辑条件：“等于”
参考值：“100”
即设置了当“判断”输入框内容等于100时，点击矩形跳转到下一页的行为；


图2.9-7

点击“预览”观察效果；


图2.9-8

如下图，删除输入框，添加一个圆形，将其命名为“圆判断”；


图2.9-9

同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框，点击“下一页”行为的“编辑”按钮进入“参数”对话框；


图2.9-10

设置“执行条件”为“检查元素状态”；
元素名称：“圆判断”
考察属性：“左”
逻辑条件：“不等于”
参考值：“30”
即设置了当“圆判断”圆形左值不等于30时，点击矩形跳转下一页的行为；


图2.9-11

点击“预览”观察效果，如下图，此时“圆判断”的左值为“29”，即不等于30，因此点击矩形即会跳转至下一页；


图2.9-12


图2.9-13

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

如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；


图2.8-38

如图，选中被控对象文本框，在其“属性”面板下点击字体右边的“关联”按钮，在下拉的关联属性菜单栏中设置：
关联对象：“遥控器3”
关联属性：“左”
关联方式：“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值；


图2.8-39

点击“预览”观察效果，我们发现，水平移动“控制器3”圆形，其“左”值被体现在文本框内；


图2.8-40

回到被控对象输入框的“文字”关联属性栏下，修改关联公式为：被控量=关联属性*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。


图2.8-41

也可修改关联公式为：被控量=（关联属性+25）*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。


图2.8-42

点击“预览”观察效果。如图，当“遥控器3”的“左”值等于0时，输入框的内容为（0+25）*3=75


图2.8-43

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

 如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；


图2.8-32

并为圆形命名为“遥控器“；


图2.8-33

同理，选中被控对象矩形，在其“属性”面板下点击其“左”属性右边的“关联”按钮，在下拉的关联属性菜单内设置：
关联对象：“遥控器”
关联属性：“左”
关联方式：“自动关联”
点击弹出的“+”符号


图2.8-34

如下图，点击“+”符号后出现主控量与被控量的输入框，输入：
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时，矩形的“左”值等于“320”；
当“遥控器”圆形的“左”值等于150时，矩形的“左”值等于“0”；
当“遥控器”圆形的“左”值等于“300”时，矩形的“左”值等于“320”。
设置了这几个节点后，系统会自动设置调节中间的动画。
注意：主控量为控制物体的关联属性（此处为“控制器”圆形的“左”值）
被控量为被控制物体的关联属性（此处为矩形的“左”值）


图2.8-35

点击“预览”观察效果


图2.8-36

如下图，自动关联也可只控制一部分动画，例如设置自动关联属性为：
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”


图2.8-37

点击“预览”，观察发现只有当“遥控器”圆形的“左”值在100-200区间时，矩形的动画会从左移向右，而当“遥控器”圆形的“左”值在100以下或200以上时，矩形不移动位置。

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

 我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
 

图2.8-20

如下图，在“舞台”上添加一个输入框；


图2.8-21

为输入框命名为“输入框”；


图2.8-22

选中“属性关联”元素，在其“属性”面板下点击其透明度右边的“关联”按钮；


图2.8-23

在弹出的下拉菜单中填写关联属性：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值；


图2.8-24

可点击“预览”观察效果；


图2.8-25

同理，可设置“属性关联”元素的“上”的关联属性为：

关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值


图2.8-26

点击“预览”观察效果；


图2.8-27

同理，将输入框删除，在“舞台”上新添加一个矩形，在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”


图2.8-28

为矩形命名为“拖动遥控”；


图2.8-29

如下图，同理点击“属性关联”的“上”属性右边的“关联”按钮，设置关联属性为：

关联对象：“拖动遥控”
关联属性：“上”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值


图2.8-30

点击“预览”观察效果；


图2.8-31

​想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。

1.“舞台”上的动画关联
本节视频教程请点击此处。

“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台”添加一个矩形素材，设置其由左移到右的动画效果。动画时间为第1帧到第100帧。


图2.8-1

新建图层1，在图层1第1帧位置上点击添加一个矩形在“舞台”上，在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”；


图2.8-2

在“属性”面板下为新添加的矩形命名为“遥控器”；


图2.8-3

鼠标点击“舞台”空白地方，在“舞台”的“属性”面板内找到“动画关联”选项，选择“启用”，点击右边弹出的“关联”按钮；


图2.8-4

在弹出的下拉菜单中填写关联属性：

关联对象：“遥控器”（即之前命名为“遥控器”的小矩形）
关联属性：“左”（即“遥控器”小矩形的最左值离舞台左端的距离值）
开始值：“0”
结束值：“100”
播放模式：“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时，动画启动播放，当距离值大于100时，动画停止播放。


图2.8-5

如下图，为方便观察，我们在“舞台”上添加一个宽度为100的紫色矩形，点击“预览”，观察到当“遥控器”小矩形的最左端在紫色矩形（其左值0-100）之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在紫色矩形（其左值100以上）之外时，上方的矩形停止播放动画。


图2.8-6

同理，将“舞台”上的关联属性设为开始值：“100”；结束值：“200” 


图2.8-7

点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时，上方的矩形停止播放动画。


图2.8-8

同理，修改“舞台”上的关联属性中“播放模式”为“同步”，即可设置当“遥控器”小矩形的最左端在离舞台左端值100时，上方的矩形动画开始从第一帧播放；当“遥控器”小矩形的最左端在离舞台左端值0-200之间，上方的矩形动画同步播放；当“遥控器”小矩形的最左端在离舞台左端值200时，上方的矩形动画播放至最后一帧。


图2.8-9

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


图2.8-10

2.“元件”的动画关联
本节视频教程请点击此处。

“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。
如图，在“舞台”上添加一个矩形，选中矩形，右键→“转换为元件”，双击矩形进入元件编辑页面。


图2.8-11

如下图，为矩形元件设置一个从左向右移动的动画效果，动画区间为0-50帧


图2.8-12

点击页面左上角“舞台”字样回到“舞台”，在“舞台”上新建一个小矩形，为小矩形命名为“元件遥控器”


图2.8-13

在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”，选择“垂直拖动”，即设置了可垂直拖动“元件遥控器”


图2.8-14

选中矩形元件，在其“属性”面板下找到“动画关联”，选择“启动”，点击弹出的“关联”按钮


图2.8-15

在弹出的下拉菜单中填写关联属性：
关联对象：“元件遥控器”
关联属性：“上”（即“元件遥控器”小矩形的最上端离舞台上端的距离值）
开始值：“200”
结束值：“400”
播放模式：“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时，元件动画启动播放，当距离值小于200或大于400时，元件动画停止播放。


图2.8-16

可点击“预览”，预览效果


图2.8-17

同理，在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”，即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时，元件矩形动画开始从第一帧播放；当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间，元件矩形动画同步播放；当“元件遥控器”小矩形的最上端在离舞台上端值400时，元件矩形动画播放至最后一帧。


图2.8-18

可点击“预览”，预览效果


图2.8-19
 

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

1.编辑表单
本节视频教程请点击此处。

如图，新建一个页面，在“表单”工具条下点击“表单”按钮


图2.7-26

如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮


图2.7-27

在弹出的“添加表单项”对话框中输入选项“名称”为“name”，“描述”为“姓名”，“类型”为“输入框”，“取值”为“张三”，点击“保存”，点击“确认”


图2.7-28

点击“预览”，在预览中输入姓名为“李四”，点击“确认”，即出现“定制成功”字样，点击“确认”，数据即提交至后台服务器中。


图2.7-29


图2.7-30

回到操作界面，点击“舞台”上的默认表单，在其“属性”面板内点击“编辑”按钮，进入“编辑表单”对话框


图2.7-31

选择“提交目标”为“微信定制入口”，点击“确认”


图2.7-32

回到操作界面后，点击“预览”，在输入框内输入一个新名字，点击“确认”，刷新后H5页面即变成新输入的名字，这就是微信实时定制名字，它的数据不会被提交至后台。


图2.7-33

如下图，回到“编辑表单”对话框，点击“预置表单项（请选择）”按钮，在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。


图2.7-34

如下图，点击选择“联系方式（手机号码）”，在弹出的注意对话框中点击“确定”


图2.7-35

回到操作界面，点击“预览”，发现会出现默认的“名称”和“手机号码”两个选项内容


图2.7-36

2.定制文字
本节视频教程请点击此处。

如下图，在新页面上添加三个文字素材，分别为文字命名为“to”“greetings”“from”


图2.7-37


图2.7-38


图2.7-39

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


图2.7-40

在弹出的“编辑表单”对话框中设置相关表单属性，填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮


图2.7-41

在弹出的“添加表单项”对话框中输入“名称”为“to”（连接到之前命名为“to”的文字框素材），“描述”为“收件人”，“类型”为“输入框”，“取值”为“亲爱的战友”，点击“保存”


图2.7-42

同理点击“添加表单项”按钮，再次添加“名称”为“greetings”（连接到之前命名为“greetings”的文字框素材），“描述”为“祝福语”，“类型”为“文本域”，“取值”可不填，点击“保存”


图2.7-43

同理点击“添加表单项”按钮，再次添加“名称”为“from”（连接到之前命名为“from”的文字框素材），“描述”为“发件人”，“类型”为“输入框”，“取值”为“你的朋友”，点击“保存”


图2.7-44

点击“预览”，如图，点击“定制文字”按钮，即可出现“定制文字”对话框，输入需定制的内容，点击“确认”，即可将定制的文字数据提交至后台。


图2.7-45


图2.7-46

如图，回到“舞台”，点击“舞台”上的“定制文字”按钮的“添加/编辑行为” 


图2.7-47

在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”，点击“确认”


图2.7-48

回到“舞台”，点击“预览”，如图在文字定制框内输入需定制的文字，点击“确认”


图2.7-49

发现页面会刷新，文字内容变成定制的内容


图2.7-50

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

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

提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；


图2.7-12

同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”；


图2.7-13

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


图2.7-14

在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮；


图2.7-15

在“参数”对话框中选择“提交目标”为“默认数据服务”，勾选需提交的对象，并选择“操作成功后”和“操作失败后”都为“跳转到页”，点击“操作成功后”右边的“编辑”按钮；


图2.7-16

在新弹出的“参数”对话框中设置页号为“2”，点击“确认”；


图2.7-17

点击“操作失败后”右边的“编辑”按钮，在新弹出的“参数”对话框中设置页号为“3”，点击“确认”；


图2.7-18

回到操作界面，添加第2、3页面，在第2页面添加文字素材“提交成功”，在第3页面添加文字素材“提交失败”；


图2.7-19

点击“预览”效果；


图2.7-20

保存作品，回到Mugeda账号主页，找到新保存的该作品；


图2.7-21

点击作品右下角的三个竖点符号，在弹出的选框中点击选择“统计”；


图2.7-22


图2.7-23

进入数据统计页面，点击“表单数据”，进入表单数据统计页面，可观察到之前提交的信息。这就是提交表单和数据查询方法；


图2.7-24

点击“导出数据”，可导出一个Excel形式的数据统计表；


图2.7-25
 

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

在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框


图2.7-9

在列表框“属性”面板下调节相关属性设置，例如：
 
调节字体为“黑色”，
字体大小为“20”，
输入“选项”内容为“北京（BJ）”“天津（TJ）”，
“必填项”选择“是”。

注意：设置“选项”内容时，观察选项内容输入框内的提示语“一行一个值，格式如：中国（CN）。其中（CN）是表单提交的值”
 

图2.7-10

点击“预览”，观察效果
 

图2.7-11