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

 在工具条下找到表单工具，表单工具包括“输入框”“单选框”“多选框”“列表框”以及“表单”。


图2.7-1

 输入文字（输入框）

如图，在工具条下找到“输入框”按钮，点击在“舞台”上“姓名”右边位置添加一个输入框


图2.7-2

在输入框“属性”面板下调整相关属性，例如：
改变其字体为“黑体”，大小为“20”，
“提示文字”默认为“请输入”，
“类型”默认为“普通文本”，
“必填项”为“是”。
并用“变形”工具调整输入框在“舞台”上的大小与位置。


图2.7-3 收起阅读 »

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

 一、    Mugeda是什么？

Mugeda是一个专业级H5交互动画制作云平台，基于云平台计算框架，Mugeda无需任何下载和安装。

二、    如何进入Mugeda页面？

1）下载Google浏览器：（考虑有些浏览器对html5的支持不够，建议使用chrome浏览器），打开Google浏览器，输入www.mugeda.com
 进入Mugeda首页。

2）注册Mugeda账号：进入首页后，可点击右上角“注册”，通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。


图1.1-2

三、    Mugeda操作界面简单介绍

帮助手册：点击“立即体验“，会打开Mugeda的帮助手册，点击“预览”按钮即可观看整个平台的功能和基本操作。
 

图1.1-3

简单制作交互动画：Mugeda操作界面和Flash高度相似，因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外，设计师也无需添加任何代码即可完成复杂的交互。
 

图1.1-4

除了设计师，工程师在Mugeda中也大有所为，在“脚本”按钮中，工程师可以写入“JS”代码来制作自己想要的交互效果。


图1.1-5

手机观看：在Mugeda中制作出的H5作品支持随时手机观看，点击“通过二维码共享”按钮，可用手机扫描出现的二维码观看作品效果。
 

图1.1-6

发布作品：点击橙色“发布”按钮，可发布H5作品，用Mugeda平台发布的任何H5作品都没有Mugeda的Logo，大家可以放心使用。

共享、导出作品：Mugeda同时还支持动画作品的共享、导出。如图1.1-7，在“通过二维码共享”对话框中，可以选中“共享源文件”，复制共享作品编辑地址。
 

图1.1-7

同时还可以导出一个HTML5源文件部署在自己的服务器上，同样也不附Mugeda的Logo。除此之外，Mugeda还支持GIF、视频、PNG等格式的导出，基本覆盖现在流行的主流多媒体格式，功能十分强大。导出步骤：“文件”→“导出”→选择导出格式
 

图1.1-8

四、    团队管理

针对企业账号，Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形，在下拉菜单中选择“团队管理”，可进入团队管理页面。在管理页面中，可添加企业成员，方便进行人员及作品管理。企业账号与子账号，子账号与子账号之间可共享作品，十分方便。

 
图1.1-9

图1.1-10

五、    数据服务

Mugeda还提供专业的数据服务。针对每一个作品，我们可以在后台统计页面中浏览到数据。在数据页面，可以选择统计时间段、每个时段的浏览量与用户数，方便运营人员进行详细的分析。基于微信传播，Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
 

图1.1-11

六、    Mugeda动画交互作品展示

下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品：

动画：
 

图1.1-12

广告：


图1.1-13

测试：
 

图1.1-14

贺卡：
 

图1.1-15

电子绘本
 

图1.1-16

课件：
 

图1.1-17

游戏：
 

图1.1-18 收起阅读 »

一、什么是会员服务？付费可以得到那些好处？

Mugeda是专业级的HTML5交互动画制作云平台，设计师们可以使用免费版来开启你的H5创作之旅，在创作过程中无任何广告logo等图片，文字等内容。

同时为满足不同设计师的需求，我们还推出普通版和专业版。普通版和专业版在存储空间、发布次数、导出次数方面不限制次数（数量），你可以尽情的发挥您的H5创作才能。

普通版和付费版还有三个增值服务：

