想要了解更多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

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

本节视频教程请点击此处。
 
我们可以在舞台上的任意位置插入一个任意大小的网页。如图，在“媒体”工具栏下，鼠标点击“网页”按钮，在“舞台”上以拖拉的方式插入一个网页。


图2.2-23

在“舞台”右边的“属性面板”内可设置调节“网页”元素的属性，例如：宽、高、外围线条（如图可点击颜色版右上角框内的红色“×”去除外
围线框颜色）、透明度、透视度、旋转角度等。


图2.2-24

在“属性面板”内的“网页地址”栏内输入需跳转的网址
注：添加的网址前面要加http://


图2.2-25

点击“预览”，即可观察到我们已将网页嵌入至作品当中。


图2.2-26

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

 如果想在作品中使用手绘图的功能，可以使用Mugeda的【绘画板】控件。  
 
1、首先找到工具面板中的【绘画板】控件：

 
2、然后在舞台上通过拖拽添加一个画布控件（就像添加矩形一样），在右侧的属性栏里可以通过【填充】和【背景图片】设置画布背景：

 
3、在右侧的属性栏，可以设置【画笔颜色】和【显示编辑器】，【显示编辑器】里可设置三个选项，分别是【仅显示清空和保存】，【显示全部】，【不显示】：

 
设置【仅显示清空和保存】的预览效果：

 
设置【显示全部】的预览效果，其中第一个是设置画笔粗细的，第二个是设置画笔颜色的，第三个按钮会清空画布，第四个按钮保存并上传绘图内容：

 
设置【不显示】的预览效果：

 
4、如果想自定义按钮，可以在舞台里添加按钮内容：

 
5、然后给按钮添加【触发条件】和【控制行为】，控制画布内容的保存和清除：



 

 

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


 
图片工具包含的格式有GIF、PNG、SVG、JPG文件。

1.    上传图片

方法一：上传到素材库再添加至舞台

点击“素材库”按钮，在弹出的“媒体库”中点击“添加文件夹”新建一个文件夹以放置即将上传的图片素材。


图2.2-1

命名文件夹


图2.2-2

在新建的文件夹下点击添加素材按钮，在“上传文件”对话框中点击“选择文件”选择所要上传的图片文件。

图2.2-3

图2.2-4

图2.2-5

点击“上传”→“选择”


图2.2-6

即将图片上传至素材库


图2.2-7

也可在“上传图片”对话框中通过输入图片网址，点击“抓取”→“选择”上传图片进媒体库。


图2.2-8

也可在“批量上传”下，将文件夹内的图片全选，鼠标拖动至批量上传对话框内（一次性批量上传文件）。


图2.2-9

待文件全部加载完成后，点击“选择”，将文件上传至媒体库中


图2.2-10

图2.2-11

方法二：点击“图片”按钮上传素材，再添加至舞台。

如下图，点击“媒体”工具栏下的“图片”按钮，出现“上传图片”对话框，以三种方式上传图片文件。


图2.2-12

2.    以序列帧形式添加图片

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


图2.2-13

即可将每张图片分别对应添加至一个图层的每一帧内，点击“播放”按钮可观察效果。


图2.2-14
 
学习更多教程：
 
2.2.2 素材与媒体：文本/富文本
2.2.3 素材与媒体：网页
2.2.4 素材与媒体：幻灯片
2.2.5 素材与媒体：视频
2.2.6 素材与媒体：声音
2.2.7 素材与媒体：绘制素材
2.2.8 素材与媒体：云字体
2.2.9 素材与媒体：可视化图表
2.2.10 素材与媒体：建组 、裁剪组​
 
2.3.1 动画：时间轴以及图层
2.3.2 动画：选择工具
2.3.3关键帧动画
2.3.4 动画：路径动画
2.3.5 动画：进度动画
2.3.6 动画：变形动画
2.3.7 动画：预置动画
2.3.8 动画：元件动画
2.3.9 动画：分页/加载页
2.3.10 动画：遮罩
2.3.11 动画：动画运动
 
【Mugeda新功能教程】缩放功能
【Mugeda新功能教程】绘画板功能

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

 
1.“属性面板”

“属性面板”显示和控制“舞台”及动画元素的各种参数，其中包括“内容标题”“舞台”或“元素”及其图像、宽高、帧速设置、填充色设置等功能。


图2.1-29

2.“元件库”

“元件库”包含声音元件和动画元件。“元件库”对元件进行管理的必要功能，例如新建元件，复制元件、生成文件夹、删除元件、导出导入元件等。一个元件是一个包含有自身独立的时间线的动画片段，可以反复在舞台上使用，创建比较复杂的组合动画。


图2.1-30

3.“翻页面板”

“翻页面板”包括“翻页效果”“退出效果”“翻页方向”“循环”“翻页时间”“翻页图标”


图2.1-31

4.“分享面板”

“分享面板”包括转发标题、转发描述、朋友圈转发标题等分享信息。


图2.1-32

5.“加载”设置

“加载”的样式包含“默认”“进度条”“进度环”“旋转加载”“旋转加载+百分比”“首页作为加载界面”

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

 


