问题答疑

问题答疑

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

BUG反馈

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

原创分享

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

新功能需求

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

Mugeda培训

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

【Mugeda新功能教程】最新上线的小功能(超实用,赶紧马)

songyue 发表了文章 • 3 个评论 • 469 次浏览 • 2016-11-08 17:06 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1、增加给单页命名的功能 
具体操作步骤,在左侧页面栏中,每一页默认的命名是“第1页”、“第2页”……,如图:




 
把鼠标移至默认命名处,就能给单页重新命名,如图:




 
2、增加当使用舞台上的播放功能 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1、增加给单页命名的功能 
具体操作步骤,在左侧页面栏中,每一页默认的命名是“第1页”、“第2页”……,如图:
1.PNG

 
把鼠标移至默认命名处,就能给单页重新命名,如图:
2.PNG

 
2、增加当使用舞台上的播放功能时,点击舞台任意位置【暂停】功能 
具体操作步骤,点击舞台上的播放按钮,如图:
3.PNG

 
随意点击舞台任意处,即可暂停动画。
 
3、增加在属性栏改变某元素宽高属性时,锁定长宽比的功能 
具体操作步骤,如图:
4.PNG

 
4、可直接将图片粘贴在舞台上原有“上传”按钮消失,直接点击“选择”按钮就可以将图片添加到舞台,图片会在后台上传
具体操作步骤,点击工具条中的“导入图片”功能,如图:
5.PNG

 
然后选择图片,直接点击“选择”按钮,直接上传图片,如图:
6.png

 
5、绘画板功能增加只显示编辑颜色和画笔粗细的功能 ,不显示勾叉 
具体操作步骤,点击工具条中的“绘画板”功能,如图:
7.png

 
在舞台上拉出画布大小,并保持选中状态,如图:
8.png

 
在右侧属性栏中,选择“仅显示线宽和颜色”,在预览中就不会显示勾叉,如图:
9.png

 
6、鼠标点击范围精确识别为矢量图形范围(例:三角形就是三角形),目前任何图形的点击生效区域都是矩形的
具体操作步骤,在舞台中绘图圆形,并给圆形添加一个“点击跳转到上一页”功能,如图:
10.png

 
预览动画可以看到,动作只在圆形部分生效。
 
7、单选框、多选框增加横板显示 
具体操作步骤,在左侧工具条添加“单选框”工具到舞台,如图:
11.png


12.png

 
然后选择工具条中的“变形工具”,对单选框进行调整,即可调整成竖版,如图:
13.png


14.png

 
8、点赞控件增加:不可以取消赞的功能 
具体操作步骤,在左侧工具条添加“点赞”控件到舞台,如图:
15.png


16.png

 
在属性栏新增,不允许撤销点赞的选项,如图:
17.png

 
 
 

如何在mugeda实现,距某日8点35分20秒的倒计时案例

qq1f07c 发表了文章 • 1 个评论 • 106 次浏览 • 2016-11-07 15:23 • 来自相关话题

点这里
墙裂(墙裂到地震)要求mugeda加入倒计时模块,同意的点赞 查看全部
这里
墙裂(墙裂到地震)要求mugeda加入倒计时模块,同意的点赞

如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

qq1f07c 发表了文章 • 4 个评论 • 282 次浏览 • 2016-11-07 13:55 • 来自相关话题

如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

前段时间有人在论坛抛出倒计时如何实现的问题,本人觉得无代码实现倒计时挺有趣的,就是做了个里约奥运会倒计时的demo,不过昨天又有人问,本人又重新翻回以前的demo,发现demo有bug,
到底什么bug,看图






所以本人决定大 查看全部
如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

前段时间有人在论坛抛出倒计时如何实现的问题,本人觉得无代码实现倒计时挺有趣的,就是做了个里约奥运会倒计时的demo,不过昨天又有人问,本人又重新翻回以前的demo,发现demo有bug,
到底什么bug,看图
1.png



所以本人决定大一下补丁,同时为广大mu友分享(chun)下(shu)经(zhuang)验(b),下面开始装B时刻:
本人首先做了一个2017年元旦倒计时的demo,不要问为什么,因为元旦做起来比较简单,结束时间是2017年01月01日00点00分00秒,百度了一下,目前时间2016年11月7日,距离元旦还有54天,下面就是操作了,基本操作请查看mugeda教程,
首先,在舞台新建几个文本工具,分别分别分别设置其预置文本为当前时间/日期,格式最好设置为英文,格式最好设置为英文,格式最好设置为英文格,(说了三遍因为这很重要)我这里除了小时用了英文,其他用的中文(因为本人比较懒,所以没改英文格式,不改的话,出现bug后果自负!!!)

2.jpg


3.png


4.png


并且将获取的当前时间分别命名为h1、m1、s1,
剩余时间则为d、h、m、s,(计算倒计时要从秒开始算起,不要问为什么 ,你长大就懂了)
s=59-{{s1}},(也许你会问为什么是59而不是60,因为当前时间是0秒的时候,如果是60的话,s=60-0=60,所以差一秒而已,就忽略了吧,毕竟工作量可以减少不少,如果你是处女座的话来找我,来找本人给你开小灶)
m=59-{{m1}}
h=23-{{h1}}
剩下的看图,

5.png


关于剩余天数,可以直接用文本工具输入55,(问为什么是55,看上面)然后设置属性改变行为,,执行条件为:{{h.text}}=0&&{{m.text}}=0&&{{s.text}}=0&&{{h1.text}}!=23,什么看不懂什么意思,看这里http://bbs.mugeda.com/?/article/34,自己猜,
设置方式看下图

6.png


注:需要在桌面添加个计时器,是否循环设置为循环,所有的属性改变行为都要设置在这个计时器上,所有的属性改变行为都要设置在这个计时器上,所有的属性改变行为都要设置在这个计时器上。

7.png


到此,整个demo应该算结束了,为了圆满一点,本人加上了背景元素什么的装饰一下,然后插入了第二帧,当时时间到元旦的时候,就可以跳转到第二帧了,(怎么设置跳转的方法我就不说了,自己百度)。
下面看看demo:http://7642bdb8.u.h5mc.com/cam ... .html


8.png

 由于本人技术有限,以上教程如有bug,纯属胡扯,敬请见谅
特别声明:因本教程每月天数按30天计算,所以存在误差,如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可(此方法较为麻烦)
未完待续......
下期预告《如何在mugeda上无代码实现倒计时(天、时、分、秒)

【双十一来啦】一年仅一次,5折抢购Mugeda会员!

