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

点击页面右下角“从模板中添加”按钮可从Mugeda自带模板中选择添加模板页面。


图2.1-27

每天的直播课程有录屏吗！上班都看不全！

• 想要了解更多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根据大众需求在自己的框架里设置好的动画效果，这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
 
以上操作素材可通过：“素材库——新手入门素材”中找到哦

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

 

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


图1.2-1

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


图1.2-2


图1.2-3

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


图1.2-4

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


图1.2-5

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


图1.2-6

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


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

一、新手必看
 
1、快速入门

1.1 Mugeda是什么？
1.2.1 快速入门：上传、添加素材
1.2.2 快速入门：添加预置动画
1.2.3 快速入门：在时间轴上制作关键帧动画
1.2.4 快速入门：制作翻页动画
1.2.5 快速入门： 添加背景音乐
1.3 快速入门：快速制作一个摇一摇随机出现结果的H5测试题
​1.4.1 快速入门：H5作品相关设置－加载、文档信息
1.4.2 快速入门：发布作品
​1.5 快速入门：学会使用Mugeda模板
​1.6 快速入门：导出视频和GIF动画的相关规则

2、作品创建前必读 

1.6.1 作品创建前必读：手机屏幕适配方法
1.6.2 作品创建前必读： 图片的处理
1.6.3 作品创建前必读： 声音及视频处理
1.6.3 作品创建前必读： 移动端H5页面音频/视频规范
 
二、功能详解
 
1、Mugeda界面与舞台
 
​2.1.1 Mugeda界面与舞台：界面概览
2.1.2 Mugeda界面与舞台：菜单栏
2.1.3 Mugeda界面与舞台：快捷工具栏
2.1.4 Mugeda界面与舞台：时间轴
2.1.5 Mugeda界面与舞台：工具条 
​2.1.6 Mugeda界面与舞台：页面栏
2.1.7 Mugeda界面与舞台：什么是舞台？
2.1.8 Mugeda界面与舞台：属性面板

2.  素材与媒体

2.2.1 素材与媒体：图片/图片序列/GIF/PNG/SVG/JPG等
2.2.2 素材与媒体：文本/富文本
2.2.3 素材与媒体：网页
2.2.4 素材与媒体：幻灯片
2.2.5 素材与媒体：视频
2.2.6 素材与媒体：声音
2.2.7 素材与媒体：绘制素材
2.2.8 素材与媒体：云字体
2.2.9 素材与媒体：可视化图表
2.2.10 素材与媒体：建组 、裁剪组​
 
3：动画
 
2.3.1 动画：时间轴以及图层 
2.3.2 动画：选择工具
2.3.3关键帧动画   
2.3.4 动画：路径动画
2.3.5 动画：进度动画   
2.3.6 动画：变形动画
2.3.7 动画：预置动画 
2.3.8 动画：元件动画
2.3.9 动画：分页/加载页
2.3.10 动画：遮罩
2.3.11 动画：动画运动
 
4：行为     

2.4.1 行为：行为添加以及触发事件
2.4.2 行为：帧的行为
2.4.4 行为：播放元件片段
2.4.5 行为：改变元素属性
2.4.6 行为：改变图片
2.4.7 行为：设置定时器
2.4.8 行为：手机事件
2.4.9 行为：视频控制
2.4.10 行为：声音控制
2.4.11 行为：录制声音
2.4.12 行为：选择上传图片
2.4.13 行为：修改图表数据
2.4.14 行为：提交表单
2.4.15 行为：定义分享信息
 
5、控件

2.5.1 行为：陀螺仪
2.5.2 行为：定时器
2.5.3 行为：随机数
2.5.4 行为：擦玻璃
2.5.5 行为：绘画板功能
2.5.6 行为：点赞

6：微信功能 

2.6.1 微信功能：微信头像
2.6.2 微信功能：微信昵称
2.6.3 微信定制：定制图片
2.6.4 微信定制：录制用户声音
2.6.5 微信功能：定义分享信息
 
7：表单

2.7.1 表单:输入文字（输入框）
2.7.2 表单:单选框
2.7.3 表单:多选框
2.7.4 表单:下拉菜单（列表框）
2.7.5 表单:表单提交
2.7.6 表单:默认表单／定制文字
2.8.1 关联绑定：动画关联
2.8.2 关联绑定：属性关联
2.8.3 关联绑定：自动关联
 
9、API

2.9.1 【API的应用】在动画中添加代码
2.9.2 【API的应用】Mugeda API的整体结构
2.9.3 【API的应用】Mugeda对象
2.9.4 【API的应用】scene对象
2.9.5 【API的应用】aObject对象
2.9.6 【API的应用】工具API
2.9.7 【API的应用】获取Mugeda后台数据
 
10、判断

2.10.1 判断:条件判断
2.10.2 判断:逻辑表达式判断

三：案例讲解
 
1、展示动画

