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

 关键帧动画默认是匀速运动，Mugeda可以设定不同的运动模式，比如淡入、淡出、阻尼进入、阻尼退出等。

如下图，添加一个火箭图像元素，在图层时间轴上设置好由下往上运动的关键帧动画效果


图2.3-96

选中起始帧位置，在火箭元素的“属性面板”中设置其“运动”效果为“震荡进入退出”，点击“播放”预览效果


图2.3-97


也可将“运动”效果设为“阻尼进入退出”，点击预览观察效果


图2.3-98

动画运动还可应用在曲线变形动画上，如图，在曲线变形动画的起始帧位置，改变“运动”效果为“碰撞进入退出”，点击预览观察效果


图2.3-99

图2.3-100
 

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

 遮罩动画可实现很多特殊效果，需要至少两个图层，上面是“遮罩层”，下面是“被遮罩层”。遮罩层为显示区域，被遮罩层为显示的内容。
如下图，在图层0的第1帧添加一个按钮元素


图2.3-82

点击“新建图层”按钮新添加图层1、图层2


图2.3-83

鼠标点击图层0第1帧，按住Ctrl+C复制该帧上的物体，点击选中图层2第1帧，按住Ctrl+V粘贴进物体



图2.3-84
点击选中图层1的第1帧，在“舞台”上绘制一个白色矩形



图2.3-85
调整白色矩形的透明度为40%



图2.3-86
选择“变形”工具调整其角度，使其右倾一些



图2.3-87

将图层2重命名为“遮罩层”，图层1为“被遮罩层”



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



图2.3-89
点击图层0的“关闭可视图层”按钮，关闭图层0上物体的可视化



图2.3-90
如图，在“被遮罩层”内设置一个关键帧动画，即右键→“插入帧”，右键→“插入关键帧动画”



图2.3-91
鼠标选中最后一个关键帧，将“舞台”上的白色半透明矩形移至右侧



图2.3-92
点击图层0的“关闭可视图层”还原图层0物体的可视化，在图层0上选中与“被遮罩层”最后关键帧相同的帧数，右键→“插入帧”补全图层0的帧数。



图2.3-93
同理补全“遮罩层”的帧数



图2.3-94

点击“播放”预览走光动画效果



图2.3-95

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

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


图2.3-67

点击“预览”观察效果


图2.3-68

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


图2.3-69

点击“预览”观察效果


图2.3-70

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


图2.3-71

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


图2.3-72

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

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


图2.3-73

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


图2.3-74

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


图2.3-75

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


图2.3-76

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


图2.3-77

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


图2.3-78

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


图2.3-79

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


图2.3-80

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


图2.3-81

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

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

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


图2.3-48

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


图2.3-49

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


图2.3-50

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


图2.3-51

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


图2.3-52

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


图2.3-53

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


图2.3-54

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


图2.3-55

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


图2.3-56

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


图2.3-57

图2.3-58

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


图2.3-59

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


图2.3-60

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


图2.3-61

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


图2.3-62

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


图2.3-63

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


图2.3-64

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


图2.3-65

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


图2.3-66
 

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

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

1.    添加进入动画

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


图2.3-43

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


图2.3-44

2.    强调动画

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


图2.3-45

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


图2.3-46

3.    退出动画

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


图2.3-47

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

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

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


图2.3-35

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


图2.3-36

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


图2.3-37

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


图2.3-38

改变矩形形状为三角形


图2.3-39

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


图2.3-40

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


图2.3-41

图2.3-42
 

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

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

1.    制作图像进度动画

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


图2.3-25

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


图2.3-26

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


图2.3-27

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


图2.3-28

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


图2.3-29

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


图2.3-30

2.    制作文字进度动画

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


图2.3-31

点击编辑文字内容


图2.3-32

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


图2.3-33

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


图2.3-34
 

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

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

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


图2.3-17

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


图2.3-18

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


图2.3-19

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


图2.3-20

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


图2.3-21

点击选择“节点”工具


图2.3-22

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


图2.3-23

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


图2.3-24

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

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


图2.3-10

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


图2.3-11

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


图2.3-12

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


图2.3-13

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



图2.3-14

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



图2.3-15

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



图2.3-16

http://9bdee5fd.u.h5mc.com/cam ... .html

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

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


图2.3-1

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


图2.3-2

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


图2.3-3

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


图2.3-4
2.3.2 动画：选择工具
2.3.3关键帧动画
2.3.4 动画：路径动画
2.3.5 动画：进度动画
2.3.6 动画：变形动画
2.3.7 动画：预置动画
2.3.8 动画：元件动画
2.3.9 动画：分页/加载页
2.3.10 动画：遮罩
2.3.11 动画：动画运动

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

 1.建组

如下图，在“舞台”上添加两张图片素材，将其首尾相接排放。


图2.2-101

全选两张图片，鼠标右键→“组”→“组合”


图2.2-102

