【教程】刷屏3亿人的国旗H5,0基础学会做

qz 发表了文章 • 2 个评论 • 697 次浏览 • 2019-09-26 17:31 • 来自相关话题

昨天@微信官方给我一面小红旗
你是不是也发了
然后...

每隔几分钟就看一次自己的微信头像

第一眼没有国旗
几分钟后...
没有国旗

你认真的样子真可爱

马上国庆70周年了,小国旗必须有

下面我给大家安利一波
刷屏3亿人的国旗H5如何制作!

我选用木疙瘩平台为制作工具,那就开始讲解啦~~ 查看全部
推广图.png


昨天@微信官方给我一面小红旗
你是不是也发了
然后...

每隔几分钟就看一次自己的微信头像

第一眼没有国旗
几分钟后...
没有国旗

你认真的样子真可爱

马上国庆70周年了,小国旗必须有

下面我给大家安利一波
刷屏3亿人的国旗H5如何制作!

我选用木疙瘩平台为制作工具,那就开始讲解啦~~
效果预览:https://9.u.mgd5.com/c/tbmg/2yc2/index.html

>>>结构分析<<<
舞台共有3帧,画面及功能如下图:
0-截图拼接.png


玩法介绍:
自动获取微信头像(或上传本地照片),选择边框样式,生成头像。长按保存即可~
0-4玩法流程.png

<玩法流程>

技术思路:
利用木疙瘩“获取微信头像”、“定制图片”功能获取到头像原图,制作逐帧元件用来选择边框,调用木疙瘩区域截图接口制作完成。
0-5关键功能点.png

<关键功能点>
电脑端打开共享编辑地址:https://cn.mugeda.com/animation/edit/1e4de26a
注:如果你是木疙瘩新用户,请先注册然后 [文件 ] - [ 另存为 ],即可把此案例Demo保存到自己账号中。

一、制作头像元件(很关键)
首先打开木疙瘩官网(cn.mugeda.com),创建一个新作品,选择专业版编辑器。
1-0选择专业版.png


1、创建元件
导入边框图片到舞台,调整大小和位置后,选中该图片,点击鼠标右键选择“转换为元件”。点击元件,在右侧属性栏,将元件命名为:headObj
1-1.png


2、插入边框
双击进入元件内部,创建多个关键帧,每帧放一张边框图。
1-2.png

 
点击【保存】这一步很重要


3、获取头像
新建图层,添加一张正方形图片,调整大小和边框大小一致,命名为:headImg
回到舞台,选中头像元件(即命名为headObj的元件),在元件上添加行为,如图:
1-3-1.png

<如何给元素添加行为>

在弹出的行为窗口中,选择 微信定制-显示微信头像,触发条件选“出现”,点击铅笔图标,编辑行为参数,选择目标元素为:headImg(元件实例headObj),点击确认。
1-3-2.png



4、添加暂停行为
新建图层,插入一个方形,添加行为:暂停(触发条件选“出现”),将其移至元件最下层。
1-4.png



二、制作选择边框功能
返回到舞台,在左右箭头上添加选择边框的功能,点击箭头来选择边框。
左箭头添加行为:上一帧 作用对象选 headObj
2.png


同理,右箭头添加 下一帧 的行为即可,作用对象选 headObj

三、上传头像
在 上传头像 按钮上添加行为:微信定制-定制图片
选择目标元素为:headImg(元件实例headObj)
操作成功后选择 回调函数 ,在 编辑 中输入 函数名称uploadf
3.png



四、生成头像

1、引入区域截图功能
使用木疙瘩官方提供的区域截图功能,方法是:
导入脚本:点击 文件 - 导入 - 脚本
勾选mugeda_page.js
点击 加号,粘贴下方地址:
https://card.mugeda.com/js/htm ... fy.js
4-1-1.png


输入下方代码:

4-1-2.png


4-1-3new.png



2、生成区域截图头像
生成头像 按钮上添加行为:回调函数,函数名为:jietu
4-2.png


这样点击生成图像按钮,就能成功调用区域截图功能啦!

五、保存头像
1、添加暂停行为
新建图层,在舞台外插入“暂停”文本框,添加行为:暂停(触发条件选“出现”)
让每1帧的画面都暂停,方便进行画面之间的切换控制。
5-1.png



2、添加友好的等候界面
在舞台第2帧添加等候界面,可以自由设计。
5-2.png



3、保存头像
在舞台第3帧插入方形图片,调整大小和位置(与第1帧的头像元件一致)
并为图片命名为:finalImg
5-3.png