•  一对一问题答疑（专属老师通过在线QQ方式一对一为您解答问题）
•  案例课程包
•  精选模版（所有模版免费使用，每周更新）

 
>>>了解会员服务详情

二、如何选择适合自己的服务？

个人会员：建议个人（设计师），对H5感兴趣，且制作需求量比较大，对数据要求比较全面的Mu友购买。

企业会员：建议企业（设计师团队）购买，除免费会员和企业会员拥有的所有功能和权限外，企业会员亮点是具有账号管理，企业协同等功能，强烈建议企业购买。专业版的标准配置是1个主账号和2个账号，5G存储空间，您也可以根据自己的需求增加账号数量和存储空间。（如下图）


 
注意：免费版不可以单独增加存储空间，必须升级普通版或者专业版才可购买。

免费版：如果您对模版，案例课程，一对一问题答疑，企业系统等服务不感兴趣，但是制作H5的需求量很大，可以购买加量包来增加您的发布和导出次数。（如下图）



行业解决方案：我们为新媒体、数字出版、企业培训、高校合作等行业提供解决方案，如感兴趣请联系我们，手机电话: 18610181806



关于发票：购买Mugeda会员提供发票服务，>>>戳我开发票
 
>>>现在去购买会员
  收起阅读 »

Mugeda学院·北京站 我们来啦！ 
火速报名通道
 
课程时间：2个周末（10.15-10.16、10.22-10.23） 
上课时间：早10点至下午5点 
上课地点：北京市西城区车公庄大街4号新华1949园区
招生限额：35人
课程适合对象：UI设计师、平面设计师、动画设计师
 
课程内容（点击可看大图）


现在去报名
 
若报名过程有问题，可加班主任微信咨询：

  收起阅读 »

请问在木疙瘩上做的h5，放在手机上显示小了，怎么调试呢

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


 定义分享信息包括在微信里转发给朋友或朋友圈时的一个转发标题、转发描述和朋友圈的转发标题。

默认的方式：在操作页面右边的“分享”面板内填写转发标题、转发描述和朋友圈的转发标题内容即可



图2.6-29

定义分享信息方式：选中第1页，在“舞台”上添加一个矩形，点击矩形“添加/编辑行为”按钮进入“编辑行为”对话框


图2.6-30

选择“微信定制”→“定义分享信息”→触发条件：出现，点击“编辑”按钮进入“参数”对话框


图2.6-31

填写
分享标题：“我得了十分”；
分享描述：“这个游戏很好玩”；
点击“确认”，即当最后出现第1页时，分享的标题即“我得了十分”，分享描述为“这个游戏很好玩”


图2.6-32

在第2页添加一个矩形，点击其“添加/编辑行为”按钮，同理设置分享标题与分享描述内容


图2.6-33

填写
分享标题：“我得了二十分”；
分享描述：“游戏好玩”；
点击“确认”，即当最后出现第2页时，分享的标题即“我得了二十分”，分享描述为“游戏好玩”。此功能可针对游戏不同的结果分享不同的信息。


图2.6-34

当游戏不是分页设置回馈，而是用文本框的分数进行回馈时，定义分享信息方式如下：将游戏显示分数的文本框命名为“分数”


图2.6-35

点击设置定义分享信息功能的矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“微信定制”→“定义分享信息”→触发条件：出现，点击“编辑”按钮进入“参数”对话框


图2.6-36

图2.6-37

填写
分享标题：“我得了{ { 分数} }（提取“分数”文字框中的分值）分”；
分享描述：“这个游戏很好玩”；
点击“确认”，即当我们分享出去时，即可出现游戏中实时获取的分数。


图2.6-38
  收起阅读 »

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

 在“微信”工具栏下点击“录音”按钮，在“舞台”上会出现两个图标。


图2.6-18

如下图，第1个图标的自带编辑行为为“录制声音”，触发条件为“点击”


图2.6-19

第2个图标的功能为播放声音。


图2.6-20

点击“保存”


图2.6-21

