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

推广图.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

5 个评论

有几个疑问,1.打开“共享编辑地址”后发现上传图片后点击生成头像一直在请等候界面,当把上面步骤中的导入脚本这一步添加后,就可以生成头像了。2.发现如果不上传图片,直接点击“生成头像”就会提醒“请上传图片”....难道不可以直接用识别的微信默认头像生成新头像吗?
重新保存一下共享的文件 注释一行代码就可以了
能不能出个视频教程
您好,我在制作过程中上传完图片后点生成图片没办法跳转到下一界面,请问能否帮忙解答一下呢
我也是 点击生成图片没办法跳转到下一界面

要回复文章请先登录注册