这样代码就能将合成的头像显示在这张图片上了,是不是很酷?

4、再玩一次
再玩一次 按钮上添加行为:跳转并停止  选帧号为1
5-4.png


这样用户就能回到首页继续制作头像了!
 
记得保存!保存!保存!

电脑端打开共享编辑地址:https://cn.mugeda.com/animation/edit/1e4de26a

注:如果你是木疙瘩新用户,请先注册然后 [文件 ] - [ 另存为 ],即可把此案例Demo保存到自己账号中。

更多H5基础教程(可手机观看):
http://m.mugeda.com/lessonlist

【免费培训】从第29届中国新闻奖看H5在媒体中的技术应用

qz 发表了文章 • 1 个评论 • 1201 次浏览 • 2019-09-24 16:29 • 来自相关话题

<<<点击此处进入直播间>>>
 
由中国记协新媒体专业委员会主办的第二十九届中国新闻奖获奖名单正处于公示期。
其中媒体用木疙瘩创作并进入拟获奖名单的作品有一等奖一个、二等奖两个、三等奖三个。
在这次新闻奖大赛中,看出新媒体创意互动作品在新闻界的重要地位,由此抛出 查看全部
750x422.png

<<<点击此处进入直播间>>>
 
由中国记协新媒体专业委员会主办的第二十九届中国新闻奖获奖名单正处于公示期。
其中媒体用木疙瘩创作并进入拟获奖名单的作品有一等奖一个、二等奖两个、三等奖三个。
在这次新闻奖大赛中,看出新媒体创意互动作品在新闻界的重要地位,由此抛出几个问题。

在新媒体中H5的应用场景?
如何在众多的H5作品脱颖而出?
创意互动H5作品有什么优势?
....

这都是大家最为关心的问题,为此我们举办了一次免费直播培训,邀请木疙瘩CEO王志为大家一一解答。
WX20190924-162104.png

 
<<<点击此处进入直播间>>>
 
 
另外小木还申请了超实用的福利
由红网时刻新闻出品的精品新闻模版
价值500元,限量500份

免费送!免费送!免费送!

对你没有听错免费送!

扫描下方二维码即可参与


新闻奖最终版海报.png

 

【免费直播课】手把手教你零代码、高效制作垃圾分类小游戏

qz 发表了文章 • 4 个评论 • 861 次浏览 • 2019-08-14 15:47 • 来自相关话题

 
直播课程: 垃圾分类-H5游戏精讲
直播时间: 8.15(本周四) 晚8点
培训嘉宾:阴昭宇 木疙瘩学院副院长&高级项目经理

「课程福利」
☑免费获得本游戏全套素材 (包括朝阳群众的神秘配音哦)
☑前200名额外赠送价值500元“本游戏H5源文件”
 

本游戏H5源文件赠送活动已结束 查看全部
副本_未命名_自定义px_2019.08_.14_.png

 
直播课程: 垃圾分类-H5游戏精讲
直播时间: 8.15(本周四) 晚8点
培训嘉宾:阴昭宇 木疙瘩学院副院长&高级项目经理

「课程福利」
☑免费获得本游戏全套素材 (包括朝阳群众的神秘配音哦)
☑前200名额外赠送价值500元“本游戏H5源文件”
 

本游戏H5源文件赠送活动已结束
获取本游戏源文件方式:
http://www.mugeda.com/case_pre ... .html
PS:木疙瘩付费会员免费使用,直接购买499元

【已解决】什么才是福下集视频教程不对

mengxin 回复了问题 • 3 人关注 • 1 个回复 • 151 次浏览 • 2019-07-25 11:36 • 来自相关话题

m神大赛 动漫

m403120589 发表了文章 • 0 个评论 • 116 次浏览 • 2019-07-08 18:34 • 来自相关话题

【已解决】两个物体一起做浮入动作.大的在下,小的在下。虚实怎么调同时进行?

mengxin 回复了问题 • 3 人关注 • 1 个回复 • 183 次浏览 • 2019-07-02 10:33 • 来自相关话题

【待解决】Mugeda官方推荐用书《可视化H5页面设计与制作》第89-90页的教程写错了,请问正确的操作步骤应该是什么?

goodman123 回复了问题 • 1 人关注 • 1 个回复 • 886 次浏览 • 2019-05-26 22:28 • 来自相关话题

【已解决】怎么做文字的上下滚动效果呢,像电影最后的演员表一样

goodman123 回复了问题 • 1 人关注 • 1 个回复 • 337 次浏览 • 2019-04-21 22:53 • 来自相关话题

【已解决】页面最大化