点击“通过二维码共享”，用手机扫描生成的二维码，试验提取微信头像、昵称、定制图片、录制声音和播放声音的功能。


图2.6-22

用行为方式制作“录音”功能：如下图，在“舞台”上添加一个录音按钮素材，点击其“添加/编辑行为”按钮


图2.6-23

在“编辑行为”对话框中选择“微信定制”→“录制声音” →触发条件：点击，关闭对话框。


图2.6-24

如图，需上传一个音频文件：点击“声音”按钮，在弹出的“导入声音”对话框中点击“选择文件”，在弹出的本地文件库中选择音频文件，点击“上传”按钮上传文件，最后点击“添加”。


图2.6-25

为新添加进“舞台”的音频文件命名为“录音功能”。上传此音频的目的是用录制的声音替换现有的声音。


图2.6-26

重回录音按钮元素的“编辑行为”对话框，点击“编辑”进入“参数”对话框。


图2.6-27

设置“目标元素”为“录音功能”，点击“确认”。


图2.6-28 收起阅读 »

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

 在“微信”工具栏下点击“定制图片”按钮，在“舞台”上会出现一个圆形区域。


图2.6-12

我们观察到，该圆形区域也同样自带编辑行为，点击“添加/编辑行为”按钮，进入“编辑行为”对话框，发现自带的行为为“定制图片”，触发条件为“点击”


图2.6-13

用行为方式制作“定制图片”功能：如下图，在“舞台”上添加一个圆角矩形，点击其“添加/编辑行为”按钮


图2.6-14

在“编辑行为”对话框中选择“微信定制”→“定制图片” →触发条件：点击


图2.6-15

回到“舞台”，为圆角矩形命名为“定制图片”


图2.6-16

重新返回圆角矩形“编辑行为”对话框，点击“编辑”按钮，进入“参数”对话框，设置“目标元素”为“定制图片”，点击“确认”，即设置了定制图片功能。


图2.6-17 收起阅读 »

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

 在“微信”工具栏下点击“微信昵称”按钮，在“舞台”上会出现一个内容为“微信昵称”的文字框。


图2.6-7

我们发现，该文字框也自带编辑行为，点击“添加/编辑行为”按钮，进入“编辑行为”对话框。行为为“显示微信昵称”，触发条件为“出现”


图2.6-8

用行为方式提取微信昵称：如下图，在“舞台”上添加一个文本框，命名为“微信昵称”


图2.6-9

点击文本框的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“微信定制”→“显示微信昵称” →触发条件：出现，点击“编辑”按钮


图2.6-10

在“参数”对话框中选择“目标元素”为“微信昵称”，即设置了微信昵称功能。


图2.6-11 收起阅读 »

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

 如下图，在“微信”工具栏下点击“微信头像”按钮，在“舞台”上会出现一个圆形的微信头像区域


图2.6-1

我们发现，该微信头像的“添加/编辑行为”按钮已是绿色，点击进入“编辑行为”对话框，发现其已自带编辑行为，即行为为“显示微信头像”，触发条件为“出现”。


图2.6-2

图2.6-3

用行为方式提取微信头像：如下图，在“舞台”上添加一个矩形（圆形等各种形式），命名为“微信头像”


图2.6-4

点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“微信定制”→“显示微信头像” →触发条件：出现，点击“编辑”按钮


图2.6-5

在“参数”对话框中选择“目标元素”为“微信头像”，即设置了微信头像功能。


图2.6-6 收起阅读 »

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


 点赞功能为系统默认累加，每个用户只能允许点赞一次。如下图，在“控件”栏下找到“点赞”按钮，点击选中，在“舞台”上拖拉出一个点赞控件。


图2.4-36

点击预览，发现点1次，点赞上方数由0变成1，再次点击“取消点赞”，“1变成0”。


图2.4-37

选中“点赞”控件，在其“属性”面板下可修改各种属性，例如调整其文字颜色、位置、大小等。


图2.4-38