songyue 发表了文章 • 8 个评论 • 403 次浏览 • 2016-11-04 15:06 • 来自相关话题

双十一来啦,Mugeda怎么能没有活动呢?  
 
全年仅一次的会员5折疯抢,这次错过再等一年,而且此次优惠力度史无前例,聪明的宝宝们们都会快人一秒点击这里
 
·双十一狂欢日 5折抢购Mugeda会员 




活动形式: 购买会员享5折优惠(不含加量包,存储空间),新用户入会、老用户续费均可参 查看全部
双十一来啦,Mugeda怎么能没有活动呢?  
 
全年仅一次的会员5折疯抢,这次错过再等一年,而且此次优惠力度史无前例,聪明的宝宝们们都会快人一秒点击这里
 
·双十一狂欢日 5折抢购Mugeda会员 
微信-90.jpg

活动形式: 购买会员享5折优惠(不含加量包,存储空间),新用户入会、老用户续费均可参加。 
下单就送:99元案例课程包
 
活动时间: 11月10日——11月12日(3天)  
 
特别注意: 在双十一期间成功抢购会员的Mu友,凭自己的用户名与班主任—松月联系(QQ:154065262),兑换99元案例课程。
 
·5折会员有什么服务? 
huiyuan.png

Mugeda会员能享受什么服务,值得在双十一剁手呢?请听小编细细掰着指头跟你数数:海量H5模板免费使用、最热H5案例课程免费听、一对一专属答疑服务……更多会员服务请点击这里
 

【高级互动】如何用木疙瘩做游戏?

totalacg 发表了文章 • 1 个评论 • 675 次浏览 • 2016-11-04 12:34 • 来自相关话题

在众多H5作品中,游戏无疑是最吸引人的类型!而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了,这里将分享一下 如何用木疙瘩来做游戏!
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧!













1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
查看全部
在众多H5作品中,游戏无疑是最吸引人的类型!而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了,这里将分享一下 如何用木疙瘩来做游戏!
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧!
111.jpg
222.jpg
333.jpg
444.jpg

1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
 
那么怎么用木疙瘩做游戏呢?
 
1.准备素材
   首先需要把游戏所要用到的所有素材尽可能的先准备齐全,这样可以更直观的观察到游戏的效果,在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
   这一部分很重要,充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样,而是要在玩游戏过程中更深度的去理解!
   就拿上面的第五个案例《像素鸟》来说明吧
   像素鸟的游戏规则说明是:点击屏幕让小鸟上下移动,每穿过一次柱子并且没有碰到柱子则记一分
   但我们要结合游戏理解为:
   1.小鸟会在场景中前行
   2.柱子的出口位置随机变化
   3.小鸟会匀加速向下掉落,并且旋转角度也随其改变
   4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离,仅仅在手指按下瞬间时有效,持续按下无法连续触发
   5.小鸟碰到柱子或者屏幕上下方均使游戏失败,成功穿过柱子则记1分
   ……等
3.将每一条游戏规则翻译成逻辑语言
   到这一部分开始就需要费点脑子了,这里将涉及逻辑判断、数学和物理的各种运算,这一步的翻译可能需要进行很多次,先是翻译成木疙瘩功能可以实现的方法,再翻译成具体的各种公式,这是相对比较难的一部分,也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解,详情请参考教程贴:http://bbs.mugeda.com/?/article/289
   示范:(对应第二部分游戏规则编号进行翻译)
   1. 创建随机数控件,设置变化频率为0.1秒,并在控件上添加行为,使得“改变元素属性”行为持续响应
     第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
     第二个行为判断当坐标超出屏幕范围后,将坐标改为进入屏幕前的坐标
   2.在更改柱子坐标的同时再改变柱子的纵向坐标,坐标每次与随机数进行一个取值关联
   3.在舞台外创建一个文本框,定义为数值,在随机数控件上添加“改变元素”行为,实时改变小鸟的纵向坐标,使得小鸟按每次按速度下降,同时每次下降增加速度的数值,产生加速掉落效果
   4.在屏幕前放置一个透明的块,用来触发鼠标点击行为,鼠标点击触发行为改变速度为向上数值,产生小鸟瞬间向上移动的效果。
   5. 在判断小鸟纵向坐标在柱子缝隙范围内,并且小鸟穿过柱子宽度后,坐标小于小鸟坐标时,加1分,用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
     当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
   ……等
4.问题(BUG)检测
   在做第三步的时候,绝大部分人都会有BUG产生,有可能是因为行为触发方式选择错误,也有可能是逻辑表达式写错,取值公式算错等等各种原因,这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
   这里提供几个BUG查找的几个要领:
   1.如果出现关联动画失效,或者通过“改变元素”行为无法正确使得物体改变的时候,可以新建一个用于测试的文本框,用来显示关联的数值,或者公式计算结果,可以直观的看到数值的变化,以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同,最好在做之前先关联文本框观察一下变化规律。
   2.如果出现一个或多个导致最终结果实现的行为无法执行的时候,先依次取消执行条件,看看取消后能不能正常产生变化,就可以判断是取值公式的错误还是罗技表达式的错误了。
   3.如果确定了是取值公式或者逻辑表达式出错的话,请一定仔细检查一下书写的格式,不要急着让老师帮你找错,有时候很细微的书写问题是很难被找到的,例如英文括号写成了中文括号,英文i写成了数字1,对逻辑表达式没有了解透彻,把判断是否相等的公式写成了 a = b(正确应该是a == b),等等很多细节问题都是BUG产生的一大原因。
   4.一个游戏效果不符合理想中的效果,这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的,毕竟计算机不是人类,需要很严谨的根据你的命令去执行。
 
 
最后,木疙瘩教程页中有一些游戏的案例教程,大家可以去看看老师们是如何按照了上面的流程去做的!
教程地址:http://www.mugeda.com/help.php
 4.案例讲解→小游戏
 5.热门案例
 
觉得这篇文章对你有帮助的话,给我点个赞吧!
 
我的其它文章:
【代码分享】贴边UI功能! http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制(鼠标响应事件)! http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办?5招教你解决!    http://bbs.mugeda.com/?/question/230​

高难度deng deng deng deng音乐竞猜

回复

13917730466 发起了问题 • 2 人关注 • 0 个回复 • 131 次浏览 • 2016-11-04 02:16 • 来自相关话题

等灯登凳

13917730466 发表了文章 • 1 个评论 • 74 次浏览 • 2016-11-04 02:07 • 来自相关话题

111
111

2.9.7 API的应用:获取Mugeda后台数据