mengxin 回复了问题 • 3 人关注 • 1 个回复 • 298 次浏览 • 2019-04-17 09:39 • 来自相关话题

【已解决】长图拖动到指定位置

mengxin 回复了问题 • 3 人关注 • 1 个回复 • 475 次浏览 • 2019-03-18 11:11 • 来自相关话题

【已解决】举办2019训练营

goodman123 回复了问题 • 1 人关注 • 1 个回复 • 418 次浏览 • 2019-01-27 19:32 • 来自相关话题

【已解决】怎么导出音乐元件?

m92387354 回复了问题 • 3 人关注 • 2 个回复 • 2225 次浏览 • 2018-07-06 17:41 • 来自相关话题

【已解决】导出问题?

mengxin 回复了问题 • 3 人关注 • 1 个回复 • 754 次浏览 • 2018-06-25 10:14 • 来自相关话题

【报名直播课】6.11~6.15 木疙瘩直播大讲堂课程表

songyue 发表了文章 • 0 个评论 • 1255 次浏览 • 2018-06-08 17:26 • 来自相关话题

点击这里报名






6月11日~6月15日,直播课安排如下:    
 
一、在线客服支持  
时间:
6月11日(周一),上午11:00-12:00,  
6月12日(周二)、6月14日(周四)、6月15日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在 查看全部
点击这里报名

默认标题_官方公众号首图_2018.06_.07_(1)_.png


6月11日~6月15日,直播课安排如下:    
 
一、在线客服支持  
时间:
6月11日(周一),上午11:00-12:00,  
6月12日(周二)、6月14日(周四)、6月15日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教室发问。   
 
二、案例课 
案例课《快闪H5制作》 
时间:6月13日(周三),上午10:00-11:00 
 
点击这里报名
 

【报名直播课】6.4~6.8 木疙瘩直播大讲堂课程表

songyue 发表了文章 • 0 个评论 • 1079 次浏览 • 2018-06-03 09:20 • 来自相关话题

点击这里报名




 
6月4日~6月8日,直播课安排如下:    
 
一、在线客服支持  
时间:
6月4日(周一),上午11:00-12:00,  
6月5日(周二)、6月7日(周四)、6月8日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教 查看全部
点击这里报名
默认标题_官方公众号首图_2018.06_.03_.png

 
6月4日~6月8日,直播课安排如下:    
 
一、在线客服支持  
时间:
6月4日(周一),上午11:00-12:00,  
6月5日(周二)、6月7日(周四)、6月8日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教室发问。   
 
二、案例课 
案例课《DIY场景布置类H5制作》 
时间:6月6日(周三),上午10:00-11:00 
案例内容展示:
QQ截图20180603092032.png

 
点击这里报名
 

【报名直播课】5.28~6.1木疙瘩直播大讲堂课程表

songyue 发表了文章 • 0 个评论 • 1223 次浏览 • 2018-05-25 17:02 • 来自相关话题

点击这里报名





5月28日~6月1日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月28日(周一),上午11:00-12:00,  
5月29日(周二)、5月31日(周四)、6月1日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段 查看全部
点击这里报名
0530.jpg


5月28日~6月1日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月28日(周一),上午11:00-12:00,  
5月29日(周二)、5月31日(周四)、6月1日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教室发问。   
 
二、案例课 
案例课《毕业季·H5简历制作》 
时间:5月30日(周三),上午10:00-11:00 
案例内容展示:
简历1.jpg

点击这里报名

【报名直播课】5.21~5.25木疙瘩直播大讲堂课程表

songyue 发表了文章 • 0 个评论 • 1248 次浏览 • 2018-05-18 15:21 • 来自相关话题

点击这里报名






5月21日~5月25日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月21日(周一),上午11:00-12:00,  
5月22日(周二)、5月24日(周四)、5月25日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在 查看全部
点击这里报名

0523.jpg


5月21日~5月25日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月21日(周一),上午11:00-12:00,  
5月22日(周二)、5月24日(周四)、5月25日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教室发问。   
 
二、案例课 
案例课《网易刷屏H5:生成你的说明书》 
时间:5月23日(周三),上午10:00-11:00 
案例内容展示:
课程介绍.png

说明书.png

 
点击这里报名
 
 

【600+设计师推荐】如果想系统学H5,没有比这更好的选择了

songyue 发表了文章 • 0 个评论 • 1399 次浏览 • 2018-05-16 17:10 • 来自相关话题

>>>报名传送门
 
一、 适合什么人群
平面设计师
动画设计师
运营/市场人员
H5爱好者