在每个人物下面添加一个“点赞”，即可设置成投票的形式。


图2.4-39
 
注：点赞的文字默认是白色，所以如果背景色是默认色，可以通过右侧属性栏来调整颜色，方便查看，如下图：


 
  收起阅读 »

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

 在“控件”工具栏下找到“擦玻璃”按钮，点击选中，在“舞台”上以拖拉的方式生成一个擦玻璃控件


图2.4-28

选中“舞台”上的擦玻璃控件，在其“属性”面板下可设置其各种属性，例如为其命名，改变背景图片（擦除后的图片）、前景图片（擦除前的图片）等。如下图，点击“背景图片”右边的“+”符号


图2.4-29

在弹出的“媒体库”对话框中选择一张图片素材。点击“添加”。


图2.4-30

同理，添加好前景图片


图2.4-31

点击“预览”，发现擦除了前景图片后，背景图片即出现。


图2.4-32
 
另外，我们还可以设置橡皮擦大小和剩余比例（即：擦除图片的大小和擦出剩余多少显示背景图片）



擦玻璃控件特有的触发条件：如下图，点击“舞台”上擦玻璃控件的“添加/编辑行为”按钮


图2.4-33

在弹出的“编辑行为”对话框下选择“下一页”，点击“触发条件”的下拉菜单，选择触发条件为：“擦玻璃完成”。


图2.4-34

点击添加新页面，点击预览观察效果，发现当我们将玻璃擦完后，自动跳转至下一页


图2.4-35
 
恢复擦玻璃初始状态：我们还可以通过选中元素，点击“添加/编辑行为”按钮——“动画播放控制”来设置，如下图：


 
  收起阅读 »

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

 在“控件”工具栏下找到“随机数”按钮，点击选中，在“舞台”上生成一个随机数。


图2.4-21

在其“属性”面板下可设置各种属性，例如为其命名为“随机数”，修改随机数固有属性：最小值为“0”、最大值为“500”、更新间隔为“0.1秒”，可点击预览效果。


图2.4-22

随机数的关联动画：以一个随机数关联图片的左坐标为案例进行讲解。

如下图，添加一张图片素材至“舞台”，随之点击添加随机数至“舞台”，在随机数的“属性”面板下改变其填充色为白色方便观察。


图2.4-23

设置随机数的固有属性：最大值为“500”、更新间隔为“1秒”


图2.4-24

选中“舞台”上的图片，在图片“属性”面板下点击图片“左”数值右边的“关联”按钮


图2.4-25

在“左”的关联下拉菜单下设置关联属性：
关联对象：“随机数”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“0”时被控量=“0”
当主控量=“500”时被控量=“-500”


图2.4-26

点击“预览”，发现每1秒钟图片都会随着随机数的数值变化位置


图2.4-27 收起阅读 »

 在“控件”工具栏下找到“定时器”按钮，点击选中，在“舞台”上生成一个定时器。


图2.4-10

可在其“属性”栏下设置调整定时器各项属性，例如为定时器命名为“A”、改变其颜色、文本、精度、计时方向、是否循环等。


图2.4-11

1.定时器的关联动画

定时器的功能应用：以一个定时器关联火箭上坐标的案例进行讲解
如下图，新建一个图层1，选中图层1第1帧，点击“素材库”，在“舞台”上添加一个火箭图像素材，使用“变形”工具调整火箭大小、位置等。


图2.4-12

选中火箭素材，在其“属性”面板下点击其“上”数值右边的“关联”按钮


图2.4-13

在“上”的关联下拉菜单下设置关联属性：
关联对象：“A”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“30”时被控量=“408”
当主控量=“0”时被控量=“0” 


图2.4-14

点击“预览”，发现火箭随着定时器数值的减少而往上移动


图2.4-15

同时，若将定时器的“精度”调整为“秒”时，观察动画效果，会发现火箭的移动出现卡顿效果。因此在用定时器制作动画时，为保证物体移动顺畅，最好将“精度”调整为“毫秒”。


