新建作品——页面显示绿色是什么意思呢？
新建作品——页面显示绿色是什么意思呢？
绿色部分是舞台上显示的区域
注：如果舞台显示完整，是不会出现绿色框的。
绿色部分是舞台上显示的区域
注：如果舞台显示完整，是不会出现绿色框的。
2017年——技术常见问题汇总目录
强烈建议Mu友们“关注”哦，在文章的右上角点击“关注”即可。每周更新
6月21日—6月24日技术问题汇总
6月25日—7月1日 技术问题汇总
7月2日—7月8日 技术问题汇总
7月9日—7月15日问题汇总
7月16日—7月22日 问题汇总
7月23日—7月29 技术问题汇总
7月30日—8月05日 技术问题汇总
8月6日—8月12日 技术问题汇总
8月13日—8月19日 技术问题汇总
8月20日—8月26日 技术问题汇总
8月27日—9月2日 技术问题汇总
9月3日—9月9日 技术问题汇总
9月19日—9月25日 技术问题汇总
9月26日—9月30日 技术问题汇总
10月01日—10月09日 技术问题汇总
10月10日—10月16日 技术问题汇总
10月17日—10月23日 技术问题汇总
10月24日—10月30日 技术问题汇总
10月31日—11月6日 技术问题汇总
11月7日—11月13日 技术问题汇总
11月14日—11月20日 技术问题汇总
11月21日—11月27日 技术问题汇总
11月28日—12月4日 技术问题汇总
12月5日—12月11日 技术问题汇总
12月12日—12月18日 技术问题汇总
12月19日—12月25日 技术问题汇总
12月26日—1月01日 技术问题汇总
1月02日—1月08日 技术问题汇总
1月09日—1月15日 技术问题汇总
1月16日—1月22日 技术问题汇总
2017年
2月06日—2月12日 技术问题汇总
2月13日—2月19日 技术问题汇总
2月20日—2月26日 技术问题汇总
2月27日—3月05日 技术问题汇总
3月06日—3月12日 技术问题汇总
3月13日—3月19日 技术问题汇总
3月20日—3月26日 技术问题汇总
3月27日—4月2日 技术问题汇总
4月3日—4月9日 技术问题汇总
4月10日—4月16日 技术问题汇总
____________________________
5月10日—5月15日 技术问题汇总
5月16日—5月21日 技术问题汇总
5月22日—5月28日 技术问题汇总
5月29日—6月4日 技术问题汇总
6月5日—6月11日 技术问题汇总
6月12日—6月18日 技术问题汇总
6月19日—6月25日技术问题汇总
6月26日—7月2日技术问题汇总
7月3日—7月9日技术问题汇总
7月10日—7月16日技术问题汇总
7月17日—7月23日技术问题汇总
7月24日—7月30日技术问题汇总
7月31日—8月6日技术问题汇总
8月7日—8月13日技术问题汇总
8月14日—8月20日技术问题汇总
8月21日—8月27日技术问题汇总
8月28日—9月3日技术问题汇总
9月4日—9月10日技术问题汇总
9月11日—9月17日技术问题汇总
9月18日—9月24日技术问题汇总
9月25日—10月01日技术问题汇总
10月09日—10月15日技术问题汇总
10月16日—10月22日技术问题汇总
10月23日—10月29日技术问题汇总
11月6日—11月12日技术问题汇总
11月13日—11月19日技术问题汇总
11月20日—11月26日技术问题汇总
11月27日—12月3日技术问题汇总
12月4日—12月10日技术问题汇总
12月11日—12月17日技术问题汇总
12月18日—12月24日技术问题汇总
12月25日—12月31日技术问题汇总
★2017年最常见20个问题★ 收起阅读 »
6月21日—6月24日技术问题汇总
6月25日—7月1日 技术问题汇总
7月2日—7月8日 技术问题汇总
7月9日—7月15日问题汇总
7月16日—7月22日 问题汇总
7月23日—7月29 技术问题汇总
7月30日—8月05日 技术问题汇总
8月6日—8月12日 技术问题汇总
8月13日—8月19日 技术问题汇总
8月20日—8月26日 技术问题汇总
8月27日—9月2日 技术问题汇总
9月3日—9月9日 技术问题汇总
9月19日—9月25日 技术问题汇总
9月26日—9月30日 技术问题汇总
10月01日—10月09日 技术问题汇总
10月10日—10月16日 技术问题汇总
10月17日—10月23日 技术问题汇总
10月24日—10月30日 技术问题汇总
10月31日—11月6日 技术问题汇总
11月7日—11月13日 技术问题汇总
11月14日—11月20日 技术问题汇总
11月21日—11月27日 技术问题汇总
11月28日—12月4日 技术问题汇总
12月5日—12月11日 技术问题汇总
12月12日—12月18日 技术问题汇总
12月19日—12月25日 技术问题汇总
12月26日—1月01日 技术问题汇总
1月02日—1月08日 技术问题汇总
1月09日—1月15日 技术问题汇总
1月16日—1月22日 技术问题汇总
2017年
2月06日—2月12日 技术问题汇总
2月13日—2月19日 技术问题汇总
2月20日—2月26日 技术问题汇总
2月27日—3月05日 技术问题汇总
3月06日—3月12日 技术问题汇总
3月13日—3月19日 技术问题汇总
3月20日—3月26日 技术问题汇总
3月27日—4月2日 技术问题汇总
4月3日—4月9日 技术问题汇总
4月10日—4月16日 技术问题汇总
____________________________
5月10日—5月15日 技术问题汇总
5月16日—5月21日 技术问题汇总
5月22日—5月28日 技术问题汇总
5月29日—6月4日 技术问题汇总
6月5日—6月11日 技术问题汇总
6月12日—6月18日 技术问题汇总
6月19日—6月25日技术问题汇总
6月26日—7月2日技术问题汇总
7月3日—7月9日技术问题汇总
7月10日—7月16日技术问题汇总
7月17日—7月23日技术问题汇总
7月24日—7月30日技术问题汇总
7月31日—8月6日技术问题汇总
8月7日—8月13日技术问题汇总
8月14日—8月20日技术问题汇总
8月21日—8月27日技术问题汇总
8月28日—9月3日技术问题汇总
9月4日—9月10日技术问题汇总
9月11日—9月17日技术问题汇总
9月18日—9月24日技术问题汇总
9月25日—10月01日技术问题汇总
10月09日—10月15日技术问题汇总
10月16日—10月22日技术问题汇总
10月23日—10月29日技术问题汇总
11月6日—11月12日技术问题汇总
11月13日—11月19日技术问题汇总
11月20日—11月26日技术问题汇总
11月27日—12月3日技术问题汇总
12月4日—12月10日技术问题汇总
12月11日—12月17日技术问题汇总
12月18日—12月24日技术问题汇总
12月25日—12月31日技术问题汇总
★2017年最常见20个问题★ 收起阅读 »
9月26日—9月30日 技术问题汇总
1、Q：“由于网络异常本次发布失败!”怎么解决？
A：发布尺寸尽量在1080P以内，等网络状态有所改善之后再次发布即可。
2、Q：调色板选择完颜色后，没有正常关闭或者退出调色板，直接点舞台或者其它图形的话，会导致舞台或者其它图形也跟着变色？
A：是这样的，目的是为了方便的给多个元素设置相同的颜色属性。
3、Q：导出的代码放在自己的服务器上，会影响木疙瘩内置的统计吗？
A：不会影响。
4、Q：制作视频H5，在视频播放的时候，总是会跳到QQ浏览器中播放，播放结束后也会继续留在QQ浏览器中，需要按返回才能回到H5中。怎么才能实现在H5中直接播放？
A：如果你用QQ直接打开H5内容的话，默认是用QQ浏览器打开的，使用微信打开的话，视频是直接在H5内容本身中打开的。
5、Q：请问在木疙瘩上做的H5，放在手机上显示小了，怎么调试呢？
A：Mugeda拥有自适应功能，能让大小始终保持和显示区域一样，你可以在 【文件】→“文档信息”中选择自适应的类型！
6、Q：请问我做的作品是那种长版的 但是我在手机上面预览一直只显示其中的一部分，这是什么原因呢？
A：Mugeda拥有自适应功能，能让大小始终保持和显示区域一样，你可以在【文件】→“文档信息”中选择自适应功能，并且可以像网页那样上下滑动预览的类型的话，可以使用右侧工具栏【媒体】中的网页功能。
7、Q：我想做一个按钮的效果就是手指按下时按钮背景色变亮，抬起时背景色变暗，该怎么做呢？
A：把背景图片转换为元件，设置第一帧为变暗的图片，第二帧为变亮的图片，然后这两帧图片都添加“暂停”行为，触发方式为“出现”！然后回到舞台，给这个背景图片的元件命名（例如“背景”），然后在元件上增加两个“跳转到帧并停止”的行为，第一个行为设置跳转到第2帧，触发方式选择“手指按下”，第二章设置跳转到第1帧，触发方式选择“手指抬起”即可！
8、Q：微信定制里的录音功能，录制的声音怎么播放呢？
A：使用录音功能的前提是要有一个音频文件 用来存储录制的声音，你可以点击页面左侧的工具栏中-微信-录音；会在舞台上自动增加一个空的音频文件用来存储录制的声音，如图：
9、Q：我做完一个文件，但是太大了，想直接把舞台连同内容都一起改小，有什么方法吗？
A：舞台的大小可以通过属性面板直接设置，内容的大小选中图层后 单击鼠标右键通过‘缩放层数据’的功能来实现。
10、Q：如何做滚动字幕呢？
A：有很多种实现方法，可以用关键帧动画，也可以用幻灯片，甚至用行为也可以哦！
11、Q：我想问怎么可以得到别人的H5素材啊，或者抠的很好的图啊？
A：你可以把你想要的素材截图，到百度图片进行识图搜索，或者到其它素材网去搜索素材，只要是通用素材基本都是可以搜到的！我们的素材库里提供了一部分素材可以使用！
12、Q：批量上传图片时，上传到文件里的图片顺序会不会打乱？
A：默认是按名称顺序排序的。
13、Q：我想问一下H5有一种功能是能涂抹的，就是在手机看，提示涂抹，用手触摸涂抹，然后底下的文字就出现了。请问这个怎么达到的？
A：用左侧工具栏【控件】—【擦玻璃】
14、Q：高度适配的垂直居中和水平居中，有什么区别？例如：华为手机底部有返回键的底部栏，显示效果比iPhone上下都少一截，应该选择哪种适配效果？
A：上下能完整显示，建议选择宽度适配，给上下留好安全区域，我们的舞台是按照iphone5设置的。
15、Q：老师，在网上看到别的H5的作品，想得到他们的素材如何做？
A：用chrome浏览器打开作品，然后Ctrl+shift+i，在左侧network再刷新网页，就能看见所有素材。
16、Q：老师，我想做一个按钮的效果就是手指按下时按钮背景色变亮，抬起时背景色变暗，该怎么做呢？
A：首先，给背景图片添加【手指按下】和【手指抬起】行为，如图：
然后，展开编辑窗口，给两个行为分别添加参数，如图：
17、Q：做完一个文件，但是太大了，想直接把舞台连同内容都一起改小，有什么方法吗？
A：首先，在右侧属性栏里等比例缩小舞台，如图：
然后，在时间线选择要缩放的图层，右键【缩放层数据】，输入要调整的比例，如图：
18、Q：我在作品中加入了多个视频，在编辑时会看到视频的信息么（如视频名称）？因为有时候会忘记哪个是哪个。
A：在导入的时候就在属性栏取，如图：
19、Q：在一个页面，上半部有一个幻灯片和下半部几个描述，我想滑动幻灯片，幻灯片图片变换的时候，下面的描述根据图片显示相应的。
A：文字和图片做成一张图。
20、Q：如果加链接，但不想跳出这个H5要如何做？
A：选中要加链接的内容，在右侧的动作栏设置，如图：
21、Q：木疙瘩现在有说一说的留言墙插件吗？
A：目前没有
22、Q：能简单示范做个网友点赞，够一定数量后自动跳转下一帧的一个交互吗？
A：首先，做一个记录“点赞数”的文本框，并命好名字，如图：
然后，给文本框添加属性改变的行为，并在参数里设置，如图：
接着，给点赞数添加跳转到页的行为，设置相关参数，如图：
23、Q：请问怎么隐藏视频的进度条？
A：插入视频后，所有关于视频的设置都在舞台左侧属性里设置，如图：
24、Q：跳转的时候，能添加动画效果吗？
A：要添加【跳转到页】的行为，然后在参数设置里设置翻页方式，如图：
25、Q：点赞那个，每个网友只能点一次怎么设置呢？
A：直接用点赞的功能来做，这个控件直接带有每人一次的限制。
26、Q：就是之前看到过一个案例，播到一定时间的时候就出现了两个按钮，让你选择操作，然后接入两个不同的视频。
A：首先，在舞台上添加【定时器】控件，并取名，两个按钮也要取名；
然后，给定时器添加【属性改变】行为，元素名称及属性和赋值方式参考按钮即可，如图：
27、Q：请问老师，导出的gif动图为什么会连播两遍才会停下来？
A：勾掉菜单栏里，动画-循环按钮。
28、Q：好多APP打开时显示的“跳过n秒”的倒计时和倒计时后跳转到某一画面如何在H5中实现？
A：插入“定时器”控件，并在控件上设置时间，和时间到的跳转行为。
29、Q：用一个物体，怎么同时关联两个元件的运动？
A：首先，给两个元件做好动画；
然后，在舞台上绘制一个按钮，用来控制两个元件，并给按钮取名，比如“滑竿”，并添加水平拖动行为；
接着，给两个元件启用动画关联，如图：
30、Q：如果，点击按钮1，会随机出现A或者B。点击按钮2，随机出现C或者D。怎么做？
A：给按钮添加【跳转到帧并停止】的行为，跳转到帧要用英文状态下的“;”隔开即可。
收起阅读 »
A：发布尺寸尽量在1080P以内，等网络状态有所改善之后再次发布即可。
2、Q：调色板选择完颜色后，没有正常关闭或者退出调色板，直接点舞台或者其它图形的话，会导致舞台或者其它图形也跟着变色？
A：是这样的，目的是为了方便的给多个元素设置相同的颜色属性。
3、Q：导出的代码放在自己的服务器上，会影响木疙瘩内置的统计吗？
A：不会影响。
4、Q：制作视频H5，在视频播放的时候，总是会跳到QQ浏览器中播放，播放结束后也会继续留在QQ浏览器中，需要按返回才能回到H5中。怎么才能实现在H5中直接播放？
A：如果你用QQ直接打开H5内容的话，默认是用QQ浏览器打开的，使用微信打开的话，视频是直接在H5内容本身中打开的。
5、Q：请问在木疙瘩上做的H5，放在手机上显示小了，怎么调试呢？
A：Mugeda拥有自适应功能，能让大小始终保持和显示区域一样，你可以在 【文件】→“文档信息”中选择自适应的类型！
6、Q：请问我做的作品是那种长版的 但是我在手机上面预览一直只显示其中的一部分，这是什么原因呢？
A：Mugeda拥有自适应功能，能让大小始终保持和显示区域一样，你可以在【文件】→“文档信息”中选择自适应功能，并且可以像网页那样上下滑动预览的类型的话，可以使用右侧工具栏【媒体】中的网页功能。
7、Q：我想做一个按钮的效果就是手指按下时按钮背景色变亮，抬起时背景色变暗，该怎么做呢？
A：把背景图片转换为元件，设置第一帧为变暗的图片，第二帧为变亮的图片，然后这两帧图片都添加“暂停”行为，触发方式为“出现”！然后回到舞台，给这个背景图片的元件命名（例如“背景”），然后在元件上增加两个“跳转到帧并停止”的行为，第一个行为设置跳转到第2帧，触发方式选择“手指按下”，第二章设置跳转到第1帧，触发方式选择“手指抬起”即可！
8、Q：微信定制里的录音功能，录制的声音怎么播放呢？
A：使用录音功能的前提是要有一个音频文件 用来存储录制的声音，你可以点击页面左侧的工具栏中-微信-录音；会在舞台上自动增加一个空的音频文件用来存储录制的声音，如图：
9、Q：我做完一个文件，但是太大了，想直接把舞台连同内容都一起改小，有什么方法吗？
A：舞台的大小可以通过属性面板直接设置，内容的大小选中图层后 单击鼠标右键通过‘缩放层数据’的功能来实现。
10、Q：如何做滚动字幕呢？
A：有很多种实现方法，可以用关键帧动画，也可以用幻灯片，甚至用行为也可以哦！
11、Q：我想问怎么可以得到别人的H5素材啊，或者抠的很好的图啊？
A：你可以把你想要的素材截图，到百度图片进行识图搜索，或者到其它素材网去搜索素材，只要是通用素材基本都是可以搜到的！我们的素材库里提供了一部分素材可以使用！
12、Q：批量上传图片时，上传到文件里的图片顺序会不会打乱？
A：默认是按名称顺序排序的。
13、Q：我想问一下H5有一种功能是能涂抹的，就是在手机看，提示涂抹，用手触摸涂抹，然后底下的文字就出现了。请问这个怎么达到的？
A：用左侧工具栏【控件】—【擦玻璃】
14、Q：高度适配的垂直居中和水平居中，有什么区别？例如：华为手机底部有返回键的底部栏，显示效果比iPhone上下都少一截，应该选择哪种适配效果？
A：上下能完整显示，建议选择宽度适配，给上下留好安全区域，我们的舞台是按照iphone5设置的。
15、Q：老师，在网上看到别的H5的作品，想得到他们的素材如何做？
A：用chrome浏览器打开作品，然后Ctrl+shift+i，在左侧network再刷新网页，就能看见所有素材。
16、Q：老师，我想做一个按钮的效果就是手指按下时按钮背景色变亮，抬起时背景色变暗，该怎么做呢？
A：首先，给背景图片添加【手指按下】和【手指抬起】行为，如图：
然后，展开编辑窗口，给两个行为分别添加参数，如图：
17、Q：做完一个文件，但是太大了，想直接把舞台连同内容都一起改小，有什么方法吗？
A：首先，在右侧属性栏里等比例缩小舞台，如图：
然后，在时间线选择要缩放的图层，右键【缩放层数据】，输入要调整的比例，如图：
18、Q：我在作品中加入了多个视频，在编辑时会看到视频的信息么（如视频名称）？因为有时候会忘记哪个是哪个。
A：在导入的时候就在属性栏取，如图：
19、Q：在一个页面，上半部有一个幻灯片和下半部几个描述，我想滑动幻灯片，幻灯片图片变换的时候，下面的描述根据图片显示相应的。
A：文字和图片做成一张图。
20、Q：如果加链接，但不想跳出这个H5要如何做？
A：选中要加链接的内容，在右侧的动作栏设置，如图：
21、Q：木疙瘩现在有说一说的留言墙插件吗？
A：目前没有
22、Q：能简单示范做个网友点赞，够一定数量后自动跳转下一帧的一个交互吗？
A：首先，做一个记录“点赞数”的文本框，并命好名字，如图：
然后，给文本框添加属性改变的行为，并在参数里设置，如图：
接着，给点赞数添加跳转到页的行为，设置相关参数，如图：
23、Q：请问怎么隐藏视频的进度条？
A：插入视频后，所有关于视频的设置都在舞台左侧属性里设置，如图：
24、Q：跳转的时候，能添加动画效果吗？
A：要添加【跳转到页】的行为，然后在参数设置里设置翻页方式，如图：
25、Q：点赞那个，每个网友只能点一次怎么设置呢？
A：直接用点赞的功能来做，这个控件直接带有每人一次的限制。
26、Q：就是之前看到过一个案例，播到一定时间的时候就出现了两个按钮，让你选择操作，然后接入两个不同的视频。
A：首先，在舞台上添加【定时器】控件，并取名，两个按钮也要取名；
然后，给定时器添加【属性改变】行为，元素名称及属性和赋值方式参考按钮即可，如图：
27、Q：请问老师，导出的gif动图为什么会连播两遍才会停下来？
A：勾掉菜单栏里，动画-循环按钮。
28、Q：好多APP打开时显示的“跳过n秒”的倒计时和倒计时后跳转到某一画面如何在H5中实现？
A：插入“定时器”控件，并在控件上设置时间，和时间到的跳转行为。
29、Q：用一个物体，怎么同时关联两个元件的运动？
A：首先，给两个元件做好动画；
然后，在舞台上绘制一个按钮，用来控制两个元件，并给按钮取名，比如“滑竿”，并添加水平拖动行为；
接着，给两个元件启用动画关联，如图：
30、Q：如果，点击按钮1，会随机出现A或者B。点击按钮2，随机出现C或者D。怎么做？
A：给按钮添加【跳转到帧并停止】的行为，跳转到帧要用英文状态下的“;”隔开即可。
收起阅读 »
【公告】Mugeda优化了声音播放的相关问题
近期优化了声音播放的相关问题，优化内容如下：
1. 改进了声音自动播放的问题；
2. 改进了声音播放延时的问题；
操作方法：
在属性面板为声音打开预加载，或者在行为面板中为行为声音打开预加载，都会为声音开启预加载策略。
打开预加载后，在loading界面阶段，将下载整个声音数据。
随后，在支持的设备上，实现自动无延迟的播放声音。
效果：使用上面的处理后，声音在各种设备上表现。
说明：
1) 安卓4- 是指安卓4（含）及以下的机型；
2) 安卓5+ 是指安卓5（含）及以上的机型；
3) 需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关；
4) 需要App支持是指在App中需要调用API设置自动播放。
具体来讲：
在安卓中需要设置setMediaPlaybackRequiresUserGesture(false)
在iOS中需要设置UIWebView.mediaPlaybackRequiresUserAction=NO
5) 如果微信中没有启用X5内核（判断方式：访问http://debugtbs.qq.com/， 如果出现“您使用的为非X5内核浏览器”字样就不是X5内核），则需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关，才可以启用自动播放。
上表说明的情况适用于市面上大部分的机型。但是考虑到安卓设备碎片化严重，不排除有个别机型有例外。例如，非针对中国市场的手机（例如：从美国带回中国使用的手机），可能由于在Google Play上安装或者同步过软件可能导致在微信中不能自动播放声音。
由于安卓设备的碎片化问题，我们不承诺所有的设备和场景都能做到自动播放和无延时播放，但是对于绝大部分场景，目前的方案已经可以很好的解决上述问题。
收起阅读 »
1. 改进了声音自动播放的问题；
2. 改进了声音播放延时的问题；
操作方法：
在属性面板为声音打开预加载，或者在行为面板中为行为声音打开预加载，都会为声音开启预加载策略。
打开预加载后，在loading界面阶段，将下载整个声音数据。
随后，在支持的设备上，实现自动无延迟的播放声音。
效果：使用上面的处理后，声音在各种设备上表现。
说明：
1) 安卓4- 是指安卓4（含）及以下的机型；
2) 安卓5+ 是指安卓5（含）及以上的机型；
3) 需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关；
4) 需要App支持是指在App中需要调用API设置自动播放。
具体来讲：
在安卓中需要设置setMediaPlaybackRequiresUserGesture(false)
在iOS中需要设置UIWebView.mediaPlaybackRequiresUserAction=NO
5) 如果微信中没有启用X5内核（判断方式：访问http://debugtbs.qq.com/， 如果出现“您使用的为非X5内核浏览器”字样就不是X5内核），则需要在Mugeda IDE中为相关声音(对象或行为) 打开预加载开关，才可以启用自动播放。
上表说明的情况适用于市面上大部分的机型。但是考虑到安卓设备碎片化严重，不排除有个别机型有例外。例如，非针对中国市场的手机（例如：从美国带回中国使用的手机），可能由于在Google Play上安装或者同步过软件可能导致在微信中不能自动播放声音。
由于安卓设备的碎片化问题，我们不承诺所有的设备和场景都能做到自动播放和无延时播放，但是对于绝大部分场景，目前的方案已经可以很好的解决上述问题。
收起阅读 »
3.4.2 微信定制 :和奥运冠军合影
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如下图，点击添加一张合影照素材，再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方，移动“椭圆”至合影者头像位置，修改各素材大小、颜色等；
图3.4-25
点击椭圆的“添加/编辑行为”按钮；
图3.4-26
选择编辑行为为：“微信定制”→“定制图片”→触发条件：“点击”；
图3.4-27
在“微信”工具条下点击“录音”工具，在“舞台”上添加两个图标，调整两个图标的位置如下图；
图3.4-28
点击“预览”观察效果；
图3.4-29 收起阅读 »
本节视频教程请点击此处。
如下图，点击添加一张合影照素材，再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方，移动“椭圆”至合影者头像位置，修改各素材大小、颜色等；
图3.4-25
点击椭圆的“添加/编辑行为”按钮；
图3.4-26
选择编辑行为为：“微信定制”→“定制图片”→触发条件：“点击”；
图3.4-27
在“微信”工具条下点击“录音”工具，在“舞台”上添加两个图标，调整两个图标的位置如下图；
图3.4-28
点击“预览”观察效果；
图3.4-29 收起阅读 »
3.4.1 微信定制 :和宝宝聊天
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如下图，新建“底”图层，添加“微信输入框”图片素材，新建“第一个”图层，添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图
图3.4-1
选中“第一个”图层上的两个图片素材，右键→“组”→“组合”
图3.4-2
点击其“添加预置动画”按钮
图3.4-3
选择“浮入”的动画效果
图3.4-4
点击蓝色的“编辑预置动画”按钮
图3.4-5
在弹出的“动画选项”对话框中选择“时长”为“1”秒，默认“延迟”为“0”秒，“方向”为“下浮”，点击“确认”
图3.4-6
新建“图层2”
图3.4-7
鼠标选中“底”“第一个”两个图层的第2帧
图3.4-8
右键→“插入帧”
图3.4-9
点击选中“图层2”的第2帧，右键→“插入关键帧”
图3.4-10
如下图，在“图层2”第2帧上添加回复的头像、微信对话框图、文本框，为文本框命名为“聊天”，并调整各素材大小、位置等。
图3.4-11
图3.4-12
选中“图层2”的第1帧，点击“输入框”工具，在“舞台”上添加一个输入框
图3.4-13
为输入框命名为“输入”
图3.4-14
在“图层2”第1帧上添加一个矩形
图3.4-15
修改矩形透明度为“0”，点击该矩形的“添加/编辑行为”按钮
图3.4-16
在“编辑行为”对话框中添加两个行为：
“跳转下一帧”：“动画播放控制”→“下一帧”→触发条件：“点击”
“改变元素属性”：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮，设置参数
元素名称：“聊天”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“｛｛输入｝｝”，点击“确认”
图3.4-17
图3.4-18
点击“预览”观察效果
图3.4-19
点击“桃子”头像的“添加/编辑行为”对话框；
图3.4-20
在“编辑行为”对话框中选择“微信定制”→“显示微信头像”→触发条件：“出现”；
图3.4-21
如下图，在“微信”工具条下点击添加一个“微信昵称”，命名为“昵称”；
图3.4-22
点击“分享”面板，可输入分享信息为“｛｛昵称｝｝在和宝宝聊天”，同理可输入转发描述、朋友圈转发标题等内容，如下图。
图3.4-23
点击“保存”，点击“通过二维码共享”按钮，可用手机扫描二维码观察效果；
图3.4-24
收起阅读 »
本节视频教程请点击此处。
如下图，新建“底”图层，添加“微信输入框”图片素材，新建“第一个”图层，添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图
图3.4-1
选中“第一个”图层上的两个图片素材，右键→“组”→“组合”
图3.4-2
点击其“添加预置动画”按钮
图3.4-3
选择“浮入”的动画效果
图3.4-4
点击蓝色的“编辑预置动画”按钮
图3.4-5
在弹出的“动画选项”对话框中选择“时长”为“1”秒，默认“延迟”为“0”秒，“方向”为“下浮”，点击“确认”
图3.4-6
新建“图层2”
图3.4-7
鼠标选中“底”“第一个”两个图层的第2帧
图3.4-8
右键→“插入帧”
图3.4-9
点击选中“图层2”的第2帧，右键→“插入关键帧”
图3.4-10
如下图，在“图层2”第2帧上添加回复的头像、微信对话框图、文本框，为文本框命名为“聊天”，并调整各素材大小、位置等。
图3.4-11
图3.4-12
选中“图层2”的第1帧，点击“输入框”工具，在“舞台”上添加一个输入框
图3.4-13
为输入框命名为“输入”
图3.4-14
在“图层2”第1帧上添加一个矩形
图3.4-15
修改矩形透明度为“0”，点击该矩形的“添加/编辑行为”按钮
图3.4-16
在“编辑行为”对话框中添加两个行为：
“跳转下一帧”：“动画播放控制”→“下一帧”→触发条件：“点击”
“改变元素属性”：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮，设置参数
元素名称：“聊天”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“｛｛输入｝｝”，点击“确认”
图3.4-17
图3.4-18
点击“预览”观察效果
图3.4-19
点击“桃子”头像的“添加/编辑行为”对话框；
图3.4-20
在“编辑行为”对话框中选择“微信定制”→“显示微信头像”→触发条件：“出现”；
图3.4-21
如下图，在“微信”工具条下点击添加一个“微信昵称”，命名为“昵称”；
图3.4-22
点击“分享”面板，可输入分享信息为“｛｛昵称｝｝在和宝宝聊天”，同理可输入转发描述、朋友圈转发标题等内容，如下图。
图3.4-23
点击“保存”，点击“通过二维码共享”按钮，可用手机扫描二维码观察效果；
图3.4-24
收起阅读 »
3.3.4 游戏测试:随机测试
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如下图，在第1页面添加一张背景图
图3.3-130
新建“图层1”，添加“福袋”图片素材，点击“福袋”右边的“添加预置动画”按钮
图3.3-131
选择“悬摆”动画效果
图3.3-132
在其“属性”面板下打开“预置动画”的“循环播放”功能
图3.3-133
选中“图层1”上的第2帧，点击“素材库”按钮，选择要添加的两张图片素材，勾选“以序列帧形式添加”，点击“添加”
图3.3-134
补充“图层0”上的第2、3帧，点击“图层0”时间轴第3帧，右键→“插入帧”
图3.3-135
点击“福袋”的“添加/编辑行为”按钮，添加两个编辑行为：
“播放”行为：“动画播放控制”→“播放”→触发条件：“点击”
“暂停”行为：“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-136
点击“图层1”上的第4帧，点击“素材库”按钮，在“媒体库”中选择五张所需图片素材，勾选“以序列帧形式添加”，点击“添加”
图3.3-137
继续在“图层1”的第9、10帧上分别添加两张图片素材
图3.3-138
补充“图层0”上的帧数，选中“图层0”上第10帧，右键→“插入帧”
图3.3-139
新建“控制层”图层，点击“随机数”按钮在“舞台”上添加一个随机数，在其“属性”面板下为随机数命名为“抽奖”
图3.3-140
并设置其最大值最小值为“100”“1”
图3.3-141
如图，在第3帧出现的“爆炸”图片素材上，点击其“添加/编辑行为”按钮，设置行为：“动画播放控制”→“跳转到帧并停止”→触发条件：“出现”，点击“编辑”按钮
图3.3-142
在“参数”对话框中设置相关属性
帧号：4;5;6;7;8
执行条件：“检查元素状态”
元素名称：“抽奖”
考察属性：“文本取值”
逻辑条件：“大于”
参考值：“10”，点击“确认”返回“编辑行为”对话框
图3.3-143
如图，再添加一个“跳转到帧并停止”，触发条件为“出现”，点击“编辑”按钮
图3.3-144
在弹出的“参数”对话框中设置相关属性
帧号：9;10
执行条件：“检查元素状态”
元素名称：“抽奖”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“10”，点击“确认”
图3.3-145
可点击“预览”观察动画效果
图3.3-146
如图，可修改随机数的最大值最小值，改变随机数的随机范围以修改中大小奖的概率
图3.3-147 收起阅读 »
本节视频教程请点击此处。
如下图，在第1页面添加一张背景图
图3.3-130
新建“图层1”，添加“福袋”图片素材，点击“福袋”右边的“添加预置动画”按钮
图3.3-131
选择“悬摆”动画效果
图3.3-132
在其“属性”面板下打开“预置动画”的“循环播放”功能
图3.3-133
选中“图层1”上的第2帧，点击“素材库”按钮，选择要添加的两张图片素材，勾选“以序列帧形式添加”，点击“添加”
图3.3-134
补充“图层0”上的第2、3帧，点击“图层0”时间轴第3帧，右键→“插入帧”
图3.3-135
点击“福袋”的“添加/编辑行为”按钮，添加两个编辑行为：
“播放”行为：“动画播放控制”→“播放”→触发条件：“点击”
“暂停”行为：“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-136
点击“图层1”上的第4帧，点击“素材库”按钮，在“媒体库”中选择五张所需图片素材，勾选“以序列帧形式添加”，点击“添加”
图3.3-137
继续在“图层1”的第9、10帧上分别添加两张图片素材
图3.3-138
补充“图层0”上的帧数，选中“图层0”上第10帧，右键→“插入帧”
图3.3-139
新建“控制层”图层，点击“随机数”按钮在“舞台”上添加一个随机数，在其“属性”面板下为随机数命名为“抽奖”
图3.3-140
并设置其最大值最小值为“100”“1”
图3.3-141
如图，在第3帧出现的“爆炸”图片素材上，点击其“添加/编辑行为”按钮，设置行为：“动画播放控制”→“跳转到帧并停止”→触发条件：“出现”，点击“编辑”按钮
图3.3-142
在“参数”对话框中设置相关属性
帧号：4;5;6;7;8
执行条件：“检查元素状态”
元素名称：“抽奖”
考察属性：“文本取值”
逻辑条件：“大于”
参考值：“10”，点击“确认”返回“编辑行为”对话框
图3.3-143
如图，再添加一个“跳转到帧并停止”，触发条件为“出现”，点击“编辑”按钮
图3.3-144
在弹出的“参数”对话框中设置相关属性
帧号：9;10
执行条件：“检查元素状态”
元素名称：“抽奖”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“10”，点击“确认”
图3.3-145
可点击“预览”观察动画效果
图3.3-146
如图，可修改随机数的最大值最小值，改变随机数的随机范围以修改中大小奖的概率
图3.3-147 收起阅读 »
3.3.3 游戏测试:选择题
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如下图，在新建第1页面添加背景图片。添加两个文本框，分别输入文字内容为“小学教学课件”（标题）、“开始”（点击开始按钮），在其“属性”面板下调整素材大小、颜色以及位置等属性。
图3.3-90
点击“开始”文本框的“添加/编辑行为”按钮
图3.3-91
在其“编辑行为”对话框中添加两个行为
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
图3.3-92
新建第2页，同理添加背景图片，添加四个文本框，分别输入“1+1=（？）”（题目）、“1”“2”“3”（答案选项），调整各元素的大小、位置等
图3.3-93
同理，添加背景图片，添加三个文本框，分别输入“你答对了”“0”“题”（答案结果提示）
图3.3-94
如下图，在“属性”面板下为“0”文本框命名为“分数”
图3.3-95
点击正确答案选项文本框（此题为“2”）的“添加/编辑行为”按钮
图3.3-96
在其“编辑行为”对话框中添加两个行为
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”；
“改变元素属性”行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮，在“参数”对话框中设置
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“在现有值基础上增加”
取值：“1”，点击“确认”
图3.3-97
图3.3-98
点击错误答案“1”文本框的“添加/编辑行为”按钮
图3.3-99
添加“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
图3.3-100
同理，如下图，设置错误答案“3”文本框的编辑行为为“跳转下一页”
图3.3-101
如下图，点击“复制页面”按钮，复制多个“问题”页面
图3.3-102
在新页面上修改每一个题目以及答案选项
图3.3-103
依次类推添加多个题目以及选项，丰富选择题内容
四、拖动选择
如下图，添加一个背景图片，添加四个文本框，分别输入文字内容为“守”“株”“待”“兔”，调节字体大小、颜色、位置等属性。
图3.3-104
同理，添加四个矩形元素，在“属性”面板下调节填充色为透明色，线条类型为“点线”
图3.3-105
排版：全选四个矩形，右键→“对齐”→“上”
图3.3-106
排版：全选四个矩形，右键→“对齐”→“均分宽度”
图3.3-107
分别在“属性”面板下为“守”“株”“待”“兔”四个文本框命名为“守”“株”（视频中为“zhu”）“待”“兔”
图3.3-108
分别在“守”“株”“待”“兔”四个“属性”面板下为其设置“拖动/旋转”类型为“自由拖动”
图3.3-109
新建文本框，输入内容为“0”，命名为“判断”
图3.3-110
点击第一个矩形元素的“添加/编辑行为”按钮，设置编辑行为：“属性控制”→“改变元素属性”→触发条件：“拖动物体放下”，点击“编辑”按钮
图3.3-111
设置“参数”
元素名称：“判断”
元素属性：“文本取值”
赋值方式：“在现有值基础上增加”
取值：“1”
拖动物体名称：“守”，点击“确认”
图3.3-112
分别复制第一个矩形的编辑行为至第二、三、四个矩形上：选中第一个矩形，右键→“复制行为”
图3.3-113
分别选中第二、三、四个矩形，右键→“粘贴行为”
图3.3-114
点击第二个矩形的绿色编辑行为按钮，进入“编辑行为”对话框
图3.3-115
点击“改变元素属性”行为的“编辑”按钮，进入“参数”对话框
图3.3-116
改变“拖动物体名称”为“株”（视频中为“zhu”），点击“确认”
图3.3-117
同理，改变第三、四个矩形的编辑行为中“拖动物体名称”分别为“待”“兔”
图3.3-118
图3.3-119
新建第2页面，添加背景图片、文本框，在文本框中输入文字内容为“恭喜你答对了”，修改字体、大小、位置等属性
图3.3-120
点击“分数”文本框的“添加/编辑行为”按钮
图3.3-121
添加两个编辑行为
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”；
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“属性改变”，点击“编辑”按钮，设置参数
执行条件：“检查元素状态”
元素名称：“判断”
参考属性：“文本取值”
逻辑条件：“等于”
参考值：“4”
图3.3-122
图3.3-123
新建第3页面，添加背景图片、文本框，在文本框中输入文字内容为“很遗憾再接再厉”，修改字体、大小、位置等属性
图3.3-124
如下图，点击回到第1页面，添加定时器，修改“长度”为“10”秒
图3.3-125
点击定时器“添加/编辑行为”按钮
图3.3-126
在“编辑行为”对话框中选择：“动画播放控制”→“跳转到页”→触发条件：“定时器时间到”，点击“编辑”按钮
图3.3-127
在“参数”对话框中选择“页号”为“3”，点击“确认”
图3.3-128
点击“预览”观察效果
图3.3-129 收起阅读 »
本节视频教程请点击此处。
如下图，在新建第1页面添加背景图片。添加两个文本框，分别输入文字内容为“小学教学课件”（标题）、“开始”（点击开始按钮），在其“属性”面板下调整素材大小、颜色以及位置等属性。
图3.3-90
点击“开始”文本框的“添加/编辑行为”按钮
图3.3-91
在其“编辑行为”对话框中添加两个行为
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
图3.3-92
新建第2页，同理添加背景图片，添加四个文本框，分别输入“1+1=（？）”（题目）、“1”“2”“3”（答案选项），调整各元素的大小、位置等
图3.3-93
同理，添加背景图片，添加三个文本框，分别输入“你答对了”“0”“题”（答案结果提示）
图3.3-94
如下图，在“属性”面板下为“0”文本框命名为“分数”
图3.3-95
点击正确答案选项文本框（此题为“2”）的“添加/编辑行为”按钮
图3.3-96
在其“编辑行为”对话框中添加两个行为
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”；
“改变元素属性”行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮，在“参数”对话框中设置
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“在现有值基础上增加”
取值：“1”，点击“确认”
图3.3-97
图3.3-98
点击错误答案“1”文本框的“添加/编辑行为”按钮
图3.3-99
添加“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
图3.3-100
同理，如下图，设置错误答案“3”文本框的编辑行为为“跳转下一页”
图3.3-101
如下图，点击“复制页面”按钮，复制多个“问题”页面
图3.3-102
在新页面上修改每一个题目以及答案选项
图3.3-103
依次类推添加多个题目以及选项，丰富选择题内容
四、拖动选择
如下图，添加一个背景图片，添加四个文本框，分别输入文字内容为“守”“株”“待”“兔”，调节字体大小、颜色、位置等属性。
图3.3-104
同理，添加四个矩形元素，在“属性”面板下调节填充色为透明色，线条类型为“点线”
图3.3-105
排版：全选四个矩形，右键→“对齐”→“上”
图3.3-106
排版：全选四个矩形，右键→“对齐”→“均分宽度”
图3.3-107
分别在“属性”面板下为“守”“株”“待”“兔”四个文本框命名为“守”“株”（视频中为“zhu”）“待”“兔”
图3.3-108
分别在“守”“株”“待”“兔”四个“属性”面板下为其设置“拖动/旋转”类型为“自由拖动”
图3.3-109
新建文本框，输入内容为“0”，命名为“判断”
图3.3-110
点击第一个矩形元素的“添加/编辑行为”按钮，设置编辑行为：“属性控制”→“改变元素属性”→触发条件：“拖动物体放下”，点击“编辑”按钮
图3.3-111
设置“参数”
元素名称：“判断”
元素属性：“文本取值”
赋值方式：“在现有值基础上增加”
取值：“1”
拖动物体名称：“守”，点击“确认”
图3.3-112
分别复制第一个矩形的编辑行为至第二、三、四个矩形上：选中第一个矩形，右键→“复制行为”
图3.3-113
分别选中第二、三、四个矩形，右键→“粘贴行为”
图3.3-114
点击第二个矩形的绿色编辑行为按钮，进入“编辑行为”对话框
图3.3-115
点击“改变元素属性”行为的“编辑”按钮，进入“参数”对话框
图3.3-116
改变“拖动物体名称”为“株”（视频中为“zhu”），点击“确认”
图3.3-117
同理，改变第三、四个矩形的编辑行为中“拖动物体名称”分别为“待”“兔”
图3.3-118
图3.3-119
新建第2页面，添加背景图片、文本框，在文本框中输入文字内容为“恭喜你答对了”，修改字体、大小、位置等属性
图3.3-120
点击“分数”文本框的“添加/编辑行为”按钮
图3.3-121
添加两个编辑行为
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”；
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“属性改变”，点击“编辑”按钮，设置参数
执行条件：“检查元素状态”
元素名称：“判断”
参考属性：“文本取值”
逻辑条件：“等于”
参考值：“4”
图3.3-122
图3.3-123
新建第3页面，添加背景图片、文本框，在文本框中输入文字内容为“很遗憾再接再厉”，修改字体、大小、位置等属性
图3.3-124
如下图，点击回到第1页面，添加定时器，修改“长度”为“10”秒
图3.3-125
点击定时器“添加/编辑行为”按钮
图3.3-126
在“编辑行为”对话框中选择：“动画播放控制”→“跳转到页”→触发条件：“定时器时间到”，点击“编辑”按钮
图3.3-127
在“参数”对话框中选择“页号”为“3”，点击“确认”
图3.3-128
点击“预览”观察效果
图3.3-129 收起阅读 »
3.3.2 游戏测试:手术刀
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如下图，点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材，并修改“舞台”颜色为黄色
图3.3-26
点击新建第2页面，点击“素材库”添加一个手术刀图像元素，点击“线条”工具在“舞台”上绘制一个线条，并修改其线条类型为“点线”
图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图
图3.3-28
再添加一个文本框，命名为“分数”，输入内容为“0”，并调整大小、字体颜色等属性
图3.3-29
新建“图层1”，将“图层0”上的手术刀剪切粘贴进“图层1”上，改变手术刀“Z轴旋转角度”为“-90”，调整其大小位置如下图
图3.3-30
新建“图层2”，在该图层添加一个手指点击的图片素材，同时添加一个文本框，输入文字内容为“按住屏幕，开始手术”，调整字体大小、颜色等属性如下图
图3.3-31
修改“图层0”名称为“底部”，“图层1”名称为“手术刀”，“图层2”名称为“提示”
图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置，右键→“插入帧”
图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧
图3.3-34
选中“手术刀”图层关键帧之后的任意一帧，右键→“插入关键帧动画”
图3.3-35
点击选中“手术刀”图层的最后一帧，将“舞台”上的手术刀移至最上“杀人”位置
图3.3-36
新建“图层3”，在该图层第2帧右键→“插入关键帧”
图3.3-37
将原来的虚线复制一份，粘贴进“图层3”第2帧上，修改线条颜色为红色，线条类型为“实线”
图3.3-38
点击“图层3”关键帧之后的任意一帧，右键→“插入曲线变形动画”
图3.3-39
选择“图层3”第2帧，使用“节点”工具将曲线的最上一个节点向下移至底端
图3.3-40
点击“预览”观察效果，发现红线会随着手术刀向上的动画也向上延伸
图3.3-41
如下图，当手术刀移至“完美”阶段时，时间轴运动到27帧
图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧，右键→“插入关键帧”
图3.3-43
同理，观察到当手术刀移至“及格”阶段时，时间轴运动到19帧
图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧，右键→“插入关键帧”
图3.3-45
为手术刀素材命名为“刀子”
图3.3-46
观察，当手术刀在最底端位置时，其“上”值为“467.6”
图3.3-47
观察，当手术刀在“及格”位置时，其“上”值为“184.9”
图3.3-48
观察，当手术刀在“完美”位置时，其“上”值为“51.9”
图3.3-49
观察，当手术刀在“杀人”位置时，其“上”值为“2”
图3.3-50
如下图，选中“分数”文本框，在其“属性”面板下点击文字内容右边的“关联”按钮，在下拉的关联属性菜单栏下设置
关联对象：“刀子”
关联属性：“上”
关联方式：“自动关联”
当主控量=“467.6”（手术刀在最底端位置）时被控量=“0”
当主控量=“184.9”（手术刀在“及格”位置）时被控量=“60”
当主控量=“51.9”（手术刀在“完美”位置）时被控量=“100”
当主控量=“2”（手术刀在“杀人”位置）时被控量=“0”
图3.3-51
图3.3-52
为手指点击图像添加一个出现即暂停行为：如下图，点击手指右边的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-53
新建图层“控制层”，并将“图层3”重命名为“红线”
图3.3-54
在“控制层”图层添加一个矩形，调整大小使其符合“舞台”大小，并调整其透明度为“0”
图3.3-55
点击矩形右下角的“添加/编辑行为”按钮，为其添加两个编辑行为：
“动画播放控制”→“播放”→触发条件：“手指按下”
“动画播放控制”→“下一页”→触发条件：“手指抬起”
图3.3-56
新建第3页面，暂时添加一张图片素材
图3.3-57
点击“预览”观察动画效果
图3.3-58
制作第3页：如下图，在第3页添加一个文本框，输入文字内容为“0”，调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮，设置关联属性
关联对象：“分数”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值
图3.3-59
点击“舞台”上的图片元素，右键→“转换为元件”
图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中，点击时间轴上第4帧，右键→“插入帧”
图3.3-61
点击图片元件的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-62
同时选中时间轴上的2、3、4帧，右键→“插入关键帧”
图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮，在弹出的“媒体库”中选择所需的图片素材，点击“添加”，替换原有的图片
图3.3-64
图3.3-65
同理，替换第3、4帧上的图片
图3.3-66
图3.3-67
点击回到“舞台”，将元件命名为“评判”
图3.3-68
点击到第2页面，点击“控制层”上矩形的“添加/编辑行为”按钮
图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为：“动画播放控制”→“跳转到帧并停止”
图3.3-70
修改“触发条件”为“手指抬起”，依次填写描述为“100分”“80”“60”“死”
图3.3-71
点击“100分”行为的“编辑”按钮
图3.3-72
设置“参数”
帧号：“3”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“100”，点击“确认”
图3.3-73
同理点击“80”行为的“编辑”按钮
图3.3-74
设置“参数”
帧号：“2”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“80”，点击“确认”
图3.3-75
同理点击“60”行为的“编辑”按钮
图3.3-76
设置“参数”
帧号：“1”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“60”，点击“确认”
图3.3-77
同理点击“死”行为的“编辑”按钮
图3.3-78
设置“参数”
帧号：“4”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“刀子”
考察属性：“上”
逻辑条件：“小于等于”
参考值：“51”（手术刀在“完美”左右位置），点击“确认”
图3.3-79
注意：Mugeda的行为逻辑是从上往下的顺序执行的，我们首先会执行“播放”的行为，然后是“跳转下一页”的行为，其次是100分的“跳转到帧并停止”行为，同理依次执行其他行为。若中间有一个行为条件不满足，则不会继续执行下一行为。
图3.3-80
点击“预览”观察动画效果
图3.3-81
制作“再来一次”按钮：在第3页面添加按钮素材，添加文本框，输入文本框内容为“再来一次”
图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件：“点击”，点击“编辑”按钮
图3.3-83
在“参数”对话框中填写帧号为“1”，点击“确认”
图3.3-84
回到“编辑行为”对话框后再加一个行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮
图3.3-85
设置“参数”
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为
图3.3-86
点击到第1页面，点击“开始游戏”按钮的“添加/编辑行为”按钮，在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.3-87
图3.3-88
点击“预览”动画效果
收起阅读 »
本节视频教程请点击此处。
如下图，点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材，并修改“舞台”颜色为黄色
图3.3-26
点击新建第2页面，点击“素材库”添加一个手术刀图像元素，点击“线条”工具在“舞台”上绘制一个线条，并修改其线条类型为“点线”
图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图
图3.3-28
再添加一个文本框，命名为“分数”，输入内容为“0”，并调整大小、字体颜色等属性
图3.3-29
新建“图层1”，将“图层0”上的手术刀剪切粘贴进“图层1”上，改变手术刀“Z轴旋转角度”为“-90”，调整其大小位置如下图
图3.3-30
新建“图层2”，在该图层添加一个手指点击的图片素材，同时添加一个文本框，输入文字内容为“按住屏幕，开始手术”，调整字体大小、颜色等属性如下图
图3.3-31
修改“图层0”名称为“底部”，“图层1”名称为“手术刀”，“图层2”名称为“提示”
图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置，右键→“插入帧”
图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧
图3.3-34
选中“手术刀”图层关键帧之后的任意一帧，右键→“插入关键帧动画”
图3.3-35
点击选中“手术刀”图层的最后一帧，将“舞台”上的手术刀移至最上“杀人”位置
图3.3-36
新建“图层3”，在该图层第2帧右键→“插入关键帧”
图3.3-37
将原来的虚线复制一份，粘贴进“图层3”第2帧上，修改线条颜色为红色，线条类型为“实线”
图3.3-38
点击“图层3”关键帧之后的任意一帧，右键→“插入曲线变形动画”
图3.3-39
选择“图层3”第2帧，使用“节点”工具将曲线的最上一个节点向下移至底端
图3.3-40
点击“预览”观察效果，发现红线会随着手术刀向上的动画也向上延伸
图3.3-41
如下图，当手术刀移至“完美”阶段时，时间轴运动到27帧
图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧，右键→“插入关键帧”
图3.3-43
同理，观察到当手术刀移至“及格”阶段时，时间轴运动到19帧
图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧，右键→“插入关键帧”
图3.3-45
为手术刀素材命名为“刀子”
图3.3-46
观察，当手术刀在最底端位置时，其“上”值为“467.6”
图3.3-47
观察，当手术刀在“及格”位置时，其“上”值为“184.9”
图3.3-48
观察，当手术刀在“完美”位置时，其“上”值为“51.9”
图3.3-49
观察，当手术刀在“杀人”位置时，其“上”值为“2”
图3.3-50
如下图，选中“分数”文本框，在其“属性”面板下点击文字内容右边的“关联”按钮，在下拉的关联属性菜单栏下设置
关联对象：“刀子”
关联属性：“上”
关联方式：“自动关联”
当主控量=“467.6”（手术刀在最底端位置）时被控量=“0”
当主控量=“184.9”（手术刀在“及格”位置）时被控量=“60”
当主控量=“51.9”（手术刀在“完美”位置）时被控量=“100”
当主控量=“2”（手术刀在“杀人”位置）时被控量=“0”
图3.3-51
图3.3-52
为手指点击图像添加一个出现即暂停行为：如下图，点击手指右边的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-53
新建图层“控制层”，并将“图层3”重命名为“红线”
图3.3-54
在“控制层”图层添加一个矩形，调整大小使其符合“舞台”大小，并调整其透明度为“0”
图3.3-55
点击矩形右下角的“添加/编辑行为”按钮，为其添加两个编辑行为：
“动画播放控制”→“播放”→触发条件：“手指按下”
“动画播放控制”→“下一页”→触发条件：“手指抬起”
图3.3-56
新建第3页面，暂时添加一张图片素材
图3.3-57
点击“预览”观察动画效果
图3.3-58
制作第3页：如下图，在第3页添加一个文本框，输入文字内容为“0”，调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮，设置关联属性
关联对象：“分数”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值
图3.3-59
点击“舞台”上的图片元素，右键→“转换为元件”
图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中，点击时间轴上第4帧，右键→“插入帧”
图3.3-61
点击图片元件的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-62
同时选中时间轴上的2、3、4帧，右键→“插入关键帧”
图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮，在弹出的“媒体库”中选择所需的图片素材，点击“添加”，替换原有的图片
图3.3-64
图3.3-65
同理，替换第3、4帧上的图片
图3.3-66
图3.3-67
点击回到“舞台”，将元件命名为“评判”
图3.3-68
点击到第2页面，点击“控制层”上矩形的“添加/编辑行为”按钮
图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为：“动画播放控制”→“跳转到帧并停止”
图3.3-70
修改“触发条件”为“手指抬起”，依次填写描述为“100分”“80”“60”“死”
图3.3-71
点击“100分”行为的“编辑”按钮
图3.3-72
设置“参数”
帧号：“3”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“100”，点击“确认”
图3.3-73
同理点击“80”行为的“编辑”按钮
图3.3-74
设置“参数”
帧号：“2”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“80”，点击“确认”
图3.3-75
同理点击“60”行为的“编辑”按钮
图3.3-76
设置“参数”
帧号：“1”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“分数”
考察属性：“文本取值”
逻辑条件：“小于等于”
参考值：“60”，点击“确认”
图3.3-77
同理点击“死”行为的“编辑”按钮
图3.3-78
设置“参数”
帧号：“4”
作用对象：“评判”
执行条件：“检查元素状态”
元素名称：“刀子”
考察属性：“上”
逻辑条件：“小于等于”
参考值：“51”（手术刀在“完美”左右位置），点击“确认”
图3.3-79
注意：Mugeda的行为逻辑是从上往下的顺序执行的，我们首先会执行“播放”的行为，然后是“跳转下一页”的行为，其次是100分的“跳转到帧并停止”行为，同理依次执行其他行为。若中间有一个行为条件不满足，则不会继续执行下一行为。
图3.3-80
点击“预览”观察动画效果
图3.3-81
制作“再来一次”按钮：在第3页面添加按钮素材，添加文本框，输入文本框内容为“再来一次”
图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件：“点击”，点击“编辑”按钮
图3.3-83
在“参数”对话框中填写帧号为“1”，点击“确认”
图3.3-84
回到“编辑行为”对话框后再加一个行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮
图3.3-85
设置“参数”
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为
图3.3-86
点击到第1页面，点击“开始游戏”按钮的“添加/编辑行为”按钮，在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为：“动画播放控制”→“下一页”→触发条件：“点击”
“禁止翻页”行为：“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.3-87
图3.3-88
点击“预览”动画效果
收起阅读 »
3.3.1 游戏测试:手速测试
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
添加素材：
新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图，输入文本框内容为“0”
图3.3-1
为各个素材命名：
命名文本框素材为“分数”
命名宇航员图片素材为“宇航员”
图3.3-2
图3.3-3
如下图，新建“控制”图层，添加一个定时器，将其移至“舞台”之外，在定时器“属性”面板内设置相关属性：
精度：“毫秒”
记时方向：“倒计时”
是否循环：“循环”
不可见时：“暂停记时器”
长度：“3”秒
图3.3-4
命名定时器为“up”
图3.3-5
移动宇航员图片至“舞台”上方，在其“属性”面板下点击“上”属性右边的“关联”按钮，在下拉关联属性菜单下设置
关联对象：“up”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“3”时被控量=“-200”（宇航员在“舞台”上方的位置）
当主控量=“0”时被控量=“541”（宇航员在“舞台”下方的位置）
图3.3-6
点击“预览”观察效果
图3.3-7
点击“随机数”按钮，在“舞台”上添加一个随机数，为其命名为“角度”
图3.3-8
调整随机数的最大值、最小值分别为“-90”“90”，更新间隔为“3”秒
图3.3-9
选中“宇航员”，在其“属性”面板下点击“Z轴旋转”属性右边的“关联”按钮，在下拉关联属性菜单下设置
关联对象：“角度”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“宇航员”每次的Z轴旋转角度与随机数的文本取值相等
图3.3-10
选中文本框，在其“属性”面板下点击字体内容右边的“关联”按钮，在下拉的关联属性菜单栏内设置
关联对象：“宇航员”
关联属性：“上”
关联方式：“自动关联”
当主控量=“75”时被控量=“0”
当主控量=“175.7”（宇航员在圆圈正中心位置）时被控量=“100”
当主控量=“275”时被控量=“0”，设置分数与“宇航员”位置相关
图3.3-11
点击“预览”观察效果
图3.3-12
可点击“保存”
图3.3-13
选中所有图层的第2帧，右键→“插入帧”
图3.3-14
点击“控制”图层的第2帧，右键→“插入关键帧”
图3.3-15
选中第2帧上的两个控制元素，右键→“删除物体”
图3.3-16
点击拍照图片按钮右边的“添加/编辑行为”按钮
图3.3-17
在“编辑行为”对话框中添加“跳转下一帧”以及“暂停”两个行为
“跳转下一帧”行为：“动画播放控制”→“下一帧”→触发条件：“点击”
“暂停”行为：“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-18
选中“按钮”图层第2帧，右键→“插入关键帧”
图3.3-19
删除“按钮”图层第2帧上的拍照按钮图片素材
图3.3-20
同时，在“按钮”图层第2帧上点击添加一个文本框素材，输入文字内容“再来一次”，调整文本框大小、位置、字体、颜色等属性
图3.3-21
点击“再来一次”文本框“添加/编辑行为”按钮，进入“编辑行为”对话框，选择“动画播放控制”→“上一帧”→触发条件：“点击”
图3.3-22
同理，添加“改变元素属性”编辑行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮
图3.3-23
设置“参数”为
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“0”
点击“确认”
图3.3-24
点击“预览”观察效果
图3.3-25 收起阅读 »
本节视频教程请点击此处。
添加素材：
新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图，输入文本框内容为“0”
图3.3-1
为各个素材命名：
命名文本框素材为“分数”
命名宇航员图片素材为“宇航员”
图3.3-2
图3.3-3
如下图，新建“控制”图层，添加一个定时器，将其移至“舞台”之外，在定时器“属性”面板内设置相关属性：
精度：“毫秒”
记时方向：“倒计时”
是否循环：“循环”
不可见时：“暂停记时器”
长度：“3”秒
图3.3-4
命名定时器为“up”
图3.3-5
移动宇航员图片至“舞台”上方，在其“属性”面板下点击“上”属性右边的“关联”按钮，在下拉关联属性菜单下设置
关联对象：“up”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“3”时被控量=“-200”（宇航员在“舞台”上方的位置）
当主控量=“0”时被控量=“541”（宇航员在“舞台”下方的位置）
图3.3-6
点击“预览”观察效果
图3.3-7
点击“随机数”按钮，在“舞台”上添加一个随机数，为其命名为“角度”
图3.3-8
调整随机数的最大值、最小值分别为“-90”“90”，更新间隔为“3”秒
图3.3-9
选中“宇航员”，在其“属性”面板下点击“Z轴旋转”属性右边的“关联”按钮，在下拉关联属性菜单下设置
关联对象：“角度”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“宇航员”每次的Z轴旋转角度与随机数的文本取值相等
图3.3-10
选中文本框，在其“属性”面板下点击字体内容右边的“关联”按钮，在下拉的关联属性菜单栏内设置
关联对象：“宇航员”
关联属性：“上”
关联方式：“自动关联”
当主控量=“75”时被控量=“0”
当主控量=“175.7”（宇航员在圆圈正中心位置）时被控量=“100”
当主控量=“275”时被控量=“0”，设置分数与“宇航员”位置相关
图3.3-11
点击“预览”观察效果
图3.3-12
可点击“保存”
图3.3-13
选中所有图层的第2帧，右键→“插入帧”
图3.3-14
点击“控制”图层的第2帧，右键→“插入关键帧”
图3.3-15
选中第2帧上的两个控制元素，右键→“删除物体”
图3.3-16
点击拍照图片按钮右边的“添加/编辑行为”按钮
图3.3-17
在“编辑行为”对话框中添加“跳转下一帧”以及“暂停”两个行为
“跳转下一帧”行为：“动画播放控制”→“下一帧”→触发条件：“点击”
“暂停”行为：“动画播放控制”→“暂停”→触发条件：“出现”
图3.3-18
选中“按钮”图层第2帧，右键→“插入关键帧”
图3.3-19
删除“按钮”图层第2帧上的拍照按钮图片素材
图3.3-20
同时，在“按钮”图层第2帧上点击添加一个文本框素材，输入文字内容“再来一次”，调整文本框大小、位置、字体、颜色等属性
图3.3-21
点击“再来一次”文本框“添加/编辑行为”按钮，进入“编辑行为”对话框，选择“动画播放控制”→“上一帧”→触发条件：“点击”
图3.3-22
同理，添加“改变元素属性”编辑行为：“属性控制”→“改变元素属性”→触发条件：“点击”，点击“编辑”按钮
图3.3-23
设置“参数”为
元素名称：“分数”
元素属性：“文本取值”
赋值方式：“用设置的值替换现有值”
取值：“0”
点击“确认”
图3.3-24
点击“预览”观察效果
图3.3-25 收起阅读 »
3.2 UI原型:图标动效
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
>>>案例抢先预览
本节视频教程请点击此处。
添加素材：如下图，在“舞台”的“属性”面板下将其填充色调整为浅蓝色，点击“素材库”按钮添加相应的火箭图片素材，调整火箭大小、位置等。
图3.2-1
添加动画：在图层第10帧的位置右键→“插入帧”
图3.2-2
右键→“插入关键帧动画”
图3.2-3
选中第1帧，在“舞台”上将火箭垂直拖动至“舞台”底端
图3.2-4
按照Ctrl键将火箭等比例缩小
图3.2-5
制作路径：选中“舞台”上的火箭，右键→“路径”→“自定义路径”
图3.2-6
使用“节点”工具调整火箭路径的弧度
图3.2-7
在第1帧的位置上，选中“变形”工具，调整火箭的角度，使火箭头对准路径起始的方向
图3.2-8
同理，选中最后一帧，使用“变形”工具调整火箭的角度使其符合路径的方向
图3.2-9
选中第1帧，在其“属性”面板下调整“运动”效果为“阻尼退出”
图3.2-10
如下图，将“图层0”重命名为“火箭”，新建图层“圆”
图3.2-11
在“圆”图层上添加一个圆形使其覆盖住火箭，鼠标选中“圆”图层不放将其拖动至“火箭”图层下方，调整图层之间的覆盖位置。
图3.2-12
调整“舞台”上的圆形的填充色、线条色如下图
图3.2-13
选中“火箭”图层最后一帧，鼠标调整“舞台”上火箭的位置至圆形中央位置
图3.2-14
选中“圆”图层第10帧，右键→“插入关键帧”
图3.2-15
选中“圆”图层10帧之前的任意一帧，在“舞台”上选中圆形，右键→“删除物体”
图3.2-16
选中所有图层20帧，右键→“插入帧”
图3.2-17
选中“圆”图层10帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-18
选中“圆”图层第一个关键帧（即第10帧），使用“变形”工具按照Ctrl键将“舞台”上的圆形等比例缩小
图3.2-19
鼠标按照“圆”图层最后一帧不放，将其向前拖动至16帧，缩小圆形动画的运动时间
图3.2-20
选中“圆”图层第8、9两帧，右键→“删除帧（可多选）”，即将“圆”图层第一个关键帧移至第8帧
图3.2-21
选中“圆”图层第20帧，右键→“插入帧”，将后面两个空缺帧补齐
图3.2-22
选中“圆”图层第一个关键帧（即第8帧），在圆形元素“属性”面板下调整“运动”效果为“阻尼退出”
图3.2-23
选中“圆”图层动画定格帧（第14帧），点击“舞台”的圆形，右键→“复制”
图3.2-24
新建图层“边框”，在第14帧右键→“插入关键帧”。
图3.2-25
选中第14帧关键帧位置，按Ctrl+Shift+V，将原先复制的圆形原位粘贴进“舞台”
图3.2-26
选中“边框”图层上的圆形，右键→“组”→“取消组合”
图3.2-27
修改圆形的填充色为透明色，调节线条颜色为浅蓝，大小为“5”
图3.2-28
选中“边框”图层14帧以后的任意一帧，右键→“插入进度动画”
图3.2-29
制作光线效果：新建图层“光1”，在第9帧右键→“插入关键帧”
图3.2-30
在该关键帧上添加线条，调整位置、大小、颜色如下图
图3.2-31
同理，新建“光2”“光3”“光4”，分别在第9帧插入关键帧，并在“舞台”上添加相应的线条，制作出发散的光线效果。
图3.2-32
制作光线动画效果：同时选中“光1”至“光4”四个图层第9帧之后的任意一帧，右键→“插入曲线变形动画”
图3.2-33
在“光4”图层的最后一帧，选择“节点”工具，将“舞台”上的该线条拉动缩小长度，并稍调整位置
图3.2-34
同理，缩小其他三个图层在最后一帧位置上的线条长度
图3.2-35
在9帧之后选中“光1”至“光4”四个图层的某些帧，右键→“删除帧(可多选)”
图3.2-36
调节“光1”至“光4”每个图层第一个关键帧的“运动”效果为“淡出”
图3.2-37
新建“云”图层，添加云的图片素材，使用“变形”工具调整云的大小、位置
图3.2-38
在“云”图层的第13帧，右键→“插入关键帧”
图3.2-39
选中13帧之前的任意一帧，点击“舞台”上的云素材，右键→“删除物体”
图3.2-40
选中“云”图层13帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-41
在“云”图层第13帧，鼠标垂直向下拖动“舞台”上的云素材，使其位置向下移动一点。同时，在“属性”面板下调节“运动”效果为“阻尼退出”
图3.2-42
鼠标选中“云”图层将其拖动至“边框”图层下方
图3.2-43
新建图层“遮罩”，在“遮罩”图层13帧右键→“插入关键帧”
图3.2-44
复制“圆”图层上的圆形，按Ctrl+Shift+V原位粘贴到“遮罩”图层第13帧
图3.2-45
选择“遮罩”图层，点击“转为遮罩层”按钮
图3.2-46
图3.2-47
如下图，在“云”图层下方新建“星星”图层，自动转为“遮罩”图层下的被遮图层，选中“星星”图层第20帧，右键→“插入关键帧”
图3.2-48
在该关键帧上添加星星图片素材
图3.2-49
选中“遮罩”图层，点击“转为遮罩层”按钮，将“遮罩”图层的“遮罩”功能暂时取消
图3.2-50
如下图，选中“火箭”至“圆”图层的第30帧，右键→“插入帧”
图3.2-51
选中“星星”图层第一个关键帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-52
为方便观察，将“遮罩”图层上的圆形修改填充颜色，并点击图层上眼睛状按钮，隐藏该图层
图3.2-53
选中“星星”图层起始帧（即第20帧），鼠标将“舞台”上的星星素材向上拖动一些位置，并在“属性”面板下将“运动”效果选择为“淡出”
图3.2-54
点击“遮罩”图层眼睛状按钮，将其转换为可见
图3.2-55
选中“遮罩”图层，点击“转为遮罩层”按钮
图3.2-56
选中“星星”图层，点击“添加到遮罩”按钮，将“星星”图层添加进“遮罩”图层的遮罩范围内
图3.2-57
新建“文字”图层，在25帧右键→“插入关键帧”
图3.2-58
在“舞台”上添加一个文本框，输入文字内容，调整大小、字体、颜色等属性
图3.2-59
在“文字”图层第一个关键帧之后的任意一帧右键→“插入进度动画”，使文字出现打字机进入的效果
图3.2-60
新建“音乐”图层，点击“素材库”选择添加所需的音频素材，点击“添加”
图3.2-61
将音频图标移至“舞台”之外，在音频元素的“属性”面板下选择“自动播放”为“是”
图3.2-62
鼠标选中“声音”图层第1帧，按住不放将其拖至第2帧
图3.2-63
最后，分别选中“光1”至“光4”四个图层的最后一帧，分别在“舞台”上调整光线线条位置、大小，优化光线扩散的动画效果。
图3.2-64 收起阅读 »
>>>案例抢先预览
本节视频教程请点击此处。
添加素材：如下图，在“舞台”的“属性”面板下将其填充色调整为浅蓝色，点击“素材库”按钮添加相应的火箭图片素材，调整火箭大小、位置等。
图3.2-1
添加动画：在图层第10帧的位置右键→“插入帧”
图3.2-2
右键→“插入关键帧动画”
图3.2-3
选中第1帧，在“舞台”上将火箭垂直拖动至“舞台”底端
图3.2-4
按照Ctrl键将火箭等比例缩小
图3.2-5
制作路径：选中“舞台”上的火箭，右键→“路径”→“自定义路径”
图3.2-6
使用“节点”工具调整火箭路径的弧度
图3.2-7
在第1帧的位置上，选中“变形”工具，调整火箭的角度，使火箭头对准路径起始的方向
图3.2-8
同理，选中最后一帧，使用“变形”工具调整火箭的角度使其符合路径的方向
图3.2-9
选中第1帧，在其“属性”面板下调整“运动”效果为“阻尼退出”
图3.2-10
如下图，将“图层0”重命名为“火箭”，新建图层“圆”
图3.2-11
在“圆”图层上添加一个圆形使其覆盖住火箭，鼠标选中“圆”图层不放将其拖动至“火箭”图层下方，调整图层之间的覆盖位置。
图3.2-12
调整“舞台”上的圆形的填充色、线条色如下图
图3.2-13
选中“火箭”图层最后一帧，鼠标调整“舞台”上火箭的位置至圆形中央位置
图3.2-14
选中“圆”图层第10帧，右键→“插入关键帧”
图3.2-15
选中“圆”图层10帧之前的任意一帧，在“舞台”上选中圆形，右键→“删除物体”
图3.2-16
选中所有图层20帧，右键→“插入帧”
图3.2-17
选中“圆”图层10帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-18
选中“圆”图层第一个关键帧（即第10帧），使用“变形”工具按照Ctrl键将“舞台”上的圆形等比例缩小
图3.2-19
鼠标按照“圆”图层最后一帧不放，将其向前拖动至16帧，缩小圆形动画的运动时间
图3.2-20
选中“圆”图层第8、9两帧，右键→“删除帧（可多选）”，即将“圆”图层第一个关键帧移至第8帧
图3.2-21
选中“圆”图层第20帧，右键→“插入帧”，将后面两个空缺帧补齐
图3.2-22
选中“圆”图层第一个关键帧（即第8帧），在圆形元素“属性”面板下调整“运动”效果为“阻尼退出”
图3.2-23
选中“圆”图层动画定格帧（第14帧），点击“舞台”的圆形，右键→“复制”
图3.2-24
新建图层“边框”，在第14帧右键→“插入关键帧”。
图3.2-25
选中第14帧关键帧位置，按Ctrl+Shift+V，将原先复制的圆形原位粘贴进“舞台”
图3.2-26
选中“边框”图层上的圆形，右键→“组”→“取消组合”
图3.2-27
修改圆形的填充色为透明色，调节线条颜色为浅蓝，大小为“5”
图3.2-28
选中“边框”图层14帧以后的任意一帧，右键→“插入进度动画”
图3.2-29
制作光线效果：新建图层“光1”，在第9帧右键→“插入关键帧”
图3.2-30
在该关键帧上添加线条，调整位置、大小、颜色如下图
图3.2-31
同理，新建“光2”“光3”“光4”，分别在第9帧插入关键帧，并在“舞台”上添加相应的线条，制作出发散的光线效果。
图3.2-32
制作光线动画效果：同时选中“光1”至“光4”四个图层第9帧之后的任意一帧，右键→“插入曲线变形动画”
图3.2-33
在“光4”图层的最后一帧，选择“节点”工具，将“舞台”上的该线条拉动缩小长度，并稍调整位置
图3.2-34
同理，缩小其他三个图层在最后一帧位置上的线条长度
图3.2-35
在9帧之后选中“光1”至“光4”四个图层的某些帧，右键→“删除帧(可多选)”
图3.2-36
调节“光1”至“光4”每个图层第一个关键帧的“运动”效果为“淡出”
图3.2-37
新建“云”图层，添加云的图片素材，使用“变形”工具调整云的大小、位置
图3.2-38
在“云”图层的第13帧，右键→“插入关键帧”
图3.2-39
选中13帧之前的任意一帧，点击“舞台”上的云素材，右键→“删除物体”
图3.2-40
选中“云”图层13帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-41
在“云”图层第13帧，鼠标垂直向下拖动“舞台”上的云素材，使其位置向下移动一点。同时，在“属性”面板下调节“运动”效果为“阻尼退出”
图3.2-42
鼠标选中“云”图层将其拖动至“边框”图层下方
图3.2-43
新建图层“遮罩”，在“遮罩”图层13帧右键→“插入关键帧”
图3.2-44
复制“圆”图层上的圆形，按Ctrl+Shift+V原位粘贴到“遮罩”图层第13帧
图3.2-45
选择“遮罩”图层，点击“转为遮罩层”按钮
图3.2-46
图3.2-47
如下图，在“云”图层下方新建“星星”图层，自动转为“遮罩”图层下的被遮图层，选中“星星”图层第20帧，右键→“插入关键帧”
图3.2-48
在该关键帧上添加星星图片素材
图3.2-49
选中“遮罩”图层，点击“转为遮罩层”按钮，将“遮罩”图层的“遮罩”功能暂时取消
图3.2-50
如下图，选中“火箭”至“圆”图层的第30帧，右键→“插入帧”
图3.2-51
选中“星星”图层第一个关键帧之后的任意一帧，右键→“插入关键帧动画”
图3.2-52
为方便观察，将“遮罩”图层上的圆形修改填充颜色，并点击图层上眼睛状按钮，隐藏该图层
图3.2-53
选中“星星”图层起始帧（即第20帧），鼠标将“舞台”上的星星素材向上拖动一些位置，并在“属性”面板下将“运动”效果选择为“淡出”
图3.2-54
点击“遮罩”图层眼睛状按钮，将其转换为可见
图3.2-55
选中“遮罩”图层，点击“转为遮罩层”按钮
图3.2-56
选中“星星”图层，点击“添加到遮罩”按钮，将“星星”图层添加进“遮罩”图层的遮罩范围内
图3.2-57
新建“文字”图层，在25帧右键→“插入关键帧”
图3.2-58
在“舞台”上添加一个文本框，输入文字内容，调整大小、字体、颜色等属性
图3.2-59
在“文字”图层第一个关键帧之后的任意一帧右键→“插入进度动画”，使文字出现打字机进入的效果
图3.2-60
新建“音乐”图层，点击“素材库”选择添加所需的音频素材，点击“添加”
图3.2-61
将音频图标移至“舞台”之外，在音频元素的“属性”面板下选择“自动播放”为“是”
图3.2-62
鼠标选中“声音”图层第1帧，按住不放将其拖至第2帧
图3.2-63
最后，分别选中“光1”至“光4”四个图层的最后一帧，分别在“舞台”上调整光线线条位置、大小，优化光线扩散的动画效果。
图3.2-64 收起阅读 »
3.1.5 展示动画：公司广告
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
>>>案例预览
本节视频教程请点击此处。
1.添加序列图片制作元件
如图，在“元件”面板下点击新建一个元件，命名为“打开盒子”
图3.1-239
点击“素材库”按钮，在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片，勾选右下角的“以序列帧形式添加”，点击“添加”
图3.1-240
我们发现，图片会以每张添加进每一帧的形式添加进“舞台”，可点击“播放”按钮播放动画
图3.1-241
同理，导入“手机旋转”的元件
图3.1-242
在“元件”面板下新建元件，命名为“手机展开”
图3.1-243
以相同方式在“媒体库”中点击以序列帧形式添加序列图片
图3.1-244
2.在“舞台”上添加元件
点击回到“舞台”，鼠标将“元件”面板下的“打开盒子”元件直接拖至“舞台”，并调整元件位置、大小等属性。
图3.1-245
新建“背景”图层，将其拖拉至“图层0”下层。点击“素材库”，在“舞台”上选择添加一个背景图片。
图3.1-246
如下图，重命名“图层0”为“盒子”，新建“手机”图层。在“手机”图层上鼠标将“元件”面板下的“手机展开”元件拖拉至“舞台”上
图3.1-247
修改“舞台”上各元素的大小、位置如下图
图3.1-248
双击“打开盒子”元件，进入该元件编辑页面，我们观察到当元件动画在第9帧时，盒子有差不多已打开的效果。
图3.1-249
点击回到“舞台”，选中所有图层的第10帧，右键→“插入帧”
图3.1-250
鼠标选中“手机”图层的第1帧，按照不放将其拖动至第9帧
图3.1-251
点击“动画”→勾选掉“循环”功能
图3.1-252
双击“舞台”上的“打开盒子”元件进入“打开盒子”元件编辑页面，鼠标选中最后一帧，点击最后一帧上的图片的“添加/编辑行为”按钮
图3.1-253
在“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-254
同理，双击“手机展开”元件，在元件编辑页面中，选中最后一帧，点击最后一帧上放置的图片的“添加/编辑行为”按钮
图3.1-255
同理，设置编辑行为：选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-256
回到“舞台”，点击“预览”观察效果
图3.1-257
点击添加第2页面，在第2页面添加相关素材
图3.1-258
3.制作关联动画
点击新建“手机旋转”图层，鼠标在“元件”面板下选中“手机旋转”元件，将其直接拖拉至“舞台”上，调整元件位置、大小。
图3.1-259
选中滑杆素材，在其“属性”面板下设置“拖动/旋转”为“水平拖动”
图3.1-260
在“属性”面板下为滑杆元素取名为“滑杆”
图3.1-261
选中“手机旋转”元件，在其“属性”面板下选择“动画关联”为“启动”，点击右边的“关联”按钮，设置关联属性
关联对象：“滑杆”
关联属性：“左”
开始值：“25”（“滑杆”在开始时在左边的左值）
结束值：“194”（“滑杆”在结束时在右边的左值）
播放模式：“同步”
图3.1-262
将“滑杆”放置线条中央，在其“属性”面板下打开“结束时复位”功能，即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。
图3.1-263
4.制作点击效果按钮
如下图，在“元件”面板下点击新建一个“按钮”元件
图3.1-264
点击添加一个圆形，并修改其填充色为“透明”，线条边框为白色
图3.1-265
为便于观察，我们先回到“舞台”页面，鼠标点击空白处选中“舞台”，在其“属性”面板下将填充色调为黑色
图3.1-266
在“元件”面板下找到“按钮”元件，双击进入“按钮”元件页面，发现“舞台”变成黑色，可观察到白色的“按钮”元素
图3.1-267
点击“快捷工具”隐藏掉圆形按钮右边的两个快捷图标
图3.1-268
选中时间轴第10帧，右键→“插入帧”
图3.1-269
右键→“插入关键帧动画”
图3.1-270
选中第5帧，右键→“插入关键帧”
图3.1-271
按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小
图3.1-272
选中第5帧，在“属性”面板内将该位置的圆形透明度设为“50”
图3.1-273
鼠标点击回到“舞台”，选中第2页面，新建“按钮”图层，在“元件”面板下将“按钮”元件直接拖至“舞台”，调整“按钮”元件的位置、大小等。
图3.1-274
5.制作手机缩小动画
如下图，同时选中第2页面的所有图层第30帧，右键→“插入帧”
图3.1-275
选中“手机旋转”图层任意一帧，右键→“插入关键帧动画”
图3.1-276
鼠标选中“手机旋转”图层最后一帧，将其拖动至第10帧位置
图3.1-277
在第10帧位置使用“变形”工具改变“手机旋转”元件的大小、位置以及旋转角度，如下图
图3.1-278
选中“手机旋转”图层第1帧，在“属性”面板下改变其“运动”效果为“淡出”
图3.1-279
6.新建元件
在“元件”面板下新建“手机硬件展开”元件，在其元件编辑页面中添加所需要的图片素材，如下图，每一张素材分别添加进一个图层内
图3.1-280
选中元件中所有图层第10帧，右键→“插入帧”
图3.1-281
选中所有图层，右键→“插入关键帧动画”
图3.1-282
在每个图层的第1帧上依次将图片素材拼合至右下角的图片中
图3.1-283
依次选中每个图层的第1帧，分别在其“属性”面板下找到“运动”，选择“淡出”效果
图3.1-284
新建图层“暂停”，在“暂停”图层最后一帧右键→“插入关键帧”
图3.1-285
在“暂停”图层最后一帧添加一个矩形在“舞台”上，点击“快捷工具”显现出原先隐藏的快捷图标，点击“添加/编辑行为”按钮
图3.1-286
选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-287
最后将矩形透明度设为“0”
图3.1-288
7.继续设置第2页动画
点击选中第2页面，新建图层“手机硬件展开”，在“元件”面板下找到“手机硬件展开”元件，鼠标将其拖动至“舞台”，调整其位置、大小等
图3.1-289
鼠标直接将“手机硬件展开”图层下拉一层，使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下，方便调整。
图3.1-290
在“舞台”上调整“手机硬件展开”与“手机旋转”两个元件大小、位置、角度，使其重叠在一起，如下图
图3.1-291
选中“手机旋转”图层10帧之后的所有帧，右键→“删除帧（可多选）”
图3.1-292
鼠标选中“手机硬件展开”图层的第1帧，将其拖动移至第11帧
图3.1-293
选中“手机旋转”第1帧，在“属性”面板下将“运动”效果改为“淡入”
图3.1-294
选中“手机旋转”图层最后一帧，在“属性”面板下改变其“Y轴旋转”角度为“180”，“Z轴旋转”角度为“8”
图3.1-295
选中“按钮”图层第2帧，右键→“插入关键帧”
图3.1-296
在“舞台”上选中新插入的关键帧上的物体
图3.1-297
右键→“删除物体”
图3.1-298
在“按钮”图层第21帧位置右键→“插入关键帧”
图3.1-299
选中“按钮”图层第1帧，复制“舞台”上的物体：右键“舞台上的物体”→“复制”
图3.1-300
鼠标点击选中“按钮”图层第21帧关键帧位置，按照Ctrl+Shift+V粘贴物体，将其移至合适位置
图3.1-301
在“舞台”上复制粘贴一个“按钮”，调整其位置大小
图3.1-302
建议不断点击“预览”按钮已调节效果
图3.1-303
新建图层“说明”，在该图层22帧（“按钮”出现后）位置上右键→“插入关键帧”
图3.1-304
在该帧上插入线条、文本框，输入文字内容，调节颜色、大小等属性如下图
图3.1-305
选中两个物体，右键→“复制”
图3.1-306
在“说明”图层第30帧位置右键→“插入关键帧”
图3.1-307
在最后一个关键帧上将原来的两个物体移至第二个“按钮”上
图3.1-308
调节大小、文字内容等
图3.1-309
在“说明”图层第22至最后一帧之间，右键→“插入进度动画”
图3.1-310
选中“手机旋转”图层的第11帧，右键→“插入关键帧”
图3.1-311
选中所有图层40帧位置，右键→“插入帧”
图3.1-312
在“说明”图层最后一个关键帧之后的帧数上右键→“插入进度动画”
图3.1-313
8.添加编辑行为
如下图，新建一个“暂停”图层，在该图层上添加一个“矩形”
图3.1-314
点击“矩形”的“添加/编辑行为”按钮
图3.1-315
设置“编辑行为”：“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-316
选中“暂停”图层的第21帧，右键→“插入关键帧”
图3.1-317
选中“暂停”图层的第29帧，右键→“插入关键帧”
图3.1-318
选中“暂停”图层的第2帧，右键→“插入关键帧”
图3.1-319
在第2帧中删除暂停物体
图3.1-320
同理，删除第22帧上的暂停物体
图3.1-321
图3.1-322
点击“按钮”图层第一帧上的按钮的“添加/编辑行为”
图3.1-323
设置“编辑行为”为：“动画播放控制”→“播放”→触发条件：“点击”
图3.1-324
选中“按钮”图层第21帧上的大按钮，点击“添加/编辑行为”按钮，设置“动画播放控制”→“跳转到帧并播放”→触发条件：“点击”，点击“编辑”按钮
图3.1-325
跳转帧号为“22”，点击“确认”
图3.1-326
同理选中“按钮”图层第21帧上的小按钮，点击“添加/编辑行为”按钮
图3.1-327
设置“动画播放控制”→“跳转到帧并播放”→触发条件：“点击”，点击“编辑”按钮
图3.1-328
跳转帧号为“30”，点击“确认”
图3.1-329
选中“暂停”图层第30帧之后的所有帧数，右键→“删除帧（可多选）”
图3.1-330
点击“预览”观察效果
图3.1-331
9.制作第3页
如下图，点击添加第3页面，在第3页面添加一张背景图片素材
图3.1-332
新建一个“手机”图层，在“元件”面板下将“手机展开”元件拖动至“舞台”上，调节大小与位置
图3.1-333
新建“文字”图层，在所有图层的第20帧上右键→“插入帧”
图3.1-334
在“文字”图层的第15帧，右键→“插入关键帧”
图3.1-335
如下图，在第15帧位置上分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素，在“属性”面板下输入文字内容，分别调整文本域矩形元素的大小、字体、颜色、位置等属性
图3.1-336
如下图，同时选中矩形与“马上预约”文本框，右键→“组”→“组合”，组合成一个“按钮”
图3.1-337
点击“按钮”右边的“添加/编辑行为”
图3.1-338
选择“属性控制”→“跳转链接”→触发条件：“点击”，点击“编辑”按钮
图3.1-339
可在“参数”对话框中填写需跳转的网址，点击“确认”
图3.1-340
点击“即将隆重上市”文本框的“添加预置动画”按钮
图3.1-341
添加“淡入”的动画效果
图3.1-342
同理为“马上预约”按钮添加“淡入”的预置动画效果。之后再点击“编辑预置动画”按钮，设置延迟时间为“1”秒，点击“确认”
图3.1-343
图3.1-344
如下图，在第2页面新建图层“禁止翻页”，添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-345
选择“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.1-346
点击“我已了解”按钮的“添加/编辑行为”
图3.1-347
选择“动画播放控制”→“下一页”→触发条件：“点击”
图3.1-348
选择“滑杆”所在的“背景”图层，点击第2帧，右键→“插入关键帧”
图3.1-349
在第二帧关键帧上删除滑杆元素
图3.1-350 收起阅读 »
>>>案例预览
本节视频教程请点击此处。
1.添加序列图片制作元件
如图，在“元件”面板下点击新建一个元件，命名为“打开盒子”
图3.1-239
点击“素材库”按钮，在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片，勾选右下角的“以序列帧形式添加”，点击“添加”
图3.1-240
我们发现，图片会以每张添加进每一帧的形式添加进“舞台”，可点击“播放”按钮播放动画
图3.1-241
同理，导入“手机旋转”的元件
图3.1-242
在“元件”面板下新建元件，命名为“手机展开”
图3.1-243
以相同方式在“媒体库”中点击以序列帧形式添加序列图片
图3.1-244
2.在“舞台”上添加元件
点击回到“舞台”，鼠标将“元件”面板下的“打开盒子”元件直接拖至“舞台”，并调整元件位置、大小等属性。
图3.1-245
新建“背景”图层，将其拖拉至“图层0”下层。点击“素材库”，在“舞台”上选择添加一个背景图片。
图3.1-246
如下图，重命名“图层0”为“盒子”，新建“手机”图层。在“手机”图层上鼠标将“元件”面板下的“手机展开”元件拖拉至“舞台”上
图3.1-247
修改“舞台”上各元素的大小、位置如下图
图3.1-248
双击“打开盒子”元件，进入该元件编辑页面，我们观察到当元件动画在第9帧时，盒子有差不多已打开的效果。
图3.1-249
点击回到“舞台”，选中所有图层的第10帧，右键→“插入帧”
图3.1-250
鼠标选中“手机”图层的第1帧，按照不放将其拖动至第9帧
图3.1-251
点击“动画”→勾选掉“循环”功能
图3.1-252
双击“舞台”上的“打开盒子”元件进入“打开盒子”元件编辑页面，鼠标选中最后一帧，点击最后一帧上的图片的“添加/编辑行为”按钮
图3.1-253
在“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-254
同理，双击“手机展开”元件，在元件编辑页面中，选中最后一帧，点击最后一帧上放置的图片的“添加/编辑行为”按钮
图3.1-255
同理，设置编辑行为：选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-256
回到“舞台”，点击“预览”观察效果
图3.1-257
点击添加第2页面，在第2页面添加相关素材
图3.1-258
3.制作关联动画
点击新建“手机旋转”图层，鼠标在“元件”面板下选中“手机旋转”元件，将其直接拖拉至“舞台”上，调整元件位置、大小。
图3.1-259
选中滑杆素材，在其“属性”面板下设置“拖动/旋转”为“水平拖动”
图3.1-260
在“属性”面板下为滑杆元素取名为“滑杆”
图3.1-261
选中“手机旋转”元件，在其“属性”面板下选择“动画关联”为“启动”，点击右边的“关联”按钮，设置关联属性
关联对象：“滑杆”
关联属性：“左”
开始值：“25”（“滑杆”在开始时在左边的左值）
结束值：“194”（“滑杆”在结束时在右边的左值）
播放模式：“同步”
图3.1-262
将“滑杆”放置线条中央，在其“属性”面板下打开“结束时复位”功能，即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。
图3.1-263
4.制作点击效果按钮
如下图，在“元件”面板下点击新建一个“按钮”元件
图3.1-264
点击添加一个圆形，并修改其填充色为“透明”，线条边框为白色
图3.1-265
为便于观察，我们先回到“舞台”页面，鼠标点击空白处选中“舞台”，在其“属性”面板下将填充色调为黑色
图3.1-266
在“元件”面板下找到“按钮”元件，双击进入“按钮”元件页面，发现“舞台”变成黑色，可观察到白色的“按钮”元素
图3.1-267
点击“快捷工具”隐藏掉圆形按钮右边的两个快捷图标
图3.1-268
选中时间轴第10帧，右键→“插入帧”
图3.1-269
右键→“插入关键帧动画”
图3.1-270
选中第5帧，右键→“插入关键帧”
图3.1-271
按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小
图3.1-272
选中第5帧，在“属性”面板内将该位置的圆形透明度设为“50”
图3.1-273
鼠标点击回到“舞台”，选中第2页面，新建“按钮”图层，在“元件”面板下将“按钮”元件直接拖至“舞台”，调整“按钮”元件的位置、大小等。
图3.1-274
5.制作手机缩小动画
如下图，同时选中第2页面的所有图层第30帧，右键→“插入帧”
图3.1-275
选中“手机旋转”图层任意一帧，右键→“插入关键帧动画”
图3.1-276
鼠标选中“手机旋转”图层最后一帧，将其拖动至第10帧位置
图3.1-277
在第10帧位置使用“变形”工具改变“手机旋转”元件的大小、位置以及旋转角度，如下图
图3.1-278
选中“手机旋转”图层第1帧，在“属性”面板下改变其“运动”效果为“淡出”
图3.1-279
6.新建元件
在“元件”面板下新建“手机硬件展开”元件，在其元件编辑页面中添加所需要的图片素材，如下图，每一张素材分别添加进一个图层内
图3.1-280
选中元件中所有图层第10帧，右键→“插入帧”
图3.1-281
选中所有图层，右键→“插入关键帧动画”
图3.1-282
在每个图层的第1帧上依次将图片素材拼合至右下角的图片中
图3.1-283
依次选中每个图层的第1帧，分别在其“属性”面板下找到“运动”，选择“淡出”效果
图3.1-284
新建图层“暂停”，在“暂停”图层最后一帧右键→“插入关键帧”
图3.1-285
在“暂停”图层最后一帧添加一个矩形在“舞台”上，点击“快捷工具”显现出原先隐藏的快捷图标，点击“添加/编辑行为”按钮
图3.1-286
选择“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-287
最后将矩形透明度设为“0”
图3.1-288
7.继续设置第2页动画
点击选中第2页面，新建图层“手机硬件展开”，在“元件”面板下找到“手机硬件展开”元件，鼠标将其拖动至“舞台”，调整其位置、大小等
图3.1-289
鼠标直接将“手机硬件展开”图层下拉一层，使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下，方便调整。
图3.1-290
在“舞台”上调整“手机硬件展开”与“手机旋转”两个元件大小、位置、角度，使其重叠在一起，如下图
图3.1-291
选中“手机旋转”图层10帧之后的所有帧，右键→“删除帧（可多选）”
图3.1-292
鼠标选中“手机硬件展开”图层的第1帧，将其拖动移至第11帧
图3.1-293
选中“手机旋转”第1帧，在“属性”面板下将“运动”效果改为“淡入”
图3.1-294
选中“手机旋转”图层最后一帧，在“属性”面板下改变其“Y轴旋转”角度为“180”，“Z轴旋转”角度为“8”
图3.1-295
选中“按钮”图层第2帧，右键→“插入关键帧”
图3.1-296
在“舞台”上选中新插入的关键帧上的物体
图3.1-297
右键→“删除物体”
图3.1-298
在“按钮”图层第21帧位置右键→“插入关键帧”
图3.1-299
选中“按钮”图层第1帧，复制“舞台”上的物体：右键“舞台上的物体”→“复制”
图3.1-300
鼠标点击选中“按钮”图层第21帧关键帧位置，按照Ctrl+Shift+V粘贴物体，将其移至合适位置
图3.1-301
在“舞台”上复制粘贴一个“按钮”，调整其位置大小
图3.1-302
建议不断点击“预览”按钮已调节效果
图3.1-303
新建图层“说明”，在该图层22帧（“按钮”出现后）位置上右键→“插入关键帧”
图3.1-304
在该帧上插入线条、文本框，输入文字内容，调节颜色、大小等属性如下图
图3.1-305
选中两个物体，右键→“复制”
图3.1-306
在“说明”图层第30帧位置右键→“插入关键帧”
图3.1-307
在最后一个关键帧上将原来的两个物体移至第二个“按钮”上
图3.1-308
调节大小、文字内容等
图3.1-309
在“说明”图层第22至最后一帧之间，右键→“插入进度动画”
图3.1-310
选中“手机旋转”图层的第11帧，右键→“插入关键帧”
图3.1-311
选中所有图层40帧位置，右键→“插入帧”
图3.1-312
在“说明”图层最后一个关键帧之后的帧数上右键→“插入进度动画”
图3.1-313
8.添加编辑行为
如下图，新建一个“暂停”图层，在该图层上添加一个“矩形”
图3.1-314
点击“矩形”的“添加/编辑行为”按钮
图3.1-315
设置“编辑行为”：“动画播放控制”→“暂停”→触发条件：“出现”
图3.1-316
选中“暂停”图层的第21帧，右键→“插入关键帧”
图3.1-317
选中“暂停”图层的第29帧，右键→“插入关键帧”
图3.1-318
选中“暂停”图层的第2帧，右键→“插入关键帧”
图3.1-319
在第2帧中删除暂停物体
图3.1-320
同理，删除第22帧上的暂停物体
图3.1-321
图3.1-322
点击“按钮”图层第一帧上的按钮的“添加/编辑行为”
图3.1-323
设置“编辑行为”为：“动画播放控制”→“播放”→触发条件：“点击”
图3.1-324
选中“按钮”图层第21帧上的大按钮，点击“添加/编辑行为”按钮，设置“动画播放控制”→“跳转到帧并播放”→触发条件：“点击”，点击“编辑”按钮
图3.1-325
跳转帧号为“22”，点击“确认”
图3.1-326
同理选中“按钮”图层第21帧上的小按钮，点击“添加/编辑行为”按钮
图3.1-327
设置“动画播放控制”→“跳转到帧并播放”→触发条件：“点击”，点击“编辑”按钮
图3.1-328
跳转帧号为“30”，点击“确认”
图3.1-329
选中“暂停”图层第30帧之后的所有帧数，右键→“删除帧（可多选）”
图3.1-330
点击“预览”观察效果
图3.1-331
9.制作第3页
如下图，点击添加第3页面，在第3页面添加一张背景图片素材
图3.1-332
新建一个“手机”图层，在“元件”面板下将“手机展开”元件拖动至“舞台”上，调节大小与位置
图3.1-333
新建“文字”图层，在所有图层的第20帧上右键→“插入帧”
图3.1-334
在“文字”图层的第15帧，右键→“插入关键帧”
图3.1-335
如下图，在第15帧位置上分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素，在“属性”面板下输入文字内容，分别调整文本域矩形元素的大小、字体、颜色、位置等属性
图3.1-336
如下图，同时选中矩形与“马上预约”文本框，右键→“组”→“组合”，组合成一个“按钮”
图3.1-337
点击“按钮”右边的“添加/编辑行为”
图3.1-338
选择“属性控制”→“跳转链接”→触发条件：“点击”，点击“编辑”按钮
图3.1-339
可在“参数”对话框中填写需跳转的网址，点击“确认”
图3.1-340
点击“即将隆重上市”文本框的“添加预置动画”按钮
图3.1-341
添加“淡入”的动画效果
图3.1-342
同理为“马上预约”按钮添加“淡入”的预置动画效果。之后再点击“编辑预置动画”按钮，设置延迟时间为“1”秒，点击“确认”
图3.1-343
图3.1-344
如下图，在第2页面新建图层“禁止翻页”，添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-345
选择“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.1-346
点击“我已了解”按钮的“添加/编辑行为”
图3.1-347
选择“动画播放控制”→“下一页”→触发条件：“点击”
图3.1-348
选择“滑杆”所在的“背景”图层，点击第2帧，右键→“插入关键帧”
图3.1-349
在第二帧关键帧上删除滑杆元素
图3.1-350 收起阅读 »
3.1.4 展示动画：贺卡
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
>>>案例预览
本节视频教程请点击此处。
操作步骤：如下图，新建元件“海”，在元件页面中点击“媒体库”，添加一张海的素材图片
图3.1-172
点击图片，右键→“复制”
图3.1-173
按照Ctrl+Sift+V原位粘贴进当前位置
图3.1-174
将两张图片左右衔接排列成如下图位置，与“舞台”右对齐
图3.1-175
为两张图添加帧动画：在第420帧位置右键→“插入帧”
图3.1-176
右键→“插入关键帧动画”
图3.1-177
在动画最后一帧将图片素材平移位置使其与“舞台”左对齐
图3.1-178
如下图，新建图层“水2”，修改“图层0”名称为“水1”
图3.1-179
在“水2”图层第1帧上添加进一张相同的海的素材
图3.1-180
将“水2”图层上的图片素材透明度调为“50”度
图3.1-181
点击“播放”按钮，观察“舞台”上水的运动动画出现波动效果。
图3.1-182
新建图层“过渡色”，点击“素材库”按钮添加一张过渡色图片素材，将其移动至海水图片上方位置
图3.1-183
点击“舞台”回到“舞台”编辑页面
图3.1-184
将“舞台”上的“图层0”改名为“背景”，点击“素材库”添加背景图片素材，并将背景图片素材移动至与“舞台”上对齐
图3.1-185
新建图层“海”，在“元件”面板下将原先做好的“海”元件用鼠标直接拖动至“舞台”
图3.1-186
将“元件”移动至“舞台”底端，并使其与“舞台”右对齐
图3.1-187
新建图层“月亮”，添加月亮图片素材至“舞台”，调整月亮图片素材位置、大小等
图3.1-188
在所有图层的60帧上右键→“插入帧”
图3.1-189
选中“月亮”图层上的任何一帧，右键→“插入关键帧动画”
图3.1-190
在“月亮”图层第1帧上，按住Shift键将月亮素材垂直往下移动
图3.1-191
鼠标选中“月亮”图层，将其拖动至“海”图层下面
图3.1-192
新建图层“文字”，在“文字”图层第40帧上右键→“插入关键帧”
图3.1-193
在“文字”图层第40帧空白关键帧上添加文字图片素材
图3.1-194
选中“海上生明月”文字图片素材，点击其“预置动画”按钮，添加“移入”的预置动画效果
图3.1-195
图3.1-196
点击“编辑预置动画”按钮，默认时长、延迟时间，调节方向为“从下”
图3.1-197
图3.1-198
同理，添加“天涯共此时”文字图片素材的预置动画效果，让其动画延迟“1”秒，其余与“海上生明月”素材动画效果一致
图3.1-199
点击“保存”按钮，命名作品为“中秋”
图3.1-200
在所有图层80帧位置右键→“插入帧”
图3.1-201
在“文字”图层第70帧位置右键→“插入关键帧”
图3.1-202
在70帧位置，点击“海上生明月”素材“编辑预置动画”按钮
图3.1-203
在出现的“动画”对话框中点击“删除”→“确认删除”，删除掉该预置动画
图3.1-204
同理删除掉70帧上“天涯共此时”文字图片素材的预置动画效果
重新添加预置动画：点击“海上生明月”素材“添加预置动画”按钮
图3.1-205
选择“移出”的动画效果
图3.1-206
点击“编辑预置动画”按钮，设置其延迟时间为“1”秒，其他默认
图3.1-207
同理添加“天涯共此时”图片素材的预置动画效果为“移出”，不修改动画选项
图3.1-208
点击新建图层“人物”，在该图层70帧位置右键→“插入关键帧”
图3.1-209
在第70帧空白关键帧上添加人物剪影素材
图3.1-210
在“人物”图层70帧之后的任意一帧上右键→“插入关键帧动画”
图3.1-211
在第70帧上将“人物”素材平移至“舞台”右侧之外
图3.1-212
鼠标选中70帧之后的所有图层部分帧数
图3.1-213
右键→“插入帧”
图3.1-214
调整人物素材的“运动”效果为“淡出”
图3.1-215
新建“定制文字”图层，在最后一帧，右键→“插入关键帧”
图3.1-216
为方便排版，将“文字”图层最后一帧删除，点击选中最后一帧，右键→“删除帧（可多选）”
图3.1-217
如图，点击“定制文字”图层最后一帧，在“舞台”上添加一个“中秋快乐”文字图片素材，以及三个文本框素材，输入文字内容，调节各个素材的大小、位置、文字颜色、字体等属性。
图3.1-218
为各个素材添加预置动画：如下图，点击“中秋快乐”素材的“添加预置动画”按钮，选择“移入”的动画效果
图3.1-219
图3.1-220
点击其“编辑预置动画”按钮，修改方向为“从右”，其余默认，点击“确认”
图3.1-221
设置修改三个文本框的预置动画效果都为“移入”，时长默认“1.5”秒，方向为“从右”。只延迟时间稍作改变，三个文字框从上往下分别延迟“1”秒、“1.5”秒、“2”秒
图3.1-222
图3.1-223
图3.1-224
继续在“定制文字”图层最后一帧添加一个矩形、文本框，调节其大小、颜色、透明度以及文字内容等属性，参考下图。
图3.1-225
选中矩形、文本框两个元素，右键→“组”→“组合”
图3.1-226
为该组合添加一个“淡入”的预置动画效果
图3.1-227
设置该预置动画的延迟时间为“3”秒
图3.1-228
点击“预览”观察效果
图3.1-229
为第一个文本框命名为“收卡人”
图3.1-230
为第二个文本框命名为“祝福词”
图3.1-231
为第三个文本框命名为“发卡人”
图3.1-232
选择“定制”按钮，在其“属性”面板下选择“动作”为“表单”，点击右边的“编辑”按钮
图3.1-233
在“编辑表单”对话框内设置
表单名称：“定制文字”
提交方式：“GET”
提交目标：“微信定制入口”
确认消息：“定制成功！”
修改背景颜色、字体颜色、字体大小等
点击“添加表单项”
图3.1-234
在“添加表单项”中添加
名称：“收卡人”（即第一个文本框）
描述：“收卡人”
类型“输入框”
点击“保存”
图3.1-235
同理再添加一个表单项
名称：“祝福词”（即第二个文本框）
描述：“祝福词”
类型“文本域”
点击“保存”
图3.1-236
同理再添加一个表单项
名称：“发卡人”（即第三个文本框）
描述：“发卡人”
类型“输入框”
点击“保存”，最后点击“确认”
图3.1-237
点击“保存”，点击“预览”观察定制效果
图3.1-238
最后可通过右侧“属性栏”添加背景音乐。 收起阅读 »
>>>案例预览
本节视频教程请点击此处。
操作步骤：如下图，新建元件“海”，在元件页面中点击“媒体库”，添加一张海的素材图片
图3.1-172
点击图片，右键→“复制”
图3.1-173
按照Ctrl+Sift+V原位粘贴进当前位置
图3.1-174
将两张图片左右衔接排列成如下图位置，与“舞台”右对齐
图3.1-175
为两张图添加帧动画：在第420帧位置右键→“插入帧”
图3.1-176
右键→“插入关键帧动画”
图3.1-177
在动画最后一帧将图片素材平移位置使其与“舞台”左对齐
图3.1-178
如下图，新建图层“水2”，修改“图层0”名称为“水1”
图3.1-179
在“水2”图层第1帧上添加进一张相同的海的素材
图3.1-180
将“水2”图层上的图片素材透明度调为“50”度
图3.1-181
点击“播放”按钮，观察“舞台”上水的运动动画出现波动效果。
图3.1-182
新建图层“过渡色”，点击“素材库”按钮添加一张过渡色图片素材，将其移动至海水图片上方位置
图3.1-183
点击“舞台”回到“舞台”编辑页面
图3.1-184
将“舞台”上的“图层0”改名为“背景”，点击“素材库”添加背景图片素材，并将背景图片素材移动至与“舞台”上对齐
图3.1-185
新建图层“海”，在“元件”面板下将原先做好的“海”元件用鼠标直接拖动至“舞台”
图3.1-186
将“元件”移动至“舞台”底端，并使其与“舞台”右对齐
图3.1-187
新建图层“月亮”，添加月亮图片素材至“舞台”，调整月亮图片素材位置、大小等
图3.1-188
在所有图层的60帧上右键→“插入帧”
图3.1-189
选中“月亮”图层上的任何一帧，右键→“插入关键帧动画”
图3.1-190
在“月亮”图层第1帧上，按住Shift键将月亮素材垂直往下移动
图3.1-191
鼠标选中“月亮”图层，将其拖动至“海”图层下面
图3.1-192
新建图层“文字”，在“文字”图层第40帧上右键→“插入关键帧”
图3.1-193
在“文字”图层第40帧空白关键帧上添加文字图片素材
图3.1-194
选中“海上生明月”文字图片素材，点击其“预置动画”按钮，添加“移入”的预置动画效果
图3.1-195
图3.1-196
点击“编辑预置动画”按钮，默认时长、延迟时间，调节方向为“从下”
图3.1-197
图3.1-198
同理，添加“天涯共此时”文字图片素材的预置动画效果，让其动画延迟“1”秒，其余与“海上生明月”素材动画效果一致
图3.1-199
点击“保存”按钮，命名作品为“中秋”
图3.1-200
在所有图层80帧位置右键→“插入帧”
图3.1-201
在“文字”图层第70帧位置右键→“插入关键帧”
图3.1-202
在70帧位置，点击“海上生明月”素材“编辑预置动画”按钮
图3.1-203
在出现的“动画”对话框中点击“删除”→“确认删除”，删除掉该预置动画
图3.1-204
同理删除掉70帧上“天涯共此时”文字图片素材的预置动画效果
重新添加预置动画：点击“海上生明月”素材“添加预置动画”按钮
图3.1-205
选择“移出”的动画效果
图3.1-206
点击“编辑预置动画”按钮，设置其延迟时间为“1”秒，其他默认
图3.1-207
同理添加“天涯共此时”图片素材的预置动画效果为“移出”，不修改动画选项
图3.1-208
点击新建图层“人物”，在该图层70帧位置右键→“插入关键帧”
图3.1-209
在第70帧空白关键帧上添加人物剪影素材
图3.1-210
在“人物”图层70帧之后的任意一帧上右键→“插入关键帧动画”
图3.1-211
在第70帧上将“人物”素材平移至“舞台”右侧之外
图3.1-212
鼠标选中70帧之后的所有图层部分帧数
图3.1-213
右键→“插入帧”
图3.1-214
调整人物素材的“运动”效果为“淡出”
图3.1-215
新建“定制文字”图层，在最后一帧，右键→“插入关键帧”
图3.1-216
为方便排版，将“文字”图层最后一帧删除，点击选中最后一帧，右键→“删除帧（可多选）”
图3.1-217
如图，点击“定制文字”图层最后一帧，在“舞台”上添加一个“中秋快乐”文字图片素材，以及三个文本框素材，输入文字内容，调节各个素材的大小、位置、文字颜色、字体等属性。
图3.1-218
为各个素材添加预置动画：如下图，点击“中秋快乐”素材的“添加预置动画”按钮，选择“移入”的动画效果
图3.1-219
图3.1-220
点击其“编辑预置动画”按钮，修改方向为“从右”，其余默认，点击“确认”
图3.1-221
设置修改三个文本框的预置动画效果都为“移入”，时长默认“1.5”秒，方向为“从右”。只延迟时间稍作改变，三个文字框从上往下分别延迟“1”秒、“1.5”秒、“2”秒
图3.1-222
图3.1-223
图3.1-224
继续在“定制文字”图层最后一帧添加一个矩形、文本框，调节其大小、颜色、透明度以及文字内容等属性，参考下图。
图3.1-225
选中矩形、文本框两个元素，右键→“组”→“组合”
图3.1-226
为该组合添加一个“淡入”的预置动画效果
图3.1-227
设置该预置动画的延迟时间为“3”秒
图3.1-228
点击“预览”观察效果
图3.1-229
为第一个文本框命名为“收卡人”
图3.1-230
为第二个文本框命名为“祝福词”
图3.1-231
为第三个文本框命名为“发卡人”
图3.1-232
选择“定制”按钮，在其“属性”面板下选择“动作”为“表单”，点击右边的“编辑”按钮
图3.1-233
在“编辑表单”对话框内设置
表单名称：“定制文字”
提交方式：“GET”
提交目标：“微信定制入口”
确认消息：“定制成功！”
修改背景颜色、字体颜色、字体大小等
点击“添加表单项”
图3.1-234
在“添加表单项”中添加
名称：“收卡人”（即第一个文本框）
描述：“收卡人”
类型“输入框”
点击“保存”
图3.1-235
同理再添加一个表单项
名称：“祝福词”（即第二个文本框）
描述：“祝福词”
类型“文本域”
点击“保存”
图3.1-236
同理再添加一个表单项
名称：“发卡人”（即第三个文本框）
描述：“发卡人”
类型“输入框”
点击“保存”，最后点击“确认”
图3.1-237
点击“保存”，点击“预览”观察定制效果
图3.1-238
最后可通过右侧“属性栏”添加背景音乐。 收起阅读 »
3.1.3 展示动画：简历
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
>>>案例预览
本节视频教程请点击此处。
1.制作图标
如下图，在“舞台”上添加一个五边形，选择“节点”工具
图3.1-101
鼠标选中多边形边上的节点，将其往多边形中心方向拖动，形成一个五角星图标
图3.1-102
在“舞台”上分别添加一个圆形、矩形
图3.1-103
选择“节点”工具，点击选中矩形，按住Ctrl键，鼠标移动到矩形最上一边，箭头出现一个“+”的符号，点击添加一个节点
图3.1-104
同理，在矩形最上一边再添加两个节点，使其平均分布在矩形最上一边
图3.1-105
鼠标选中中间的节点，按住Shift键将其往上拖动
图3.1-106
选中最上方节点，按住Ctrl键水平拉动最上方节点的杠杆，使尖角变成有弧度的圆角
图3.1-107
如下图调整左右两边角的弧度
图3.1-108
移动圆形至如下图位置，如果圆形在矩形底下，则可选中圆形，右键→排列→移至顶层
图3.1-109
同时选中两个图形，右键→对齐→左右居中
图3.1-110
右键→合并→合并
图3.1-111
选择“节点”工具，选中矩形下边两个节点，按照Shift键鼠标将其向上拖动
图3.1-112
则可以画出一个头像图标
图3.1-113
2.制作第1页加载页面
如下图，在第1页面添加背景图片、文字等元素，在右边“加载”页面中选择“样式”为“首页作为加载页”
图3.1-114
3.制作第2页微信对话页面
制作微信头像：如下图，在“舞台”上添加一个圆形，在圆形“属性”面板下点击背景图片的“+”标志
图3.1-115
在弹出的“媒体库”中找到自己想要的头像图片，点击“添加”
图3.1-116
即可制作出圆形的头像
图3.1-117
添加素材：如下图，在第2页面添加图片、文字等元素。
注意：分别新建一个图层放置每一则对白的元素，例如新建“对白1”图层放置第一则对白的头像、文字以及对话框等
图3.1-118
第一则对白中的“微信昵称”需点击“微信”工具条下的“微信昵称”按钮添加，其余对白中的文字可直接点击“文字”按钮添加文字内容
图3.1-119
添加动画：在所有图层的第10帧上右键→“插入帧”
图3.1-120
选中四个对白图层的一帧，右键→“插入关键帧动画”
图3.1-121
点击锁状按钮，锁定不需做动画的图层
图3.1-122
同时选中四则对白元素，在时间轴第1帧位置，按照Shift键垂直向下拖动“舞台”上的对白元素
图3.1-123
双击“对白2”的时间轴，选中“对白2”图层上的时间单元
图3.1-124
鼠标选中将其往后拖动至“对白1”动画完成之后的位置
图3.1-125
同理拖动“对白3”“对白4”的时间单元至如下位置
图3.1-126
点击其余图层的锁状按钮解锁，选中动画最后一帧的所有图层，右键→“插入帧”
图3.1-127
选中 “对白1”图层的第1帧，在“属性”面板下选择“运动”为“淡出”
图3.1-128
同理在“对白2”“对白3”“对白4”图层动画的第一帧上也分别将其“运动”效果设为“淡出”
图3.1-129
分别在“对白1”“对白2”“对白3”“对白4”图层动画的第1帧上将其透明度设为“0”
图3.1-130
如下图，我们在“菜单”图层上添加的是“舞台”底端菜单栏下的背景矩形，在“按钮”图层上添加的是四个菜单图标。选中“按钮”“菜单”两个图层动画的最后一帧，右键→“插入关键帧”
图3.1-131
鼠标选中“按钮”图层的第28帧（即最后一则对白出现时），在“舞台”上对准图标右键→“删除物体”
图3.1-132
同理鼠标选中“菜单”图层的第28帧（即最后一则对白出现时），在“舞台”上对准菜单背景矩形，右键→“删除物体”
图3.1-133
添加预置动画效果：
选中菜单背景矩形，点击“添加预置动画”按钮
图3.1-134
选择“移入”效果
图3.1-135
再选择菜单背景矩形，点击“编辑预置动画”按钮
图3.1-136
设置动画选项：时长“1”秒，延时“0”秒，方向“从下”，点击“确认”
图3.1-137
同理，设置四个图标的欲置动画效果都为“移入”，时长为“1”秒，方向“向下”。但注意“技能”图标延迟“0.2”秒，“经验”图标延迟“0.4”秒，“联系”图标延迟“0.6”秒，出现先后移入的效果
图3.1-138
图3.1-139
图3.1-140
4.添加编辑行为
如下图，在第3、4、5页分别添加作品、技能、经验、联系的相关素材
图3.1-141
图3.1-142
图3.1-143
图3.1-144
添加跳转页面动画：
如图，回到第2页动画最后一帧，点击“作品”图标的“添加/编辑页面”按钮
图3.1-145
在“编辑行为”对话框中选择“动画播放控制”→“跳转到页” →触发事件：“点击”，点击“编辑”按钮
图3.1-146
在“参数”对话框中填写“页号”为“3”，“翻页方式”为“淡入”，点击“确认”
图3.1-147
同理，添加“技能”“经验”“联系”图标的“跳转到页”编辑行为，分别跳转到第“4”“5”“6”页
图3.1-148
图3.1-149
图3.1-150
如下图，选中第2页的“作品”图标，点击“编辑”→“复制行为”
图3.1-151
选中第4页的“作品”图标，点击“编辑”→“粘贴行为”，即可将第2页面的“作品”图标设置的“跳转到页”编辑行为复制到第4页
图3.1-152
同理，将第2页面的“作品”图标编辑行为复制到第5、6页；将第2页面的“技能”图标编辑行为复制到第3、5、6页；将第2页面的“经验”图标编辑行为复制到第3、4、6页；将第2页面的“联系”图标编辑行为复制到第3、4、5页；
禁止翻页：如下图，在第2页面新建图层“禁止翻页”，在该图层上添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-153
在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.1-154
5.制作第3页面动画
如图，点击第3页面，在“作品组”图层添加相关的素材
图3.1-155
右键→“组”→“组合”
图3.1-156
在组的“属性”面板下选择“组类型”为“裁剪内容”，“允许滚动”设置为“垂直滚动”，鼠标选中“变形”工具调节组的位置
图3.1-157
同时，也可为组内的“H5游戏”文字设置一个跳转动画，跳转到第2帧的网页链接（此处略谈）
图3.1-158
6.制作第4页面动画
点击第4页面，添加“曲线图表”（具体可参看图表制作章节）
图3.1-159
7.制作第5页面动画
点击选中第5页面，如下图，在“经验”图层上添加相关素材
图3.1-160
新建“陀螺仪”图层，在该图层上添加一个陀螺仪，将其移至“舞台”之外，并在“属性”面板下将其命名为“陀螺仪”
图3.1-161
在陀螺仪的“属性”面板下选择“类型”为“绕Y轴旋转角”
图3.1-162
选中“经验”图层上的所有元素，右键→“组”→“组合”
图3.1-163
在“组”的“属性”面板下点击“X轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-45”
当主控量=“180”时被控量=“45”
图3.1-164
同理在“组”的“属性”面板下点击“Y轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-50”
当主控量=“180”时被控量=“50”
图3.1-165
同理在“组”的“属性”面板下点击“Z轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-5”
当主控量=“180”时被控量=“5”
图3.1-166
可在手机上观察效果
8.制作第6页面动画
如下图，点击第6页面，分别在“简介”“文字”图层上添加头像、联系方式等相关素材
图3.1-167
如图，新建“定时器”图层，在该图层上添加一个定时器，并在“属性”面板下将其命名为“定时器”
图3.1-168
点击选中头像，在其“属性”面板下点击“Z轴旋转”的“关联”按钮，设置关联属性：
关联对象：“定时器”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“30”时被控量=“0”
当主控量=“0”时被控量=“360”
图3.1-169
设置定时器属性：精度为“毫秒”，“记时方向”为“倒计时”，“是否循环”为“循环”
图3.1-170
同时，我们也可在该作品中添加背景音乐以及补充其他信息，美化简历。
点击“预览”或扫描二维码观察效果
图3.1-171 收起阅读 »
>>>案例预览
本节视频教程请点击此处。
1.制作图标
如下图，在“舞台”上添加一个五边形，选择“节点”工具
图3.1-101
鼠标选中多边形边上的节点，将其往多边形中心方向拖动，形成一个五角星图标
图3.1-102
在“舞台”上分别添加一个圆形、矩形
图3.1-103
选择“节点”工具，点击选中矩形，按住Ctrl键，鼠标移动到矩形最上一边，箭头出现一个“+”的符号，点击添加一个节点
图3.1-104
同理，在矩形最上一边再添加两个节点，使其平均分布在矩形最上一边
图3.1-105
鼠标选中中间的节点，按住Shift键将其往上拖动
图3.1-106
选中最上方节点，按住Ctrl键水平拉动最上方节点的杠杆，使尖角变成有弧度的圆角
图3.1-107
如下图调整左右两边角的弧度
图3.1-108
移动圆形至如下图位置，如果圆形在矩形底下，则可选中圆形，右键→排列→移至顶层
图3.1-109
同时选中两个图形，右键→对齐→左右居中
图3.1-110
右键→合并→合并
图3.1-111
选择“节点”工具，选中矩形下边两个节点，按照Shift键鼠标将其向上拖动
图3.1-112
则可以画出一个头像图标
图3.1-113
2.制作第1页加载页面
如下图，在第1页面添加背景图片、文字等元素，在右边“加载”页面中选择“样式”为“首页作为加载页”
图3.1-114
3.制作第2页微信对话页面
制作微信头像：如下图，在“舞台”上添加一个圆形，在圆形“属性”面板下点击背景图片的“+”标志
图3.1-115
在弹出的“媒体库”中找到自己想要的头像图片，点击“添加”
图3.1-116
即可制作出圆形的头像
图3.1-117
添加素材：如下图，在第2页面添加图片、文字等元素。
注意：分别新建一个图层放置每一则对白的元素，例如新建“对白1”图层放置第一则对白的头像、文字以及对话框等
图3.1-118
第一则对白中的“微信昵称”需点击“微信”工具条下的“微信昵称”按钮添加，其余对白中的文字可直接点击“文字”按钮添加文字内容
图3.1-119
添加动画：在所有图层的第10帧上右键→“插入帧”
图3.1-120
选中四个对白图层的一帧，右键→“插入关键帧动画”
图3.1-121
点击锁状按钮，锁定不需做动画的图层
图3.1-122
同时选中四则对白元素，在时间轴第1帧位置，按照Shift键垂直向下拖动“舞台”上的对白元素
图3.1-123
双击“对白2”的时间轴，选中“对白2”图层上的时间单元
图3.1-124
鼠标选中将其往后拖动至“对白1”动画完成之后的位置
图3.1-125
同理拖动“对白3”“对白4”的时间单元至如下位置
图3.1-126
点击其余图层的锁状按钮解锁，选中动画最后一帧的所有图层，右键→“插入帧”
图3.1-127
选中 “对白1”图层的第1帧，在“属性”面板下选择“运动”为“淡出”
图3.1-128
同理在“对白2”“对白3”“对白4”图层动画的第一帧上也分别将其“运动”效果设为“淡出”
图3.1-129
分别在“对白1”“对白2”“对白3”“对白4”图层动画的第1帧上将其透明度设为“0”
图3.1-130
如下图，我们在“菜单”图层上添加的是“舞台”底端菜单栏下的背景矩形，在“按钮”图层上添加的是四个菜单图标。选中“按钮”“菜单”两个图层动画的最后一帧，右键→“插入关键帧”
图3.1-131
鼠标选中“按钮”图层的第28帧（即最后一则对白出现时），在“舞台”上对准图标右键→“删除物体”
图3.1-132
同理鼠标选中“菜单”图层的第28帧（即最后一则对白出现时），在“舞台”上对准菜单背景矩形，右键→“删除物体”
图3.1-133
添加预置动画效果：
选中菜单背景矩形，点击“添加预置动画”按钮
图3.1-134
选择“移入”效果
图3.1-135
再选择菜单背景矩形，点击“编辑预置动画”按钮
图3.1-136
设置动画选项：时长“1”秒，延时“0”秒，方向“从下”，点击“确认”
图3.1-137
同理，设置四个图标的欲置动画效果都为“移入”，时长为“1”秒，方向“向下”。但注意“技能”图标延迟“0.2”秒，“经验”图标延迟“0.4”秒，“联系”图标延迟“0.6”秒，出现先后移入的效果
图3.1-138
图3.1-139
图3.1-140
4.添加编辑行为
如下图，在第3、4、5页分别添加作品、技能、经验、联系的相关素材
图3.1-141
图3.1-142
图3.1-143
图3.1-144
添加跳转页面动画：
如图，回到第2页动画最后一帧，点击“作品”图标的“添加/编辑页面”按钮
图3.1-145
在“编辑行为”对话框中选择“动画播放控制”→“跳转到页” →触发事件：“点击”，点击“编辑”按钮
图3.1-146
在“参数”对话框中填写“页号”为“3”，“翻页方式”为“淡入”，点击“确认”
图3.1-147
同理，添加“技能”“经验”“联系”图标的“跳转到页”编辑行为，分别跳转到第“4”“5”“6”页
图3.1-148
图3.1-149
图3.1-150
如下图，选中第2页的“作品”图标，点击“编辑”→“复制行为”
图3.1-151
选中第4页的“作品”图标，点击“编辑”→“粘贴行为”，即可将第2页面的“作品”图标设置的“跳转到页”编辑行为复制到第4页
图3.1-152
同理，将第2页面的“作品”图标编辑行为复制到第5、6页；将第2页面的“技能”图标编辑行为复制到第3、5、6页；将第2页面的“经验”图标编辑行为复制到第3、4、6页；将第2页面的“联系”图标编辑行为复制到第3、4、5页；
禁止翻页：如下图，在第2页面新建图层“禁止翻页”，在该图层上添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-153
在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“出现”
图3.1-154
5.制作第3页面动画
如图，点击第3页面，在“作品组”图层添加相关的素材
图3.1-155
右键→“组”→“组合”
图3.1-156
在组的“属性”面板下选择“组类型”为“裁剪内容”，“允许滚动”设置为“垂直滚动”，鼠标选中“变形”工具调节组的位置
图3.1-157
同时，也可为组内的“H5游戏”文字设置一个跳转动画，跳转到第2帧的网页链接（此处略谈）
图3.1-158
6.制作第4页面动画
点击第4页面，添加“曲线图表”（具体可参看图表制作章节）
图3.1-159
7.制作第5页面动画
点击选中第5页面，如下图，在“经验”图层上添加相关素材
图3.1-160
新建“陀螺仪”图层，在该图层上添加一个陀螺仪，将其移至“舞台”之外，并在“属性”面板下将其命名为“陀螺仪”
图3.1-161
在陀螺仪的“属性”面板下选择“类型”为“绕Y轴旋转角”
图3.1-162
选中“经验”图层上的所有元素，右键→“组”→“组合”
图3.1-163
在“组”的“属性”面板下点击“X轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-45”
当主控量=“180”时被控量=“45”
图3.1-164
同理在“组”的“属性”面板下点击“Y轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-50”
当主控量=“180”时被控量=“50”
图3.1-165
同理在“组”的“属性”面板下点击“Z轴旋转”的“关联”按钮，在下拉菜单中设置：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-180”时被控量=“-5”
当主控量=“180”时被控量=“5”
图3.1-166
可在手机上观察效果
8.制作第6页面动画
如下图，点击第6页面，分别在“简介”“文字”图层上添加头像、联系方式等相关素材
图3.1-167
如图，新建“定时器”图层，在该图层上添加一个定时器，并在“属性”面板下将其命名为“定时器”
图3.1-168
点击选中头像，在其“属性”面板下点击“Z轴旋转”的“关联”按钮，设置关联属性：
关联对象：“定时器”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“30”时被控量=“0”
当主控量=“0”时被控量=“360”
图3.1-169
设置定时器属性：精度为“毫秒”，“记时方向”为“倒计时”，“是否循环”为“循环”
图3.1-170
同时，我们也可在该作品中添加背景音乐以及补充其他信息，美化简历。
点击“预览”或扫描二维码观察效果
图3.1-171 收起阅读 »
3.1.2 展示动画：招聘
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
>>>案例预览
本节视频教程请点击此处。
1.添加素材、排版
如下图，在新建页面上添加图片素材、矩形、文本框，调整其位置、大小、文字内容、文字大小、颜色等属性
图3.1-67
同理添加三组相同的素材，排版如下：
图3.1-68
在添加图片时，我们应注意，将每一个职位的素材分别合并成组，并放在不同的图层内。例如，将“总顾问”一组放置“顾问”图层，将“市场总监”一组放置“市场总监”图层，将“快递员”一组放置“快递员”图层上。
图3.1-69
2.添加动画效果
在时间轴上选择所有图层的第30帧，右键→“插入帧”
图3.1-70
点击无需添加动画的图层3、4的类似锁状的按钮，将其锁住，选中“快递员”“市场总监”“顾问”三个图层的时间线，右键→“插入关键帧动画”
图3.1-71
如下图，为方便编辑，可选中三个组，将其向右移动至合适编辑的位置
图3.1-72
选中“快递员”图层第1帧，调整“快递员”组的“Y轴旋转”角度为“-50”
图3.1-73
选中“市场总监”图层第1帧，调整“市场总监”组的“Y轴旋转”角度为“-40”
图3.1-74
将所有素材拖动至原来位置，即使第一组“总顾问”放在“舞台”正中间。
图3.1-75
选中动画最后一帧，即第30帧，将“舞台”上的所有元素向左拖动，使最后一组“快递员”组放在“舞台”正中间。
图3.1-76
可点击“播放”按钮观察整体的动画效果
图3.1-77
同时，在动画最后一帧，即第30帧，点击设置“市场总监”组的“Y轴旋转”为“40”
图3.1-78
移动元素至合适位置，在动画最后一帧，即第30帧，点击设置“总顾问”组的“Y轴旋转”为“50”
图3.1-79
最后，在最后一帧将所有元素移到合适位置，即将最后一组“快递员”组放在“舞台”正中间。
图3.1-80
3.添加按钮
如下图，新建一个图层，命名为“按钮”，在“按钮”图层上添加一个矩形，使其高度与“舞台”相同，宽度大于“舞台”
图3.1-81
将按钮矩形“透明度”设置为“0”，并为其命名为“透明按钮”
图3.1-82
点击“舞台”空白处，在“舞台”的“属性”面板下找到“动画关联”，选择“启用”，点击“关联”按钮
图3.1-83
设置“关联”属性
关联对象：“透明按钮”
关联属性：“左”
开始值：“-203”（“透明按钮”最右端与舞台右端重合时的位置）
结束值：“0”
播放模式：“同步”
注意：为方面观察，也可先将“透明按钮”透明度调整为“20”
图3.1-84
选中“透明按钮”，在其“属性”面板下找到“拖动/旋转”按钮，选择“水平拖动”
图3.1-85
可点击“预览”观察效果，若观察到动画移至重复播放，可回到“舞台”，点击“动画”，勾除“循环”
图3.1-86
4.添加表单
为方便编辑，将图层4（放置“我要应聘”按钮）移至最上层，并改名为“表单按钮”。注意：此处为区分，已将原先的“按钮”图层重命名为“透明按钮”
图3.1-87
选中“我要应聘”按钮元素，在其“属性”面板下找到“动作”，选择“表单”，点击右边的“编辑”按钮
图3.1-88
在弹出的“编辑表单”中设置
表单名称：“应聘”
提交方式：“GET”
提交目标：“提交数据到后台”
确认消息：“提交成功”
背景颜色、字体颜色、字体大小等
点击“添加表单项”
图3.1-89
在“添加表单项”对话框中填写
名称：“姓名”
描述：“姓名”
类型：“输入框”，点击“保存”
图3.1-90
同理，再添加一个表单项，设置内容为
名称：“应聘职位”
描述：“应聘职位”
类型：“单选框”
取值：“总顾问、市场总监、快递员”（一行为一个选项）
点击“保存”
图3.1-91
同理，再添加一个表单项，设置内容为
名称：“电话”
描述：“电话”
类型：“电话号码”，点击“保存”
图3.1-92
点击“确认”回到“舞台”，点击“保存”，点击“预览”观察效果
图3.1-93
5.添加背景音乐
如图，在“媒体库”中添加音乐素材
图3.1-94
将音乐素材移动至“舞台”之外，点击“舞台”空白处，在“背景音乐”中选择“声音1”
图3.1-95
点击“预览”观察效果
图3.1-96
同时，也可设置“分享”与“加载”
图3.1-97
6.查看后台表单数据
点击操作界面右上角“动画作品”
图3.1-98
在“动画作品”界面点击该作品“统计”按钮
图3.1-99
在“数据”界面选择“表单数据”，即可查看所提交的表单信息。
图3.1-100 收起阅读 »
>>>案例预览
本节视频教程请点击此处。
1.添加素材、排版
如下图，在新建页面上添加图片素材、矩形、文本框，调整其位置、大小、文字内容、文字大小、颜色等属性
图3.1-67
同理添加三组相同的素材，排版如下：
图3.1-68
在添加图片时，我们应注意，将每一个职位的素材分别合并成组，并放在不同的图层内。例如，将“总顾问”一组放置“顾问”图层，将“市场总监”一组放置“市场总监”图层，将“快递员”一组放置“快递员”图层上。
图3.1-69
2.添加动画效果
在时间轴上选择所有图层的第30帧，右键→“插入帧”
图3.1-70
点击无需添加动画的图层3、4的类似锁状的按钮，将其锁住，选中“快递员”“市场总监”“顾问”三个图层的时间线，右键→“插入关键帧动画”
图3.1-71
如下图，为方便编辑，可选中三个组，将其向右移动至合适编辑的位置
图3.1-72
选中“快递员”图层第1帧，调整“快递员”组的“Y轴旋转”角度为“-50”
图3.1-73
选中“市场总监”图层第1帧，调整“市场总监”组的“Y轴旋转”角度为“-40”
图3.1-74
将所有素材拖动至原来位置，即使第一组“总顾问”放在“舞台”正中间。
图3.1-75
选中动画最后一帧，即第30帧，将“舞台”上的所有元素向左拖动，使最后一组“快递员”组放在“舞台”正中间。
图3.1-76
可点击“播放”按钮观察整体的动画效果
图3.1-77
同时，在动画最后一帧，即第30帧，点击设置“市场总监”组的“Y轴旋转”为“40”
图3.1-78
移动元素至合适位置，在动画最后一帧，即第30帧，点击设置“总顾问”组的“Y轴旋转”为“50”
图3.1-79
最后，在最后一帧将所有元素移到合适位置，即将最后一组“快递员”组放在“舞台”正中间。
图3.1-80
3.添加按钮
如下图，新建一个图层，命名为“按钮”，在“按钮”图层上添加一个矩形，使其高度与“舞台”相同，宽度大于“舞台”
图3.1-81
将按钮矩形“透明度”设置为“0”，并为其命名为“透明按钮”
图3.1-82
点击“舞台”空白处，在“舞台”的“属性”面板下找到“动画关联”，选择“启用”，点击“关联”按钮
图3.1-83
设置“关联”属性
关联对象：“透明按钮”
关联属性：“左”
开始值：“-203”（“透明按钮”最右端与舞台右端重合时的位置）
结束值：“0”
播放模式：“同步”
注意：为方面观察，也可先将“透明按钮”透明度调整为“20”
图3.1-84
选中“透明按钮”，在其“属性”面板下找到“拖动/旋转”按钮，选择“水平拖动”
图3.1-85
可点击“预览”观察效果，若观察到动画移至重复播放，可回到“舞台”，点击“动画”，勾除“循环”
图3.1-86
4.添加表单
为方便编辑，将图层4（放置“我要应聘”按钮）移至最上层，并改名为“表单按钮”。注意：此处为区分，已将原先的“按钮”图层重命名为“透明按钮”
图3.1-87
选中“我要应聘”按钮元素，在其“属性”面板下找到“动作”，选择“表单”，点击右边的“编辑”按钮
图3.1-88
在弹出的“编辑表单”中设置
表单名称：“应聘”
提交方式：“GET”
提交目标：“提交数据到后台”
确认消息：“提交成功”
背景颜色、字体颜色、字体大小等
点击“添加表单项”
图3.1-89
在“添加表单项”对话框中填写
名称：“姓名”
描述：“姓名”
类型：“输入框”，点击“保存”
图3.1-90
同理，再添加一个表单项，设置内容为
名称：“应聘职位”
描述：“应聘职位”
类型：“单选框”
取值：“总顾问、市场总监、快递员”（一行为一个选项）
点击“保存”
图3.1-91
同理，再添加一个表单项，设置内容为
名称：“电话”
描述：“电话”
类型：“电话号码”，点击“保存”
图3.1-92
点击“确认”回到“舞台”，点击“保存”，点击“预览”观察效果
图3.1-93
5.添加背景音乐
如图，在“媒体库”中添加音乐素材
图3.1-94
将音乐素材移动至“舞台”之外，点击“舞台”空白处，在“背景音乐”中选择“声音1”
图3.1-95
点击“预览”观察效果
图3.1-96
同时，也可设置“分享”与“加载”
图3.1-97
6.查看后台表单数据
点击操作界面右上角“动画作品”
图3.1-98
在“动画作品”界面点击该作品“统计”按钮
图3.1-99
在“数据”界面选择“表单数据”，即可查看所提交的表单信息。
图3.1-100 收起阅读 »
3.1.1 展示动画：邀请函
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
>>>案例预览
1.添加素材
如下图，在“舞台”上添加一个长形图片素材
图3.1-1
使用“变形”工具调整长图大小位置如下
图3.1-2
在“舞台”下端空白部分添加一个矩形，调整矩形宽高使其符合“舞台”
图3.1-3
在矩形“属性”面板下点击设置矩形填充颜色，按照Alt键使用吸管吸取图片素材上的背景颜色，统一矩形颜色。
图3.1-4
图3.1-5
如下图，点击在“舞台”上添加一个文本框，在其“属性”面板下调整其颜色、大小、位置等属性
图3.1-6
同理，添加一个矩形，修改其填充色、边框颜色、大小、位置等属性如下图
图3.1-7
同理，点击添加一个输入框
图3.1-8
按需求在其“属性”面板下调整输入框位置、大小、文字颜色、字体等使其符合整体样式
图3.1-9
按照Ctrl键同时选中输入框与背景矩形框，右键→“复制”
图3.1-10
按住Ctrl+Shift+V粘贴至当前位置
图3.1-11
按照Shift键将新粘贴进的对象移动至合适位置
图3.1-12
添加矩形背景按钮和文本框，输入文本框内容为“提交”，调整二者的大小、位置、颜色等属性至合适程度，如下图
图3.1-13
按照Ctrl键选中矩形背景按钮与文字框，右键→“组”→“组合”
图3.1-14
点击选中第一个输入框，在其“属性”面板下修改“提示文字”为“请输入姓名”
图3.1-15
同理，点击选中第二个输入框，在其“属性”面板下修改“提示文字”为“请输入电话”，“类型”为“电话号码”，“必填项”为“是”
图3.1-16
分别为两个输入框命名为“姓名”“电话”
图3.1-17
图3.1-18
2.添加行为
点击“提交”按钮右边的“添加/编辑行为”按钮
图3.1-19
在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮
图3.1-20
在“参数”对话框内，选择“提交目标”为“默认数据服务”，勾选“提交对象”为“姓名”“电话”，点击“确认”
图3.1-21
点击“预览”观察效果
图3.1-22
如下图，点击添加第2页，点击“舞台”空白处，在“舞台”的“属性”面板下修改填充颜色：点击填充颜色框，按照Alt键吸取第1页背景图片的颜色，统一舞台颜色。
图3.1-23
在第2页点击添加文本框，输入文字内容如下图，并在其“属性”面板下修改文本框文字大小、字体、颜色等属性
图3.1-24
回到第1页，选中“提交”按钮，右键→“复制”
图3.1-25
点击回到第2页，按照Ctrl+Shift+V粘贴至当前位置
图3.1-26
双击按钮进入“组”页面，修改文本框文字内容为“我想再看看活动时间”
图3.1-27
回到“舞台”，点击选中按钮，在其“属性”面板下找到“动作”，选择“无”，取消掉表单行为
图3.1-28
图3.1-29
点击第2页右下角“复制页面”按钮，复制第2页至第3页面
图3.1-30
修改文本框“老朋友 提交失败 再来一次吧”，如下图
图3.1-31
双击按钮组进入“组”页面，修改按钮文字内容为“OK，再来一次”
图3.1-32
点击“保存”并填写名称为“邀请卡”
图3.1-33
回到第1页，点击选中第1帧，即全选第一页素材
图3.1-34
右键→“组”→“组合”，将第1页第1帧上的所有元素合并成一个组
图3.1-35
在该组合的“属性”面板下找到“拖动/旋转”选项，选择“垂直拖动”。
图3.1-36
按照Shift键将组合往下拖动，手动使其顶部与“舞台”顶部对齐
图3.1-37
也可在“属性”面板下调整其“上”值为“0”，使其顶部与“舞台”顶部对齐
图3.1-38
双击“组”进入组页面，点击“提交”按钮右边的“添加/编辑行为”按钮
图3.1-39
在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮
图3.1-40
在“参数”对话框选择“操作成功后”为“跳转到页”，点击其右边的“编辑”按钮
图3.1-41
在新弹出的“参数”对话框内选择“页号”为“2”，“翻页方式”为“平移”，点击“确认”
图3.1-42
同理，选择“操作失败后”为“跳转到页”，点击其右边的“编辑”按钮
图3.1-43
在新弹出的“参数”对话框内选择“页号”为“3”，“翻页方式”为“平移”，点击“确认”
图3.1-44
回到“舞台”页面，点击“预览”观察效果
图3.1-45
接下来，在“舞台”上添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-46
在其“编辑行为”对话框内选择“动画播放控制”→“禁止翻页”→触发条件：“出现”，即设置了当该矩形出现即禁止系统默认的上下翻页行为。
图3.1-47
如图，在第2页面，点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮，进入“编辑行为”对话框，选择“动画播放控制”→“跳转到页”→触发条件：“点击”，点击“编辑”按钮
图3.1-48
在“参数”对话框内设置“页号”为“1”，“翻页方式”为“平移”，点击“确认”
图3.1-49
回到第1页，选中“组”，为其命名为“首页”
图3.1-50
在第2页，点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮，进入“编辑行为”对话框，添加“改变元素属性”行为：选择“属性控制”→“改变元素属性”→触发条件：“点击”，点击该行为的“编辑”按钮
图3.1-51
如图，在“参数”对话框内设置：
元素名称：“首页”
元素属性：“上”
赋值方式：“用设置的值替换现有的值”
取值：“-370”
点击“确认”，即设置行为：点击“我想再看看活动时间”按钮时，页面跳转至第1页，且“首页”组合的“上”值为“-370”，即活动时间刚好显示在“舞台”中间的位置
图3.1-52
点击“预览”效果
图3.1-53
如图，点击选中第3页失败页面，点击“ok，再来一次”按钮的“添加/编辑行为”按钮，在“编辑行为”对话框内选择：“动画播放控制”→“跳转到页”→触发条件：“点击”，点击该行为的“编辑”按钮
图3.1-54
设置参数“页号”为“1”，“翻页方式”为“平移”，点击“确认”
图3.1-55
3.添加背景音乐
点击“素材库”，选择添加已上传的“声音”素材至“舞台”
图3.1-56
将音频移至“舞台”之外，鼠标点击“舞台”空白处，在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”（即刚刚添加的音乐素材）
图3.1-57
点击“预览”背景音乐
图3.1-58
4.设置“加载”界面
如下图，点击“加载”界面，选择“样式”为“进度条”，“提示”为“嘿，老朋友，好久不见”，并修改文字大小，是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。
图3.1-59
如下图，点击“分享”界面，填写分享信息，上传添加分享图标等。
图3.1-60
5.发布
点击“发布”按钮
图3.1-61
在“发布动画”页面输入“备注名”为“邀请卡”，勾选同意书，点击“下一步”
图3.1-62
发布成功
图3.1-63
6.查看表单统计数据
我们可在Mugeda账号主页的“动画作品”中看到最新的作品缩略图。
图3.1-64
点击动画缩略图右下角三点的按钮，点击“统计”
图3.1-65
即在“数据”→“表单数据”下可观察到刚刚提交的表单内容
图3.1-66 收起阅读 »
本节视频教程请点击此处。
>>>案例预览
1.添加素材
如下图，在“舞台”上添加一个长形图片素材
图3.1-1
使用“变形”工具调整长图大小位置如下
图3.1-2
在“舞台”下端空白部分添加一个矩形，调整矩形宽高使其符合“舞台”
图3.1-3
在矩形“属性”面板下点击设置矩形填充颜色，按照Alt键使用吸管吸取图片素材上的背景颜色，统一矩形颜色。
图3.1-4
图3.1-5
如下图，点击在“舞台”上添加一个文本框，在其“属性”面板下调整其颜色、大小、位置等属性
图3.1-6
同理，添加一个矩形，修改其填充色、边框颜色、大小、位置等属性如下图
图3.1-7
同理，点击添加一个输入框
图3.1-8
按需求在其“属性”面板下调整输入框位置、大小、文字颜色、字体等使其符合整体样式
图3.1-9
按照Ctrl键同时选中输入框与背景矩形框，右键→“复制”
图3.1-10
按住Ctrl+Shift+V粘贴至当前位置
图3.1-11
按照Shift键将新粘贴进的对象移动至合适位置
图3.1-12
添加矩形背景按钮和文本框，输入文本框内容为“提交”，调整二者的大小、位置、颜色等属性至合适程度，如下图
图3.1-13
按照Ctrl键选中矩形背景按钮与文字框，右键→“组”→“组合”
图3.1-14
点击选中第一个输入框，在其“属性”面板下修改“提示文字”为“请输入姓名”
图3.1-15
同理，点击选中第二个输入框，在其“属性”面板下修改“提示文字”为“请输入电话”，“类型”为“电话号码”，“必填项”为“是”
图3.1-16
分别为两个输入框命名为“姓名”“电话”
图3.1-17
图3.1-18
2.添加行为
点击“提交”按钮右边的“添加/编辑行为”按钮
图3.1-19
在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮
图3.1-20
在“参数”对话框内，选择“提交目标”为“默认数据服务”，勾选“提交对象”为“姓名”“电话”，点击“确认”
图3.1-21
点击“预览”观察效果
图3.1-22
如下图，点击添加第2页，点击“舞台”空白处，在“舞台”的“属性”面板下修改填充颜色：点击填充颜色框，按照Alt键吸取第1页背景图片的颜色，统一舞台颜色。
图3.1-23
在第2页点击添加文本框，输入文字内容如下图，并在其“属性”面板下修改文本框文字大小、字体、颜色等属性
图3.1-24
回到第1页，选中“提交”按钮，右键→“复制”
图3.1-25
点击回到第2页，按照Ctrl+Shift+V粘贴至当前位置
图3.1-26
双击按钮进入“组”页面，修改文本框文字内容为“我想再看看活动时间”
图3.1-27
回到“舞台”，点击选中按钮，在其“属性”面板下找到“动作”，选择“无”，取消掉表单行为
图3.1-28
图3.1-29
点击第2页右下角“复制页面”按钮，复制第2页至第3页面
图3.1-30
修改文本框“老朋友 提交失败 再来一次吧”，如下图
图3.1-31
双击按钮组进入“组”页面，修改按钮文字内容为“OK，再来一次”
图3.1-32
点击“保存”并填写名称为“邀请卡”
图3.1-33
回到第1页，点击选中第1帧，即全选第一页素材
图3.1-34
右键→“组”→“组合”，将第1页第1帧上的所有元素合并成一个组
图3.1-35
在该组合的“属性”面板下找到“拖动/旋转”选项，选择“垂直拖动”。
图3.1-36
按照Shift键将组合往下拖动，手动使其顶部与“舞台”顶部对齐
图3.1-37
也可在“属性”面板下调整其“上”值为“0”，使其顶部与“舞台”顶部对齐
图3.1-38
双击“组”进入组页面，点击“提交”按钮右边的“添加/编辑行为”按钮
图3.1-39
在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮
图3.1-40
在“参数”对话框选择“操作成功后”为“跳转到页”，点击其右边的“编辑”按钮
图3.1-41
在新弹出的“参数”对话框内选择“页号”为“2”，“翻页方式”为“平移”，点击“确认”
图3.1-42
同理，选择“操作失败后”为“跳转到页”，点击其右边的“编辑”按钮
图3.1-43
在新弹出的“参数”对话框内选择“页号”为“3”，“翻页方式”为“平移”，点击“确认”
图3.1-44
回到“舞台”页面，点击“预览”观察效果
图3.1-45
接下来，在“舞台”上添加一个矩形，点击矩形“添加/编辑行为”按钮
图3.1-46
在其“编辑行为”对话框内选择“动画播放控制”→“禁止翻页”→触发条件：“出现”，即设置了当该矩形出现即禁止系统默认的上下翻页行为。
图3.1-47
如图，在第2页面，点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮，进入“编辑行为”对话框，选择“动画播放控制”→“跳转到页”→触发条件：“点击”，点击“编辑”按钮
图3.1-48
在“参数”对话框内设置“页号”为“1”，“翻页方式”为“平移”，点击“确认”
图3.1-49
回到第1页，选中“组”，为其命名为“首页”
图3.1-50
在第2页，点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮，进入“编辑行为”对话框，添加“改变元素属性”行为：选择“属性控制”→“改变元素属性”→触发条件：“点击”，点击该行为的“编辑”按钮
图3.1-51
如图，在“参数”对话框内设置：
元素名称：“首页”
元素属性：“上”
赋值方式：“用设置的值替换现有的值”
取值：“-370”
点击“确认”，即设置行为：点击“我想再看看活动时间”按钮时，页面跳转至第1页，且“首页”组合的“上”值为“-370”，即活动时间刚好显示在“舞台”中间的位置
图3.1-52
点击“预览”效果
图3.1-53
如图，点击选中第3页失败页面，点击“ok，再来一次”按钮的“添加/编辑行为”按钮，在“编辑行为”对话框内选择：“动画播放控制”→“跳转到页”→触发条件：“点击”，点击该行为的“编辑”按钮
图3.1-54
设置参数“页号”为“1”，“翻页方式”为“平移”，点击“确认”
图3.1-55
3.添加背景音乐
点击“素材库”，选择添加已上传的“声音”素材至“舞台”
图3.1-56
将音频移至“舞台”之外，鼠标点击“舞台”空白处，在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”（即刚刚添加的音乐素材）
图3.1-57
点击“预览”背景音乐
图3.1-58
4.设置“加载”界面
如下图，点击“加载”界面，选择“样式”为“进度条”，“提示”为“嘿，老朋友，好久不见”，并修改文字大小，是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。
图3.1-59
如下图，点击“分享”界面，填写分享信息，上传添加分享图标等。
图3.1-60
5.发布
点击“发布”按钮
图3.1-61
在“发布动画”页面输入“备注名”为“邀请卡”，勾选同意书，点击“下一步”
图3.1-62
发布成功
图3.1-63
6.查看表单统计数据
我们可在Mugeda账号主页的“动画作品”中看到最新的作品缩略图。
图3.1-64
点击动画缩略图右下角三点的按钮，点击“统计”
图3.1-65
即在“数据”→“表单数据”下可观察到刚刚提交的表单内容
图3.1-66 收起阅读 »
2.2.12 素材与媒体：粘贴第三方文字和图片
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
1、现在可以直接将剪切板的文字添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的菜单操作）将一段文字复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将该文字粘贴成一个文本对象；
2、现在可以直接将剪切板的图片添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的操作，例如QQ的屏幕截屏）将一张图片复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将图片在“选择图片”对话框中打开并准备上传；
3、可以直接将文件拖动到舞台并放下，即可打开上传图片对话框并上传图片；
相关教学视频本周会上线，请留意论坛和群内消息哟~ 收起阅读 »
本节视频教程请点击此处。
复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
1、现在可以直接将剪切板的文字添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的菜单操作）将一段文字复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将该文字粘贴成一个文本对象；
2、现在可以直接将剪切板的图片添加到物体。操作方法是：在任意应用中用Ctrl+C(或者等效的操作，例如QQ的屏幕截屏）将一张图片复制到剪切板，然后在Mugeda IDE中用Ctrl+V即可将图片在“选择图片”对话框中打开并准备上传；
3、可以直接将文件拖动到舞台并放下，即可打开上传图片对话框并上传图片；
相关教学视频本周会上线，请留意论坛和群内消息哟~ 收起阅读 »
2.2.11 素材与媒体：虚拟现实/全景组件的用法
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添加热点进行交互。
具体教程：
1、添加组件
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加：
在画布上拖动鼠标画出组件的位置。松开鼠标后，即可进入编辑场景图片的界面。
插入场景图片时，注意图片格式，规定如下：
选择图片后，会出现更多的编辑选项，各区域说明如下图所示：
1) 场景预览区：这里可以看到载入的图片渲染的场景效果，可以用鼠标拖动进行全景浏览；
2) 场景列表区：显示所有添加的场景，可以对场景添加、删除、编辑、排序；
3) 热点和场景编辑：用来切换热点和场景；
4) 全局配置：用来设置导航条以及导航条中出现的条目的选择；
很多编辑区域均配有即时帮助：
2、编辑场景
场景具有如下属性：
1) 图片：即全景的导入图片，支持等距长方投影和三维六面贴图两种格式；
2) 预览图：在全景载入之前的一个小尺寸图片，可选；
3) 缩略图：如果选择显示导航条，缩略图会显示在导航条上提示用户，尺寸是64*64；
4) 标题：每一个场景的名称，会显示在导航条上；
3、热点编辑
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下，可以添加、删除、移动热点，并未热点指定图形、动画和行为。
击热点列表下的添加图标，可以进入热点添加模式。
进入热点添加模式后，加号图标会变成橙色提醒用户。
在热点添加模式下，在场景预览区域点击即可添加新的热点。
点击热点列表中的任一热点，可以在列表中和预览窗口中定位热点，便于识别。
每个热点可编辑的属性有：
1) 热点名称：用于区分和识别不同热点的名称；
2) 图标：显示在场景中的图标；
3) 尺寸：图标的显示大小；
4) 行为：点击热点后激活的行为；
5) 操作：对行为进行编辑或者删除热点；
具体说明两点：图标和行为。
3、热点图标和行为
3.1 热点图标
热点图标Mugeda提供预置的图标，如图：
以外，用户可以上传任意的图片作为热点图标，在“+”位置添加，如图：
并指定相应的尺寸即可，如图：
3.2 热点行为 点击热点后，可以触发一系列的行为。该操作和为物体添加行为类似。
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时，需要指定场景名称和热点名称。其中，热点名称可选，如果不指定，切换场景后会切换到预览窗口所显示的区域。
4、场景属性
1) 显示导航：在屏幕下方出现的导航条。当包含2个以上的场景时，建议选择;
2) 允许陀螺仪控制：是否在导航条上显示陀螺仪控制的切换图标；
3) 左右分离视角：是否在导航条上显示左右分离视角；这个目前比较小众，建议不选；
5、场景渲染
场景渲染时，可以用鼠标或者手指拖动切换视。如果选择了显示导航，还会出现一个导航条提供进一步的选择包括：上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
6、如何产生全景内容
产生全景内容的方式有两种：
1) 用可以产生全景内容的App
例如：Google Street View, Sphere, 百度圈景，等等。在苹果和安卓应用商店可以搜到。
2) 用全景拍摄设备。这些设备从简单到专业有很多选择，例如Insta360在京东的旗舰店： http://insta360.jd.com/
相关教学视频本周会上线，请留意论坛和群内消息哟~ 收起阅读 »
虚拟现实场景组件已经更新到beta.mugeda.com，最近会更新到正式版，请亲们留意最新公告哈。
点击查看全景演示
本节视频教程请点击此处。
简介：
虚拟现实场景组件，可以用来显示360度全景图片，并添加热点进行交互。
具体教程：
1、添加组件
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加：
在画布上拖动鼠标画出组件的位置。松开鼠标后，即可进入编辑场景图片的界面。
插入场景图片时，注意图片格式，规定如下：
选择图片后，会出现更多的编辑选项，各区域说明如下图所示：
1) 场景预览区：这里可以看到载入的图片渲染的场景效果，可以用鼠标拖动进行全景浏览；
2) 场景列表区：显示所有添加的场景，可以对场景添加、删除、编辑、排序；
3) 热点和场景编辑：用来切换热点和场景；
4) 全局配置：用来设置导航条以及导航条中出现的条目的选择；
很多编辑区域均配有即时帮助：
2、编辑场景
场景具有如下属性：
1) 图片：即全景的导入图片，支持等距长方投影和三维六面贴图两种格式；
2) 预览图：在全景载入之前的一个小尺寸图片，可选；
3) 缩略图：如果选择显示导航条，缩略图会显示在导航条上提示用户，尺寸是64*64；
4) 标题：每一个场景的名称，会显示在导航条上；
3、热点编辑
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下，可以添加、删除、移动热点，并未热点指定图形、动画和行为。
击热点列表下的添加图标，可以进入热点添加模式。
进入热点添加模式后，加号图标会变成橙色提醒用户。
在热点添加模式下，在场景预览区域点击即可添加新的热点。
点击热点列表中的任一热点，可以在列表中和预览窗口中定位热点，便于识别。
每个热点可编辑的属性有：
1) 热点名称：用于区分和识别不同热点的名称；
2) 图标：显示在场景中的图标；
3) 尺寸：图标的显示大小；
4) 行为：点击热点后激活的行为；
5) 操作：对行为进行编辑或者删除热点；
具体说明两点：图标和行为。
3、热点图标和行为
3.1 热点图标
热点图标Mugeda提供预置的图标，如图：
以外，用户可以上传任意的图片作为热点图标，在“+”位置添加，如图：
并指定相应的尺寸即可，如图：
3.2 热点行为 点击热点后，可以触发一系列的行为。该操作和为物体添加行为类似。
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时，需要指定场景名称和热点名称。其中，热点名称可选，如果不指定，切换场景后会切换到预览窗口所显示的区域。
4、场景属性
1) 显示导航：在屏幕下方出现的导航条。当包含2个以上的场景时，建议选择;
2) 允许陀螺仪控制：是否在导航条上显示陀螺仪控制的切换图标；
3) 左右分离视角：是否在导航条上显示左右分离视角；这个目前比较小众，建议不选；
5、场景渲染
场景渲染时，可以用鼠标或者手指拖动切换视。如果选择了显示导航，还会出现一个导航条提供进一步的选择包括：上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
6、如何产生全景内容
产生全景内容的方式有两种：
1) 用可以产生全景内容的App
例如：Google Street View, Sphere, 百度圈景，等等。在苹果和安卓应用商店可以搜到。
2) 用全景拍摄设备。这些设备从简单到专业有很多选择，例如Insta360在京东的旗舰店： http://insta360.jd.com/
相关教学视频本周会上线，请留意论坛和群内消息哟~ 收起阅读 »
2.10.2 判断:逻辑表达式判断
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”，具体公式为“{{圆判断.left }}==29”，即设置了当“圆判断”圆形的左值等于29时，点击矩形跳转下一页；
图2.9-14
点击“预览”观察效果，由于此时“舞台”上的“圆判断”圆形左值正好是29，即点击矩形可跳转至下一页。
图2.9-15
同理，也可将公式改为“{{圆判断.left }}>15”，因“舞台”上的“圆判断”圆形左值等于29，即大于15，因此点击矩形仍可跳转至下一页。
图2.9-16
逻辑表达式可执行多种判断条件，如图，在“舞台”上添加一个输入框，命名为“sr”；
图2.9-17
同理，回到矩形“下一页”编辑行为的“参数”对话框，将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时，点击矩形才可跳转至下一页。
注意：“&&”表示“并且”
图2.9-18
点击“预览”观察效果；
图2.9-19
同理，将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时，点击矩形才可跳转至下一页。点击“预览”观察效果。
注意：“||”表示“或者”
图2.9-20
附件：逻辑表达式概念文档
收起阅读 »
本节视频教程请点击此处。
逻辑表达式判断即当物体条件符合所设定的表达式，即执行行为；
如下图，承接上一案例2.9.1 判断:条件判断，在矩形“下一页”编辑行为的“参数”对话框内，设置“执行条件”为“逻辑表达式”，具体公式为“{{圆判断.left }}==29”，即设置了当“圆判断”圆形的左值等于29时，点击矩形跳转下一页；
图2.9-14
点击“预览”观察效果，由于此时“舞台”上的“圆判断”圆形左值正好是29，即点击矩形可跳转至下一页。
图2.9-15
同理，也可将公式改为“{{圆判断.left }}>15”，因“舞台”上的“圆判断”圆形左值等于29，即大于15，因此点击矩形仍可跳转至下一页。
图2.9-16
逻辑表达式可执行多种判断条件，如图，在“舞台”上添加一个输入框，命名为“sr”；
图2.9-17
同理，回到矩形“下一页”编辑行为的“参数”对话框，将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时，点击矩形才可跳转至下一页。
注意：“&&”表示“并且”
图2.9-18
点击“预览”观察效果；
图2.9-19
同理，将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”，即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时，点击矩形才可跳转至下一页。点击“预览”观察效果。
注意：“||”表示“或者”
图2.9-20
附件：逻辑表达式概念文档
收起阅读 »
2.10.1 判断:条件判断
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件：“点击”，点击“确认”
“禁止翻页”：在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“点击”，点击“确认”
图2.9-2
新建下一页，为便于识别，在下一页中添加一张背景图片素材。
图2.9-3
回到上一页，新建一个输入框，为其命名为“判断”；
图2.9-4
点击矩形的“添加/编辑行为”按钮；
图2.9-5
在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮；
图2.9-6
在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”；
元素名称：“判断”
考察属性：“文本取值”
逻辑条件：“等于”
参考值：“100”
即设置了当“判断”输入框内容等于100时，点击矩形跳转到下一页的行为；
图2.9-7
点击“预览”观察效果；
图2.9-8
如下图，删除输入框，添加一个圆形，将其命名为“圆判断”；
图2.9-9
同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框，点击“下一页”行为的“编辑”按钮进入“参数”对话框；
图2.9-10
设置“执行条件”为“检查元素状态”；
元素名称：“圆判断”
考察属性：“左”
逻辑条件：“不等于”
参考值：“30”
即设置了当“圆判断”圆形左值不等于30时，点击矩形跳转下一页的行为；
图2.9-11
点击“预览”观察效果，如下图，此时“圆判断”的左值为“29”，即不等于30，因此点击矩形即会跳转至下一页；
图2.9-12
图2.9-13 收起阅读 »
本节视频教程请点击此处。
条件判断即通过一个物体的属性条件，判断物体行为是否执行;
如下图，点击在“舞台”上添加一个矩形；
图2.9-1
为矩形添加两个行为：
“跳转下一页”：点击矩形的“添加/编辑行为”按钮，在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件：“点击”，点击“确认”
“禁止翻页”：在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件：“点击”，点击“确认”
图2.9-2
新建下一页，为便于识别，在下一页中添加一张背景图片素材。
图2.9-3
回到上一页，新建一个输入框，为其命名为“判断”；
图2.9-4
点击矩形的“添加/编辑行为”按钮；
图2.9-5
在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮；
图2.9-6
在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”；
元素名称：“判断”
考察属性：“文本取值”
逻辑条件：“等于”
参考值：“100”
即设置了当“判断”输入框内容等于100时，点击矩形跳转到下一页的行为；
图2.9-7
点击“预览”观察效果；
图2.9-8
如下图，删除输入框，添加一个圆形，将其命名为“圆判断”；
图2.9-9
同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框，点击“下一页”行为的“编辑”按钮进入“参数”对话框；
图2.9-10
设置“执行条件”为“检查元素状态”；
元素名称：“圆判断”
考察属性：“左”
逻辑条件：“不等于”
参考值：“30”
即设置了当“圆判断”圆形左值不等于30时，点击矩形跳转下一页的行为；
图2.9-11
点击“预览”观察效果，如下图，此时“圆判断”的左值为“29”，即不等于30，因此点击矩形即会跳转至下一页；
图2.9-12
图2.9-13 收起阅读 »
2.8.4 关联绑定：公式关联
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如图，选中被控对象文本框，在其“属性”面板下点击字体右边的“关联”按钮，在下拉的关联属性菜单栏中设置：
关联对象：“遥控器3”
关联属性：“左”
关联方式：“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值；
图2.8-39
点击“预览”观察效果，我们发现，水平移动“控制器3”圆形，其“左”值被体现在文本框内；
图2.8-40
回到被控对象输入框的“文字”关联属性栏下，修改关联公式为：被控量=关联属性*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。
图2.8-41
也可修改关联公式为：被控量=（关联属性+25）*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。
图2.8-42
点击“预览”观察效果。如图，当“遥控器3”的“左”值等于0时，输入框的内容为（0+25）*3=75
图2.8-43 收起阅读 »
本节视频教程请点击此处。
如图，在“舞台”上添加一个文本框作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下将其命名为“遥控器3”，并调节“拖动/旋转”属性为“水平拖动”；
图2.8-38
如图，选中被控对象文本框，在其“属性”面板下点击字体右边的“关联”按钮，在下拉的关联属性菜单栏中设置：
关联对象：“遥控器3”
关联属性：“左”
关联方式：“公式关联”
被控量=“关联属性”
即设置了被控对象文本框的内容等于“遥控器3”圆形的“左”值；
图2.8-39
点击“预览”观察效果，我们发现，水平移动“控制器3”圆形，其“左”值被体现在文本框内；
图2.8-40
回到被控对象输入框的“文字”关联属性栏下，修改关联公式为：被控量=关联属性*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值的三倍。点击“预览”观察效果。
图2.8-41
也可修改关联公式为：被控量=（关联属性+25）*3，即设置了被控对象文本框的内容等于“控制器3”圆形的“左”值加25再乘以3。
图2.8-42
点击“预览”观察效果。如图，当“遥控器3”的“左”值等于0时，输入框的内容为（0+25）*3=75
图2.8-43 收起阅读 »
2.8.3 关联绑定：自动关联
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
图2.8-33
同理，选中被控对象矩形，在其“属性”面板下点击其“左”属性右边的“关联”按钮，在下拉的关联属性菜单内设置：
关联对象：“遥控器”
关联属性：“左”
关联方式：“自动关联”
点击弹出的“+”符号
图2.8-34
如下图，点击“+”符号后出现主控量与被控量的输入框，输入：
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时，矩形的“左”值等于“320”；
当“遥控器”圆形的“左”值等于150时，矩形的“左”值等于“0”；
当“遥控器”圆形的“左”值等于“300”时，矩形的“左”值等于“320”。
设置了这几个节点后，系统会自动设置调节中间的动画。
注意：主控量为控制物体的关联属性（此处为“控制器”圆形的“左”值）
被控量为被控制物体的关联属性（此处为矩形的“左”值）
图2.8-35
点击“预览”观察效果
图2.8-36
如下图，自动关联也可只控制一部分动画，例如设置自动关联属性为：
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”
图2.8-37
点击“预览”，观察发现只有当“遥控器”圆形的“左”值在100-200区间时，矩形的动画会从左移向右，而当“遥控器”圆形的“左”值在100以下或200以上时，矩形不移动位置。 收起阅读 »
本节视频教程请点击此处。
如图，在“舞台”上添加一个矩形作为被控对象，添加一个圆形作为控制物，在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”；
图2.8-32
并为圆形命名为“遥控器“；
图2.8-33
同理，选中被控对象矩形，在其“属性”面板下点击其“左”属性右边的“关联”按钮，在下拉的关联属性菜单内设置：
关联对象：“遥控器”
关联属性：“左”
关联方式：“自动关联”
点击弹出的“+”符号
图2.8-34
如下图，点击“+”符号后出现主控量与被控量的输入框，输入：
当主控量=“0”时被控量=“320”
当主控量=“150”时被控量=“0”
当主控量=“300”时被控量=“320”
即设置了当“遥控器”圆形的“左”值等于0时，矩形的“左”值等于“320”；
当“遥控器”圆形的“左”值等于150时，矩形的“左”值等于“0”；
当“遥控器”圆形的“左”值等于“300”时，矩形的“左”值等于“320”。
设置了这几个节点后，系统会自动设置调节中间的动画。
注意：主控量为控制物体的关联属性（此处为“控制器”圆形的“左”值）
被控量为被控制物体的关联属性（此处为矩形的“左”值）
图2.8-35
点击“预览”观察效果
图2.8-36
如下图，自动关联也可只控制一部分动画，例如设置自动关联属性为：
当主控量=“100”时被控量=“0”
当主控量=“200”时被控量=“320”
图2.8-37
点击“预览”，观察发现只有当“遥控器”圆形的“左”值在100-200区间时，矩形的动画会从左移向右，而当“遥控器”圆形的“左”值在100以下或200以上时，矩形不移动位置。 收起阅读 »
2.8.2 关联绑定：属性关联
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名为“输入框”；
图2.8-22
选中“属性关联”元素，在其“属性”面板下点击其透明度右边的“关联”按钮；
图2.8-23
在弹出的下拉菜单中填写关联属性：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值；
图2.8-24
可点击“预览”观察效果；
图2.8-25
同理，可设置“属性关联”元素的“上”的关联属性为：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值
图2.8-26
点击“预览”观察效果；
图2.8-27
同理，将输入框删除，在“舞台”上新添加一个矩形，在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”
图2.8-28
为矩形命名为“拖动遥控”；
图2.8-29
如下图，同理点击“属性关联”的“上”属性右边的“关联”按钮，设置关联属性为：
关联对象：“拖动遥控”
关联属性：“上”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值
图2.8-30
点击“预览”观察效果；
图2.8-31 收起阅读 »
本节视频教程请点击此处。
我们观察到，在“属性”面板下，所有属性右边都会有一个回形针式的“关联”按钮
图2.8-20
如下图，在“舞台”上添加一个输入框；
图2.8-21
为输入框命名为“输入框”；
图2.8-22
选中“属性关联”元素，在其“属性”面板下点击其透明度右边的“关联”按钮；
图2.8-23
在弹出的下拉菜单中填写关联属性：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素的透明度取值；
图2.8-24
可点击“预览”观察效果；
图2.8-25
同理，可设置“属性关联”元素的“上”的关联属性为：
关联对象：“输入框”
关联属性：“文本取值”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“输入框”的文本取值等于“属性关联”元素“上”的取值
图2.8-26
点击“预览”观察效果；
图2.8-27
同理，将输入框删除，在“舞台”上新添加一个矩形，在其“属性”面板下设置其“拖动/旋转”为“垂直拖动”
图2.8-28
为矩形命名为“拖动遥控”；
图2.8-29
如下图，同理点击“属性关联”的“上”属性右边的“关联”按钮，设置关联属性为：
关联对象：“拖动遥控”
关联属性：“上”
关联方式：“公式关联”
被控量=“关联属性”
即设置了“拖动遥控”矩形的上值等于“属性关联”元素“上”的取值
图2.8-30
点击“预览”观察效果；
图2.8-31 收起阅读 »
2.8.1 关联绑定：动画关联
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台”添加一个矩形素材，设置其由左移到右的动画效果。动画时间为第1帧到第100帧。
图2.8-1
新建图层1，在图层1第1帧位置上点击添加一个矩形在“舞台”上，在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”；
图2.8-2
在“属性”面板下为新添加的矩形命名为“遥控器”；
图2.8-3
鼠标点击“舞台”空白地方，在“舞台”的“属性”面板内找到“动画关联”选项，选择“启用”，点击右边弹出的“关联”按钮；
图2.8-4
在弹出的下拉菜单中填写关联属性：
关联对象：“遥控器”（即之前命名为“遥控器”的小矩形）
关联属性：“左”（即“遥控器”小矩形的最左值离舞台左端的距离值）
开始值：“0”
结束值：“100”
播放模式：“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时，动画启动播放，当距离值大于100时，动画停止播放。
图2.8-5
如下图，为方便观察，我们在“舞台”上添加一个宽度为100的紫色矩形，点击“预览”，观察到当“遥控器”小矩形的最左端在紫色矩形（其左值0-100）之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在紫色矩形（其左值100以上）之外时，上方的矩形停止播放动画。
图2.8-6
同理，将“舞台”上的关联属性设为开始值：“100”；结束值：“200”
图2.8-7
点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时，上方的矩形停止播放动画。
图2.8-8
同理，修改“舞台”上的关联属性中“播放模式”为“同步”，即可设置当“遥控器”小矩形的最左端在离舞台左端值100时，上方的矩形动画开始从第一帧播放；当“遥控器”小矩形的最左端在离舞台左端值0-200之间，上方的矩形动画同步播放；当“遥控器”小矩形的最左端在离舞台左端值200时，上方的矩形动画播放至最后一帧。
图2.8-9
可单击“预览”观察动画效果
图2.8-10
2.“元件”的动画关联
本节视频教程请点击此处。
“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。
如图，在“舞台”上添加一个矩形，选中矩形，右键→“转换为元件”，双击矩形进入元件编辑页面。
图2.8-11
如下图，为矩形元件设置一个从左向右移动的动画效果，动画区间为0-50帧
图2.8-12
点击页面左上角“舞台”字样回到“舞台”，在“舞台”上新建一个小矩形，为小矩形命名为“元件遥控器”
图2.8-13
在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”，选择“垂直拖动”，即设置了可垂直拖动“元件遥控器”
图2.8-14
选中矩形元件，在其“属性”面板下找到“动画关联”，选择“启动”，点击弹出的“关联”按钮
图2.8-15
在弹出的下拉菜单中填写关联属性：
关联对象：“元件遥控器”
关联属性：“上”（即“元件遥控器”小矩形的最上端离舞台上端的距离值）
开始值：“200”
结束值：“400”
播放模式：“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时，元件动画启动播放，当距离值小于200或大于400时，元件动画停止播放。
图2.8-16
可点击“预览”，预览效果
图2.8-17
同理，在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”，即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时，元件矩形动画开始从第一帧播放；当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间，元件矩形动画同步播放；当“元件遥控器”小矩形的最上端在离舞台上端值400时，元件矩形动画播放至最后一帧。
图2.8-18
可点击“预览”，预览效果
图2.8-19
收起阅读 »
在Mugeda中，动画关联有两种形式：1.关联“舞台”的动画；2.关联元件的动画。
1.“舞台”上的动画关联
本节视频教程请点击此处。
“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。
如下图，在“舞台”添加一个矩形素材，设置其由左移到右的动画效果。动画时间为第1帧到第100帧。
图2.8-1
新建图层1，在图层1第1帧位置上点击添加一个矩形在“舞台”上，在矩形“属性”面板内改变其“拖动/旋转”属性为“水平拖动”；
图2.8-2
在“属性”面板下为新添加的矩形命名为“遥控器”；
图2.8-3
鼠标点击“舞台”空白地方，在“舞台”的“属性”面板内找到“动画关联”选项，选择“启用”，点击右边弹出的“关联”按钮；
图2.8-4
在弹出的下拉菜单中填写关联属性：
关联对象：“遥控器”（即之前命名为“遥控器”的小矩形）
关联属性：“左”（即“遥控器”小矩形的最左值离舞台左端的距离值）
开始值：“0”
结束值：“100”
播放模式：“切换”
即设置好了当“遥控器”小矩形的最左端离舞台左端的距离值为0-100时，动画启动播放，当距离值大于100时，动画停止播放。
图2.8-5
如下图，为方便观察，我们在“舞台”上添加一个宽度为100的紫色矩形，点击“预览”，观察到当“遥控器”小矩形的最左端在紫色矩形（其左值0-100）之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在紫色矩形（其左值100以上）之外时，上方的矩形停止播放动画。
图2.8-6
同理，将“舞台”上的关联属性设为开始值：“100”；结束值：“200”
图2.8-7
点击“预览”可观察到动画效果为当“遥控器”小矩形的最左端在离舞台左端值100-200之间时，上方的矩形播放原先设置的从左向右的动画，当“遥控器”小矩形的最左端在离舞台左端值0-100或200之外时，上方的矩形停止播放动画。
图2.8-8
同理，修改“舞台”上的关联属性中“播放模式”为“同步”，即可设置当“遥控器”小矩形的最左端在离舞台左端值100时，上方的矩形动画开始从第一帧播放；当“遥控器”小矩形的最左端在离舞台左端值0-200之间，上方的矩形动画同步播放；当“遥控器”小矩形的最左端在离舞台左端值200时，上方的矩形动画播放至最后一帧。
图2.8-9
可单击“预览”观察动画效果
图2.8-10
2.“元件”的动画关联
本节视频教程请点击此处。
“元件”的动画关联与“舞台”的动画关联相似，区别是将对象由“舞台”转变为“元件”。
如图，在“舞台”上添加一个矩形，选中矩形，右键→“转换为元件”，双击矩形进入元件编辑页面。
图2.8-11
如下图，为矩形元件设置一个从左向右移动的动画效果，动画区间为0-50帧
图2.8-12
点击页面左上角“舞台”字样回到“舞台”，在“舞台”上新建一个小矩形，为小矩形命名为“元件遥控器”
图2.8-13
在“元件遥控器”小矩形“属性”面板下找到“拖动/旋转”，选择“垂直拖动”，即设置了可垂直拖动“元件遥控器”
图2.8-14
选中矩形元件，在其“属性”面板下找到“动画关联”，选择“启动”，点击弹出的“关联”按钮
图2.8-15
在弹出的下拉菜单中填写关联属性：
关联对象：“元件遥控器”
关联属性：“上”（即“元件遥控器”小矩形的最上端离舞台上端的距离值）
开始值：“200”
结束值：“400”
播放模式：“切换”
即设置好了当“元件遥控器”小矩形的最上端离舞台上端的距离值为200-400之间时，元件动画启动播放，当距离值小于200或大于400时，元件动画停止播放。
图2.8-16
可点击“预览”，预览效果
图2.8-17
同理，在元件矩形的“属性”面板下设置关联属性的“播放模式”为“同步”，即可设置当“元件遥控器”小矩形的最上端在离舞台上端值200时，元件矩形动画开始从第一帧播放；当“元件遥控器”小矩形的最上端在离舞台上端值200-400之间，元件矩形动画同步播放；当“元件遥控器”小矩形的最上端在离舞台上端值400时，元件矩形动画播放至最后一帧。
图2.8-18
可点击“预览”，预览效果
图2.8-19
收起阅读 »
2.7.6 表单:默认表单／定制文字
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-27
在弹出的“添加表单项”对话框中输入选项“名称”为“name”，“描述”为“姓名”，“类型”为“输入框”，“取值”为“张三”，点击“保存”，点击“确认”
图2.7-28
点击“预览”，在预览中输入姓名为“李四”，点击“确认”，即出现“定制成功”字样，点击“确认”，数据即提交至后台服务器中。
图2.7-29
图2.7-30
回到操作界面，点击“舞台”上的默认表单，在其“属性”面板内点击“编辑”按钮，进入“编辑表单”对话框
图2.7-31
选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-32
回到操作界面后，点击“预览”，在输入框内输入一个新名字，点击“确认”，刷新后H5页面即变成新输入的名字，这就是微信实时定制名字，它的数据不会被提交至后台。
图2.7-33
如下图，回到“编辑表单”对话框，点击“预置表单项（请选择）”按钮，在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。
图2.7-34
如下图，点击选择“联系方式（手机号码）”，在弹出的注意对话框中点击“确定”
图2.7-35
回到操作界面，点击“预览”，发现会出现默认的“名称”和“手机号码”两个选项内容
图2.7-36
2.定制文字
本节视频教程请点击此处。
如下图，在新页面上添加三个文字素材，分别为文字命名为“to”“greetings”“from”
图2.7-37
图2.7-38
图2.7-39
选中“定制文字”按钮素材，在其“属性”面板下选择“动作”为“表单”，点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮
图2.7-40
在弹出的“编辑表单”对话框中设置相关表单属性，填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-41
在弹出的“添加表单项”对话框中输入“名称”为“to”（连接到之前命名为“to”的文字框素材），“描述”为“收件人”，“类型”为“输入框”，“取值”为“亲爱的战友”，点击“保存”
图2.7-42
同理点击“添加表单项”按钮，再次添加“名称”为“greetings”（连接到之前命名为“greetings”的文字框素材），“描述”为“祝福语”，“类型”为“文本域”，“取值”可不填，点击“保存”
图2.7-43
同理点击“添加表单项”按钮，再次添加“名称”为“from”（连接到之前命名为“from”的文字框素材），“描述”为“发件人”，“类型”为“输入框”，“取值”为“你的朋友”，点击“保存”
图2.7-44
点击“预览”，如图，点击“定制文字”按钮，即可出现“定制文字”对话框，输入需定制的内容，点击“确认”，即可将定制的文字数据提交至后台。
图2.7-45
图2.7-46
如图，回到“舞台”，点击“舞台”上的“定制文字”按钮的“添加/编辑行为”
图2.7-47
在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-48
回到“舞台”，点击“预览”，如图在文字定制框内输入需定制的文字，点击“确认”
图2.7-49
发现页面会刷新，文字内容变成定制的内容
图2.7-50 收起阅读 »
1.编辑表单
本节视频教程请点击此处。
如图，新建一个页面，在“表单”工具条下点击“表单”按钮
图2.7-26
如图，在弹出的“编辑表单”对话框中设置相关表单属性，例如填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-27
在弹出的“添加表单项”对话框中输入选项“名称”为“name”，“描述”为“姓名”，“类型”为“输入框”，“取值”为“张三”，点击“保存”，点击“确认”
图2.7-28
点击“预览”，在预览中输入姓名为“李四”，点击“确认”，即出现“定制成功”字样，点击“确认”，数据即提交至后台服务器中。
图2.7-29
图2.7-30
回到操作界面，点击“舞台”上的默认表单，在其“属性”面板内点击“编辑”按钮，进入“编辑表单”对话框
图2.7-31
选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-32
回到操作界面后，点击“预览”，在输入框内输入一个新名字，点击“确认”，刷新后H5页面即变成新输入的名字，这就是微信实时定制名字，它的数据不会被提交至后台。
图2.7-33
如下图，回到“编辑表单”对话框，点击“预置表单项（请选择）”按钮，在下拉菜单下可选择“手机号码”“电子邮件”等多种选项。
图2.7-34
如下图，点击选择“联系方式（手机号码）”，在弹出的注意对话框中点击“确定”
图2.7-35
回到操作界面，点击“预览”，发现会出现默认的“名称”和“手机号码”两个选项内容
图2.7-36
2.定制文字
本节视频教程请点击此处。
如下图，在新页面上添加三个文字素材，分别为文字命名为“to”“greetings”“from”
图2.7-37
图2.7-38
图2.7-39
选中“定制文字”按钮素材，在其“属性”面板下选择“动作”为“表单”，点击“定制文字”按钮素材的绿色“添加/编辑行为”按钮
图2.7-40
在弹出的“编辑表单”对话框中设置相关表单属性，填写“表单名称”为“表单”，选择“提交方式”为“GET”，选择“提交目标”为“提交数据到后台”，填写“确认信息”为“定制成功”，选择背景颜色、字体颜色等。在“表单项”点击“添加表单项”按钮
图2.7-41
在弹出的“添加表单项”对话框中输入“名称”为“to”（连接到之前命名为“to”的文字框素材），“描述”为“收件人”，“类型”为“输入框”，“取值”为“亲爱的战友”，点击“保存”
图2.7-42
同理点击“添加表单项”按钮，再次添加“名称”为“greetings”（连接到之前命名为“greetings”的文字框素材），“描述”为“祝福语”，“类型”为“文本域”，“取值”可不填，点击“保存”
图2.7-43
同理点击“添加表单项”按钮，再次添加“名称”为“from”（连接到之前命名为“from”的文字框素材），“描述”为“发件人”，“类型”为“输入框”，“取值”为“你的朋友”，点击“保存”
图2.7-44
点击“预览”，如图，点击“定制文字”按钮，即可出现“定制文字”对话框，输入需定制的内容，点击“确认”，即可将定制的文字数据提交至后台。
图2.7-45
图2.7-46
如图，回到“舞台”，点击“舞台”上的“定制文字”按钮的“添加/编辑行为”
图2.7-47
在弹出的“编辑表单”对话框内容选择“提交目标”为“微信定制入口”，点击“确认”
图2.7-48
回到“舞台”，点击“预览”，如图在文字定制框内输入需定制的文字，点击“确认”
图2.7-49
发现页面会刷新，文字内容变成定制的内容
图2.7-50 收起阅读 »
2.7.5 表单:表单提交
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”；
图2.7-13
点击“舞台”上的“提交”按钮右边的“添加/编辑行为”按钮；
图2.7-14
在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮；
图2.7-15
在“参数”对话框中选择“提交目标”为“默认数据服务”，勾选需提交的对象，并选择“操作成功后”和“操作失败后”都为“跳转到页”，点击“操作成功后”右边的“编辑”按钮；
图2.7-16
在新弹出的“参数”对话框中设置页号为“2”，点击“确认”；
图2.7-17
点击“操作失败后”右边的“编辑”按钮，在新弹出的“参数”对话框中设置页号为“3”，点击“确认”；
图2.7-18
回到操作界面，添加第2、3页面，在第2页面添加文字素材“提交成功”，在第3页面添加文字素材“提交失败”；
图2.7-19
点击“预览”效果；
图2.7-20
保存作品，回到Mugeda账号主页，找到新保存的该作品；
图2.7-21
点击作品右下角的三个竖点符号，在弹出的选框中点击选择“统计”；
图2.7-22
图2.7-23
进入数据统计页面，点击“表单数据”，进入表单数据统计页面，可观察到之前提交的信息。这就是提交表单和数据查询方法；
图2.7-24
点击“导出数据”，可导出一个Excel形式的数据统计表；
图2.7-25
收起阅读 »
本节视频教程请点击此处。
提交表单之前，我们要给所需提交的元素命名。如图，在输入框“属性”面板下为其命名为“姓名”；
图2.7-12
同理，分别将选中单选框、多选框以及列表框命名为“性别”“爱好”“城市”；
图2.7-13
点击“舞台”上的“提交”按钮右边的“添加/编辑行为”按钮；
图2.7-14
在弹出的“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件：“点击”，点击“编辑”按钮；
图2.7-15
在“参数”对话框中选择“提交目标”为“默认数据服务”，勾选需提交的对象，并选择“操作成功后”和“操作失败后”都为“跳转到页”，点击“操作成功后”右边的“编辑”按钮；
图2.7-16
在新弹出的“参数”对话框中设置页号为“2”，点击“确认”；
图2.7-17
点击“操作失败后”右边的“编辑”按钮，在新弹出的“参数”对话框中设置页号为“3”，点击“确认”；
图2.7-18
回到操作界面，添加第2、3页面，在第2页面添加文字素材“提交成功”，在第3页面添加文字素材“提交失败”；
图2.7-19
点击“预览”效果；
图2.7-20
保存作品，回到Mugeda账号主页，找到新保存的该作品；
图2.7-21
点击作品右下角的三个竖点符号，在弹出的选框中点击选择“统计”；
图2.7-22
图2.7-23
进入数据统计页面，点击“表单数据”，进入表单数据统计页面，可观察到之前提交的信息。这就是提交表单和数据查询方法；
图2.7-24
点击“导出数据”，可导出一个Excel形式的数据统计表；
图2.7-25
收起阅读 »
2.7.4 表单:下拉菜单（列表框）
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程）
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
输入“选项”内容为“北京（BJ）”“天津（TJ）”，
“必填项”选择“是”。
注意：设置“选项”内容时，观察选项内容输入框内的提示语“一行一个值，格式如：中国（CN）。其中（CN）是表单提交的值”
图2.7-10
点击“预览”，观察效果
图2.7-11 收起阅读 »
本节视频教程请点击此处。
在工具条下找到“列表框”按钮，点击在“舞台”上“城市”右边位置添加一个列表框
图2.7-9
在列表框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
输入“选项”内容为“北京（BJ）”“天津（TJ）”，
“必填项”选择“是”。
注意：设置“选项”内容时，观察选项内容输入框内的提示语“一行一个值，格式如：中国（CN）。其中（CN）是表单提交的值”
图2.7-10
点击“预览”，观察效果
图2.7-11 收起阅读 »
2.7.3 表单:多选框
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“足球”“篮球”“乒乓球”三个（每行为一个标签），
“外观”选择为“标准”，
并调节“边框颜色”和“标记颜色”，
选择“变形”工具，调节“舞台”上多选框的位置、大小等。
图2.7-8 收起阅读 »
本节视频教程请点击此处。
在工具条下找到“多选框”按钮，点击在“舞台”上“爱好”右边位置添加一个多选框
图2.7-7
在多选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“足球”“篮球”“乒乓球”三个（每行为一个标签），
“外观”选择为“标准”，
并调节“边框颜色”和“标记颜色”，
选择“变形”工具，调节“舞台”上多选框的位置、大小等。
图2.7-8 收起阅读 »
2.7.2 表单:单选框
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“男”“女”两个（每行为一个标签）。
选择“变形”工具，调节“舞台”上单选框的位置、大小等。
图2.7-5
另外，在“属性”面板内，如果将“外观”选为“定制”，还可自定义选择上传“未选中图片”以及“选中图片”的素材，此处不多做详述。
图2.7-6 收起阅读 »
本节视频教程请点击此处。
在工具条下找到“单选框”按钮，点击在“舞台”上“性别”右边位置添加一个单选框
图2.7-4
在单选框“属性”面板下调节相关属性设置，例如：
调节字体为“黑色”，
字体大小为“20”，
“必填项”为“是”，
设置选题“标签”为“男”“女”两个（每行为一个标签）。
选择“变形”工具，调节“舞台”上单选框的位置、大小等。
图2.7-5
另外，在“属性”面板内，如果将“外观”选为“定制”，还可自定义选择上传“未选中图片”以及“选中图片”的素材，此处不多做详述。
图2.7-6 收起阅读 »