songyue 发表了文章 • 0 个评论 • 352 次浏览 • 2016-11-03 15:04 • 来自相关话题

方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是 查看全部
方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是存在跨域问题的,这个时候推荐使用jsonp的方式来请求数据,如果你的动画部署在自己的服务器上,这个时候就不会存在跨域问题,你可以使用ajax方式来请求数据。

推荐在动画中引入jQuery,这样你可以使用jQuery ajax方法来发送请求,以下是例子,其中url需要执行你自己后台的请求地址,注意,跨域情况下使用jsonp的请求需要服务器后台支持。

1.没有跨域的情况:
$.ajax({ 
  url: '/submit', 
  type: 'POST', 
  data: {name: 'test'}, 
  success: function (response) { 
     //TODO; 
  } 
});


2.跨域的情况:
$.ajax({ 
  url: "/submit.jsonp", 
  jsonp: "callback", 
  dataType: "jsonp", 
  data: {name: 'test'}, 
  success: function( response ) { 
     //TODO; 
  } 
});


2.9.6 API的应用:工具API
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码

逻辑判断(逻辑表达式)

回复

test099 发起了问题 • 5 人关注 • 0 个回复 • 421 次浏览 • 2016-11-01 11:03 • 来自相关话题

新建作品——页面显示绿色是什么意思呢?

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

新建作品——页面显示绿色是什么意思呢?





 
绿色部分是舞台上显示的区域






注:如果舞台显示完整,是不会出现绿色框的。
新建作品——页面显示绿色是什么意思呢?

2.jpeg

 
绿色部分是舞台上显示的区域

1.jpg


注:如果舞台显示完整,是不会出现绿色框的。

图片在手机显示的时候,怎么样处理可以点击图片自动缩放

test099 回复了问题 • 2 人关注 • 1 个回复 • 124 次浏览 • 2016-10-20 10:31 • 来自相关话题

技术常见问题汇总目录

mingyueliu 发表了文章 • 0 个评论 • 238 次浏览 • 2016-10-19 10:32 • 来自相关话题

强烈建议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 查看全部
强烈建议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日 技术问题汇总
 
 
 
 

【公告】Mugeda优化了声音播放的相关问题

mingyueliu 发表了文章 • 0 个评论 • 226 次浏览 • 2016-10-11 14:30 • 来自相关话题

近期优化了声音播放的相关问题,优化内容如下:

1. 改进了声音自动播放的问题;
2. 改进了声音播放延时的问题;

操作方法:

在属性面板为声音打开预加载,或者在行为面板中为行为声音打开预加载,都会为声音开启预加载策略。
打开预加载后,在loading界面阶段,将下载整个声音数据。
随后,在支持 查看全部
近期优化了声音播放的相关问题,优化内容如下:

1. 改进了声音自动播放的问题;
2. 改进了声音播放延时的问题;

操作方法:

在属性面板为声音打开预加载,或者在行为面板中为行为声音打开预加载,都会为声音开启预加载策略。
打开预加载后,在loading界面阶段,将下载整个声音数据。
随后,在支持的设备上,实现自动无延迟的播放声音。

4.jpeg


5.jpeg


效果:使用上面的处理后,声音在各种设备上表现。

3.jpeg


说明:
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.png


2.png


由于安卓设备的碎片化问题,我们不承诺所有的设备和场景都能做到自动播放和无延时播放,但是对于绝大部分场景,目前的方案已经可以很好的解决上述问题。
 

3.4.2 微信定制 :和奥运冠军合影

mingyueliu 发表了文章 • 0 个评论 • 305 次浏览 • 2016-10-10 17:49 • 来自相关话题

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

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

如下图,点击添加一张合影照素材,再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方,移动“椭圆”至合影者头像位置,修改各素材大小、颜色等;





图3.4-25

点击椭圆的“添加/ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,点击添加一张合影照素材,再点击添加一个矩形、一个椭圆形。移动矩形至“舞台”下方,移动“椭圆”至合影者头像位置,修改各素材大小、颜色等;

3.4-25_.png

图3.4-25

点击椭圆的“添加/编辑行为”按钮;

3.4-26_.png

图3.4-26

选择编辑行为为:“微信定制”→“定制图片”→触发条件:“点击”;

3.4-27_.png

图3.4-27

在“微信”工具条下点击“录音”工具,在“舞台”上添加两个图标,调整两个图标的位置如下图;

3.4-28_.png

图3.4-28

点击“预览”观察效果;

3.4-29_.png

图3.4-29

3.4.1 微信定制 :和宝宝聊天

mingyueliu 发表了文章 • 1 个评论 • 304 次浏览 • 2016-10-10 17:43 • 来自相关话题

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

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

如下图,新建“底”图层,添加“微信输入框”图片素材,新建“第一个”图层,添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图





图3.4-1

选中“第一个”图层上的两个图片素材 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,新建“底”图层,添加“微信输入框”图片素材,新建“第一个”图层,添加宝宝图片素材、对话图片素材。调整各素材大小位置如下图

3.4-1_.png

图3.4-1

选中“第一个”图层上的两个图片素材,右键→“组”→“组合”

3.4-2_.png

图3.4-2

点击其“添加预置动画”按钮

3.4-3_.png

图3.4-3

选择“浮入”的动画效果

3.4-4_.png

图3.4-4

点击蓝色的“编辑预置动画”按钮

3.4-5_.png

图3.4-5

在弹出的“动画选项”对话框中选择“时长”为“1”秒,默认“延迟”为“0”秒,“方向”为“下浮”,点击“确认”

3.4-6_.png

图3.4-6

新建“图层2”

3.4-7_.png

图3.4-7

鼠标选中“底”“第一个”两个图层的第2帧

3.4-8_.png

图3.4-8

右键→“插入帧”

3.4-9_.png

图3.4-9

点击选中“图层2”的第2帧,右键→“插入关键帧”

3.4-10_.png

图3.4-10

如下图,在“图层2”第2帧上添加回复的头像、微信对话框图、文本框,为文本框命名为“聊天”,并调整各素材大小、位置等。

3.4-11_.png

图3.4-11

3.4-12_.png

图3.4-12

选中“图层2”的第1帧,点击“输入框”工具,在“舞台”上添加一个输入框

3.4-13_.png

图3.4-13

为输入框命名为“输入”

3.4-14_.png

图3.4-14

在“图层2”第1帧上添加一个矩形

3.4-15_.png

图3.4-15

修改矩形透明度为“0”,点击该矩形的“添加/编辑行为”按钮

3.4-16_.png

图3.4-16

在“编辑行为”对话框中添加两个行为:

“跳转下一帧”:“动画播放控制”→“下一帧”→触发条件:“点击”
“改变元素属性”:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮,设置参数
元素名称:“聊天”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“{{输入}}”,点击“确认”

3.4-17_.png

图3.4-17

3.4-18_.png

图3.4-18

点击“预览”观察效果

3.4-19_.png

图3.4-19

点击“桃子”头像的“添加/编辑行为”对话框;

3.4-20_.png

图3.4-20

在“编辑行为”对话框中选择“微信定制”→“显示微信头像”→触发条件:“出现”;

3.4-21_.png

图3.4-21

如下图,在“微信”工具条下点击添加一个“微信昵称”,命名为“昵称”;

3.4-22_.png

图3.4-22

点击“分享”面板,可输入分享信息为“{{昵称}}在和宝宝聊天”,同理可输入转发描述、朋友圈转发标题等内容,如下图。

3.4-23_.png

图3.4-23

点击“保存”,点击“通过二维码共享”按钮,可用手机扫描二维码观察效果;

3.4-24_.png

图3.4-24
 

3.3.4 游戏测试:随机测试

mingyueliu 发表了文章 • 0 个评论 • 328 次浏览 • 2016-10-10 17:39 • 来自相关话题

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

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

如下图,在第1页面添加一张背景图






图3.3-130

新建“图层1”,添加“福袋”图片素材,点击“福袋”右边的“添加预置动画”按钮






图3.3-131

选择“悬摆” 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

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

如下图,在第1页面添加一张背景图

3.3-130_.png


图3.3-130

新建“图层1”,添加“福袋”图片素材,点击“福袋”右边的“添加预置动画”按钮

3.3-131_.png


图3.3-131

选择“悬摆”动画效果

3.3-132_.png


图3.3-132

在其“属性”面板下打开“预置动画”的“循环播放”功能

3.3-133_.png


图3.3-133

选中“图层1”上的第2帧,点击“素材库”按钮,选择要添加的两张图片素材,勾选“以序列帧形式添加”,点击“添加”

3.3-134_.png


图3.3-134

补充“图层0”上的第2、3帧,点击“图层0”时间轴第3帧,右键→“插入帧”

3.3-135_.png


图3.3-135

点击“福袋”的“添加/编辑行为”按钮,添加两个编辑行为:
“播放”行为:“动画播放控制”→“播放”→触发条件:“点击”
“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”


3.3-136_.png


图3.3-136

点击“图层1”上的第4帧,点击“素材库”按钮,在“媒体库”中选择五张所需图片素材,勾选“以序列帧形式添加”,点击“添加”

3.3-137_.png


图3.3-137

继续在“图层1”的第9、10帧上分别添加两张图片素材

3.3-138_.png


图3.3-138

补充“图层0”上的帧数,选中“图层0”上第10帧,右键→“插入帧”

3.3-139_.png


图3.3-139

新建“控制层”图层,点击“随机数”按钮在“舞台”上添加一个随机数,在其“属性”面板下为随机数命名为“抽奖”

3.3-140_.png


图3.3-140

并设置其最大值最小值为“100”“1”

3.3-141_.png


图3.3-141

如图,在第3帧出现的“爆炸”图片素材上,点击其“添加/编辑行为”按钮,设置行为:“动画播放控制”→“跳转到帧并停止”→触发条件:“出现”,点击“编辑”按钮

3.3-142_.png


图3.3-142

在“参数”对话框中设置相关属性
帧号:4;5;6;7;8
执行条件:“检查元素状态”
元素名称:“抽奖”
考察属性:“文本取值”
逻辑条件:“大于”
参考值:“10”,点击“确认”返回“编辑行为”对话框

3.3-143_.png


图3.3-143

如图,再添加一个“跳转到帧并停止”,触发条件为“出现”,点击“编辑”按钮

3.3-144_.png


图3.3-144

在弹出的“参数”对话框中设置相关属性
帧号:9;10
执行条件:“检查元素状态”
元素名称:“抽奖”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“10”,点击“确认”

3.3-145_.png


图3.3-145

可点击“预览”观察动画效果

3.3-146_.png


图3.3-146

如图,可修改随机数的最大值最小值,改变随机数的随机范围以修改中大小奖的概率

3.3-147_.png


图3.3-147

3.3.3 游戏测试:选择题

mingyueliu 发表了文章 • 0 个评论 • 286 次浏览 • 2016-10-10 17:24 • 来自相关话题

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

如下图,在新建第1页面添加背景图片。添加两个文本框,分别输入文字内容为“小学教学课件”(标题)、“开始”(点击开始按钮),在其“属性”面板下调整素材大小、颜色以及位置等属性。






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

如下图,在新建第1页面添加背景图片。添加两个文本框,分别输入文字内容为“小学教学课件”(标题)、“开始”(点击开始按钮),在其“属性”面板下调整素材大小、颜色以及位置等属性。

3.3-90_.png


图3.3-90
点击“开始”文本框的“添加/编辑行为”按钮

3.3-91_.png


图3.3-91
在其“编辑行为”对话框中添加两个行为
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”

3.3-92_.png


图3.3-92
新建第2页,同理添加背景图片,添加四个文本框,分别输入“1+1=(?)”(题目)、“1”“2”“3”(答案选项),调整各元素的大小、位置等

3.3-93_.png


图3.3-93

同理,添加背景图片,添加三个文本框,分别输入“你答对了”“0”“题”(答案结果提示)

3.3-94_.png


图3.3-94
如下图,在“属性”面板下为“0”文本框命名为“分数”

3.3-95_.png


图3.3-95

点击正确答案选项文本框(此题为“2”)的“添加/编辑行为”按钮

3.3-96_.png


图3.3-96
在其“编辑行为”对话框中添加两个行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”;
“改变元素属性”行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮,在“参数”对话框中设置
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“在现有值基础上增加”
取值:“1”,点击“确认”

3.3-97_.png


图3.3-97

3.3-98_.png


图3.3-98
点击错误答案“1”文本框的“添加/编辑行为”按钮

3.3-99_.png


图3.3-99
添加“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”

3.3-100_.png


图3.3-100
同理,如下图,设置错误答案“3”文本框的编辑行为为“跳转下一页”

3.3-101_.png


图3.3-101
如下图,点击“复制页面”按钮,复制多个“问题”页面

3.3-102_.png


图3.3-102
在新页面上修改每一个题目以及答案选项

3.3-103_.png


