【教程】刷屏3亿人的国旗H5,0基础学会做
昨天@微信官方给我一面小红旗
你是不是也发了
然后...
每隔几分钟就看一次自己的微信头像
第一眼没有国旗
几分钟后...
没有国旗
你认真的样子真可爱
马上国庆70周年了,小国旗必须有
下面我给大家安利一波
刷屏3亿人的国旗H5如何制作!
我选用木疙瘩平台为制作工具,那就开始讲解啦~~
效果预览:https://9.u.mgd5.com/c/tbmg/2yc2/index.html
>>>结构分析<<<
舞台共有3帧,画面及功能如下图:
玩法介绍:
自动获取微信头像(或上传本地照片),选择边框样式,生成头像。长按保存即可~
<玩法流程>
技术思路:
利用木疙瘩“获取微信头像”、“定制图片”功能获取到头像原图,制作逐帧元件用来选择边框,调用木疙瘩区域截图接口制作完成。
<关键功能点>
电脑端打开共享编辑地址:https://cn.mugeda.com/animation/edit/1e4de26a
注:如果你是木疙瘩新用户,请先注册然后 [文件 ] - [ 另存为 ],即可把此案例Demo保存到自己账号中。
一、制作头像元件(很关键)
首先打开木疙瘩官网(cn.mugeda.com),创建一个新作品,选择专业版编辑器。
1、创建元件
导入边框图片到舞台,调整大小和位置后,选中该图片,点击鼠标右键选择“转换为元件”。点击元件,在右侧属性栏,将元件命名为:headObj
2、插入边框
双击进入元件内部,创建多个关键帧,每帧放一张边框图。
点击【保存】这一步很重要
3、获取头像
新建图层,添加一张正方形图片,调整大小和边框大小一致,命名为:headImg
回到舞台,选中头像元件(即命名为headObj的元件),在元件上添加行为,如图:
<如何给元素添加行为>
在弹出的行为窗口中,选择 微信定制-显示微信头像,触发条件选“出现”,点击铅笔图标,编辑行为参数,选择目标元素为:headImg(元件实例headObj),点击确认。
4、添加暂停行为
新建图层,插入一个方形,添加行为:暂停(触发条件选“出现”),将其移至元件最下层。
二、制作选择边框功能
返回到舞台,在左右箭头上添加选择边框的功能,点击箭头来选择边框。
左箭头添加行为:上一帧 作用对象选 headObj
同理,右箭头添加 下一帧 的行为即可,作用对象选 headObj
三、上传头像
在 上传头像 按钮上添加行为:微信定制-定制图片
选择目标元素为:headImg(元件实例headObj)
操作成功后选择 回调函数 ,在 编辑 中输入 函数名称 为uploadf
四、生成头像
1、引入区域截图功能
使用木疙瘩官方提供的区域截图功能,方法是:
导入脚本:点击 文件 - 导入 - 脚本
勾选mugeda_page.js
点击 加号,粘贴下方地址:
https://card.mugeda.com/js/htm ... fy.js
输入下方代码:
2、生成区域截图头像
在 生成头像 按钮上添加行为:回调函数,函数名为:jietu
这样点击生成图像按钮,就能成功调用区域截图功能啦!
五、保存头像
1、添加暂停行为
新建图层,在舞台外插入“暂停”文本框,添加行为:暂停(触发条件选“出现”)
让每1帧的画面都暂停,方便进行画面之间的切换控制。
2、添加友好的等候界面
在舞台第2帧添加等候界面,可以自由设计。
3、保存头像
在舞台第3帧插入方形图片,调整大小和位置(与第1帧的头像元件一致)
并为图片命名为:finalImg
这样代码就能将合成的头像显示在这张图片上了,是不是很酷?
4、再玩一次
在 再玩一次 按钮上添加行为:跳转并停止 选帧号为1
这样用户就能回到首页继续制作头像了!
记得保存!保存!保存!
电脑端打开共享编辑地址:https://cn.mugeda.com/animation/edit/1e4de26a
注:如果你是木疙瘩新用户,请先注册然后 [文件 ] - [ 另存为 ],即可把此案例Demo保存到自己账号中。
更多H5基础教程(可手机观看):
http://m.mugeda.com/lessonlist
5 个评论
有几个疑问,1.打开“共享编辑地址”后发现上传图片后点击生成头像一直在请等候界面,当把上面步骤中的导入脚本这一步添加后,就可以生成头像了。2.发现如果不上传图片,直接点击“生成头像”就会提醒“请上传图片”....难道不可以直接用识别的微信默认头像生成新头像吗?
qz 回复 qq3e693ff05a
重新保存一下共享的文件 注释一行代码就可以了
能不能出个视频教程
您好,我在制作过程中上传完图片后点生成图片没办法跳转到下一界面,请问能否帮忙解答一下呢
我也是 点击生成图片没办法跳转到下一界面