即可在“属性面板”下观察到该元素已成“组”，可在“属性面板”下改变“组”的属性，例如改变“拖动/旋转”为“垂直拖动”


图2.2-103

点击“预览”，发现可用鼠标在预览界面垂直拖动该图片组合


图2.2-104

2.组类型用法

将“移动/旋转”重设为“不允许”，“组类型”为“裁剪内容”，“允许滚动”设为“垂直滚动”


图2.2-105

选择“变形”工具将“组”大小调整为小于“舞台”


图2.2-106

点击“预览”，发现图片组合在裁剪的范围内可上下垂直移动。


图2.2-107

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


 1.添加曲线图表

点击“曲线图标”工具，在“舞台”上拖拉绘制一个曲线图表。


图2.2-89

鼠标选中“选择”工具，点击“舞台”上的曲线图表，可在“属性面板”内调节属性


图2.2-90

例如，添加背景图片，改变“图片位置”为“上”，“图片尺寸”为“等比例覆盖”等。


图2.2-91

改变曲线数据：可复制“曲线数据”框内内容，粘贴进记事本，再改变数据。


图2.2-92

添加其他描述，例如标题、X轴Y轴说明等。


图2.2-93

点击“预览”查看效果。如下图，可根据鼠标移动位置出现相应数据，点击“切换/图表数据”可切换数据形式。


图2.2-94

图2.2-95

还可继续在“属性面板”内选择设置“图表类型”以及其他的一些属性。


图2.2-96

2.    通过行为指令设置曲线图表

如图，添加“修改图表数据”文字元素与曲线图表，将曲线图表命名为“图标1”


图2.2-97

点击“修改图表数据”元素的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“属性控制”→“修改图表数据”，点击“编辑”按钮进入“参数”对话框


图2.2-98

在“参数”对话框内选择“目标元素”为“图标1”，粘贴修改后的图表数据，点击“确认”，点击“预览”


图2.2-99

图2.2-100

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

 如下图，选择“文字”工具在“舞台”上添加一个文字框，输入内容为“云字体”


图2.2-83

选中文字元素，在“属性面板”下找到“字体”选项，在字体下拉菜单内选择“上传云字体”


图2.2-84

在“上传云字体”对话框内点击“选择文件”，选择需上传的字体。


图2.2-85

图2.2-86

点击“预览”→“添加到元件库”，即添加云字体


图2.2-87

图2.2-88

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


 1.    绘制图形

如图，点击“绘制”工具栏内的各个工具，可在“舞台”上绘制各种图形。


图2.2-75

可在“属性面板”下调节各个图形的填充色、线条色以及线条粗度等


图2.2-76

“节点”工具：如图，鼠标选择“节点”工具，选择“舞台”上矩形右上角的节点，右键→“节点”→“删除选中节点”，删除右上角节点，使矩形变成一个三角形。


图2.2-77

图2.2-78

如图，也可选中多边形中一个节点，将其进行拖动，形成五角星形。


图2.2-79

裁切图形：如图，同时选中两个物体


图2.2-80

在“选择”工具下，右键→“合并”→“用上层物体裁剪” 


图2.2-81

即将圆形裁剪成如下图形


图2.2-82

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

 1. 上传声音

由于多数设备支持mp3，因此在Mugeda内编辑的音频格式建议为mp3。

在“媒体”工具栏内选择“声音”按钮，在弹出的“导入声音”对话框中点击“选择文件”，选择所要上传的音频文件。


图2.2-53

图2.2-54

点击“上传”→“添加”，将音频添加至“舞台”


图2.2-55

选择“舞台”上的音频，在“属性面板”中设置音频属性，例如：宽高、透明度、旋转度、声音图标、静音图标、是否自动播放、是否循环播放等。


图2.2-56

2.    声音的控制

删除物体：如图，选择“舞台”上的声音元件，右键→“删除物体”，删除“舞台”上的声音元素


图2.2-57

设置编辑行为：点击“矩形”按钮，在“舞台”之外绘制一个矩形元素，点击矩形右边的“添加/编辑行为”按钮


图2.2-58

在“编辑行为”对话框中选择“媒体播放控制”→“播放声音”，触发条件为“出现”，点击“编辑”按钮进入“参数”对话框


图2.2-59

在“参数”对话框中，选择“声音元件”为“声音1”，自动播放为“是”，点击“确认”，可点击“预览”查看效果


图2.2-60

如下图，在新页面中添加图片、“播放”“暂停”“停止所有声音”等文字元素。点击“声音”按钮添加一个新音频。


图2.2-61

将其透明度设置为“0”，使音频元素隐藏于“舞台”


图2.2-62

命名该音频元素为“声音”


图2.2-63

通过行为指令控制、播放、停止所有声音：选中“播放”元素，点击其“添加/编辑行为”按钮，在“编辑行为”对话框内选择“媒体播放控制”→“控制声音”，点击“编辑”按钮进入“参数”对话框


