木疙瘩每日分享吧
2019年9月25日 星期三
——————————————

【元件动画源文件共享】
童話里的世界-棉花糖般的云彩
预览地址：
http://rrd.me/ewWMA
打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/649eb575

【每日一答】
Q：如何压缩作品大小
A：首先导出HTML动画包，将动画包解压后打开image文件夹，进入www.tinypng.com进行压缩，压缩过后利用资源管理器进行替换。

——————————————
本期编辑：木盆

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

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

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

你认真的样子真可爱

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

var scrollTop = 0;



window.addEventListener('focusin', function(){

    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

});



window.addEventListener('focusout', function(){

    window.scrollTo({

        top: scrollTop,

        behavior: "smooth"

    });

});

 
 
把上面的代码加到作品的代码框里，然后保存，发布。
 
效果如图


 
 

开头不知道咋写了，直接上案例吧，传送门：预览链接
编辑地址：https://www.mugeda.com/animation/edit/4e1b70eb
本教程倒计时采用的时时间戳原理，这里不做详细介绍，如需了解时间戳，可自行百度“时间戳” 即可，主要是利用时间戳，计算出目标时间与当前时间相差的秒数（时间差），然后将相差的秒数转换为天、时、分等；（其实就是一个时间坐标参考点）

第一步
在舞台上添加8个文本。分别命名为当前时间戳、目标时间、目标时间戳、时间差、天、时、分、秒

目标时间：直接写你要倒计时到哪一天(格式：年-月-日空格时:分:秒，例如2019-10-01 08:08:08)

然后在舞台上添加一个定时器，设置为毫秒，循环播放，主要是利用定时器不断地变化来对行为进行控制赋值。


 
在定时器上添加行为，执行条件都设置为属性改变，分别为当前时间戳、目标时间戳、时间差、天、时、分、秒等为其赋值
 


 
分别对其赋值为
当前时间戳 
Math.round(new Date().getTime()/1000) 


目标时间戳 
Math.round(new Date("{{目标时间}}")/1000) 


时间差 
{{目标时间戳}}-{{当前时间戳}} 

天 
 Math.floor({{时间差}}/60/60/24) //整数部分代表的是天；

时 
Math.floor({{时间差}}/60/60%24)

分 
Math.floor({{时间差}}/60%60)

秒 
Math.floor({{时间差}}%60)


最近发现了一个宝藏功能，正在慢慢研究，以后分享给大家。
以上倒计时只是其中一种方法，还有其他方法，这里不做过多介绍，有兴趣可以私聊。
 
由于本人较懒，以上教程过于简略，勿喷！
本人不懂代码，教程只针对与无代码基础人士，大神勿喷
 

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

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

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

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

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

对你没有听错免费送！

扫描下方二维码即可参与


 

最近木友们对木疙瘩产品更新需求越来越浓烈，与此同时我们也收到了很多的优秀建议，为了更有计划的优化木疙瘩产品，我们特此举办这次新功能需求征集活动。

希望通过本次活动征集最急需的功能，以最快的速度让大家能够使用到。
 
 
【征集流程】
 
1、征集时间：2019.09.23—29
在本帖评论区留言即可

2、投票时间：2019.10.08—11
我们会根据功能热度、产品发展策略、技术开发周期等几个方面综合考虑，最终选出3-4个候选功能，进行大众投票，票数最高者直接进入开发阶段。

凡是提出的建议进入候选环节者，即可赠送1个月的会员服务哦！

3、新功能上线
预计在10月底



常见问题： 
Q：我有超级多的想法，我应该怎么说的更清楚啊？
A：首先叙述清楚自己的需求点
例如：我想要XXX功能，会实现XXX效果
如果木疙瘩XXX功能，能这样这样修改就会更好
 
Q：如果我在微信公众号留言了，还用去论坛留言吗？
A：不用同时留言的，我们会在两个渠道同时进行征集。

Q：如果我的问题被其他人说过，我可以再说一遍吗？
A：可以的，但是给相同的问题点赞会增加该问题的权重。
 
还等什么？来畅所欲言！！

木疙瘩每日分享吧
2019年9月23日 星期一
——————————————

【案例分享】 
我来比划你来猜
http://rrd.me/evjv5
比心祖国
http://rrd.me/evjxF
这份邀请有点甜
http://rrd.me/evj2u

【每日一答】
Q：怎么关闭预置动画的循环
A：在右侧的属性栏里，把预置动画的循环播放关闭即可

——————————————
本期编辑：木盆

木疙瘩每日分享吧
2019年9月20日 星期五
——————————————

【教程推荐】
3分钟学会舞台关联：
http://m.mugeda.com/lesson/5c2 ... 2ffdc

【每日一答】
Q：文本框里的文字显示不完整怎么办？
A：选中文本框，在舞台右侧属性栏中，把文字超出时设置为可见即可。


——————————————
本期编辑：木盆

木疙瘩每日分享吧
2019年9月19日 星期四
——————————————
【模版推荐】
拼字打字机-获得你的关键词
http://rrd.me/etb2J
锦绣中华盛世华诞
http://rrd.me/etb5R
壮丽70年奋斗新时代
http://rrd.me/etb6B

打开木疙瘩模版中心,在顶部搜索栏中输入模版名称即可

【每日一答】
Q：如何做长图移动到某个位置触发特殊效果，如声音的播放。
A：首先在舞台上做长图的关键帧动画，在想要出现（帧）的位置添加个物体，物体添加行为“播放声音”的行为，触发条件“出现”

预览链接：http://rrd.me/etbyz
源文件：https://www.mugeda.com/animation/edit/10009b2d
——————————————
本期编辑：木盆

木疙瘩每日分享吧
2019年9月18日 星期三
——————————————

【元件动画源文件共享】
大气科技感流星雨
预览地址：
http://rrd.me/es2u8
打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/fe5f7113

【每日一答】
Q：如何点击按钮播放视频
A：在按钮上添加播放视频的行为，触发条件为点击即可


——————————————
本期编辑：木盆