图2.4-16

2.定时器的独有触发条件

如下图，点击定时器的“添加/编辑行为”按钮


图2.4-17

在弹出的“编辑行为”对话框下选择“下一页”，点击“触发条件”的下拉菜单，发现会多出两个触发条件：“定时器时间到”“定时器开始计时”，选择“定时器时间到”。


图2.4-18

在定时器的“属性”面板下将定时器长度（时间）改为“3秒”，并点击添加一个新页面


图2.4-19

点击“预览”，发现定时器时间到后会自动跳转至第2页面。


图2.4-20 收起阅读 »

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

 在工具栏内的“控件”工具栏下找到“陀螺仪”按钮，点击选中，在“舞台”上生成一个陀螺仪。


图2.4-1

可在其“属性”面板下调整陀螺仪的各个属性，例如为其命名为“陀螺仪”，改变其颜色、文本内容、陀螺仪类型（绕X轴旋转角、绕Y轴旋转角、绕Z轴旋转角）


图2.4-2

因为陀螺仪功能只限定于手机，PC端无法演示，因此可先保存作品，将其命名为“陀螺仪”


图2.4-3

通过“通过二维码共享”功能生成二维码，用手机扫描进行查看


图2.4-4

陀螺仪的数值关联：陀螺仪的数值可以关联到任何物体的任何数值性元素，接下来我们以一个陀螺仪关联图片左坐标的案例来解释陀螺仪数值的提取方法。

如下图，添加一张图片至“舞台”，点击“陀螺仪”按钮添加一个陀螺仪至“舞台”，为方便清楚观看，改变陀螺仪填充色为白色。


图2.4-5

在“属性”面板下改变陀螺仪的类型为“绕Y轴旋转角”
 

图2.4-6

点击选中“舞台”的图片，在图片“属性”面板下找到“左”数值右边的“关联”按钮，点击。


图2.4-7

在“左”的关联下拉菜单下设置关联属性：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-50”时被控量=“0”
当主控量=“50”时被控量=“649.8”（图像的极左值）


图2.4-8

点击“保存”，通过扫描二维码查看我们的作品，晃动手机即可看到图片与陀螺仪数值变化的关联情况。


图2.4-9 收起阅读 »

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

 1.添加链接方法一

点击“舞台”上的“跳转链接”按钮元素的“添加/编辑行为”，在弹出的“编辑行为”对话框中选择：“属性控制”→“跳转链接”→触发条件：点击。点击“编辑”按钮进入“参数”对话框



图2.4-102



图2.4-103

在“参数”对话框内输入需跳转页面的链接，选择“打开位置”为“当前页面”（在当前H5页面打开）或“新窗口”（打开一个新窗口）等，点击“确认”。即设置了点击“跳转链接”按钮便会跳转到目的页面。



图2.4-104

删除编辑行为：如下图，点击“舞台”上“跳转链接”按钮的“添加/编辑行为”按钮进入“编辑行为”对话框，点击原先添加的“跳转链接”行为右边的“×”符号，点击弹出的“确认删除”，删除“跳转链接”行为。


图2.4-105
 
2.添加链接方法二

在“跳转链接”按钮元素右侧的“属性”面板下的“动作”下拉菜单中选择“链接”



图2.4-106

在弹出的链接选框中输入相应链接，选择相应“打开位置”



图2.4-107
 
注：链接前面一定要加“http://”
  收起阅读 »

参考内容：素材与媒体（声音）

参考内容：定义分享信息
 
 

（跳转到《2.7表单》第六部分：表单提交）

参考内容：素材与媒体（可视化图表）

参考内容：改变图片

参考内容：录制用户声音

内容：播放声音/停止所有声音/控制声音
 
参考内容：素材与媒体（声音）

内容：播放视频/停止所有视频/控制视频
 
参考内容：素材与媒体（视频）

手机功能包括打电话、发短信、发送邮件、地图等功能。
 
本节视频教程请点击此处。

1.打电话