图3.3-103
依次类推添加多个题目以及选项,丰富选择题内容
四、拖动选择
如下图,添加一个背景图片,添加四个文本框,分别输入文字内容为“守”“株”“待”“兔”,调节字体大小、颜色、位置等属性。

3.3-104_.png


图3.3-104
同理,添加四个矩形元素,在“属性”面板下调节填充色为透明色,线条类型为“点线”

3.3-105_.png


图3.3-105
排版:全选四个矩形,右键→“对齐”→“上”

3.3-106_.png


图3.3-106
排版:全选四个矩形,右键→“对齐”→“均分宽度”

3.3-107_.png


图3.3-107
分别在“属性”面板下为“守”“株”“待”“兔”四个文本框命名为“守”“株”(视频中为“zhu”)“待”“兔”

3.3-108_.png


图3.3-108
分别在“守”“株”“待”“兔”四个“属性”面板下为其设置“拖动/旋转”类型为“自由拖动”

3.3-109_.png


图3.3-109
新建文本框,输入内容为“0”,命名为“判断”

3.3-110_.png


图3.3-110
点击第一个矩形元素的“添加/编辑行为”按钮,设置编辑行为:“属性控制”→“改变元素属性”→触发条件:“拖动物体放下”,点击“编辑”按钮

3.3-111_.png


图3.3-111
设置“参数”
元素名称:“判断”
元素属性:“文本取值”
赋值方式:“在现有值基础上增加”
取值:“1”
拖动物体名称:“守”,点击“确认”

3.3-112_.png


图3.3-112

分别复制第一个矩形的编辑行为至第二、三、四个矩形上:选中第一个矩形,右键→“复制行为”

3.3-113_.png


图3.3-113
分别选中第二、三、四个矩形,右键→“粘贴行为”

3.3-114_.png


图3.3-114
点击第二个矩形的绿色编辑行为按钮,进入“编辑行为”对话框

3.3-115_.png


图3.3-115
点击“改变元素属性”行为的“编辑”按钮,进入“参数”对话框

3.3-116_.png


图3.3-116
改变“拖动物体名称”为“株”(视频中为“zhu”),点击“确认”

3.3-117_.png


图3.3-117
同理,改变第三、四个矩形的编辑行为中“拖动物体名称”分别为“待”“兔”

3.3-118_.png


图3.3-118

3.3-119_.png


图3.3-119
新建第2页面,添加背景图片、文本框,在文本框中输入文字内容为“恭喜你答对了”,修改字体、大小、位置等属性

3.3-120_.png


图3.3-120
点击“分数”文本框的“添加/编辑行为”按钮

3.3-121_.png


图3.3-121
添加两个编辑行为
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”;
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“属性改变”,点击“编辑”按钮,设置参数
执行条件:“检查元素状态”
元素名称:“判断”
参考属性:“文本取值”
逻辑条件:“等于”
参考值:“4”

3.3-122_.png


图3.3-122

3.3-123_.png


图3.3-123
新建第3页面,添加背景图片、文本框,在文本框中输入文字内容为“很遗憾再接再厉”,修改字体、大小、位置等属性

3.3-124_.png


图3.3-124
如下图,点击回到第1页面,添加定时器,修改“长度”为“10”秒

3.3-125_.png


图3.3-125
点击定时器“添加/编辑行为”按钮

3.3-126_.png


图3.3-126
在“编辑行为”对话框中选择:“动画播放控制”→“跳转到页”→触发条件:“定时器时间到”,点击“编辑”按钮

3.3-127_.png


图3.3-127
在“参数”对话框中选择“页号”为“3”,点击“确认”

3.3-128_.png


图3.3-128
点击“预览”观察效果

3.3-129_.png


图3.3-129

3.3.2 游戏测试:手术刀

mingyueliu 发表了文章 • 0 个评论 • 336 次浏览 • 2016-10-10 17:07 • 来自相关话题

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

如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色






图3.3-26

点击新建第2页面,点击“素材库”添加一个手术刀图像元 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

如下图,点击“素材库”添加一个文字素材、医生漫画图像素材、“开始游戏”按钮素材,并修改“舞台”颜色为黄色

3.3-26_.png


图3.3-26

点击新建第2页面,点击“素材库”添加一个手术刀图像元素,点击“线条”工具在“舞台”上绘制一个线条,并修改其线条类型为“点线”

3.3-27_.png


图3.3-27
继续补充绘制线条、添加“杀人”“完美”“及格”文本框如下图

3.3-28_.png


图3.3-28
再添加一个文本框,命名为“分数”,输入内容为“0”,并调整大小、字体颜色等属性

3.3-29_.png


图3.3-29
新建“图层1”,将“图层0”上的手术刀剪切粘贴进“图层1”上,改变手术刀“Z轴旋转角度”为“-90”,调整其大小位置如下图

3.3-30_.png


图3.3-30
新建“图层2”,在该图层添加一个手指点击的图片素材,同时添加一个文本框,输入文字内容为“按住屏幕,开始手术”,调整字体大小、颜色等属性如下图

3.3-31_.png


图3.3-31
修改“图层0”名称为“底部”,“图层1”名称为“手术刀”,“图层2”名称为“提示”

3.3-32_.png


图3.3-32
选中“手术刀”以及“底部”两个图层的第30帧位置,右键→“插入帧”

3.3-33_.png


图3.3-33
鼠标按住“手术刀”图层的第1帧关键帧将其拖动至第2帧

3.3-34_.png


图3.3-34
选中“手术刀”图层关键帧之后的任意一帧,右键→“插入关键帧动画”

3.3-35_.png


图3.3-35
点击选中“手术刀”图层的最后一帧,将“舞台”上的手术刀移至最上“杀人”位置

3.3-36_.png


图3.3-36
新建“图层3”,在该图层第2帧右键→“插入关键帧”

3.3-37_.png


图3.3-37
将原来的虚线复制一份,粘贴进“图层3”第2帧上,修改线条颜色为红色,线条类型为“实线”

3.3-38_.png


图3.3-38
点击“图层3”关键帧之后的任意一帧,右键→“插入曲线变形动画”

3.3-39_.png


图3.3-39
选择“图层3”第2帧,使用“节点”工具将曲线的最上一个节点向下移至底端

3.3-40_.png


图3.3-40
点击“预览”观察效果,发现红线会随着手术刀向上的动画也向上延伸


3.3-41_.png



图3.3-41
如下图,当手术刀移至“完美”阶段时,时间轴运动到27帧

3.3-42_.png


图3.3-42
鼠标选中“手术刀”和“图层3”的第27帧,右键→“插入关键帧”

3.3-43_.png


