木疙瘩论坛-Mugeda bbs-H5制作工具-融媒体内容-交互新闻教程-微信图文编辑器

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

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

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

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

上传、添加动画：如下图所示，新建作品，进入操作页面。上传、添加背景查看全部

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

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

原创分享 • mingyueliu 发表了文章 • 9 个评论 • 17135 次浏览 • 2016-09-18 16:37 • 来自相关话题

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

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

添加背景音乐

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

图1.2-34

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

查看全部

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

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

原创分享 • mingyueliu 发表了文章 • 1 个评论 • 10204 次浏览 • 2016-09-18 16:24 • 来自相关话题

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

制作翻页动画

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

图1.2-26

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

图1 查看全部

想要了解更多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
以上操作素材可通过：“素材库——新手入门素材”中找到哦

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

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

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

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

图1.2-15

剪切、复制物查看全部

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

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

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

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

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

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

快速入门：添加预置动画

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

查看全部

想要了解更多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根据大众需求在自己的框架里设置好的动画效果，这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。

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

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

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

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

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

图1.2-1

上传素材：在“工具栏”中选择“图片”按钮，弹出“上传图片”对话框，点击“选择文件”，打开素材所查看全部

想要了解更多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功能？>>>猛戳我，学习更多教程

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

原创分享 • mingyueliu 发表了文章 • 35 个评论 • 87991 次浏览 • 2016-09-18 15:01 • 来自相关话题

一、新手必看

1、快速入门

1.1 Mugeda是什么？
1.2.1 快速入门：上传、添加素材
1.2.2 快速入门：添加预置动画
1.2.3 快速入门：在时间轴上制作关键帧动画
1.2.4 快速入门：制作翻页动画
1.2.5 快速入门：添加背景音乐
1.3 快速入门：快速制作一个摇一摇随机查看全部

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

分享的设置没有体现诶

贡献

BUG反馈 • ddbackhome 回复了问题 • 2 人关注 • 2 个回复 • 3850 次浏览 • 2016-09-18 14:26 • 来自相关话题

希望能将鼠标点击范围精确识别为矢量图形范围！

贡献

新功能需求 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4910 次浏览 • 2016-09-18 10:05 • 来自相关话题

账号登陆不进去了也无法找回

贡献

BUG反馈 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4001 次浏览 • 2016-09-18 10:03 • 来自相关话题

顶栏上面的文字怎么做

贡献

问题答疑 • totalacg 回复了问题 • 2 人关注 • 1 个回复 • 4016 次浏览 • 2016-09-17 12:16 • 来自相关话题

音频问题随时间线而播放

贡献

问题答疑 • totalacg 回复了问题 • 2 人关注 • 1 个回复 • 8927 次浏览 • 2016-09-16 21:09 • 来自相关话题

9月3日—9月9日技术问题汇总

问题答疑 • ddbackhome 发起了问题 • 2 人关注 • 0 个回复 • 9516 次浏览 • 2016-09-13 19:08 • 来自相关话题

插入设置了背景音乐之后插入的音效在手机上无法播放

贡献

问题答疑 • ddbackhome 回复了问题 • 3 人关注 • 2 个回复 • 4311 次浏览 • 2016-09-13 18:46 • 来自相关话题

回调函数，不回调了怎么办，前几天还是好的，今天突然不行的

贡献

问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 3858 次浏览 • 2016-09-13 17:52 • 来自相关话题

老师，我的动画和是可定制的，但今天点击定制后，出现定制表单，填完表单点击确定后却不转跳了，还停留在之前的页面，怎么回事啊

贡献

问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4086 次浏览 • 2016-09-13 17:51 • 来自相关话题

老师，为什么回调函数不管用了？前两天还好好的，今天就不行了

贡献

问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4000 次浏览 • 2016-09-13 17:50 • 来自相关话题

使用木疙瘩的魏体，浏览时却一句是魏体一句是别的字体

贡献

问题答疑 • ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 4602 次浏览 • 2016-09-13 17:44 • 来自相关话题

【Mugeda新功能教程】缩放功能

培训教程 • songyue 发表了文章 • 3 个评论 • 11117 次浏览 • 2016-09-12 17:14 • 来自相关话题

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
缩放功能分为两部分：
1、舞台缩放：对舞台显示内容的缩放，这个不改变物体的实际大小，只是改变显示的大小；
2、物体缩放：对物体的缩放，这个会改变物体的实际大小；

1、舞台缩放

舞台缩放功能位于舞台编辑区查看全部

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
缩放功能分为两部分：
1、舞台缩放：对舞台显示内容的缩放，这个不改变物体的实际大小，只是改变显示的大小；
2、物体缩放：对物体的缩放，这个会改变物体的实际大小；

1、舞台缩放

舞台缩放功能位于舞台编辑区域的右上角，并有一个实时帮助信息提示：

点击下拉框即可对舞台进行缩放。如果想要进行任意的缩放，可以点击键盘z键进入缩放模式，或者在屏幕左侧的工具栏上选择“缩放”工具。把鼠标放在“缩放”工具上，会弹出一个详细的缩放操作的说明。

同样的说明在缩放下拉框右侧也可以打开。

一些最常用的鼠标+键盘操作包括：
在缩放模式下， 1) 点击鼠标放大，Alt+鼠标左键点击缩小； 2) Shift + 鼠标左键点击: 恢复100%缩放； 3) 拖动鼠标左键可以拖动舞台；在任意情况下： 1) 按住空格键，左键拖动鼠标可以拖动舞台； 2) 右键拖动鼠标可以拖动舞台；

缩放舞台并不会改变数据。只是对舞台进行了缩放和放大，便于查看和编辑。

2.、物体缩放物体缩放的办法有两种：
本节视频教程请点击此处。

1) 普通缩放：选中物体，然后进入缩放编辑（点击键盘Q，或者从左侧工具栏选择“变形”工具；