点击“舞台”上的“打电话”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“打电话”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-89

图2.4-90

在“参数”对话框内输入电话号码，点击“确认”。即设置了点击“打电话”按钮便会询问是否拨出之前输入的电话号码的行为（在手机端）。


图2.4-91

2.发短信

点击“舞台”上的“发短信”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“发短信”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-92

图2.4-93

在“参数”对话框内输入电话号码与消息内容，点击“确认”。即设置了点击“发短信”按钮便会询问是否发出短信内容至之前输入的电话号码的行为（在手机端）。


图2.4-94

3.发送邮件

点击“舞台”上的“发送邮件”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“发送邮件”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-95

图2.4-96

在“参数”对话框内输入邮箱地址、邮件标题、邮件内容，点击“确认”。即设置了点击“发送邮件”按钮便会询问是否发出邮件内容至之前输入的邮箱地址的行为（在手机端）。


图2.4-97

4.地图

点击“舞台”上的“地图”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“地图”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-98

图2.4-99

在“参数”对话框内输入地址、关键字，选择地图类型等，点击“确认”。即设置了点击“地图”按钮便会出现所指示地点的地图行为。


图2.4-100

如下图，点击“预览”观察行为效果


图2.4-101 收起阅读 »

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

 设置定时器行为有暂停定时器、继续定时器、重置定时器。

1.添加定时器

在操作页面左边工具栏的“控件”栏下，找到“定时器”按钮，点击添加一个定时器在“舞台”上。


图2.4-76

在其“属性”面板内将其命名为“定时器”


图2.4-77

2.暂停定时器

点击“舞台”上的“暂停”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-78


图2.4-79

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“暂停定时器”；
点击“确认”，即设置好了点击“暂停”按钮，即暂停“舞台”上定时器


图2.4-80

3.继续定时器

点击“舞台”上的“继续”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-81


图2.4-82

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“继续定时器”；
点击“确认”，即设置好了点击“继续”按钮，即继续“舞台”上定时器


图2.4-83

4.重置定时器

点击“舞台”上的“重置”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-84

图2.4-85

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“重置定时器”；
点击“确认”，即设置好了点击“重置”按钮，即重置“舞台”上定时器


图2.4-86
选中“舞台”上的定时器，在其“属性”面板内改变相关属性，例如，将“是否循环”选项改为“循环”


图2.4-87

点击预览效果


图2.4-88
  收起阅读 »

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

 改变图片即当点击或触发改变图片行为时，图片即会被改变。
如下图，分别将两张上传至“舞台”上的图片取名为“A”“B”


图2.4-70

图2.4-71

点击“改变图片”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“改变图片”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-72

在“参数”对话框内设置参数：
目标元素：“A”；
源元素名称：“B”；
点击“确认”，即设置好了点击“改变图片”按钮，即将图片A变成图片B的行为。


图2.4-73

点击“预览”


图2.4-74

同时，我们也可将需被改变的图片放置“舞台”中心，将用于替换的图片放置“舞台”之外不被用户看见，以此形成点击改变图片的效果。


图2.4-75 收起阅读 »

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

 本小节内容，如下图，观察元素的“属性”面板，在“属性”面板下无论是宽、高、左、上、透明度等可提取到的数值都可作为改变元素属性的属性。


图2.4-59

如下图，命名图像为“Mugeda”


图2.4-60

在“改变元素属性”按钮元素上添加改变元素属性行为。点击“舞台”上“改变元素属性”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“改变元素属性”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-61

在“参数”对话框内设置参数：
元素名称：“Mugeda”；
元素属性：“透明度”；
赋值方式：“用设置的值替换现有值”；
取值：“20”。
点击“确认”。即设置好了点击“改变元素属性”按钮，图像（Mugeda）的透明度值即从100变成20。


图2.4-62

点击预览效果


图2.4-63