图3.3-43
同理,观察到当手术刀移至“及格”阶段时,时间轴运动到19帧

3.3-44_.png


图3.3-44
鼠标选中“手术刀”和“图层3”的第19帧,右键→“插入关键帧”

3.3-45_.png


图3.3-45
为手术刀素材命名为“刀子”

3.3-46_.png


图3.3-46
观察,当手术刀在最底端位置时,其“上”值为“467.6”

3.3-47_.png


图3.3-47
观察,当手术刀在“及格”位置时,其“上”值为“184.9”

3.3-48_.png


图3.3-48
观察,当手术刀在“完美”位置时,其“上”值为“51.9”

3.3-49_.png


图3.3-49
观察,当手术刀在“杀人”位置时,其“上”值为“2”

3.3-50_.png


图3.3-50
如下图,选中“分数”文本框,在其“属性”面板下点击文字内容右边的“关联”按钮,在下拉的关联属性菜单栏下设置
关联对象:“刀子”
关联属性:“上”
关联方式:“自动关联”
当主控量=“467.6”(手术刀在最底端位置)时被控量=“0” 
当主控量=“184.9”(手术刀在“及格”位置)时被控量=“60” 
当主控量=“51.9”(手术刀在“完美”位置)时被控量=“100” 
当主控量=“2”(手术刀在“杀人”位置)时被控量=“0” 

3.3-51_.png


图3.3-51

3.3-52_.png


图3.3-52

为手指点击图像添加一个出现即暂停行为:如下图,点击手指右边的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-53_.png


图3.3-53
新建图层“控制层”,并将“图层3”重命名为“红线”

3.3-54_.png


图3.3-54

在“控制层”图层添加一个矩形,调整大小使其符合“舞台”大小,并调整其透明度为“0”

3.3-55_.png


图3.3-55
点击矩形右下角的“添加/编辑行为”按钮,为其添加两个编辑行为:
“动画播放控制”→“播放”→触发条件:“手指按下”
“动画播放控制”→“下一页”→触发条件:“手指抬起”

3.3-56_.png


图3.3-56
新建第3页面,暂时添加一张图片素材

3.3-57_.png


图3.3-57
点击“预览”观察动画效果

3.3-58_.png


图3.3-58
制作第3页:如下图,在第3页添加一个文本框,输入文字内容为“0”,调整文字大小、颜色、位置等。点击文字内容右边的“关联”按钮,设置关联属性
关联对象:“分数”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了该文本的取值等于第2页“分数”文本取值

3.3-59_.png


图3.3-59
点击“舞台”上的图片元素,右键→“转换为元件”

3.3-60_.png


图3.3-60
双击该元件进入“元件1”编辑页面。在“元件1”编辑页面中,点击时间轴上第4帧,右键→“插入帧”

3.3-61_.png


图3.3-61
点击图片元件的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“暂停”→触发条件:“出现”

3.3-62_.png


图3.3-62
同时选中时间轴上的2、3、4帧,右键→“插入关键帧”

3.3-63_.png


图3.3-63
在第2帧上点击“属性”面板下的“编辑”按钮,在弹出的“媒体库”中选择所需的图片素材,点击“添加”,替换原有的图片

3.3-64_.png


图3.3-64


3.3-65_.png


图3.3-65
同理,替换第3、4帧上的图片


3.3-66_.png


图3.3-66

3.3-67_.png


图3.3-67
点击回到“舞台”,将元件命名为“评判”

3.3-68_.png


图3.3-68
点击到第2页面,点击“控制层”上矩形的“添加/编辑行为”按钮

3.3-69_.png


图3.3-69
在“编辑行为”对话框中点击添加四个“跳转到帧并停止”行为:“动画播放控制”→“跳转到帧并停止”

3.3-70_.png


图3.3-70
修改“触发条件”为“手指抬起”,依次填写描述为“100分”“80”“60”“死”

3.3-71_.png


图3.3-71
点击“100分”行为的“编辑”按钮

3.3-72_.png


图3.3-72
设置“参数”
帧号:“3”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“100”,点击“确认”

3.3-73_.png


图3.3-73
同理点击“80”行为的“编辑”按钮

3.3-74_.png


图3.3-74
设置“参数”
帧号:“2”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“80”,点击“确认”

3.3-75_.png


图3.3-75
同理点击“60”行为的“编辑”按钮

3.3-76_.png


图3.3-76
设置“参数”
帧号:“1”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“分数”
考察属性:“文本取值”
逻辑条件:“小于等于”
参考值:“60”,点击“确认”

3.3-77_.png


图3.3-77
同理点击“死”行为的“编辑”按钮

3.3-78_.png


图3.3-78
设置“参数”
帧号:“4”
作用对象:“评判”
执行条件:“检查元素状态”
元素名称:“刀子”
考察属性:“上”
逻辑条件:“小于等于”
参考值:“51”(手术刀在“完美”左右位置),点击“确认”

3.3-79_.png


图3.3-79
注意:Mugeda的行为逻辑是从上往下的顺序执行的,我们首先会执行“播放”的行为,然后是“跳转下一页”的行为,其次是100分的“跳转到帧并停止”行为,同理依次执行其他行为。若中间有一个行为条件不满足,则不会继续执行下一行为。

3.3-80_.png


图3.3-80
点击“预览”观察动画效果

3.3-81_.png


图3.3-81
制作“再来一次”按钮:在第3页面添加按钮素材,添加文本框,输入文本框内容为“再来一次”

3.3-82_.png


图3.3-82
点击“再来一次”文本框的“添加/编辑行为”按钮,在弹出的“编辑行为”对话框中选择“动画播放控制”→“跳转到页”→触发条件:“点击”,点击“编辑”按钮

3.3-83_.png


图3.3-83
在“参数”对话框中填写帧号为“1”,点击“确认”

3.3-84_.png


图3.3-84
回到“编辑行为”对话框后再加一个行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-85_.png


图3.3-85
设置“参数”
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”
即设置重来一次时将原先的分数值清零行为

3.3-86_.png


图3.3-86
点击到第1页面,点击“开始游戏”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框中设置“跳转下一页”“禁止翻页”两个编辑行为
“跳转下一页”行为:“动画播放控制”→“下一页”→触发条件:“点击”
“禁止翻页”行为:“动画播放控制”→“禁止翻页”→触发条件:“出现”

3.3-87_.png


图3.3-87

3.3-88_.png


图3.3-88
点击“预览”动画效果

3.3-89_.png

 

3.3.1 游戏测试:手速测试

mingyueliu 发表了文章 • 0 个评论 • 302 次浏览 • 2016-10-10 17:01 • 来自相关话题

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

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

