问题答疑

问题答疑

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

BUG反馈

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

原创分享

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

新功能需求

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

Mugeda培训

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

2.2.3 素材与媒体:网页

mingyueliu 发表了文章 • 3 个评论 • 587 次浏览 • 2016-09-20 15:48 • 来自相关话题

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

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





图2.2-23

在“舞台”右边的“属 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

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

2.2-23_.png

图2.2-23

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

2.2-24_.png

图2.2-24

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

2.2-25_.png

图2.2-25

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

2.2-26_.png

图2.2-26

2.5.5 行为:绘画板功能

songyue 发表了文章 • 0 个评论 • 893 次浏览 • 2016-09-20 15:33 • 来自相关话题

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

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




 
2、然后在舞台上通过拖拽添加一个画布控件(就像添加矩形 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

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

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

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

 
设置【仅显示清空和保存】的预览效果:
4.png

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

 
设置【不显示】的预览效果:
6.png

 
4、如果想自定义按钮,可以在舞台里添加按钮内容:
7.png

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


9.png

 

 

2.2.1 素材与媒体:图片/图片序列/GIF/PNG/SVG/JPG、以序列帧形式添加图片

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

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

本节视频教程请点击此处。
 
图片工具包含的格式有GIF、PNG、SVG、JPG文件。

1.    上传图片

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

点击“素材库”按钮,在弹出的“媒体库”中点击“添加文件夹”新建一个文 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。
 
图片工具包含的格式有GIF、PNG、SVG、JPG文件。

1.    上传图片

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

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

2.2-1_.png

图2.2-1

命名文件夹

2.2-2_.png

图2.2-2

在新建的文件夹下点击添加素材按钮,在“上传文件”对话框中点击“选择文件”选择所要上传的图片文件。
2.2-3_.png

图2.2-3
2.2-4_.png

图2.2-4
2.2-5_.png

图2.2-5

点击“上传”→“选择”

2.2-6_.png

图2.2-6

即将图片上传至素材库

2.2-7_.png

图2.2-7

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

2.2-8_.png

图2.2-8

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

2.2-9_.png

图2.2-9

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

2.2-10_.png

图2.2-10
2.2-11_.png

图2.2-11

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

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

2.2-12_.png

图2.2-12

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

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

2.2-13_.png

图2.2-13

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

2.2-14_.png

图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新功能教程】绘画板功能

2.1.8 Mugeda界面与舞台:属性面板

mingyueliu 发表了文章 • 2 个评论 • 566 次浏览 • 2016-09-20 14:58 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1.“属性面板”

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





图2.1-29

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

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

2.1-29_.png

图2.1-29

2.“元件库”

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

2.1-30_.png

图2.1-30

3.“翻页面板”

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

2.1-31_.png

图2.1-31

4.“分享面板”

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

2.1-32_.png

图2.1-32

5.“加载”设置

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

2.1-33_.png

2.1.5 Mugeda界面与舞台:工具条

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

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

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





图2.1-25

1.“选择”
“选择”工具板块下有“选择”“节点”“变形”“缩放比例”“快捷工具” 查看全部

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

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


home.png

图2.1-25

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

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

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

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

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

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

2.1.3 Mugeda界面与舞台:快捷工具栏

回复

mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 779 次浏览 • 2016-09-19 17:39 • 来自相关话题

​2.1.1 Mugeda界面与舞台:界面概览

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

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

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





图2.1-1

2. 工具箱(快捷工具栏)

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

 
本节视频教程请点击此处。
  
1. 常用菜单栏

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

2.1-1_.png

图2.1-1

2. 工具箱(快捷工具栏)

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

2.1-2_.png

图2.1-2

3. 时间线(时间轴)

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

2.1-3_.png

图2.1-3

4. 工具条

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

2.1-4_.png

图2.1-4

5. 页面栏

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

2.1-5_.png

图2.1-5

6. 舞台

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

2.1-6_.png

图2.1-6

7. 属性栏

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

2.1-7_.png

图2.1-7

2.1.2 Mugeda界面与舞台:菜单栏

回复

mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 791 次浏览 • 2016-09-19 17:32 • 来自相关话题

​1.6.3 作品创建前必读: 声音及视频处理

mingyueliu 发表了文章 • 0 个评论 • 882 次浏览 • 2016-09-19 16:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

注:Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M,选 查看全部

 
本节视频教程请点击此处。
 
本节知识点:添加声音、替换声音图标、添加视频、替换视频图标
  声音处理方式

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

1.3-15_.png

图1.3-15
1.3-16_.png

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

1.3-17_.png

图1.3-17

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

1.3-18_.png

图1.3-18

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

1.3-19_.png

图1.3-19
1.3-20_.png

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

1.3-21_.png

图1.3-21

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

1.3-22_.png

图1.3-22

视频处理方式

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

1.3-23_.png

 
图1.3-23

1.3-24_.png

图1.3-24

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

1.3-25_.png

图1.3-25

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

1.3-26_.png

图1.3-26

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

1.3-27_.png

图1.3-27

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

1.3-28_.png

图1.3-28

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

1.3-29_.png

图1.3-29

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

1.3-30_.png

图1.3-30

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

1.3-31_.png

图1.3-31

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

图1.3-32
1.3-33_.png

图1.3-33
 

​1.6.2 作品创建前必读: 图片的处理

mingyueliu 发表了文章 • 0 个评论 • 971 次浏览 • 2016-09-19 16:40 • 来自相关话题

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

图片素材处理:如果你的舞台是320*520(像素)大小,那么素材应处理成640*1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320 查看全部

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

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

1.3-5_.png

图1.3-5

压缩素材:将素材导入Mugeda时,我们需要将其压缩。

压缩方法一:PS压缩

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

1.3-6_.png

图1.3-6

压缩方法二:TinyPNG压缩

输入网址https://tinypng.com/进入TinyPNG官网,将需压缩的文件拖进相应位置
1.3-7_.png

图1.3-7
1.3-8_.png

图1.3-8

等待其自动压缩

1.3-9_.png

图1.3-9

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

1.3-10_.png

图1.3-10

压缩方法三:Mugeda压缩

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

1.3-11_.png

图1.3-11

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

1.3-12_.png

图1.3-12

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

1.3-13_.png


图1.3-13

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

1.3-14_.png

图1.3-14

1.6.1 作品创建前必读:手机屏幕适配方法

mingyueliu 发表了文章 • 2 个评论 • 1261 次浏览 • 2016-09-19 15:01 • 来自相关话题

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

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





图1.3-1

注:由于设备尺寸千差万 查看全部

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

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

1.3-1_.png

图1.3-1

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

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

1.3-2_.png

图1.3-2

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

1.3-3_.png

图1.3-3

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

1.3-4_.png

图1.3-4

 

​1.51 快速入门:学会使用Mugeda模板

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

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,





图1.2-83

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


查看全部

 
本节视频教程请点击此处。
 
点击创建新作品,进入新作品操作页面。点击“从模板添加”按钮,
1.2-83_.png


图1.2-83

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

1.2-84_.png

图1.2-84

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

1.2-85_.png

图1.2-85
1.2-86_.png

图1.2-86

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

1.2-87_.png

图1.2-87

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

1.2-88_.png

图1.2-88
1.2-89_.png

图1.2-89

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

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

1.2-90_.png

图1.2-90
 

​1.4.1 快速入门:H5作品相关设置-加载、文档信息

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

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

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





图1.2-67

设置颜色:点击 查看全部

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

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

1.2-67_.png

图1.2-67

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

1.2-68_.png

图1.2-68

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

1.2-69_.png

图1.2-69

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

1.2-70_.png

图1.2-70

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

1.2-71_.png

图1.2-71

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

1.2-72_.png

图1.2-72

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

1.2-73_.png

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

1.2-74_.png

图1.2-74

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

1.2-75_.png

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

1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题

mingyueliu 发表了文章 • 1 个评论 • 1087 次浏览 • 2016-09-18 16:49 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入 查看全部

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

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

1.2-41_.png

图1.2-41

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

1.2-42_.png

图1.2-42

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

1.2-43_.png

图1.2-43

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

1.2-44_.png

图1.2-44
1.2-45_.png

图1.2-45

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

1.2-46_.png

图1.2-46

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

1.2-47_.png

图1.2-47

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

1.2-48_.png

图1.2-48

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

1.2-49_.png

图1.2-49

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

1.2-50_.png

图1.2-50

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

1.2-51_.png

图1.2-51

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

1.2-52_.png

图1.2-52

同理,替换人物名字素材

1.2-53_.png

图1.2-53

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

1.2-54_.png

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

1.2-55_.png

图1.2-55

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

1.2-56_.png

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

1.2-57_.png

图1.2-57

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

1.2-58_.png

图1.2-58

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

1.2-59_.png

图1.2-59

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

1.2-60_.png

图1.2-60
1.2-61_.png

图1.2-61

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

1.2-62_.png

图1.2-62

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

1.2-63_.png

图1.2-63

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

1.2-64_.png

图1.2-64

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

1.2-65_.png

图1.2-65

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

1.2-66_.png

图1.2-66
 

1.2.5 快速入门: 添加背景音乐

mingyueliu 发表了文章 • 6 个评论 • 1090 次浏览 • 2016-09-18 16:37 • 来自相关话题

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

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

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





图1.2-34

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


查看全部


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

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

1.2-34_.png

图1.2-34

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

1.2-35_.png

图1.2-35

选择音乐文件

1.2-36_.png

图1.2-36

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

1.2-37_.png

图1.2-37

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

1.2-38_.png

图1.2-38

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

1.2-39_.png

图1.2-39

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

1.2-40_.png

图1.2-40
 

1.2.4 快速入门:制作翻页动画

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

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

制作翻页动画

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





图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其 查看全部

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

制作翻页动画

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

1.2-26_.png

图1.2-26

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

1.2-27_.png

图1.2-27

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

1.2-28_.png

图1.2-28
1.2-29_.png

图1.2-29

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

1.2-30_.png

图1.2-30

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

1.2-31_.png

图1.2-31
1.2-32_.png

图1.2-32

制作翻页效果:在“翻页”菜单栏内设置翻页属性。
  • 翻页效果:三维翻转;
  • 退出效果:无;
  • 翻页方向:左右翻页;
  • 循环:是;
  • 翻页时间:600毫秒;
  • 保存并预览效果。


1.2-33_.png

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

1.2.3 快速入门:在时间轴上制作关键帧动画

mingyueliu 发表了文章 • 2 个评论 • 1118 次浏览 • 2016-09-18 16:17 • 来自相关话题

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

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





图1 查看全部

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

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

1.2-15_.png

图1.2-15

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

1.2-16_.png

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

1.2-17_.png

图1.2-17

插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”

1.2-18_.png

图1.2-18

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

1.2-19_.png

图1.2-19
1.2-20_.png

图1.2-20

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

1.2-21_.png

图1.2-21
1.2-22_.png

图1.2-22

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

1.2-23_.png

图1.2-23

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

1.2-24_.png

图1.2-24

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

1.2-25_.png

图1.2-25

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

1.2.2 快速入门:添加预置动画

mingyueliu 发表了文章 • 1 个评论 • 991 次浏览 • 2016-09-18 16:01 • 来自相关话题

  想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
快速入门:添加预置动画

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



查看全部

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

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

1.2-8_.png

图1.2-8
1.2-9_.png

图1.2-9

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

1.2-10_.png

图1.2-10

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

1.2-11_.png

图1.2-11
1.2-12_.png

图1.2-12

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

1.2-13_.png

图1.2-13
1.2-14_.png

图1.2-14

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

1.2.1 快速入门:上传、添加素材

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

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。





图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击 查看全部

 
本节视频教程请点击此处。
 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。

1.2-1_.png

图1.2-1

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

1.2-2_.png

图1.2-2

1.2-3_.png

图1.2-3

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

1.2-4_.png

图1.2-4

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

1.2-5_.png

图1.2-5

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

1.2-6_.png

图1.2-6

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

1.2-7_.png

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

Mugeda百科全书——文本教程目录

mingyueliu 发表了文章 • 12 个评论 • 8198 次浏览 • 2016-09-18 15:01 • 来自相关话题

强烈建议Mu友们“关注”哦,在文章的右上角点击“关注”即可。每周更新
 
<New>•Mugeda最新教程​
1、辅助线功能
2、改变行为属性增加边框颜色和填充色
3、滤镜效果
4、首页加载的静态导出
5、投票、抽奖实时数据管理
6、文字变形动画
7、运动曲线编辑
8、计数 查看全部
强烈建议Mu友们“关注”哦,在文章的右上角点击“关注”即可。每周更新
 
<New>•Mugeda最新教程​
1、辅助线功能
2、改变行为属性增加边框颜色和填充色
3、滤镜效果
4、首页加载的静态导出
5、投票、抽奖实时数据管理
6、文字变形动画
7、运动曲线编辑
8、计数器组件
9、屏幕适配范围与安全框
 
1:Mugeda平台介绍
 
2:新手必看
2.1 Mugeda是什么?
2.2  Mugeda快速入门  
2.2.1:【快速入门】快速制作炫酷动画
2.2.2:【快速入门】无代码添加交互  
2.2.3:【快速入门】学会使用Mugeda模板
2.3  创建作品前必读 
2.3.1:【作品创建前必读】手机屏幕适配方法
2.3.2:【作品创建前必读】图片处理
2.3.3:【作品创建前必读】声音及视频处理
2.3.4:【作品创建前必读】屏幕适配设置
2.3.5:【作品创建前必读】发布和预览链接的区别
2.2.6:【作品创建前必读】H5作品相关设置
 
3:功能详解 
3.1 :界面与舞台 
3.1.1:【界面与舞台】简介
3.1.2:【界面与舞台】缩放层数据     
3.1.3:【界面与舞台】缩放舞台功能   
3.1.4:【界面与舞台】翻页的相关设置     
3.1.5:【界面与舞台】关键帧和页面的命名   
3.1.6:【界面与舞台】加载的相关设置   
3.1.7:【界面与舞台】物体属性设置
3.1.8:【界面与舞台】元件界面介绍
3.1.9:【界面与舞台】辅助线功能
3.1.10:【界面与舞台】滤镜效果
3.1.11:【界面与舞台】首页加载的静态导出
3.1.12:【界面与舞台】屏幕适配范围与安全框
 
3.2:素材与媒体      
3.2.1:【素材与媒体】图片上传/素材库
3.2.2:【素材与媒体】文本/文本段落
3.2.3:【素材与媒体】网页
3.2.4:【素材与媒体】幻灯片
3.2.5:【素材与媒体】视频
3.2.6:【素材与媒体】声音
3.2.7:【素材与媒体】声音的控制
3.2.8:【素材与媒体】绘制素材
3.2.9:【素材与媒体】云字体
3.2.10: 【素材与媒体】曲线图表
3.2.11:【素材与媒体】拖动动画
3.2.12:【素材与媒体】虚拟现实
3.2.13:【素材与媒体】粘贴第三方文字和图片
3.2.14:【素材与媒体】常用编辑操作 
3.2.15:【素材与媒体】导入PSD及注意事项
3.2.16:【素材与媒体】声音和视频的压缩
3.2.17:【素材与媒体】声音和视频的交互控制
 
3.3:动画 
3.3.1:【动画】时间轴及图层
3.3.2:【动画】选择工具
3.3.3:【动画】关键帧动画
3.3.4:【动画】路径动画
3.3.5:【动画】进度动画
3.3.6:【动画】曲线变形动画
3.3.7:【动画】预置动画
3.3.8:【动画】元件动画 
3.3.9:【动画】分页/加载页
3.3.10:【动画】遮罩动画
3.3.11:【动画】动画运动
3.3.12:【动画】标尺和辅助线的使用
3.3.13:【动画】复制帧/图层
3.3.14:【动画】如何实现动画控制
3.3.15:【动画】文字变形动画
3.3.16:【动画】运动曲线编辑
 
3.4:行为 
3.4.1:【行为】行为添加以及触发事件
3.4.2:【行为】帧的行为
3.4.3:【行为】页的行为
3.4.4:【行为】播放元件片段
3.4.5:【行为】改变元素属性
3.4.6:【行为】改变图片
3.4.7:【行为】设置定时器
3.4.8:【行为】手机功能
3.4.9:【行为】跳转链接
3.4.10:【行为】拖动的多种逻辑关系
3.4.11:【行为】舞台截图
3.4.12:【行为】改变行为属性增加方框颜色
 
3.5:控件 
3.5.1:【控件】陀螺仪
3.5.2:【控件】定时器
3.5.3:【控件】随机数
3.5.4:【控件】擦玻璃
3.5.5:【控件】点赞
3.5.6:【控件】绘画板
3.5.7:【控件】投票
3.5.8:【控件】抽奖
3.5.9:【控件】连线
3.5.10:【控件】拖动容器
3.5.11:【控件】投票、抽奖实时数据管理
3.5.12:【控件】计数器组件
 
3.6 微信功能 
3.6.1:【微信功能】微信头像/微信昵称
3.6.2:【微信功能】定制图片
3.6.3:【微信功能】录制声音
3.6.4:【微信功能】分享信息
 
3.7:表单 
3.7.1:【表单】自定义表单
3.7.2:【表单】系统默认表单
3.7.3:【表单】定制贺卡文字
 
3.8:关联绑定 
3.8.1:【关联绑定】舞台动画关联
3.8.2:【关联绑定】元件动画关联
3.8.3:【关联绑定】属性关联
3.8.4:【关联绑定】自动关联
3.8.5:【关联绑定】公式关联
3.8.6:【关联绑定】条件判断
3.8.7:【关联绑定】逻辑表达式判断
3.8.8:【关联绑定】多种表达式的写法
 
3.9:Mugeda API 
3.9.1:【Mugeda API】Mugeda API整体结构
3.9.2:【Mugeda API】在动画中插入脚本
3.9.3:【Mugeda API】使用自定义回调函数
3.9.4:【Mugeda API】通过API定义微信转发
3.9.5:【Mugeda API】获取Mugeda后台数据
3.9.6:【Mugeda API】部署第三方服务器
 
4:案例讲解 
4.1:展示动画 
4.1.1:【展示动画】邀请函
4.1.2:【展示动画】招聘
4.1.3:【展示动画】个人简历
4.1.4:【展示动画】可定制贺卡
4.1.5:【展示动画】手机广告
4.1.6:【展示动画】长按手指控制动画播放
4.1.7:【展示动画】2016网易娱乐圈画传
4.1.8:【展示动画】一只挖空心思的行礼箱
4.1.9:【展示动画】科幻风格H5的制作
 
4.2:UI原型 
4.2.1:【UI原型】小图标动画
4.2.2:【UI原型】用Mugeda巧做GIF
 
4.3:小游戏 
4.3.1:【小游戏】拍宇航员
4.3.2:【小游戏】手术刀
4.3.3:【小游戏】测试题
4.3.4:【小游戏】拖动选择
4.3.5:【小游戏】概率抽奖
4.3.6:【小游戏】声音测试题
4.3.7:【小游戏】真假朋友大质检
4.3.8:【小游戏】图片合成类H5的制作
4.3.9:【小游戏】60秒帮你摆脱朋友圈
 
4.4:微信/定制 
4.4.1:【微信/定制】和宝宝聊天
4.4.2:【微信/定制】和奥运冠军合影
 
4.5:热门案例      
4.5.1:【动画类】什么才是福
4.5.2:【长图拖动类】你玩过ROOM吗
4.5.3:【视频类】星巴克咖啡    
4.5.5:【交互游戏类】谁是足球明星
4.5.6:【小游戏类】拷问拍拍618机密    
4.5.7:【课件类】用HTML5做交互课件
4.5.8:【仿朋友圈类】CEO邀你群聊
4.5.9:【绘画板】里约大冒险
4.5.10:【全景3D】天猫宇宙邀请函
4.5.11:【视觉感】快闪
4.5.12:【交互游戏类】H5换装小游戏
4.5.13:视差类型H5的制作
4.5.14:【交互游戏类】H5版flappy bird
4.5.15:【交互游戏类】连连看小游戏
4.5.16:【视觉感】用遮罩做镜头特效
4.5.17:【绘画连线】网易5笔画爱

更多课程持续更新中……
 
Mugeda百科全书
111_副本.png

扫一扫把Mugeda教程装进手机里
 
5:其他文档教程
简约版教程:Mugeda简约版编辑界面介绍
Mugeda新功能教程:拖动组件的运用
Mugeda新功能教程:连线题的制作
Mugeda新功能教程:投票组件的使用
 
6:其他 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友提供的实用攻略