【模版设计师专访】第十期：凌红艳、黄子琪、姜瑾 第2季模版大赛三等奖
凌红艳、黄子琪、姜瑾，第2季木疙瘩HTML5模版设计大赛三等奖获得者，来自中国传媒大学南广学院。
获奖作品：《一代一裳》
指导教师：何蓉
设计理念：古代传统服饰展现中国特色
获奖感言：
很荣幸能拿到这个荣誉，感谢指导老师的悉心指导，同时也非常感谢木疙瘩平台和各位评委。这次的参赛让我们感受到要学习的东西真的还很多，我们会继续努力学习加油的。
>>>进入中国传媒大学南广学院的空间>>>
>>>观看视频采访>>>
>>>观看获奖模版>>>
下面是文字版专访：
1. 首先介绍一下自己吧！
我们是来自中国传媒大学南广学院新闻传播学院网络与新媒体专业的同学，在这次木疙瘩模版大赛中获得三等奖，我叫凌红艳、我叫黄子琪、我叫姜瑾。
2. 谈谈你参加木疙瘩模板大赛的感受？
第一：我们是团队参赛，所以首先团队合作是很重要的。
第二：在制作过程中感受到我们还很欠缺，不管是创意还是技术方面要学习的地方还很多。
第三：优秀作品很多，也让我学习到很多，拓宽的自己的思维。
第四：特别感谢老师的悉心指导。
3. 你是通过什么途径认识和接触到木疙瘩的呢？
我们专业开设H5这门课，老师在课堂上推荐使用学习的。
4. 你对木疙瘩有哪些期待呢？
第一个期待是希望它未来的设计页面能更加的流畅，第二个是希望能提供更多的素材库，并且能给学生们提供学习交流平台
5. 你觉得制作H5最需要具备什么能力？
首先，要有创新能力，因为的确有很多同质化的形式很多，需要不断的创新。其次，要有基本的设计逻辑思维，因为比如在过程中需要写逻辑表达式，还有整个制作过程的设计。
6. 你觉得什么样的H5可以称得上是一个好的H5呢？
一个好的H5要有精美的设计页面，交互功能要简单易懂，要让受众明白下一步该做什么，配乐也很重要，一些动态效果也能起到点睛之笔的作用。
7. 你在制作一个H5时，一般的流程是什么呢，可以和我们分享一下吗？
首先，我们小组一起确定的主题，其次根据主题定了大致的表现形式，接下来是找素材，最后用上课学到的技巧将素材整合到一起，构成一个比较完整的作品。
8. 作为一名H5设计师，除了要掌握过硬的技巧外，还需要具备新颖的创意，你在设计H5的时候，会不会遇到灵感缺乏的时候，这种时候你都是通过哪些途径让自己产生新的创意呢？
首先，会去听一些音乐启发灵感，更重要的是会去木疙瘩平台找一些之前提供的一些优秀模版，通过这些作品并结合我们想要的主题，就会有新的灵感出现0
9. 向大家分享一些学习设计的网站或者书籍，说明理由。
《零代码HTML5交互设计动画》可以学到一些比较成熟的例子
10. 将来是否想从事H5设计师这一行业呢，为什么？
H5设计师这个行业对我们来说是比较新奇的，H5有更强的宣传和互动效果，我们还是很想尝试的。
收起阅读 »
申请售卖模版方法：让你的好作品不再被淹没
我创意多、能力强，却无处施展？
来，成为模版设计师，你的才华和作品不止于此～
下面为大家介绍申请售卖模版的方法：
----------------------注意：
——售卖模板功能仅对推荐设计师开放。
申请推荐设计师
https://cn.mugeda.com/rm/designer/index
——请按照模版要求制作作品
点击查看模版制作规范>>
--------------------------------------------
1、在【我的作品】页面，找到想售卖的作品，发布作品（已发布作品才能申请售卖）；
2、点击“转为模版”按钮，选择“售卖模版”；
3、填写模版售卖申请，提示见下图：
4、申请成功，等待管理员审核（3个工作日左右）
5、审核结果将通过站内信通知您，请耐心等候。
——审核通过：直接上线售卖，可在模版中心查找到售卖的模版。
——审核不通过：根据管理员回复的不通过理由，去改进模版，重新发布后再次申请售卖模版即可。
收起阅读 »
来，成为模版设计师，你的才华和作品不止于此～
下面为大家介绍申请售卖模版的方法：
----------------------注意：
——售卖模板功能仅对推荐设计师开放。
申请推荐设计师
https://cn.mugeda.com/rm/designer/index
——请按照模版要求制作作品
点击查看模版制作规范>>
--------------------------------------------
1、在【我的作品】页面，找到想售卖的作品，发布作品（已发布作品才能申请售卖）；
2、点击“转为模版”按钮，选择“售卖模版”；
3、填写模版售卖申请，提示见下图：
4、申请成功，等待管理员审核（3个工作日左右）
5、审核结果将通过站内信通知您，请耐心等候。
——审核通过：直接上线售卖，可在模版中心查找到售卖的模版。
——审核不通过：根据管理员回复的不通过理由，去改进模版，重新发布后再次申请售卖模版即可。
收起阅读 »
【经验分享】制作抽奖与投票时的一些防刷票的小经验
在制作带有抽奖或投票的作品时，有时在电脑上使用预览链接测试效果，会发现要输入二维码，不用担心，这个是系统自带的防刷票验证，这个验证一般只会在pc端出现一次，手机上是不会出现的，在手机上要做到防刷票，可以参考下面几个方法：
1.使用代码检测是不是在微信环境
使用了抽奖与投票控件的作品会自带验证功能，这个验证需要使用微信的相关功能，所以建议限制作品只在微信里传播。
这个链接里的代码可以用来检测是不是在微信的环境： http://bbs.mugeda.com/?/question/3014
如果还需要使用其他的api，可以参考这个链接：http://card.mugeda.com/mugedaApiDoc/index.html
（注意：抽奖与投票功能在导出后会自动失效，因为它需要使用微信的一些功能，这功能在mugeda里使用是已经设置好的）
2.给有抽奖或投票行为的按钮再加一个提示，让用户等待一小段时间
抽奖与投票行为需要向服务器请求结果，这个过程根据用户使用的网络不同会有不同的等待时间，或者服务器响应比较慢时，用户那边如果长时间没有反馈，用户可能会多次点击，从而造成多次抽奖或投票了，建议在按钮上加一个改变元素行为，在请求结果的同时让一个提示告诉用户现在正在抽奖或投票，请等待一下，然后抽奖的行为设置里成功或失败可以设置跳页面或帧，帧上设置行为让提示移开，或者使用回调函数，回调函数里可以写代码让这个提示移开同时写跳页面等行为。
可以参考一下这个demo里的行为设置： https://www.mugeda.com/animation/edit/19889614
收起阅读 »
1.使用代码检测是不是在微信环境
使用了抽奖与投票控件的作品会自带验证功能，这个验证需要使用微信的相关功能，所以建议限制作品只在微信里传播。
这个链接里的代码可以用来检测是不是在微信的环境： http://bbs.mugeda.com/?/question/3014
如果还需要使用其他的api，可以参考这个链接：http://card.mugeda.com/mugedaApiDoc/index.html
（注意：抽奖与投票功能在导出后会自动失效，因为它需要使用微信的一些功能，这功能在mugeda里使用是已经设置好的）
2.给有抽奖或投票行为的按钮再加一个提示，让用户等待一小段时间
抽奖与投票行为需要向服务器请求结果，这个过程根据用户使用的网络不同会有不同的等待时间，或者服务器响应比较慢时，用户那边如果长时间没有反馈，用户可能会多次点击，从而造成多次抽奖或投票了，建议在按钮上加一个改变元素行为，在请求结果的同时让一个提示告诉用户现在正在抽奖或投票，请等待一下，然后抽奖的行为设置里成功或失败可以设置跳页面或帧，帧上设置行为让提示移开，或者使用回调函数，回调函数里可以写代码让这个提示移开同时写跳页面等行为。
可以参考一下这个demo里的行为设置： https://www.mugeda.com/animation/edit/19889614
收起阅读 »
剧透！如何在比赛中高分突围
欢迎参加第4季木疙瘩HTML5模版设计大赛！
剧透1
——提高技术评分（占比10%）
木疙瘩中保证分层细致、文字均为文本形式、压缩图片和音频素材（保证作品在10M以内）
评委亲授视频教程：
《详解模板如何制作》 马上观看>>
10分钟读懂《好模板是怎样炼成的？》 马上观看>>
剧透2
——提高网络票选分（占比20%）
入围作品参与网络投票，届时赶快发动你的盆友圈投票把！
剧透3
——好创意&好设计
情理之中、意料之外创意&用心的好设计会让评委眼前一亮，印象分UP！
剧透4
——参加命题模版的比拼，比非命题类奖品多！可额外获得7天H5训练营！
收起阅读 »
剧透1
——提高技术评分（占比10%）
木疙瘩中保证分层细致、文字均为文本形式、压缩图片和音频素材（保证作品在10M以内）
评委亲授视频教程：
《详解模板如何制作》 马上观看>>
10分钟读懂《好模板是怎样炼成的？》 马上观看>>
剧透2
——提高网络票选分（占比20%）
入围作品参与网络投票，届时赶快发动你的盆友圈投票把！
剧透3
——好创意&好设计
情理之中、意料之外创意&用心的好设计会让评委眼前一亮，印象分UP！
剧透4
——参加命题模版的比拼，比非命题类奖品多！可额外获得7天H5训练营！
收起阅读 »
【模版设计师专访】第九期：赵勇鹏、杨乐、霍四林 第2季模版大赛三等奖
赵勇鹏、杨乐、霍四林，第2季木疙瘩HTML5模版设计大赛三等奖获得者，来自火星时代教育西安校区。
获奖作品：《“来时”线下读书会》
指导教师：李勇
设计理念：你来时，我在字里行间等你。
获奖感言：
感谢木疙瘩官方为我们提供这次参赛机会，也很感谢老师对我们的指导。很荣幸的获得了三等奖，这应该是我们在设计师的行业中获得的第一个荣誉，希望我们在设计的道路上能走的更好。
>>>进入火星时代教育的空间>>>
>>>观看视频专访>>>
>>>观看获奖模版>>>
下面是文字版专访：
1. 首先介绍一下自己吧！
大家好，我是火星时代教育西安校区的赵勇鹏，我们小组还有两位成员分别是霍四林和杨乐，很荣幸参加这次H5模版大赛，并获得三等奖的殊荣。
2. 谈谈你参加木疙瘩模板大赛的感受？
从H5设计到网络投票，大概经过一个多月的时间，在这期间大家都非常积极上心，过程中我们不仅学到了知识，还收获了友谊。
3. 你是通过什么途径认识和接触到木疙瘩的呢？
通过学校教学接触和了解到木疙瘩平台。
4. 你对木疙瘩有哪些期待呢？
希望木疙瘩能够在越来越多的同类平台中崭露头角，让更多的用户能够体验到优秀、炫酷、有趣的H5作品。
5. 你觉得制作H5最需要具备什么能力？
天马行空的想象力，较高的审美和坚实的设计基础。
6. 你觉得什么样的H5可以称得上是一个好的H5呢？
让人有看下去的欲望，并且可以明白作者意图。
7. 你在制作一个H5时，一般的流程是什么呢，可以和我们分享一下吗？
首先有一定的想法，与小组成员进行讨论进行头脑风暴，将有关想法和创意点列出来，之后文案策划，选取内容进行创作。
8. 请分享一个你在制作H5时的小窍门或独门秘籍。
适当的动效会让H5更加精彩。
9. 作为一名H5设计师，除了要掌握过硬的技巧外，还需要具备新颖的创意，你在设计H5的时候，会不会遇到灵感缺乏的时候，这种时候你都是通过哪些途径让自己产生新的创意呢？
灵感来源于生活，平常多接触一些新鲜事物，能有效的得到创意灵感，还可以多去看一些优秀的设计作品，从中借鉴。
10. 向大家分享一些学习设计的网站或者书籍，说明理由。
《网页设计创意书》本书展示了近700个网站设计示例。这些网站时而浓墨重彩、时而简洁素雅，为读者带来一场丰富的视觉盛宴。 收起阅读 »
【模版设计师专访】第八期：周铃、唐玉、徐敏 第2季模版大赛三等奖
周铃、唐玉、徐敏，第2季木疙瘩HTML5模版设计大赛三等奖获得者，来自火星时代教育武汉校区。
获奖作品：《有一出好戏等你来！》
指导教师：黄鑫
>>>进入火星时代教育的空间>>>
>>>观看视频专访>>>
>>>观看获奖模版>>>
下面是文字版专访：
1. 首先介绍一下自己吧！
大家好，我是一出好戏等你来的H5的作者之一，周铃。本次木疙瘩第二届模板大赛中，我和我的小伙伴获得三等奖。非常感谢本次大赛的评委老师们，还有我们火星时代的指导老师们，以及在网络上给我们投票的各位朋友们，谢谢大家的支持。
2. 谈谈你参加木疙瘩模板大赛的感受？
本次我们幸运的参加了木疙瘩模板大赛，感到非常的开心与荣幸，能和全国各地的设计师朋友们一起分享我们的H5。在此次活动中，我们还看到了很多非常优秀的H5作品。
3. 你是通过什么途径认识和接触到木疙瘩的呢？
我们是通过在火星时代教育学习认识接触到了木疙瘩，并且在火星时代的学习课程中，学习了H5的制作。
4. 你对木疙瘩有哪些期待呢？
希望木疙瘩在H5行业中越做越好，让更多的用户体验到H5带来的互动魅力
5. 你觉得制作H5最需要具备什么能力？
创意性和交互能力（合适的动态交互反馈能给用户带来更好的操作体验；炫酷的动画特效定能助力传播和品牌打造。）
6. 你觉得什么样的H5可以称得上是一个好的H5呢？
1.能够引导用户点击和翻页，吸引用户做长时间的视觉停留。
2.加强用户体验的舒适度，提高愉悦感。
7. 你在制作一个H5时，一般的流程是什么呢，可以和我们分享一下吗？
1.前期沟通了解需求。打开头脑风暴
2.策划H5方案
3.设计出草稿
4.定稿出正稿源文件
5. 用木疙瘩进行制作
6.最后统一检查，确认无误并发布
8. 请分享一个你在制作H5时的小窍门或独门秘籍。
初涉H5时，你需要浏览大量的案例，揣摩每个画面中的创意元素之余还有其逻辑结构。对此可参考爱果果网站，不仅有丰富的案例，并且对每个案例都有详尽细致的描述，你可以看到它的策划构想，它的画面设计，以及技术是如何实现的
9. 作为一名H5设计师，除了要掌握过硬的技巧外，还需要具备新颖的创意，你在设计H5的时候，会不会遇到灵感缺乏的时候，这种时候你都是通过哪些途径让自己产生新的创意呢？
找些好的作品参考，然后再去优阁App看看设计分享，找一些设计思路等等。
10. 向大家分享一些学习设计的网站或者书籍，说明理由。
追波，优设，Behance，牛大拿、爱果果等等，一些国外网站，很多作品都是国外设计师的，风格很不一样，多看多学习才能做出更多优秀的作品。
收起阅读 »
【模版设计师专访】第七期：王月、张玄峰、王颖 第2季模版大赛二等奖
王月、张玄峰、王颖，第2季木疙瘩HTML5模版设计大赛二等奖获得者，来自火星时代教育西安校区。
获奖作品：《可口可乐》
指导教师：李勇
设计理念：生活是创意的来源，创意源于文化，创意源于自己。
专家评语：
互动环节机智有趣，画面布局合理，设计感强烈。小细节别有一番趣味，界面过渡自然流畅。整体色调对比明确，充满故事的可口可乐照片和问答切合主题，让人能够参与其中。
获奖感言：
很荣幸可以获得此次木疙瘩模版的二等奖，在此特别感谢木疙瘩为我们提供这么优秀的平台，让我们大展拳脚，同时也非常感谢老师对我们的指导。
>>>进入火星时代教育的空间>>>
>>>观看视频专访>>>
下面是文字版专访：
1. 首先介绍一下自己吧！
大家好，我是来自火星时代实训基地西安校区的王月，是本次木疙瘩模版大赛二等奖的获得者。
2. 谈谈你参加木疙瘩模版大赛的感受？
很荣幸可以获奖，在这次比赛中我看到了很多优秀的H5作品，可以和很多优秀的设计师一同切磋，也感谢这么多天来对我们支持和帮助的老师以及投票者们。
3. 你是通过什么途径认识和接触到木疙瘩的呢？
通过学校课程的教学认识和接触了木疙瘩。
4. 你对木疙瘩有哪些期待呢？
希望木疙瘩能够在越来越多的媒体行业中崭露头角，让更多的用户能够体验到炫酷、有趣、互动交流的H5作品。
5. 你觉得制作H5最需要具备什么能力？
有丰富的想象力，有一定的审美意识和设计基础，了解交互设计的概念。
6. 你觉得什么样的H5可以称得上是一个好的H5呢？
交互合理，画面有设计感，音乐与画面融入恰当。
7. 你在制作一个H5时，一般的流程是什么呢，可以和我们分享一下吗？
首先有一定的想法，与小组成员进行讨论进行头脑风暴，将有关想法和创意点列出来，选取内容进行创作。最后将做好的素材导入木疙瘩平台中，进行H5的动画制作。
8. 请分享一个你在制作H5时的小窍门或独门秘籍。
可通过一些小的精美的动画来显现自己H5的巧妙之处。
9. 作为一名H5设计师，除了要掌握过硬的技巧外，还需要具备新颖的创意，你在设计H5的时候，会不会遇到灵感缺乏的时候，这种时候你都是通过哪些途径让自己产生新的创意呢？
多去欣赏一些优秀的作品，吸取作品中的优点，成为自己的优点。
10. 向大家分享一些学习设计的网站或者书籍，说明理由。
网站比如花瓣网、站酷、droidddle等，有很多素材还是可参考的案例。 收起阅读 »
【模版设计师专访】第六期：黄捷华、唐诗、王宇倩 第2季模版大赛二等奖
黄捷华、唐诗、王宇倩，第2季木疙瘩HTML5模版设计大赛二等奖获得者，中国传媒大学南广学院学生。
获奖作品：《遇见，成都》
指导教师：何蓉
设计理念：敢于创新，勇于尝试
专家评语：《遇见，成都》这部作品整体画面精致、内容丰富有小动画。构图美观，色彩鲜明。其中，背景音效平缓可以更有层次感。其次，字体不统一，交互上的按钮点击位置不明确，可以再改一改。
获奖感言：
感谢主办方对我们作品的肯定，这次获奖是我们意料之外的，很开心。在之后的学习中，我们也会继续发挥创意制作更优秀的H5。感谢指导老师的推荐与指导，我们会继续努力的。
>>>进入中国传媒大学南广学院空间>>>
>>>观看视频专访>>>
1. 首先介绍一下自己吧！
大家好，我们是来自中国传媒大学南广学院的学生，我们是黄捷华、唐诗、王宇倩，在这次比赛中我们获得了二等奖。
2. 谈谈你参加木疙瘩模版大赛的感受？
能够参加这次的木疙瘩模版大赛我觉得非常的幸运，也没想到我们能够通过复赛到最后拿到二等奖，对我们来说挺意外的。但这也是对我们作品的一种肯定，我们会以此为动力，以后制作更优秀的作品。
3. 通过什么途径认识和接触到木疙瘩？
我们在大三的学习中有H5的课程，上课使用的软件就是木疙瘩，经过一个学期的学习，对木疙瘩平台和使用操作上是比较熟悉了。
4. 你对木疙瘩有哪些期待呢？
希望木疙瘩之后也能多举办类似于这样的大赛，能让很多喜欢H5有技术有创意的人来报名，给大家提供学习交流的平台。另外可以给更多热爱H5的朋友，提供一些线下的培训，相信木疙瘩会越来越好。
5. 你觉得制作H5最需要具备什么能力？
首先，需要具备过硬的专业能力，比如，熟练掌握flash、ps等软件的操作，为h5的制作打好基础，还要熟悉木疙瘩的页面布局和制作流程。然后还需要丰富的创造力和想象力，以及一定的审美能力。这样才能制作出一个好的h5作品。
6. 什么样的H5可以称得上是好H5？
首先，是内容上需要追新求异，一个好的h5最重要的就是让观看者眼前一亮，因此内容上的创新才能博得受众的眼球。第二是能挖掘出所制作h5价值点，尤其是功能性h5，能做到交互内容的连贯。
7. 制作H5时的流程是什么呢？
首先要对所制作的h5作品进行定位和规划，然后设计出大致的模板和脚本，再进行素材的收集与制作。最后再统一到木疙瘩制作平台，进行h5的制作。
8. 制作H5时的小窍门或独门秘籍。
我的独门秘籍是在平时会看到好的h5作品收藏起来，到自己做作品的时候，会拿出来看一看，看他们的叙事方式、互动效果看能不能用在自己的作品上
9.分享学习设计的网站或者书籍。
我比较常用的是H5案例分享。这个网站会经常更新一些热门案例，而且会给每个案例都配上比较详细的分析信息，包括案例出品方，案例亮点，主要技术点，还有案例截图等等。
10. 是否想从事H5设计师这一行业呢？
未来愿意做一个h5设计师。一方面，可以跨平台，限制比较小，未来发展很有前景。另外，通过大学的相关技术学习，个人也对h5产生了兴趣。 收起阅读 »
【模版设计师专访】第五期：胡馨匀、陈佳雯 第2季模版大赛一等奖
胡馨匀、陈佳雯，第2季木疙瘩HTML5模版设计大赛一等奖获得者，鲁迅美术学院学生。
获奖作品：《生》 观看模板>>
指导教师：陈峰
专家评语：设计精美，动效合理，交互提示明确，背景音乐、音效搭配恰当，文案不错，直达内心深处，作品很打动人！
获奖感言：
这次能获得木疙瘩H5大赛一等奖，我们感到非常的高兴与荣幸。感谢平台给予我们的机会，感谢陈峰老师对我们精心的指导，感谢各位评委对我们作品的认可。是这次比赛让我们有了自由发挥的空间。在作品的创作过程中，我们品尝到了辛苦与快乐，而我们自身也通过不断地实践创作得到了提升，也开始对自己有了更大的信心。这次能获奖更是对我们往后创作作品的一种鞭策，我们将在这个基础上更加严格地要求自己，激情筑梦，为大家展现出更好的作品。
>>>进入鲁迅美术学院空间>>>
>>>观看视频专访>>>
Q1. 首先介绍一下自己吧
我们是胡馨匀、陈佳雯，是来自鲁迅美术学院动画专业的学生。这次在木疙瘩H5模版大赛中荣获一等奖和人气奖。
Q2. 谈谈你参加木疙瘩模版大赛的感受？
很幸运能够获得这次参赛的机会，首先得感谢我们的指导老师，陈老师提供给我们展示的平台。使我们体验到了很多在学校日常工作里体会不到的宝贵经历，通过这次比赛不仅锻炼了我们的实践能力，小组成员之间的合作意识也得到了提高，还认识了许多专业的设计师和优秀的作品。
Q3. 你是通过什么途径认识和接触到木疙瘩的呢？
我们是在学校H5课题的学习过程中，通过老师介绍，才认识的木疙瘩。
Q4. 你对木疙瘩有哪些期待呢？
希望木疙瘩能够在越来越多的媒体行业中崭露头角，让更多的用户能够体验到炫酷、有趣、互动交流的H5作品。
Q5. 你觉得制作H5最需要具备什么能力？
有一定的审美意识和设计基础，有丰富的想象力和创造力；了解交互设计的概念，和H5的制作流程；基本了解木疙瘩操作界面，和工具的使用。
Q6. 你觉得什么样的H5可以称得上是一个好的H5呢？
设计精美，动效合理，交互提示明显，背景音乐、音效搭配恰当，直达用户内心深处，能打动人心的H5作品。
Q7. 你在制作一个H5时，一般的流程是什么呢，可以和我们分享一下吗？
首先提出想法，进行讨论调查。然后构建故事版，列出大纲和绘制头脑风暴，将有关想法和创意点都列出来。然后排除干扰，选取内容进行综合创作。最后将绘制好的素材导入木疙瘩无代码动画制作平台中，进行H5的动画制作。
Q8. 请分享一个你在制作H5时的小窍门或独门秘籍。
在H5交互设计方面，选择小而有趣的动效，在不经意的时候不经意的地方放一些小动效反而能够产生出其不意的效果。
Q9. 作为一名H5设计师，除了要掌握过硬的技巧外，还需要具备新颖的创意，你在设计H5的时候，会不会遇到灵感缺乏的时候，这种时候你都是通过哪些途径让自己产生新的创意呢？
最重要的当然是去欣赏其他优秀的作品，这是最有效也是最直接的方法，多吸收优秀作品的精华，再消化加工转换为自己的知识。或者也可以通过看书来寻求灵感，构思故事内容。苦恼的时候也可以通过听音乐自我放松，同时认真感受脑海中所形成的画面。
Q10. 向大家分享一些学习设计的网站或者书籍，说明理由。
网站有花瓣网、站酷等，无论是素材还是案例都很多，而且质量也很不错。虎课网，包含许多设计教学，教程细致，还有专业老师点评，也经常会开展一些比赛活动，让大家积极参与到设计中去。书籍方面，原研哉的《设计中的设计》，这本书阐述了设计的思想与原理，只有了解了思想与原理懂得了设计的意义才能创造出美好的作品。
收起阅读 »
第2季木疙瘩H5模版设计大赛获奖结果
经过12天激烈的复赛评选，第2季木疙瘩H5模版设计大赛的获奖结果终于出炉。感谢所有评委的认真评选，以及所有参与网络投票的大众评委们！
在所有参赛的模版作品中，绝大多数都通过了商业模版审核，将陆续在木疙瘩模版中心上线售卖，喜欢的盆友不要错过啦～
入围的模版作品都是精品，让我们为所有入围的小伙伴们点个赞～
下面公布获奖作品：
>>>点击查看>>> 收起阅读 »
4.1.9【新功能教程】改变行为属性增加边框颜色和填充色
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.
演示地址： http://cn.mugeda.com/animation/edit/a604a6ac
首先在页面上绘制两个图形以及两个对应的行为按钮,，一个按钮用来改变对应图形的填充色，另一个按钮用来改变对应图形的边框颜色。
然后分别给被改变填充色和边框颜色的两个图形分别命名。
然后分别给下面的两个按钮绑定上行为。
然后在作品里点击这个按钮，对应元素的填充色就会变为行为里所选择的颜色。
改变元素边框颜色的行为操作与之类似，选择另一个按钮,，然后点击改变元素属性，点击编辑。
收起阅读 »
现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.
演示地址： http://cn.mugeda.com/animation/edit/a604a6ac
首先在页面上绘制两个图形以及两个对应的行为按钮,，一个按钮用来改变对应图形的填充色，另一个按钮用来改变对应图形的边框颜色。
然后分别给被改变填充色和边框颜色的两个图形分别命名。
然后分别给下面的两个按钮绑定上行为。
然后在作品里点击这个按钮，对应元素的填充色就会变为行为里所选择的颜色。
改变元素边框颜色的行为操作与之类似，选择另一个按钮,，然后点击改变元素属性，点击编辑。
收起阅读 »
4.1.16【新功能教程】屏幕适配范围与安全框
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
为了方便设计师更好的编辑内容，防止内容在设备上超出可见显示范围（安全框），木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角，可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。
选择后，物体上会出现一个方框指示指定设备的可见范围（安全框）。如果舞台上添加的内容超出了指定设备的安全框，方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框，方框会显示为绿色。
收起阅读 »
为了方便设计师更好的编辑内容，防止内容在设备上超出可见显示范围（安全框），木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角，可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。
选择后，物体上会出现一个方框指示指定设备的可见范围（安全框）。如果舞台上添加的内容超出了指定设备的安全框，方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框，方框会显示为绿色。
收起阅读 »
4.1.15【新功能教程】计数器组件
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
通常我们在制作作品时，涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图，我们点击计数器工具在舞台上添加一个计数器，设置默认值和计数值。
我们先在舞台上添加相关按钮素材。如图，添加两个文本框分别命名为“显示计数”“获取计数”
为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件：点击→设置参数
计数器名称：“计数器1”
显示计数元素：“显示计数”
同理，为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框，点击“管理实时数据”，可以修改当前数据。
收起阅读 »
通常我们在制作作品时，涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图，我们点击计数器工具在舞台上添加一个计数器，设置默认值和计数值。
我们先在舞台上添加相关按钮素材。如图，添加两个文本框分别命名为“显示计数”“获取计数”
为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件：点击→设置参数
计数器名称：“计数器1”
显示计数元素：“显示计数”
同理，为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框，点击“管理实时数据”，可以修改当前数据。
收起阅读 »
4.1.14【新功能教程】运动曲线编辑
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
编辑地址：http://prerelease.mugeda.com/a ... 15485
预览地址：http://prerelease.mugeda.com/c ... 15485
为了支持更加灵活的编辑运动曲线，关键帧动画增加了“自定义运动曲线”的功能。
选择“自定义运动曲线”后，可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例，打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线，即可在右侧显示出运动曲线并可进行编辑。
第一次打开时，默认曲线是线性，并且显示为半透明，表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型，这时候，曲线会显示为实线。运动曲线的横坐标代表时间，纵坐标代表运动进度（即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示，左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%，右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑，实现不同运动特征的运动。
添加了运动曲线后，左侧对应的的属性列表会显示一个关闭按钮，表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性（例如宽度、透明度、滤镜等），都可以定义自己独立的运动曲线。如果没有指定，对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线，则会采用线性运动曲线。
如果关键帧动画包含有多个关键帧动画，运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中，显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段，可以切换曲线上方“显示所有关键帧”选项。
运动曲线编辑目前支持关键帧动画和变形动画，并支持如下参数的动画曲线定制：
下面是2个常见的运动曲线的例子：
自由落体：自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图：
缓动进度：这是一种常见的进度显示方式，即一个减速移动，连接一个匀速缓动，再连接一个加速移动。其运动曲线类似下图：
上述提供的演示地址包含了这两种运动的实现方法和效果。
在连接多段运动曲线时需要注意，由于控制自由度的限制，有时候为了实现平滑的多段运动，需要调整关键帧的位置或者每一段运动的位移数值，以便对运动速度进行微调，实现想要达到的运动效果。
收起阅读 »
编辑地址：http://prerelease.mugeda.com/a ... 15485
预览地址：http://prerelease.mugeda.com/c ... 15485
为了支持更加灵活的编辑运动曲线，关键帧动画增加了“自定义运动曲线”的功能。
选择“自定义运动曲线”后，可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例，打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线，即可在右侧显示出运动曲线并可进行编辑。
第一次打开时，默认曲线是线性，并且显示为半透明，表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型，这时候，曲线会显示为实线。运动曲线的横坐标代表时间，纵坐标代表运动进度（即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示，左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%，右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑，实现不同运动特征的运动。
添加了运动曲线后，左侧对应的的属性列表会显示一个关闭按钮，表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性（例如宽度、透明度、滤镜等），都可以定义自己独立的运动曲线。如果没有指定，对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线，则会采用线性运动曲线。
如果关键帧动画包含有多个关键帧动画，运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中，显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段，可以切换曲线上方“显示所有关键帧”选项。
运动曲线编辑目前支持关键帧动画和变形动画，并支持如下参数的动画曲线定制：
x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜（阴影、模糊、灰度、亮度、对比度、色调等）
变形动画参数（字体大小、字间距、行间距、填充颜色、线条颜色等）
下面是2个常见的运动曲线的例子：
自由落体：自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图：
缓动进度：这是一种常见的进度显示方式，即一个减速移动，连接一个匀速缓动，再连接一个加速移动。其运动曲线类似下图：
上述提供的演示地址包含了这两种运动的实现方法和效果。
在连接多段运动曲线时需要注意，由于控制自由度的限制，有时候为了实现平滑的多段运动，需要调整关键帧的位置或者每一段运动的位移数值，以便对运动速度进行微调，实现想要达到的运动效果。
收起阅读 »
4.1.13【新功能教程】文字变形动画
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
编辑地址（第4页）：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html
变形动画新增对文本的支持。即：可以为文本添加变形动画， 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有：
收起阅读 »
编辑地址（第4页）：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html
变形动画新增对文本的支持。即：可以为文本添加变形动画， 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有：
字体颜色
字体大小
行间距
字间距
滤镜效果
收起阅读 »
4.1.12【新功能教程】投票、抽奖实时数据管理
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
设计师可以通过实时数据管理的功能，用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).
演示地址:http://cn.mugeda.com/animation/edit/ed60ab32
以投票为例：
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为，当用户发生投票行为时，被投票目标的票数会在当前基础上+1,，假如现在有北京，上海两个投票对象，假如北京目前所得票数为100，现在我们想把北京所得的票数改为50，通过实时数据管理即可轻松修改。
首先点击管理实时数据，会弹出如下对话框。
我们现在想要把北京改为50票，只需要把北京后面的输入框内的数值改为50，点击确定即可。
保存以后，打开作品，会发现北京的票数由原先票数改变成了50票。
同样的,通过抽奖组件的实时数据管理，可以去修改奖品的剩余数量以及领奖码的剩余数量。
收起阅读 »
设计师可以通过实时数据管理的功能，用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).
演示地址:http://cn.mugeda.com/animation/edit/ed60ab32
以投票为例：
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为，当用户发生投票行为时，被投票目标的票数会在当前基础上+1,，假如现在有北京，上海两个投票对象，假如北京目前所得票数为100，现在我们想把北京所得的票数改为50，通过实时数据管理即可轻松修改。
首先点击管理实时数据，会弹出如下对话框。
我们现在想要把北京改为50票，只需要把北京后面的输入框内的数值改为50，点击确定即可。
保存以后，打开作品，会发现北京的票数由原先票数改变成了50票。
同样的,通过抽奖组件的实时数据管理，可以去修改奖品的剩余数量以及领奖码的剩余数量。
收起阅读 »
4.1.11【新功能教程】首页加载的静态导出
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
动画导出器在动画导出的时候做一层检测，当用了首页作为加载的时候，符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后，当用户打开动画，可以在第一时间看到首页，减少了以前黑屏的时间。
目前符合条件的动画特征：
组件只包含文字、图片、形状、元件、组
填充效果只支持纯色填充、图片背景填充
动画支持关键帧、形状、变形的线性变换
支持组件的2d定位
所有使用的图片的总面积不大于某个阈值
支持新的预定义文字——加载进度，取值0到100
文字组件支持非云字体
屏幕适配支持默认
不含有交互特性（如行为、预置动画）
动画在导出或者发布的时候，如果上述条件满足，则自动将首页作为加载做静态导出。可以观察到的特征是：
导出：在导出包里出现了新的文件msl.js。
发布：查看msl.js链接的存在性。例如：发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html，查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。 收起阅读 »
动画导出器在动画导出的时候做一层检测，当用了首页作为加载的时候，符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后，当用户打开动画，可以在第一时间看到首页，减少了以前黑屏的时间。
目前符合条件的动画特征：
组件只包含文字、图片、形状、元件、组
填充效果只支持纯色填充、图片背景填充
动画支持关键帧、形状、变形的线性变换
支持组件的2d定位
所有使用的图片的总面积不大于某个阈值
支持新的预定义文字——加载进度，取值0到100
文字组件支持非云字体
屏幕适配支持默认
不含有交互特性（如行为、预置动画）
动画在导出或者发布的时候，如果上述条件满足，则自动将首页作为加载做静态导出。可以观察到的特征是：
导出：在导出包里出现了新的文件msl.js。
发布：查看msl.js链接的存在性。例如：发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html，查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。 收起阅读 »
4.1.10【新功能教程】滤镜效果
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
编辑地址：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html
目前支持如下滤镜：
为了给元素添加滤镜，选中元素后，在属性面板选择想要添加的滤镜效果，然后点击“+”图标即可将指定的滤镜效果添加到元素上。
根据需要，可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如，模糊滤镜可以调节模糊程度。其中，阴影滤镜包含有多个参数，可以将鼠标移动到阴影效果上显示参数并编辑。
如果不想要使用一个已经添加的滤镜效果，可以通过对应的滤镜效果右侧的删除按钮移除。
滤镜效果也支持动画。即：在关键帧上添加的滤镜效果，可以在关键帧动画时进行插值，实现滤镜效果的动画渲染。在动画插值过程中，如果某个关键帧上没有添加指定的滤镜，那么将会采用默认滤镜效果参数进行插值。例如：
如果第1个关键帧添加了100%的灰度，而第2个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认灰度(0%)进行插值；
如果第2个关键帧添加了8像素的模糊，而第1个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认模糊(0像素，即没有模糊）进行插值；
其它的以此类推。
目前滤镜效果的局限是，由于安卓和iOS手机上仅支持CSS滤镜，不支持Canvas滤镜，
因此手机上需要用Canvas进行渲染的部分（例如遮罩和截屏）暂时不支持滤镜，这一
点在使用中需要注意。 收起阅读 »
编辑地址：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html
目前支持如下滤镜：
灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert
为了给元素添加滤镜，选中元素后，在属性面板选择想要添加的滤镜效果，然后点击“+”图标即可将指定的滤镜效果添加到元素上。
根据需要，可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如，模糊滤镜可以调节模糊程度。其中，阴影滤镜包含有多个参数，可以将鼠标移动到阴影效果上显示参数并编辑。
如果不想要使用一个已经添加的滤镜效果，可以通过对应的滤镜效果右侧的删除按钮移除。
滤镜效果也支持动画。即：在关键帧上添加的滤镜效果，可以在关键帧动画时进行插值，实现滤镜效果的动画渲染。在动画插值过程中，如果某个关键帧上没有添加指定的滤镜，那么将会采用默认滤镜效果参数进行插值。例如：
如果第1个关键帧添加了100%的灰度，而第2个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认灰度(0%)进行插值；
如果第2个关键帧添加了8像素的模糊，而第1个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认模糊(0像素，即没有模糊）进行插值；
其它的以此类推。
目前滤镜效果的局限是，由于安卓和iOS手机上仅支持CSS滤镜，不支持Canvas滤镜，
因此手机上需要用Canvas进行渲染的部分（例如遮罩和截屏）暂时不支持滤镜，这一
点在使用中需要注意。 收起阅读 »
4.1.8【新功能教程】辅助线功能
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
辅助线的作用于photoshop里的辅助线功能类似，开启辅助线后，设计师在拖拽物体至辅助线时，物体会自动停靠至辅助线位置,，辅助线仅仅在ide内可以看到,，渲染后的作品看不到辅助线。
具体使用方法
1、绘制一条辅助线
按住alt键不要松开，然后在舞台上拖拽鼠标左键至某个方向(上下左右)，即可绘制出一条辅助线。
当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.
2、隐藏\显示辅助线及删除辅助线的几种方法
拖拽辅助线的时候,，和pshotoshop一样，将辅助线拖拽至舞台之外即可删除辅助线。
也可以通过视图菜单中的删除所有辅助线进行删除。
点击工具栏中的辅助线工具，即可快速显示\隐藏所有辅助线，也可以通过视图菜单中的辅助线选项，来进行显示隐藏。
收起阅读 »
辅助线的作用于photoshop里的辅助线功能类似，开启辅助线后，设计师在拖拽物体至辅助线时，物体会自动停靠至辅助线位置,，辅助线仅仅在ide内可以看到,，渲染后的作品看不到辅助线。
具体使用方法
1、绘制一条辅助线
按住alt键不要松开，然后在舞台上拖拽鼠标左键至某个方向(上下左右)，即可绘制出一条辅助线。
当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.
2、隐藏\显示辅助线及删除辅助线的几种方法
拖拽辅助线的时候,，和pshotoshop一样，将辅助线拖拽至舞台之外即可删除辅助线。
也可以通过视图菜单中的删除所有辅助线进行删除。
点击工具栏中的辅助线工具，即可快速显示\隐藏所有辅助线，也可以通过视图菜单中的辅助线选项，来进行显示隐藏。
收起阅读 »
3.2.2 UI原型：用Mugeda巧做GIF
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
下面我们介绍用Mugeda导出GIF动画的方法：
1.序列帧动画导出GIF动画
如图，以序列帧形式添加几张图片至舞台，使其形成一个整体的动画效果
导出GIF动画步骤：文件→导出→GIF动画注意：所有导出只支持导出第1页
可修改舞台大小改变导出的GIF动画大小
2.关键帧动画导出GIF动画
同时，我们也可以在第1页制作一个关键帧动画，点击文件→导出→GIF动画，同样可以导出GIF动画
3.元件动画导出GIF动画
我们制作一个车轮360度旋转的元件动画
将该元件放置舞台第1页（对齐小汽车元素合适的位置），同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果
点击：文件→导出→GIF动画，同样可以导出GIF动画
注意：舞台帧数大于等于元件内帧数
4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画，元件内的曲线变形动画则不可以导出
5.进度动画导出GIF动画
如图，我们将需导出的进度动画移至第1页，点击：文件→导出→GIF动画，导出GIF动画
以上列举了一些支持导出GIF动画的几种形式，如下图，是一些不支持导出GIF动画的形式
收起阅读 »
下面我们介绍用Mugeda导出GIF动画的方法：
1.序列帧动画导出GIF动画
如图，以序列帧形式添加几张图片至舞台，使其形成一个整体的动画效果
导出GIF动画步骤：文件→导出→GIF动画注意：所有导出只支持导出第1页
可修改舞台大小改变导出的GIF动画大小
2.关键帧动画导出GIF动画
同时，我们也可以在第1页制作一个关键帧动画，点击文件→导出→GIF动画，同样可以导出GIF动画
3.元件动画导出GIF动画
我们制作一个车轮360度旋转的元件动画
将该元件放置舞台第1页（对齐小汽车元素合适的位置），同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果
点击：文件→导出→GIF动画，同样可以导出GIF动画
注意：舞台帧数大于等于元件内帧数
4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画，元件内的曲线变形动画则不可以导出
5.进度动画导出GIF动画
如图，我们将需导出的进度动画移至第1页，点击：文件→导出→GIF动画，导出GIF动画
以上列举了一些支持导出GIF动画的几种形式，如下图，是一些不支持导出GIF动画的形式
收起阅读 »
3.1.11【展示动画】小爷吴亦凡
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本案例的原理是用陀螺仪控制舞台上的图片或视频。
在讲解本案例之前，我们首先需熟悉陀螺仪旋转轴的原理，如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。
上传视频素材
注意：为防止视频在不同手机的不兼容性，我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面
在舞台上添加一个陀螺仪，选择旋转类型，如下图为“绕Y轴旋转角”，同时将其命名为“Y”
设置关联属性
选择视频素材，点击其“左”属性右边的“关联”按钮，设置关联属性：
参考物体：“Y”
参考属性：“文本取值”
关联方式：“控制点插值”
主控量：“-40”
被控量：“0”
主控量：“40”
被控量：“-1198”
（注意：具体数值可提前在手机上观察得出）
同时添加另外一个陀螺仪，设置其类型为“绕X轴旋转角”，为其命名为“X”。
选择视频素材，点击其“上”属性右边的“关联”按钮，
设置关联属性：
参考物体：“X”
参考属性：“文本取值”
关联方式：“控制点插值”
主控量：“20”
被控量：“0”
主控量：“80”
被控量：“-173”
收起阅读 »
本案例的原理是用陀螺仪控制舞台上的图片或视频。
在讲解本案例之前，我们首先需熟悉陀螺仪旋转轴的原理，如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。
上传视频素材
注意：为防止视频在不同手机的不兼容性，我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面
在舞台上添加一个陀螺仪，选择旋转类型，如下图为“绕Y轴旋转角”，同时将其命名为“Y”
设置关联属性
选择视频素材，点击其“左”属性右边的“关联”按钮，设置关联属性：
参考物体：“Y”
参考属性：“文本取值”
关联方式：“控制点插值”
主控量：“-40”
被控量：“0”
主控量：“40”
被控量：“-1198”
（注意：具体数值可提前在手机上观察得出）
同时添加另外一个陀螺仪，设置其类型为“绕X轴旋转角”，为其命名为“X”。
选择视频素材，点击其“上”属性右边的“关联”按钮，
设置关联属性：
参考物体：“X”
参考属性：“文本取值”
关联方式：“控制点插值”
主控量：“20”
被控量：“0”
主控量：“80”
被控量：“-173”
收起阅读 »
3.1.10【展示动画】拖动长图类H5制作
要了解更多Mugeda功能？>>>猛戳我，学习更多教程
设置首页
如下图，点击“导入Photoshopshop(PSD)素材”按钮，将PSD格式内的图片素材原位置“分层导入”编辑页面
可为每个素材添加预置动画效果
将“点击”图标右键转换为元件，双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。
设置长图元件动画
新建图层，在第3帧插入帧，插入关键帧，同时添加进长图背景素材
将背景图片右键转换为元件，进入元件页面。
新建图层，分层导入其他图片素材。
为所有素材图层插入关键帧动画，分别设置素材的动画效果，例如给人物素材设置放大缩小动画，为“向左滑动”图标设置向左滑动动画效果。
回到舞台，补全所有图层的帧数，为长图元件添加预置动画，如图为“向右移入”
如下图，为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”，添加矩形，为其添加一个“出现即暂停”的行为。注意随时保存作品。
选中长图元件，在其属性栏内设置“拖动/旋转”为“水平拖动”
设置点击出现提示效果
新建图层“提示层”，在第4帧插入空白关键帧，同时导入原先预备好的提示素材。可为其添加预置动画效果等。
新建两个按钮层，分别在一个图层的第3帧放置“分享”按钮，在另一个图层第4帧提示页面放置一个“返回”按钮。
补全“行为层”及其他图层帧数，为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为
为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画，同理可为接下来的人物素材设置提示出现消失的动画。
设置分享动画的提示：如下图，新建“分享”图层，添加分享提示的素材，命名为“分享”，将其移至舞台之外。
为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件：点击。 设置“参数” 元素名称：“分享” 元素属性：“左” 赋值方式：“用设置的值替换现有值” 取值：“0”
同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为，即点击将其移至舞台之外。
收起阅读 »
设置首页
如下图，点击“导入Photoshopshop(PSD)素材”按钮，将PSD格式内的图片素材原位置“分层导入”编辑页面
可为每个素材添加预置动画效果
将“点击”图标右键转换为元件，双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。
设置长图元件动画
新建图层，在第3帧插入帧，插入关键帧，同时添加进长图背景素材
将背景图片右键转换为元件，进入元件页面。
新建图层，分层导入其他图片素材。
为所有素材图层插入关键帧动画，分别设置素材的动画效果，例如给人物素材设置放大缩小动画，为“向左滑动”图标设置向左滑动动画效果。
回到舞台，补全所有图层的帧数，为长图元件添加预置动画，如图为“向右移入”
如下图，为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”，添加矩形，为其添加一个“出现即暂停”的行为。注意随时保存作品。
选中长图元件，在其属性栏内设置“拖动/旋转”为“水平拖动”
设置点击出现提示效果
新建图层“提示层”，在第4帧插入空白关键帧，同时导入原先预备好的提示素材。可为其添加预置动画效果等。
新建两个按钮层，分别在一个图层的第3帧放置“分享”按钮，在另一个图层第4帧提示页面放置一个“返回”按钮。
补全“行为层”及其他图层帧数，为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为
为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画，同理可为接下来的人物素材设置提示出现消失的动画。
设置分享动画的提示：如下图，新建“分享”图层，添加分享提示的素材，命名为“分享”，将其移至舞台之外。
为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件：点击。 设置“参数” 元素名称：“分享” 元素属性：“左” 赋值方式：“用设置的值替换现有值” 取值：“0”
同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为，即点击将其移至舞台之外。
收起阅读 »
3.1.9【展示动画】科幻风格H5的制作
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程1. 制作科技感走线动画（进度动画）
如图，我们可以选择曲线工具、节点工具在舞台上画一个折线，同时可以调节折线的颜色等属性
然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画
我们新建5个图层，分别在每个图层上绘制一条直线
为第一条直线的某个时间段插入进度动画：右键→插入进度动画→（在特定帧数上）右键→插入关键帧
同理分别为其他几条线插入进度动画，制作出直线一条条绘制出来的炫酷效果
也可新建图层，在合适的位置添加相关图片素材等
2. 制作酷炫logo动画（进度动画）
同理，我们也可以用进度动画制作相关logo的绘制效果。
如下图，我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形
为其添加进度动画
3. 制作酷炫酒瓶走光动画（遮罩动画）
我们先用曲线工具绘制一个酒瓶形状，同时新建图层2，将酒瓶复制粘贴进图层2
选中图层2，将其物体的填充色去掉，只剩下边框
在图层2下面新建图层3，添加一个矩形，在其属性栏的填充颜色内选择“线性”，制作白色光亮效果
为所有图层添加帧，为图层3的光亮物体制作一个从上往下移动的动画效果
选中图层2，将其转换为“遮罩层”
我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。
收起阅读 »
如图，我们可以选择曲线工具、节点工具在舞台上画一个折线，同时可以调节折线的颜色等属性
然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画
我们新建5个图层，分别在每个图层上绘制一条直线
为第一条直线的某个时间段插入进度动画：右键→插入进度动画→（在特定帧数上）右键→插入关键帧
同理分别为其他几条线插入进度动画，制作出直线一条条绘制出来的炫酷效果
也可新建图层，在合适的位置添加相关图片素材等
2. 制作酷炫logo动画（进度动画）
同理，我们也可以用进度动画制作相关logo的绘制效果。
如下图，我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形
为其添加进度动画
3. 制作酷炫酒瓶走光动画（遮罩动画）
我们先用曲线工具绘制一个酒瓶形状，同时新建图层2，将酒瓶复制粘贴进图层2
选中图层2，将其物体的填充色去掉，只剩下边框
在图层2下面新建图层3，添加一个矩形，在其属性栏的填充颜色内选择“线性”，制作白色光亮效果
为所有图层添加帧，为图层3的光亮物体制作一个从上往下移动的动画效果
选中图层2，将其转换为“遮罩层”
我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。
收起阅读 »
3.1.8【展示动画】一只挖空心思的行礼箱
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1.制作元件动画
如图，添加一张图片素材，调整舞台大小使其符合素材大小，同时右键将图片素材转换为元件，双击元件进入元件编辑页面
如图，在元件第20帧插入帧，插入关键帧动画。
选中变形工具，按住Ctrl键将中间的控制原点移至舞台右侧中间位置
分别选中第一帧、最后一帧，改变其“Y轴旋转”为“-90”“90”
可点击“预览”观察元件动画的效果
同时我们在帧数的中间位置（图片正居舞台）插入关键帧，调整“透视度”为“50”
如下图，我们新建多个图层，复制图层0上的所有帧，分别粘贴进每一个图层内
如下图，在图层8上，删除除第一帧之外的前半部分帧数，同时修改第一帧的“Y轴旋转”为“0”
同理，分别删除图层7、6、5、4前半部分的一些帧如下图，分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”
移动图层2、1、0上的关键帧如下图位置，即在前面分别插入2、4、6帧
新建图层9，在与图层0第一帧相同帧数上插入一个矩形，调整颜色如下图，制作一个光韵矩形。
如下图为光韵矩形也设置相同的翻页动画，调整其第一帧关键帧的“Y轴旋转”为“-90”，调整其最后一帧关键帧的“Y轴旋转”为“0”，同时在最后插入一个空白帧。
如下图，隔图层复制光韵图层及帧。
之后，可双击元件每个图层的物体，分别进入各自的组，添加相对应的素材。
即做好一个元件动画。
2.制作“左右滑动预览”动画
回到舞台，新建一个图层，添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”
改变文本框数值为“10”。点击其“添加/编辑行为”按钮，添加两个行为：
属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：加
设置状态：暂停记时器
属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：减
设置状态：暂停记时器
为“加”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：0.01
同理，为“减”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：-0.01
设置元件的动画关联如下图：
关联对象：关联取值
关联属性：文本取值
开始值：10
结束值：0
播放模式：同步
为元件添加六个行为，分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”
为文本框添加两个控制定时器的行为：
属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：减
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：小于等于
参考值：0
属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：加
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：大于
参考值：10
收起阅读 »
1.制作元件动画
如图，添加一张图片素材，调整舞台大小使其符合素材大小，同时右键将图片素材转换为元件，双击元件进入元件编辑页面
如图，在元件第20帧插入帧，插入关键帧动画。
选中变形工具，按住Ctrl键将中间的控制原点移至舞台右侧中间位置
分别选中第一帧、最后一帧，改变其“Y轴旋转”为“-90”“90”
可点击“预览”观察元件动画的效果
同时我们在帧数的中间位置（图片正居舞台）插入关键帧，调整“透视度”为“50”
如下图，我们新建多个图层，复制图层0上的所有帧，分别粘贴进每一个图层内
如下图，在图层8上，删除除第一帧之外的前半部分帧数，同时修改第一帧的“Y轴旋转”为“0”
同理，分别删除图层7、6、5、4前半部分的一些帧如下图，分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”
移动图层2、1、0上的关键帧如下图位置，即在前面分别插入2、4、6帧
新建图层9，在与图层0第一帧相同帧数上插入一个矩形，调整颜色如下图，制作一个光韵矩形。
如下图为光韵矩形也设置相同的翻页动画，调整其第一帧关键帧的“Y轴旋转”为“-90”，调整其最后一帧关键帧的“Y轴旋转”为“0”，同时在最后插入一个空白帧。
如下图，隔图层复制光韵图层及帧。
之后，可双击元件每个图层的物体，分别进入各自的组，添加相对应的素材。
即做好一个元件动画。
2.制作“左右滑动预览”动画
回到舞台，新建一个图层，添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”
改变文本框数值为“10”。点击其“添加/编辑行为”按钮，添加两个行为：
属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：加
设置状态：暂停记时器
属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：减
设置状态：暂停记时器
为“加”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：0.01
同理，为“减”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：-0.01
设置元件的动画关联如下图：
关联对象：关联取值
关联属性：文本取值
开始值：10
结束值：0
播放模式：同步
为元件添加六个行为，分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”
为文本框添加两个控制定时器的行为：
属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：减
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：小于等于
参考值：0
属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：加
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：大于
参考值：10
收起阅读 »
3.1.7【展示动画】2016网易娱乐圈画传
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
1.制作缩放动画
我们先在图层1添加第一张图
在图层2添加第二张图，将第二张图放大，使其放置第一张图的画面大小符合舞台（即与图层1第一张图大小画面重合）
如下图为两个图层第50帧位置上插入帧，在图层1上第二帧插入一个空白帧使其只出现在第一帧上，为图层2插入关键帧动画，在最后一帧关键帧上调整第二张图片的大小使其符合舞台
如图我们新建图层3，在最后一帧插入空白帧，添加进第三张图片，调整图片大小使其放置第二张图的位置大小符合舞台（即与图层2最后一帧图片大小画面重合）
同理我们在三个图层第100帧位置上插入帧，为图层2、3插入关键帧动画，分别在其最后一帧关键帧上缩小图片，使第三张图的大小符合舞台
同理新建图层4添加第四张图片，制作动画效果，此处不详述。
2.制作“长按按钮播放动画”效果
如图，新建图层，添加一个按钮元素
新建“行为层”添加一个矩形，设置矩形“出现即暂停”行为，同时在该图层第二帧添加一个空白帧，使该行为只使用在第一帧
为按钮素材添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
收起阅读 »
1.制作缩放动画
我们先在图层1添加第一张图
在图层2添加第二张图，将第二张图放大，使其放置第一张图的画面大小符合舞台（即与图层1第一张图大小画面重合）
如下图为两个图层第50帧位置上插入帧，在图层1上第二帧插入一个空白帧使其只出现在第一帧上，为图层2插入关键帧动画，在最后一帧关键帧上调整第二张图片的大小使其符合舞台
如图我们新建图层3，在最后一帧插入空白帧，添加进第三张图片，调整图片大小使其放置第二张图的位置大小符合舞台（即与图层2最后一帧图片大小画面重合）
同理我们在三个图层第100帧位置上插入帧，为图层2、3插入关键帧动画，分别在其最后一帧关键帧上缩小图片，使第三张图的大小符合舞台
同理新建图层4添加第四张图片，制作动画效果，此处不详述。
2.制作“长按按钮播放动画”效果
如图，新建图层，添加一个按钮元素
新建“行为层”添加一个矩形，设置矩形“出现即暂停”行为，同时在该图层第二帧添加一个空白帧，使该行为只使用在第一帧
为按钮素材添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
收起阅读 »
3.1.6【展示动画】长按手指控制动画播放
想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果
1.控制舞台动画
我们首先在舞台上添加一个矩形，设置“出现即暂停”的行为
选择最上图层,在舞台需手指按住的位置上添加一个矩形，设置其透明度为“0”
随后为该透明矩形添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
2.控制元件动画
首先，我们可在舞台上添加一个元件动画，如下图，为其命名为“麦穗”
回到舞台，继续为控制矩形添加两个行为，即“手指抬起即暂停”“手指按下即播放”
分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”
3.控制提示元素
如下图，在舞台上添加一个“要一直按住才会播放哦”的提示语，为其命名为“提示”
为控制矩形再添加两个行为：
1.属性控制→“改变元素属性”→触发条件：手指按下→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“0”
2.属性控制→“改变元素属性”→触发条件：手指抬起→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“100”
这样，一个“长按手指控制动画播放”的效果已做好。 收起阅读 »
本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果
1.控制舞台动画
我们首先在舞台上添加一个矩形，设置“出现即暂停”的行为
选择最上图层,在舞台需手指按住的位置上添加一个矩形，设置其透明度为“0”
随后为该透明矩形添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
2.控制元件动画
首先，我们可在舞台上添加一个元件动画，如下图，为其命名为“麦穗”
回到舞台，继续为控制矩形添加两个行为，即“手指抬起即暂停”“手指按下即播放”
分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”
3.控制提示元素
如下图，在舞台上添加一个“要一直按住才会播放哦”的提示语，为其命名为“提示”
为控制矩形再添加两个行为：
1.属性控制→“改变元素属性”→触发条件：手指按下→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“0”
2.属性控制→“改变元素属性”→触发条件：手指抬起→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“100”
这样，一个“长按手指控制动画播放”的效果已做好。 收起阅读 »
木疙瘩HTML5模板设计大赛·第二季：网络票选（附入围名单）
经过一个月的作品征集，第2季木疙瘩H5模版设计大赛收到了众多优秀的模版作品，感谢大家的热情参与！每个模版作品都让评委眼前一亮，品质很高，我们先给参加此次模版大赛的小伙伴们鼓个掌！
一、评选进程
在专业评审激烈的评选后，共有40个优秀作品成功入围复选，以下是入围作品名单：
1. 复选时间
复选时间是8月15日—8月26日，网络投票与专业评审打分同步进行
2. 评分规则
总分=专业评审平均分*60%+网络投票权重*30%+模版可套用性*10%
（按照总分排名分配奖项）
二、如何投票
扫描二维码即可参与投票（或在Mugeda公众号回复“投票”）
未关注Mugeda公众号的朋友，扫描关注后，点击自动弹出的投票信息即可投票。
进入投票页可观看所有入围作品
三、获奖公布
模版大赛获奖结果将于8月27日—8月31日进行公示，进入复选的小伙伴有木有很激动呐！快来投票吧！
四、关于奖项
第2季木疙瘩H5模版设计大赛共设置5个奖项，分别是一等奖1名，二等奖2名，三等奖3名，人气奖1名，优秀奖20名。
具体奖项可进入大赛官方页面查看。
【进入大赛官方页面】
快来pick你最喜爱的模版作品吧！
收起阅读 »