添加素材:

新建“背景”图层添加背景图片素材、文本框素材、圆圈素材
新建“按钮”图层添加拍照按钮图片素材
新建“宇航员”图层添加宇航员图片素材
调整各个素材大小、位置如下图,输入文本框内容为“0”

3.3-1_.png


图3.3-1
为各个素材命名:
命名文本框素材为“分数”
命名宇航员图片素材为“宇航员”

3.3-2_.png


图3.3-2

3.3-3_.png


图3.3-3

如下图,新建“控制”图层,添加一个定时器,将其移至“舞台”之外,在定时器“属性”面板内设置相关属性:
精度:“毫秒”
记时方向:“倒计时”
是否循环:“循环”
不可见时:“暂停记时器”
长度:“3”秒

3.3-4_.png


图3.3-4
命名定时器为“up”

3.3-5_.png


图3.3-5
移动宇航员图片至“舞台”上方,在其“属性”面板下点击“上”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“up”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“3”时被控量=“-200”(宇航员在“舞台”上方的位置)
当主控量=“0”时被控量=“541”(宇航员在“舞台”下方的位置)

3.3-6_.png


图3.3-6
点击“预览”观察效果

3.3-7_.png


图3.3-7
点击“随机数”按钮,在“舞台”上添加一个随机数,为其命名为“角度”

3.3-8_.png


图3.3-8
调整随机数的最大值、最小值分别为“-90”“90”,更新间隔为“3”秒

3.3-9_.png


图3.3-9
选中“宇航员”,在其“属性”面板下点击“Z轴旋转”属性右边的“关联”按钮,在下拉关联属性菜单下设置
关联对象:“角度”
关联属性:“文本取值”
关联方式:“公式关联”
被控量=“关联属性”
即设置了“宇航员”每次的Z轴旋转角度与随机数的文本取值相等

3.3-10_.png


图3.3-10
选中文本框,在其“属性”面板下点击字体内容右边的“关联”按钮,在下拉的关联属性菜单栏内设置
关联对象:“宇航员”
关联属性:“上”
关联方式:“自动关联”
当主控量=“75”时被控量=“0” 
当主控量=“175.7”(宇航员在圆圈正中心位置)时被控量=“100” 
当主控量=“275”时被控量=“0”,设置分数与“宇航员”位置相关 

3.3-11_.png


图3.3-11
点击“预览”观察效果

3.3-12_.png


图3.3-12
可点击“保存”

3.3-13_.png


图3.3-13
选中所有图层的第2帧,右键→“插入帧”

3.3-14_.png


图3.3-14
点击“控制”图层的第2帧,右键→“插入关键帧”

3.3-15_.png


图3.3-15
选中第2帧上的两个控制元素,右键→“删除物体”

3.3-16_.png


图3.3-16
点击拍照图片按钮右边的“添加/编辑行为”按钮

3.3-17_.png


图3.3-17
在“编辑行为”对话框中添加“跳转下一帧”以及“暂停”两个行为
“跳转下一帧”行为:“动画播放控制”→“下一帧”→触发条件:“点击”
“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

3.3-18_.png


图3.3-18
选中“按钮”图层第2帧,右键→“插入关键帧”

3.3-19_.png


图3.3-19
删除“按钮”图层第2帧上的拍照按钮图片素材

3.3-20_.png


图3.3-20
同时,在“按钮”图层第2帧上点击添加一个文本框素材,输入文字内容“再来一次”,调整文本框大小、位置、字体、颜色等属性

3.3-21_.png


图3.3-21
点击“再来一次”文本框“添加/编辑行为”按钮,进入“编辑行为”对话框,选择“动画播放控制”→“上一帧”→触发条件:“点击”

3.3-22_.png


图3.3-22
同理,添加“改变元素属性”编辑行为:“属性控制”→“改变元素属性”→触发条件:“点击”,点击“编辑”按钮

3.3-23_.png


图3.3-23
设置“参数”为
元素名称:“分数”
元素属性:“文本取值”
赋值方式:“用设置的值替换现有值”
取值:“0”
点击“确认”

3.3-24_.png


图3.3-24
点击“预览”观察效果

3.3-25_.png


图3.3-25

3.2 UI原型:图标动效

mingyueliu 发表了文章 • 0 个评论 • 342 次浏览 • 2016-10-10 16:31 • 来自相关话题

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






添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例抢先预览
 
本节视频教程请点击此处。

小图标动画.png


添加素材:如下图,在“舞台”的“属性”面板下将其填充色调整为浅蓝色,点击“素材库”按钮添加相应的火箭图片素材,调整火箭大小、位置等。

3.2-1_.png


图3.2-1
添加动画:在图层第10帧的位置右键→“插入帧”

3.2-2_.png


图3.2-2
右键→“插入关键帧动画”

3.2-3_.png


图3.2-3
选中第1帧,在“舞台”上将火箭垂直拖动至“舞台”底端

3.2-4_.png


图3.2-4
按照Ctrl键将火箭等比例缩小

3.2-5_.png


图3.2-5
制作路径:选中“舞台”上的火箭,右键→“路径”→“自定义路径”

3.2-6_.png


图3.2-6
使用“节点”工具调整火箭路径的弧度

3.2-7_.png


图3.2-7
在第1帧的位置上,选中“变形”工具,调整火箭的角度,使火箭头对准路径起始的方向

3.2-8_.png


图3.2-8
同理,选中最后一帧,使用“变形”工具调整火箭的角度使其符合路径的方向

3.2-9_.png


图3.2-9
选中第1帧,在其“属性”面板下调整“运动”效果为“阻尼退出”

3.2-10_.png


图3.2-10
如下图,将“图层0”重命名为“火箭”,新建图层“圆”

3.2-11_.png


图3.2-11
在“圆”图层上添加一个圆形使其覆盖住火箭,鼠标选中“圆”图层不放将其拖动至“火箭”图层下方,调整图层之间的覆盖位置。

3.2-12_.png


图3.2-12
调整“舞台”上的圆形的填充色、线条色如下图

3.2-13_.png


图3.2-13
选中“火箭”图层最后一帧,鼠标调整“舞台”上火箭的位置至圆形中央位置

3.2-14_.png


图3.2-14
选中“圆”图层第10帧,右键→“插入关键帧”

3.2-15_.png


图3.2-15
选中“圆”图层10帧之前的任意一帧,在“舞台”上选中圆形,右键→“删除物体”

3.2-16_.png


图3.2-16
选中所有图层20帧,右键→“插入帧”

3.2-17_.png


