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

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

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

你认真的样子真可爱

马上国庆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

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

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

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

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

免费送！免费送！免费送！

对你没有听错免费送！

扫描下方二维码即可参与


 

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

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

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

一、什么是分页共享

分页共享即企业会员下的多个团队成员可以同时编辑同一个作品。权限分配以页为单位，例如：一个作品有3页，团队成员A通过【协同共享】将第2页和第3页分配给了成员B, 那么第2页第3页只有成员B有编辑权限。在编辑的同时，如果成员B保存了作品，那么成员A（使用协同共享的原作者）可以点击获取【协同数据】来进行数据同步，成员A就可以查看成员B编辑的第2页和第3页的内容。
 
二、具体操作步骤
1、【新建】一个作品，添加3个空白页，点击【保存】，生成作品名称为“协同共享范例”，如图1。

图1
 
2、保存成功以后，设置作品的分享类型为分页共享，如图2（注意只有企业会员才有这个权限）

图2
 
3、设置成功后，点击蓝色的【编辑分页分享】按钮，在弹出的窗口中选择某一个页面对应的【共享编辑】按钮进行“权限分配”，如图3-1；点击链接图标，下方会出现共享链接，点击【复制链接】发送给团队的其他成员即可，如图3-2。

图3-1


图3-2
 
我们也支持将多页同时分给其他成员编辑，例如：成员A将第2页和第3页的编辑权限分配给成员B, 可以按住【CTRL+鼠标左键】点击列表选择多页，如图3-3；然后点击【共享编辑】就可以将多个页面分配给同一成员。

图3-3
 
同样点击链接图标查看共享链接，点击【复制链接】发送给团队的其他成员即可。如图3-4（tips：多个页面共享给同一个成员编辑时，共享链接是相同的）

图3-4

特别提示：企业会员通常为3个成员及以上，如果成员A同时将共享链接发送给成员B和成员C，那么第一个打开编辑链接的成员拥有该页面的编辑权限。
4、如何取消共享编辑权限？
当团队成员将作品编辑完成或是将编辑权限重新分配给其他成员，可取消之前分配的对应成员的编辑权限。方法如下：
方法1：成员A（作品的原作者）取消共享编辑权限，如图3-5
• 取消单页共享：点击【二维码】—【分页共享】直接点击页面对应的【取消共享】即可。
• 取消多页共享：点击【二维码】—【分页共享】按住【CTRL+鼠标左键】选择其中一个已经共享的页面，点击【取消共享】，就可以同时取消多页的共享。（tips：一定不要将多页同时选中点击取消共享，这样不支持）
方法2：成员B或者成员C（协作者）释放权限，点击【二维码】—【释放权限】即可释放自己对该作品页面的编辑权限。如图3-5

图3-5
（tips：如果是成员A（作品的原作者）关闭成员B或成员C（协作者）的编辑权限， 应提前通知成员B或成员C保存作品， 避免未保存作品而导致数据丢失）

5、如何同时编辑一个作品并合并作品？
例如：成员A将作品的第2页和第3页【分页共享】给成员B，成员B登陆状态下打开共享链接，进入编辑器可以看到第1页是锁住的状态，目前成员B只有第2页和第3页的编辑权限。如图4-1

图4-1
 
同理，由于成员A将第2页和第3页权限分配给了成员B，那么成员A仅有第1页的编辑权限，第2页和第3页是锁住的状态。如图4-2

图4-2
 
现在，我们以成员B的身份分别在第2页和第3页分别画一个圆形和一个方形，点击【保存】如图4-3

图4-3
 
此时，成员A点击【文件】—【同步协同数据】即可将成员B编辑的第2页和第3页的内容同步到当前作品中。如图4-4
 

图4-4
 
同步数据后，成员A可以查看到第2页和第3页的内容。如图4-5

图4-5
 
同理，如果成员A编辑了第1页的内容进行保存，成员B点击【同步协同数据】，即可查看第1页的内容。

tips：成员可以查看和编辑自己没有权限的页面内容（显示被锁的页面），如果改动了其他协作成员编辑的页面内容，也不会被保存的，只需要点击【同步协同数据】或者刷新页面就可以恢复。

6、如何共享脚本编辑权限？

共享脚本编辑权限与分页共享方法相同，分页的脚本是对应有该页面编辑权限的成员才可以去编辑对应页的脚本, 全局脚本则需要分配权限，点击【二维码】—【分页共享】—【编辑分页分享】，选择脚本对应的【共享编辑】将生成的链接发送给成员C就可以了（如图5 ）。同分页共享一样，第一个打开链接的成员，就会绑定该作品的脚本编辑权限，当成员C编辑了脚本并且保存，其他成员点击【同步协同数据】，脚本里就有成员C写的脚本了。

图5 

三、其他常见问题与提示
1、团队多个成员共同编辑同一个作品时，只要进行了保存，点击预览查看的作品内容总是最新的合并的内容。

2、作品的原作者共享的页面编辑权限在未被领取之前，原作者修改的内容将会被保存，如果被其他成员领取后，除了领取的成员，其他成员（包括作品原作者）修改的内容都不会被保存。

3、一个作品的原作者是成员A，那么协作者（成员B或者成员C）无权限修改作品全局的一些属性，即使修改了也会被自动重置并提示，也不会被保存。

4、团队多个成员之前可以相互查看自己没有编辑权限的页面内容。

5、操作过程中遇到提示的含义？
*如图6-1，如果出现类似的提示, 说明你没有该页面的编辑权限（只能查看不能编辑），就算编辑修改后并点击保存，也不会成功，只要刷新或点击【同步协同数据】内容就会被重置。

图6-1
 
*如图6-2，如果出现类似提示, 说明你可能正在试图修改作品的全局设置，作品的协作者是没有修改权限的。如有必要修改该属性，你可以联系该作品的原作者。

图6-2
 
*如图6-3，如果出现类似提示, 说明该页面的编辑权限已经被其他协作成员领取，你没有编辑权限，即使编辑了内容也不会被保存，只要点击“共享协同数据”或刷新，你编辑的该页内容会被清除或者被拥有该页面编辑权限的协作者编辑的内容覆盖。

图6-3
 
也有可能是因为作品的原作者共享了某一页编辑权限给其他成员，但是其他成员还未领取该页编辑权限时，原作者对其进行了编辑，内容是可以被保存下来的；当协作成员领取了该页的编辑权限之后，原作者再进行编辑就出现此提示，此时你已经没有了编辑权限，即使编辑了内容点击保存，内容也不会真正的保存下来。点击“共享协同数据”或刷新，你编辑的该页内容会被清除或者被拥有该页面编辑权限的协作者编辑的内容覆盖。