图2.2-64

在“参数”对话框中选择“音频名称”为“声音”、“控制方式”为“播放”，点击“确认”


图2.2-65

同理设置“暂停”编辑行为：选中“暂停”元素，点击其“添加/编辑行为”按钮，在“编辑行为”对话框内选择“媒体播放控制”→“控制声音”，点击“编辑”按钮进入“参数”对话框


图2.2-66

在“参数”对话框中选择“音频名称”为“声音”、“控制方式”为“暂停”，点击“确认”


图2.2-67

设置“停止所有声音”编辑行为：上传、添加一个新音频至“舞台”，将其命名为“声音2”


图2.2-68

将其“声音2”音频元素透明度设为“0”


图2.2-69

选中“停止所有声音”元素，点击其“添加/编辑行为”按钮，在“编辑行为”对话框内选择“媒体播放控制”→“停止所有声音”


图2.2-70

设置“声音2”为“自动播放”，点击“预览”观察效果


图2.2-71

图2.2-72

3.    设置背景音乐

如图，在“元件面板”内可找到之前上传的三个音频文件


图2.2-73

鼠标点击“舞台”空白处，在“舞台”的“属性面板”内找到“背景音乐”设置框，选择所需背景音乐文件。点击“预览”查看效果。


图2.2-74

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

 1. 插入视频

为防止出现设备不兼容等问题，视频格式建议为mp4，大小在20M以内。如图在“媒体”工具栏下，鼠标点击“视频”按钮，在弹出的“导入视频”对话框内点击“选择文件”选择所要上传的视频文件。


图2.2-33

图2.2-34

点击“上传”→“确定”


图2.2-35

即将视频添加进“舞台”。可选择“变形”工具，调节视频的位置、大小等基本属性。

图2.2-36

选中视频元素，可在其“属性面板”内设置其属性，例如为其命名，调节宽高、透明度、旋转角度、添加背景图片等。


图2.2-37

添加背景图片：如下图，点击“属性面板”下“背景图片”的“+”标志，在弹出的“媒体库”中选择背景图片，点击“添加”。


图2.2-38

即将图片添加作为视频封面


图2.2-39

内容：视频插入以及控制{跳转2.3.9}） 

2.    视频元素的编辑行为 

如下图，新添加第2页面，在第2页面添加一个文本框，输入内容为“第二页”


图2.2-40

回到第1页面，点击视频元素的“添加/编辑行为”按钮


图2.2-41

在“编辑行为”对话框内选择“动画播放控制”→“下一页”，触发条件为“视频结束”，即设置视频播放结束后即跳转至第二页的行为动画。


图2.2-42

在视频元素的“属性面板”内将“隐藏控件”调为“否”，点击预览。可观察到视频播放结束后会自动调至第2页。


图2.2-43

图2.2-44

3.    视频行为控制

视频的行为控制有播放视频、控制视频、停止所有视频。

播放视频：如下图，添加一个新视频


图2.2-45

分别为两个视频命名为“A”“B”


图2.2-46

如下图，点击“播放”元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“播放视频”，点击“编辑”按钮进入“参数”对话框。


图2.2-47
在“参数”对话框中选择“视频元件”为“视频2”，点击“确定”


图2.2-48

控制视频：同理，设置“控制”元素的编辑行为。点击“控制”元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“控制视频”，点击“编辑”按钮进入“参数”对话框。


图2.2-49

在“参数”对话框内的“视频名称”选择“B”，点击确定。


图2.2-50

停止所有视频：同理，设置“停止所有”元素的编辑行为。点击“停止所有”元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“媒体播放控制”→“停止所有视频”，点击“编辑”按钮进入“参数”对话框。


图2.2-51

点击“预览”可以查看效果


图2.2-52

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


 
1.“文字”工具

鼠标在“媒体”工具内选择“文字”按钮，在“舞台”空白处点击出现文字工具选框。鼠标通过双击选框进入编辑文字工具，点击“舞台”空白处退出，编辑。


图2.2-15

图2.2-16

选中文字元素，可在“舞台”右边的“属性面板”内调节文字属性、编辑文字内容。例如：加粗、倾斜、字体、字号等。


图2.2-17

2.“文本段落”工具

鼠标在“媒体”工具内选择“文本段落”按钮，在“舞台”开白处点击出现文本段落选框。双击进行编辑内容。


图2.2-18

选中选框中的内容，可调节字体属性。例如加粗、倾斜、字体、字号等。

在文本段落中还有加入超链接、插入图片、视频等功能。


图2.2-19

通过“变形”工具将文本段落选框拉长，使添加进的素材显现出来


图2.2-20

鼠标点击“选择”工具，选中文本段落中的所有素材，可点击调节素材对齐方式。


图2.2-21

如图，在一个完整的文本段落中，可添加文字、图片、超链接、视频等各种形式素材。


图2.2-22