工具条包含“选择”“媒体”“绘制”“控件”“表单”“微信”六大工具
板块。


图2.1-25

1.“选择”
“选择”工具板块下有“选择”“节点”“变形”“缩放比例”“快捷工具”
五大工具。

2.“媒体”
“媒体”工具板块下有“素材库”“图像”“声音”“视频”“文字”“文
本段落”“幻灯片”“网页”“曲线图表”工具。

3.“绘制”
“绘制”工具板块下有“直线”“曲线”“矩形”“圆角矩形”“椭圆”“多
边形”等工具

4.“控件”
“控件”工具板块下有“擦玻璃”“点赞”“绘画板”“定时器”“随机数”
“陀螺仪”等工具。

5.“表单”
“表单”工具板块下有“输入框”“单选框”“多选框”“列表框”“表单”
等工具。

6.“微信”
“微信”工具板块下有“微信头像”“微信昵称”“定制图片”“录音”等
工具。

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

 

  
1. 常用菜单栏

包含基本操作菜单，例如文件、编辑、修改、视图、动画、帮助等。


图2.1-1

2. 工具箱（快捷工具栏）

包含保存、预览等常用的一些工具的快捷访问。


图2.1-2

3. 时间线（时间轴）

用来方便的对动画进行精确的控制，可以添加关键帧动画、进度动画、变形动画、遮罩动画等形式。


图2.1-3

4. 工具条

包含选项、元素、绘制、动画控制、手机功能等内容


图2.1-4

5. 页面栏

用来进行页面的增加、复制、删除、插入等操作。


图2.1-5

6. 舞台

整个界面的核心区域，是编辑、制作、播放动画的区域


图2.1-6

7. 属性栏

包含你所选的元素（图片、文字、视频等）属性，这些属性包括位置、大小、旋转、行为等。


图2.1-7

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

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

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


图1.3-15

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


图1.3-17

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


图1.3-18

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


图1.3-19

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


图1.3-21

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


图1.3-22

视频处理方式

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


 
图1.3-23


图1.3-24

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


图1.3-25

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


图1.3-26

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


图1.3-27

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


图1.3-28

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


图1.3-29

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


图1.3-30

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


图1.3-31

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

图1.3-32

图1.3-33
 

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

 


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


图1.3-5

压缩素材：将素材导入Mugeda时，我们需要将其压缩。

压缩方法一：PS压缩

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


图1.3-6

压缩方法二：TinyPNG压缩

输入网址https://tinypng.com/进入TinyPNG官网，将需压缩的文件拖进相应位置

图1.3-7

图1.3-8

等待其自动压缩


图1.3-9

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


图1.3-10

压缩方法三：Mugeda压缩

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


图1.3-11

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


图1.3-12

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



图1.3-13

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


图1.3-14

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

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

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


图1.3-1

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

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


图1.3-2

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


图1.3-3

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


图1.3-4

 

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

 
 
点击创建新作品，进入新作品操作页面。点击“从模板添加”按钮，


图1.2-83

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


图1.2-84

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


图1.2-85

图1.2-86

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


图1.2-87

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


图1.2-88

图1.2-89

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

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


图1.2-90
 

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

 

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


图1.2-67

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


图1.2-68

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


图1.2-69

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


图1.2-70

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


图1.2-71

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


图1.2-72

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


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


图1.2-74

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


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

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

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

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


图1.2-41

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


图1.2-42

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


图1.2-43

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


图1.2-44

图1.2-45

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


图1.2-46

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


图1.2-47

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


图1.2-48

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


图1.2-49

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


图1.2-50

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


图1.2-51

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


图1.2-52

同理，替换人物名字素材


图1.2-53

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


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


图1.2-55

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


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


图1.2-57

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


图1.2-58

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


图1.2-59

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


图1.2-60

图1.2-61

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


图1.2-62

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


图1.2-63

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


图1.2-64

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


图1.2-65

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


图1.2-66
 

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

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

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


图1.2-34

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


图1.2-35

选择音乐文件


图1.2-36

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


图1.2-37

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


图1.2-38

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


图1.2-39

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


图1.2-40
 

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

 

制作翻页动画

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


图1.2-26

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


图1.2-27

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


图1.2-28

图1.2-29

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


图1.2-30

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


图1.2-31

图1.2-32

制作翻页效果：在“翻页”菜单栏内设置翻页属性。

• 翻页效果：三维翻转；
• 退出效果：无；
• 翻页方向：左右翻页；
• 循环：是；
• 翻页时间：600毫秒；
• 保存并预览效果。

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

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

 


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


图1.2-15

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


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


图1.2-17

插入帧：鼠标拖动同时选中两个图层的第15帧（可自主调节帧数），右键→“插入帧”


图1.2-18

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


图1.2-19

图1.2-20

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


图1.2-21

图1.2-22

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


图1.2-23

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


图1.2-24

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


图1.2-25

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

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

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

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


图1.2-8

图1.2-9

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


图1.2-10

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


图1.2-11

图1.2-12

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


图1.2-13

图1.2-14

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