3.1.1 【展示动画】邀请函
3.1.2 【展示动画】招聘
3.1.3 【展示动画】简历
3.1.4 【展示动画】贺卡
3.1.5 【展示动画】公司广告
3.1.6【展示动画】长按手指控制动画播放 
3.1.7【展示动画】2016网易娱乐圈画传 
3.1.8【展示动画】一只挖空心思的行礼箱 
3.1.9【展示动画】科幻风格H5的制作
3.1.10【展示动画】拖动长图类H5制作
3.1.11【展示动画】小爷吴亦凡

2、UI原型
 
3.2.1【UI原型】图标动效
3.2.2 【UI原型】用Mugeda巧做GIF

 3、小游戏
 
3.3.1 【游戏测试】手速测试
3.3.2 【游戏测试:】手术刀
3.3.3 【游戏测试】选择题
3.3.4 【游戏测试:】随机测试
 
4、微信定制
 
3.4.1 【微信定制 】和宝宝聊天
3.4.2 【微信定制 】和奥运冠军合影

5：热门案例      

3.5.1:【H5案例课】接东西小游戏H5
3.5.2:【H5案例课】拍拍员工被玩坏了
3.5.3:【H5案例课】交互动画类H5制作
3.5.4:【H5案例课】什么，才是福
3.5.5:【H5案例课】VR扫红包
3.5.6:【H5案例课】H5版Flappy Bird
3.5.7:【H5案例课】H5酷炫特效制作
3.5.8:【H5案例课】跳一跳小游戏
3.5.9:【H5案例课】连连看H5小游戏
3.5.10:【H5案例课】求职H5简历
3.5.11:【H5案例课】世界名画抖抖抖起来了
3.5.12:【H5案例课】教你做魔性H5弹幕
3.5.13:【H5案例课】画一个小人
3.5.13:【H5案例课】剪刀石头布小游戏
3.5.14:【H5案例课】足球小游戏
3.5.15:【H5案例课】房地产楼书H5制作
3.5.16:【H5案例课】在H5中插入“直播+弹幕”
3.5.17:【H5案例课】换装小游戏
3.5.18:【H5案例课】接东西H5小游戏
3.5.18:【H5案例课】天猫双十一宇宙邀请函
3.5.19:【H5案例课】重力感应类H5
3.5.20:【H5案例课】教你玩转密室逃脱类H5
3.5.21:【H5案例课】快闪制作
3.5.22:【H5案例课】交互视频类H5
3.5.23:【H5案例课】制作局部镜头特效
3.5.24:【H5案例课】测试题类型H5

更多课程持续更新中……

四：新功能教程

4.1.1【新功能教程】缩放功能
4.1.2【新功能教程】复制/粘贴/拖拽/添加图片
4.1.3【新功能教程】虚拟现实场景组件
4.1.4【新功能教程】最新上线的小功能
4.1.5【新功能教程】拖动组件的运用
4.1.6【新功能教程】连线题的制作
4.1.7【新功能教程】投票组件的使用
4.1.8【新功能教程】辅助线功能 
4.1.9【新功能教程】改变行为属性增加边框颜色和填充色 
4.1.10【新功能教程】滤镜效果 
4.1.11【新功能教程】首页加载的静态导出 
4.1.12【新功能教程】投票、抽奖实时数据管理 
4.1.13【新功能教程】文字变形动画 
4.1.14【新功能教程】运动曲线编辑
4.1.15【新功能教程】计数器组件 
4.1.16【新功能教程】屏幕适配范围与安全框
4.1.17【新功能教程】VR全景视频​
4.1.18【新功能教程】视频的跳转并播放功能（精确到秒）​

 
关于付费及发票
 
六：常见问题   （ Mu友友情贡献​）

【代码分享】显示前一个人的微信头像                               作者：zgs
【代码分享】VR功能实现GIF热点，获取VR坐标的功能         作者：zgs
【使用前必看】素材资源一贴整合（图片、声音、视频）       作者：mugedacn
【代码分享】三级菜单下拉框                                           作者：zgs
【代码分享】在mugeda内实现视频直播的方法                   作者：zg
【高级互动】如何用木疙瘩做游戏？                                 作者：Total恺 
查看定制的图片地址                                                      作者：zhongyue
转发后保留文本内容                                                      作者：zhongyue
使用回调函数跳转链接以及弹出默认系统提示                     作者：zhongyue
分享后的行为代码                                                         作者：zhongyue
【代码入门】如何在mugeda中，实现H5作品和外部 网页之间实现数据连接   作者：qq1f07c
如何在mugeda上无代码实现倒计时（天、时、分、秒）                             作者：qq1f07c
使用回调函数跳转链接以及弹出默认系统提示                                           作者：zgs
两种在标题中显示数量的方法（在作品中实时获取浏览量信息的方法）          作者：zgs
【代码分享】贴边UI功能！                                                                   作者： Total恺 
如何导入超过20M的视频文件/如何使用视频分享通用代码？                       作者： lian007 
【代码分享】倒计时代码                                                                      作者： lx_mgd
如何自定义绑定微信公众号                                                                   作者：zgs

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