二、 具体怎么学
1、每天1小时
每天学习任务是“视频教程+素材包”的形式,建议学员每天花1个小时学习并掌握。

2、每天2个时间段答疑
每天两个时间段老师在群里集中答疑,问题当天就解决 查看全部
900.png
>>>报名传送门
 
一、 适合什么人群
平面设计师
动画设计师
运营/市场人员
H5爱好者

二、 具体怎么学
1、每天1小时
每天学习任务是“视频教程+素材包”的形式,建议学员每天花1个小时学习并掌握。

2、每天2个时间段答疑
每天两个时间段老师在群里集中答疑,问题当天就解决,确保学习高效性,每个学习阶段结束老师还会直播点评作业,总结本阶段学习重难点。

3、丰富激励机制,帮你坚持到底
训练营共有三次大作业,学员需要提交每个阶段大作业,才能获得下阶段学习资料,帮你击退拖延症。
学习奖励:
木疙瘩H5训练营前3名,全额返学费,并获得1次木疙瘩认证设计师免费考试机会。

三、 关于课程
1、开课时间:
报名截止时间6月1日,正式开课时间6月2日
 
2、学费:
第7期木疙瘩训练营原价728元,现价628元。
三人组团学习,成团价528元,立减100元
 
课程大纲.jpg


四、如何购买
>>>报名传送门
>>>拼团传送门(三人成团学习,立减100,时间仅限5.16~5.24)
 
课程咨询
微信图片_20180516170817.jpg

 
 
 

碎片化学习木疙瘩必看:30分钟从小白变身H5高手

songyue 发表了文章 • 2 个评论 • 10523 次浏览 • 2018-05-11 15:58 • 来自相关话题

一、课程介绍: 
主讲人:森林味 
木疙瘩学院院长,高级H5技术培训师
十年设计经验,曾为人民日报、新华社、广州日报、华为、腾讯、360、谷歌、大众点评等企业设计现象级H5作品,学院奖H5移动交互广告设计类评委,本科院校艺术设计类毕业生导师。
 
主讲人:徐谭谭 
木疙瘩学院高级培训师 
多年设计经 查看全部
480荔枝微课.png

一、课程介绍: 
主讲人:森林味 
木疙瘩学院院长,高级H5技术培训师
十年设计经验,曾为人民日报、新华社、广州日报、华为、腾讯、360、谷歌、大众点评等企业设计现象级H5作品,学院奖H5移动交互广告设计类评委,本科院校艺术设计类毕业生导师。
 
主讲人:徐谭谭 
木疙瘩学院高级培训师 
多年设计经验,曾负责新华社、人民日报、华为、求是网、齐鲁网、浙江出版社、人民教育出版社等媒体及出版社的H5项目。
 
二、课程内容: 
(1)快速入门篇  
从了解木疙瘩界面开始,熟悉木疙瘩各个基础功能,并能独立做出一个简单H5。 
(2)界面与舞台篇/素材和媒体 
学会导入文字、图片、声音及多种媒体形式,并掌握H5素材的处理方式。 
(3)动画篇/行为篇 
学会木疙瘩经典7大动画和基础行为的添加。 
(4)控件篇 
掌握木疙瘩绘画板、投票、摇一摇等控件的使用。 
(5)微信功能与表单篇 
学会调用微信头像/昵称功能,图片上传,录制声音等功能 
(6)实用H5案例篇 
包括邀请函、个人简历、快闪等10个实用案例
 
三、购买方法及说明:
扫码下方二维码,进入直播间
荔枝课堂二维码.jpg

该课程为付费学习,学费19.9,购买后可在微信学习,特别适合想利用碎片化时间学习人群。购买后永久回听。购买问题,可咨询微信15801582304。

【报名直播课】5.14~5.18木疙瘩直播大讲堂课程表

songyue 发表了文章 • 0 个评论 • 1234 次浏览 • 2018-05-10 16:40 • 来自相关话题

点击这里报名




 
5月14日~5月18日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月14日(周一),上午11:00-12:00,  
5月15日(周二)、5月17日(周四)、5月18日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在 查看全部
点击这里报名
0516.jpg

 
5月14日~5月18日,直播课安排如下:    
 
一、在线客服支持  
时间:
5月14日(周一),上午11:00-12:00,  
5月15日(周二)、5月17日(周四)、5月18日(周五)、上午10:00-11:00,  
在使用Mugeda过程中遇到任何问题可在本时段进入教室发问。   
 
二、案例课 
案例课《接力型H5制作》 
时间:5月16日(周三),上午10:00-11:00 
案例内容展示:
接力H5.gif

 
点击这里报名