同理，点击“改变元素属性”按钮元素的“添加/编辑行为”按钮，点击“编辑”按钮，在“参数”对话框内改变“元素属性”为“左”，其他参数不变。即设置好了点击“改变元素属性”按钮，图像（Mugeda）“左”的取值由原来数值（此案例为89.5）变成20（即图像与舞台左边的距离变成20，图像位置由右向左移动）的行为。


图2.4-64

图2.4-65

点击预览效果，发现点击“改变元素属性”按钮时图像位置由右向左移动至离“舞台”左20个值的距离。


图2.4-66

同理，点击“改变元素属性”按钮元素的“添加/编辑行为”按钮，点击“编辑”按钮，在“参数”对话框内改变“赋值方式”为“在现有值基础上增加”，其他参数不变，点击“确认”。即设置好了点击“改变元素属性”按钮，图像（Mugeda）“左”的取值在原来数值（此案例为89.5）基础上增加20（即图像与舞台左边的距离增加20，图像位置由左向右移动）的行为。


图2.4-67

点击预览，发现每点击“改变元素属性”按钮元素，图像会向右移动20个值（即图像离“舞台”左的距离增加20个值）


图2.4-68

同理，在“参数”对话框内，在“取值”输入框输入“-20”，即可设置图像距离往反方向改变的行为


图2.4-69 收起阅读 »

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

 本小节以案例的形式讲解。
 
本案例在讲解播放元件片段的各种行为之前，已做好一些基础铺垫：设置元件1动画如下图：

第1帧设置一个“暂停”行为


图2.4-48

第1至20帧设置火箭从下往上飞的动画行为


图2.4-49

第21-40帧设置火箭从上往下飞的动画行为


图2.4-50

将元件1拖至“舞台”，设置播放元件片段行为。点击“向上”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“播放元件片段”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-51

图2.4-52

在“参数”对话框内设置参数：
元件示例名称：“火箭”；
是否循环：“循环”；
起始帧号：“2”；
结束帧号：“20”。
点击“确认”。即设置好了点击“向上”按钮，播放元件1（火箭）第2至20帧动画（即向上飞的动画效果）


图2.4-53

点击“向下”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“播放元件片段”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-54

图2.4-55

在“参数”对话框内设置参数：
元件示例名称：“火箭”；
是否循环：“循环”；
起始帧号：“21”；
结束帧号：“40”。
点击“确认”。即设置好了点击“向下”按钮，播放元件1（火箭）第21至40帧动画（即向下飞的动画效果）


图2.4-56

需要注意的是在添加元件之前，要提前在元件“属性”面板中给元件命名，如下图，我们提前为元件1命名为“火箭”。


图2.4-57

点击预览效果


图2.4-58 收起阅读 »

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

 页的行为包括“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为。

1.跳转至下一页

如下图，点击“下一页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“下一页”→触发条件：点击。即设置好点击即跳转到下一页的行为。


图2.4-35


图2.4-36

2.跳转到页

如下图，点击“跳转到页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“跳转到页”→触发条件：点击。点击“编辑”按钮，进入“参数”对话框


图2.4-37


图2.4-38

在“参数”对话框内，选择页号为“2”，“翻页方式”为“淡入”，点击“确认”


图2.4-39

3.跳转至上一页

如下图，点击来到第2页，点击“上一页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“上一页”→触发条件：点击。即设置好点击即跳转到上一页的行为。


图2.4-40

图2.4-41

 如下图，可在右边“翻页”面板内设置“翻页效果””翻页方向”等属性


图2.4-42

4.禁止翻页

如下图，点击“禁止翻页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“禁止翻页”→触发条件：点击。即设置好点击即禁止上下翻页的行为。


图2.4-43

图2.4-44

5.恢复翻页

同理，点击“恢复翻页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“恢复翻页”→触发条件：点击。即设置好点击即恢复上下翻页的行为


图2.4-45

图2.4-46

点击预览效果。值得注意的是，“禁止翻页”“恢复翻页”行为效果只针对系统默认的翻页效果，对前面设置的各种翻页按钮不起作用。


图2.4-47 收起阅读 »