图3.2-17
选中“圆”图层10帧之后的任意一帧,右键→“插入关键帧动画”

3.2-18_.png


图3.2-18
选中“圆”图层第一个关键帧(即第10帧),使用“变形”工具按照Ctrl键将“舞台”上的圆形等比例缩小

3.2-19_.png


图3.2-19
鼠标按照“圆”图层最后一帧不放,将其向前拖动至16帧,缩小圆形动画的运动时间

3.2-20_.png


图3.2-20
选中“圆”图层第8、9两帧,右键→“删除帧(可多选)”,即将“圆”图层第一个关键帧移至第8帧

3.2-21_.png


图3.2-21
选中“圆”图层第20帧,右键→“插入帧”,将后面两个空缺帧补齐

3.2-22_.png


图3.2-22
选中“圆”图层第一个关键帧(即第8帧),在圆形元素“属性”面板下调整“运动”效果为“阻尼退出”

3.2-23_.png


图3.2-23
选中“圆”图层动画定格帧(第14帧),点击“舞台”的圆形,右键→“复制”

3.2-24_.png


图3.2-24
新建图层“边框”,在第14帧右键→“插入关键帧”。

3.2-25_.png


图3.2-25
选中第14帧关键帧位置,按Ctrl+Shift+V,将原先复制的圆形原位粘贴进“舞台”

3.2-26_.png


图3.2-26
选中“边框”图层上的圆形,右键→“组”→“取消组合”

3.2-27_.png


图3.2-27
修改圆形的填充色为透明色,调节线条颜色为浅蓝,大小为“5”

3.2-28_.png


图3.2-28
选中“边框”图层14帧以后的任意一帧,右键→“插入进度动画”

3.2-29_.png


图3.2-29
制作光线效果:新建图层“光1”,在第9帧右键→“插入关键帧”

3.2-30_.png


图3.2-30
在该关键帧上添加线条,调整位置、大小、颜色如下图

3.2-31_.png


图3.2-31
同理,新建“光2”“光3”“光4”,分别在第9帧插入关键帧,并在“舞台”上添加相应的线条,制作出发散的光线效果。

3.2-32_.png


图3.2-32
制作光线动画效果:同时选中“光1”至“光4”四个图层第9帧之后的任意一帧,右键→“插入曲线变形动画”

3.2-33_.png


图3.2-33
在“光4”图层的最后一帧,选择“节点”工具,将“舞台”上的该线条拉动缩小长度,并稍调整位置

3.2-34_.png


图3.2-34
同理,缩小其他三个图层在最后一帧位置上的线条长度

3.2-35_.png


图3.2-35
在9帧之后选中“光1”至“光4”四个图层的某些帧,右键→“删除帧(可多选)”

3.2-36_.png


图3.2-36
调节“光1”至“光4”每个图层第一个关键帧的“运动”效果为“淡出”

3.2-37_.png


图3.2-37
新建“云”图层,添加云的图片素材,使用“变形”工具调整云的大小、位置

3.2-38_.png


图3.2-38
在“云”图层的第13帧,右键→“插入关键帧”

3.2-39_.png


图3.2-39
选中13帧之前的任意一帧,点击“舞台”上的云素材,右键→“删除物体”

3.2-40_.png


图3.2-40
选中“云”图层13帧之后的任意一帧,右键→“插入关键帧动画”

3.2-41_.png


图3.2-41
在“云”图层第13帧,鼠标垂直向下拖动“舞台”上的云素材,使其位置向下移动一点。同时,在“属性”面板下调节“运动”效果为“阻尼退出”



3.2-42_.png


图3.2-42
鼠标选中“云”图层将其拖动至“边框”图层下方

3.2-43_.png


图3.2-43
新建图层“遮罩”,在“遮罩”图层13帧右键→“插入关键帧”

3.2-44_.png


图3.2-44
复制“圆”图层上的圆形,按Ctrl+Shift+V原位粘贴到“遮罩”图层第13帧

3.2-45_.png


图3.2-45
选择“遮罩”图层,点击“转为遮罩层”按钮

3.2-46_.png


图3.2-46

3.2-47_.png


图3.2-47
如下图,在“云”图层下方新建“星星”图层,自动转为“遮罩”图层下的被遮图层,选中“星星”图层第20帧,右键→“插入关键帧”


3.2-48_.png


图3.2-48
在该关键帧上添加星星图片素材

3.2-49_.png


图3.2-49
选中“遮罩”图层,点击“转为遮罩层”按钮,将“遮罩”图层的“遮罩”功能暂时取消

3.2-50_.png


图3.2-50
如下图,选中“火箭”至“圆”图层的第30帧,右键→“插入帧”

3.2-51_.png


图3.2-51
选中“星星”图层第一个关键帧之后的任意一帧,右键→“插入关键帧动画”

3.2-52_.png


图3.2-52
为方便观察,将“遮罩”图层上的圆形修改填充颜色,并点击图层上眼睛状按钮,隐藏该图层

3.2-53_.png


图3.2-53
选中“星星”图层起始帧(即第20帧),鼠标将“舞台”上的星星素材向上拖动一些位置,并在“属性”面板下将“运动”效果选择为“淡出”

3.2-54_.png


图3.2-54
点击“遮罩”图层眼睛状按钮,将其转换为可见

3.2-55_.png


图3.2-55
选中“遮罩”图层,点击“转为遮罩层”按钮

3.2-56_.png


图3.2-56
选中“星星”图层,点击“添加到遮罩”按钮,将“星星”图层添加进“遮罩”图层的遮罩范围内

3.2-57_.png


图3.2-57
新建“文字”图层,在25帧右键→“插入关键帧”

3.2-58_.png


图3.2-58
在“舞台”上添加一个文本框,输入文字内容,调整大小、字体、颜色等属性

3.2-59_.png


图3.2-59
在“文字”图层第一个关键帧之后的任意一帧右键→“插入进度动画”,使文字出现打字机进入的效果

3.2-60_.png


图3.2-60
新建“音乐”图层,点击“素材库”选择添加所需的音频素材,点击“添加”

3.2-61_.png


图3.2-61
将音频图标移至“舞台”之外,在音频元素的“属性”面板下选择“自动播放”为“是”

3.2-62_.png


图3.2-62
鼠标选中“声音”图层第1帧,按住不放将其拖至第2帧

3.2-63_.png


图3.2-63
最后,分别选中“光1”至“光4”四个图层的最后一帧,分别在“舞台”上调整光线线条位置、大小,优化光线扩散的动画效果。

3.2-64_.png


图3.2-64