点击观看案例>>

今天为大家分享一个木疙瘩H5品牌宣传案例，作者是平台设计师wxf01b798c93，该作品包含关键帧动画等功能。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
案例名称：牛逼图
作者：wxf01b798c93      进入作者空间>>
案例分类：品牌宣传
案例地址：http://www.mugeda.com/case_preview/crid/5dccf2f6ecb65e061c606922.html 

点击观看案例>>

今天为大家分享一个木疙瘩H5品牌宣传案例，作者是平台设计师m7200226，该作品包含幻灯片、长图拖动等功能。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
案例名称：口袋有物全球首家体验店落户达州
作者：m7200226      进入作者空间>>
案例分类：品牌宣传
案例地址：http://www.mugeda.com/case_preview/crid/5dce0cc33cb2bc5ad62d19d9.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5产品宣传模板，作者是平台设计师火星时代教育，该作品包含游戏、展示动画等功能，是一只清新文艺风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：【品牌营销】完美日记
作者：火星时代教育      进入作者空间>>
模板分类：产品宣传
模板地址：http://www.mugeda.com/case_preview/id/5dce7bd27d913a350809e993.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5邀请函模板，作者是平台设计师火星时代教育，该作品包含展示动画等功能，是一只卡通手绘风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：圣诞晚会邀请函
作者：火星时代教育      进入作者空间>>
模板分类：邀请函
模板地址：http://www.mugeda.com/case_preview/id/5dce74917d913a215716a7e8.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5节日热点模板，作者是平台设计师火星时代教育，该作品包含展示动画等功能，是一只清新文艺风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：【元旦节】虾米音乐带你发现音乐新世界
作者：火星时代教育      进入作者空间>>
模板分类：节日热点
模板地址：http://www.mugeda.com/case_preview/id/5dce74457d913a7b206afd20.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5节日热点模板，作者是平台设计师火星时代教育，该作品包含测试、游戏等功能，是一只清新文艺风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：和圣诞老人一起去旅行
作者：火星时代教育      进入作者空间>>
模板分类：节日热点
模板地址：http://www.mugeda.com/case_preview/id/5dce74167d913a64b30c2df6.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5节日热点模板，作者是平台设计师mutemplate，该作品包含全景VR、语音、图集等功能，是一只党建政务风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：VR视频文字图片视频音频多种合集新闻报道
作者：mutemplate      进入作者空间>>
模板分类：节日热点
模板地址：http://www.mugeda.com/case_preview/id/5dce73517d913a350809e94d.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5邀请函模板，作者是平台设计师qq3a937a8af6，该作品包含微信互动、展示动画等功能，是一只清新文艺风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：蓝紫色通用邀请函
作者：qq3a937a8af6      进入作者空间>>
模板分类：邀请函
模板地址：http://www.mugeda.com/case_preview/id/5dce1bd3ecb65e6b99490658.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5邀请函模板，作者是平台设计师qq3a937a8af6，该作品包含测试、游戏等功能，是一只中国风风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：新春抢红包游戏
作者：qq3a937a8af6      进入作者空间>>
模板分类：邀请函
模板地址：http://www.mugeda.com/case_preview/id/5dce1bffecb65e3fae524a40.html 

点击观看模板>>

今天为大家分享一个木疙瘩H5邀请函模板，作者是平台设计师mutemplate，该作品包含展示动画等功能，是一只清新文艺风格的H5作品。进入作者空间可以观看更多作者发表的精彩H5案例以及H5模板。
模板名称：【圣诞节】经典圣诞节贺卡
作者：王非      进入作者空间>>
模板分类：邀请函
模板地址：http://www.mugeda.com/case_preview/id/5dce1c30ecb65e70737889df.html 

木疙瘩每日分享吧
2019年11月14日 星期四
——————————————

【教程推荐】
15分钟教你吃透排行榜功能
全屏播放地址
http://edu.mugeda.com/lesson.p ... 78736

【每日一答】
Q：怎么制作0到100的动画？
A：给一个物体做透明度关键帧动画，文本关联透明度即可。

——————————————


本期编辑：木盆


 

木疙瘩每日分享吧
2019年11月13日 星期三
——————————————

【元件动画源文件共享】
红金色党政开场动画
预览地址：http://rrd.me/eWNDk

打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/a09d95c7

【每日一答】
Q：加粗和非加粗的字体怎么放在一个文本框里？
A：在左侧工具栏中选择文本段落工具，框选需要加粗的文字，点击文本段落工具上方工具栏中的加粗按钮即可。

——————————————

本期编辑：木盆


 

 <<<马上预约直播>>>

 @媒体人，又将迎来2020年两会报道的报道任务了，你准备好了吗？

针对2020年两会，木疙瘩特别推出“两会系列培训”，将举办5次精彩的线上分享会。
从H5热门案例、H5应用技巧、融媒新闻报道形式和应用趋势等方向逐一突破，
让媒体人能快速制作优质的融媒体新闻物料，抢占两会报道先机。
 
首次培训将于2019年11月14日 19:30开始，力邀木疙瘩高级培训师木箱子直播哦！
 
期数：第一期
课程：如何让长图报道更具冲击力
讲师：木箱子
时间：2019年11月14日 19:30
 
<<<马上预约直播>>>
 
下面是系列培训课程表：



 
不可否认，H5是媒体融合的重要展现形式，已经成为近年来两会报道的必备工具。H5融媒报道该如何创新？在众多两会报道中如何脱颖而出？在短暂的制作周期内，如何保证品质又提高效率？早已成为所有媒体人共同的困扰。

偷偷跟你讲，木疙瘩将推出“两会加油包”啦！为所有从事两会报道的媒体人提供“超贴心”的服务：

• 专属答疑群（仅限媒体朋友加入）
• 两会系列模板（60%以上付费会员免费用）
• 两会系列培训

 
解决了两会H5制作过程的各种难题，有木疙瘩平台和“两会加油包”的双重加持，两会H5制作效率唰唰提升！
 
咨询QQ：3024076303

2019年11月12日 星期二
——————————————
会员免费使用

复古风图文档案
http://rrd.me/eWrdT

历史信封档案简报
http://rrd.me/eWre9

音频在线报道
http://rrd.me/eWrfs 

【每日一答】
Q：怎么获取方形的微信头像？
A：首先在舞台添加一个方形图片，并且命好名字，在图片上添加显示微信头像行为，触发条件为出现，目标元素设置为刚命名好的图片即可。

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


 

木疙瘩#每日分享吧#2019-11-11
2019年11月11日 星期一
——————————————
H5热力榜

人民日报客户端 - 进博会神秘礼盒 趣味互动
http://rrd.me/eVxAL

中卫新闻传媒集团 - 创意交互短视频 传媒精英
http://rrd.me/eVxF4

龙湖地产 - 你永远不知道成都人在房间里做什么？
http://rrd.me/eVxKz

【每日一答】
Q：微信（浏览器）标题是怎么添加的？
A：点击舞台空白处，在右侧属性栏中修改内容标题即可

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


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
木疙瘩可以方便的插入一个视频，并控制视频的播放、暂停、停止等。
现在，木疙瘩可以更自由的控制视频播放，可以跳转到视频的某个时间点并播放哦！

下面来看具体操作方法吧！
 
第一步给放置在舞台的视频命名


 
第二步设置视频的跳转行为：1.打开行为弹窗——2.媒体播放控制——3.控制视频——4.编辑行为——5.选择视频——设置控制方式为：跳转并播放或跳转并暂停——设置跳转位置（时间单位为秒）——6.确定。这样我们就设置完成了。


 
音频的跳转同理，如下图


 
学会了吗？这功能是不是很实用？赶快尝试吧！

>>>进入官方页面>>>

一、个人/企业参赛 
面向木疙瘩平台所有用户，任选模板主题，按照模板要求制作模板，不限参赛作品数量；

 
二、院校、培训机构团体报名参赛
请加微信“feiguo1278”获取团体参赛入口。

木疙瘩每日分享吧
2019年11月07日 星期四
——————————————

【教程推荐】
10分钟教你把H5作品变现
http://edu.mugeda.com/lesson.p ... 2f5dc

【每日一答】
Q：怎么在长图作品中，拖动到特定位置就播放音乐？
A：首先在舞台上做长图的关键帧动画，在想要出现（帧）的位置添加个物体，物体添加“播放声音”的行为，触发条件“出现”。

——————————————


本期编辑：木盆


 

木疙瘩每日分享吧
2019年11月6日 星期三
——————————————

【元件动画源文件共享】
炫酷大气开场动画
预览地址：http://rrd.me/eSMCS

打开共享源文件，将作品另存到自己账号中
共享源文件：
https://www.mugeda.com/animation/edit/342b7912

【每日一答】
Q：怎么让每个页面播放不同的音乐?
A：在每页第一帧添加声音元件，并添加控制声音行为，控制方式为播放，触发行为是出现即可。

——————————————

本期编辑：木盆
 


 

木疙瘩每日分享吧
2019年11月05日 星期二
——————————————
会员模板推荐

两会创意报道-射泡泡游戏型模版
热力值 ★★★★★
http://rrd.me/eS85C

拼出两会关键词-拼字游戏型模版
热力值 ★★★★★
http://rrd.me/eS89h

两会民生话题报道-两会送红包
热力值 ★★★★
http://rrd.me/eS87C

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

【每日一答】
Q：为什么图片上传到木疙瘩上就不清楚？
A：在设计过程中，原始设计尺寸是舞台的二倍。默认舞台尺寸为320*520px，设计尺寸为640*1040px。
 


 

测试地址：https://7.u.mgd5.com/c/_-my/cfrk/index.html
 
可以打开这个连接测试一下，看可不可行。
 
这只是个临时过渡的方法。


 
教程地址：https://7.u.mgd5.com/c/_-my/lgz-/index.html
 

木疙瘩#每日分享吧#2019-11-04
2019年11月04日 星期一
——————————————
H5热力榜

华为-从1G落后到5G引领，致敬砥砺前行的通信人！
http://rrd.me/eRUHh 

共青团中央“创青春”- 第十届中国青年创业奖
http://rrd.me/eRUHR 

苏家屯区-我是文明城市的代言人
http://rrd.me/eRUJD 
 
长春日报社全媒体中心-长春•醉秋
http://rrd.me/eRUKj 

“欧拉”一下， 出去“鬼”混
http://rrd.me/eRUK7 


【每日一答】
Q：怎么修改图片的中心点？
A：鼠标右键成组，按住CTRL进行移动即可。

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


 

木疙瘩每日分享吧
2019年10月31日 星期五
——————————————

【教程推荐】
3分钟吃透页的行为
http://edu.mugeda.com/lesson.p ... 48f8a


【每日一答】
Q：怎么把logod的位置始终保持在右上角
A：单击图片，在右侧属性栏中，开启锁定边距，并选择右上角即可。
——————————————
本期编辑：木盆


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
 
木疙瘩的虚拟现实VR功能大家都用过，添加一张全景图片即可实现VR全景效果。
现在，木疙瘩对全景视频开放支持了！
这都得利于广大木友的热情投票参与，感谢木友们积极提出宝贵的新功能建议，让木疙瘩不断地加入用户最需要的新功能，笔芯～
 
下面来看在虚拟现实控件中，如何使用并控制全景视频吧！

第一步：在工具栏选择全景组件并添加至舞台



第二步：添加视频长宽尺寸比例符合2:1或6:1的全景视频



系统提示：全景视频场景，由于不同的浏览器策略不同，在用户和内容交互之前，不同浏览器的策略可能不允许视频自动播放。因此，如果你想要视频自动播放，需要在播放视频之前，在内容流程中引导用户进行“点击”等操作后在播放全景视频。
 

 
第三步：引导用户进行“点击”等操作我们可以在全景视频页面的前面一页增加一个引导页，通过用户点击跳转至全景页面


 
注：上面只是一个例子，你也可以通过增加添加其他帧或页面的交互行为来引导用户跳转至全景视频的播放。
 
第四步：添加完成，我们可以像设置全景图片一样给全景视频设置一些交互热点及其他配置


 
马上去试试吧！
 

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

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

【每日一答】
Q：在擦玻璃完成后，返回时怎么让擦玻璃恢复原始状态？
A：在本页第一帧上添加一个物体，在物体上添加行为：属性控制>恢复擦玻璃初始状态，触发条件为出现。
——————————————
本期编辑：木盆
 


 

木疙瘩每日分享吧
2019年10月29日 星期二
——————————————
会员模板推荐

图文滑动卡片-城市名片
热力值 ★★★★★
http://rrd.me/eNzWK 

我的新闻工作日记
热力值 ★★★★★
http://rrd.me/eNzX4 

简洁新闻记事类视频图文
热力值 ★★★☆
http://rrd.me/eNzYh

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

【每日一答】
Q：音乐进度条怎么制作？
A：首先把进度条的动画制作成元件，其次将声音添加到舞台，
在右侧属性栏中，把专有属性关联启用，关联对象选择元件名，
关联属性选择“（声音）播放百分比（0~100）”即可。



 

木疙瘩每日分享吧
2019年10月28日 星期一
——————————————
H5热力榜
 
人民日报-民族Style
热力值 ★★★★★
http://rrd.me/eMUMv 

长城新媒体-礼赞中国 看燕赵大地巨变
热力值 ★★★★
http://rrd.me/eMVp6 

湖北日报-迎军运，换新装
热力值 ★★★☆
http://rrd.me/eMVtM 

【每日一答】
Q：木疙瘩时间轴上的“洋葱皮”是做什么？有什么用呢？
A：刻帧用的，常用在调节动画的细节，打开洋葱皮后，会同时展示左右几帧画面。



 

碰撞检测就是检测两个物体边缘是不是有重叠，此例以方形为例，圆形物体暂时不考虑。
 
假设舞台上有aa和bb两个物体，以下四种情况需要同时满足，才能判断重叠。
 
1. aa左值 加 aa的宽 大于 bb的左值


 
{{aa.left}}+{{aa.width}}>{{bb.left}}
 
2. bb左值 加 bb的宽 大于 aa的左值


 
{{bb.left}}+{{bb.width}}>{{aa.left}} 
 
3. aa的上值 加 aa的高 大于 bb的上值


 
{{aa.top}}+{{aa.height}}>{{bb.top}}
 
4. bb的上值 加 bb的高 大于 aa 的上值


 
{{bb.top}}+{{bb.height}} > {{aa.top}}
 
四个行为同时成立就是
 
{{aa.left}}+{{aa.width}}>{{bb.left}} && {{bb.left}}+{{bb.width}}>{{aa.left}} && {{aa.top}}+{{aa.height}}>{{bb.top}} && {{bb.top}}+{{bb.height}} > {{aa.top}}
 
 
可以打开作品看效果或者另存
 
https://www.mugeda.com/animation/edit/9d204fda

安卓系统实测可以，ios系统未测试。
查看地址




源码地址：https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口，把你要禁止长按保存的图片命名，微信号替换为你命名的图片名字。
 

mugeda.addEventListener("renderready", function(){
     var scene = mugeda.scene;

     scene.getObjectByName('微信号').dom.style.cssText += "pointer-events:none";

});
 

2019年10月1日，是新中国成立70周年的伟大时刻。随着“我和我的祖国一刻也不能分割......”的优美而又振奋的旋律在耳边萦绕，我们感慨：祖国给了我们无数的力量和感动！中国，是我们听见了就会肃然起敬的字眼。
值此之际，各大媒体精心策划了众多H5交互融媒新闻报道作品，让我们在移动端更加生动、立体、直观、有趣地见证到新中国70周年的成长与富强。
 
不得不说各大媒体紧紧抓住了融媒内容生产的特点。即H5支持融合文字、图片、视频、动画、交互等多种内容形式，好上手、成本低、传播迅速的优势，大批量上线了不同类型的H5，不管是质还是量都超乎想象。

为此，小编为大家整理了新中国70周年的H5新闻报道案例合辑，让我们来看看各大媒体为新中国成立70周年献礼的优秀H5作品有哪些呢？

一、AI与H5技术的深度融合
越来越多的H5作品与AI技术相结合，比如语音识别、图像识别、文字识别等，提升用户体验感。以下H5作品都以换脸为主要交互方式，实现人脸与56个民族服饰、以及祖国大好河山的融合，能够将用户上传的照片与特定的形象进行脸部融合，生成的图片效果既有用户的五官特点，又自带美颜滤镜效果，同时抓住用户认同感以及炫耀心理，让作品迅速传播。


作品：爱国Style
出品：人民日报客户端
http://ih5.peopleapp.com/c/rcha/2z4y/index.html



作品：国庆节到了，你出门旅游了吗？
出品：人民日报中央厨房
https://8.u.mgd5.com/c/r3gl/ss22/index.html 


作品：光荣的红领巾
出品：未来网
https://f.u.mgd5.com/c/ehgg/tuaw/index.html


二、各种创意H5作品层出不穷
从用户心理角度出发，通过让人眼前一亮的创意、出乎意料的结果，或时事新闻事件，从好奇心理、挑战心理甚至指定用户感兴趣的点出发，每个场景或交互点都要精心策划、提供不同的信息，不断吸引用户看完，在H5结束界面引出自己的品牌类H5。

1、创意交互
作品：识得呢10个字，你就知道广东有几劲
出品：南方财经全媒体集团
https://2.u.mgd5.com/c/simn/0-o5/index.html



2、交互视频
作品：百米长卷绘重庆
出品：重庆日报
https://3.u.mgd5.com/c/tcut/xbpb/index.html



3、密室探索
作品：穿过时光机器  搜寻你的独家记忆
出品：新湖南
http://h5.hunantoday.cn/c/uj_g/aekw/index.html



4、答题测试
手绘答题测试+舞台截图
作品：国庆大家都在干这事，你呢？
出品：湖北日报
https://b.u.mgd5.com/c/0pfb/u4wx/index.html



5、游戏类
选场景，生成图片+舞台截图
作品：国庆节，我为祖国送祝福
出品：上游新闻
http://3.u.mgd5.com/c/m-oa/cuy3/index.html
 


三、交互长页面动画应用广泛
本次H5新闻报道的长图类H5形式占多半，一个是这种技术实现起来简单、易出效果，交互体验好，只要故事叙述得清晰、画面色调把握的好极容易产出优秀作品。
另一个是用长卷表现手法做叙述类H5，让新闻故事的描述更具有历史感。正好与70周年的发展和变化相契合。

作品：H5|致敬共和国英雄！习近平铸就“中国信仰”
出品：央视新闻
https://b.u.mgd5.com/c/s_uz/aavv/index.html



作品：央企与共和国共成长
出品：国务院国资委&中国日报网
https://4.u.mgd5.com/c/iur3/9aai/index.html



作品：70年，一户人家的光影故事
出品：求是网
http://h5.qstheory.cn/c/e0df/bwn9/index.html



作品： “数看”福建70年之变
出品：人民网福建频道
https://8.u.mgd5.com/c/zrz9/5h8m/index.html



作品：我在幸福长街70号等你
出品：红网
https://h5.rednet.cn/c/kwbk/dmfw/index.html






四、专题类（用H5作为专题导航，内嵌各种形式的70周年报道）
南方财经全媒体集团用H5替代传统网页作为一个新闻专题的导航页面，画面和动态效果更加美观、交互和表现形式更加多样，并具有实时更新的优势。另外可实时获取H5导航的浏览数据、获取用户提交数据并用木疙瘩内容分析查看用户的高级浏览行为数据，从而更好的监控作品传播效果，通过行为数据更科学地分析用户关心浏览的“点”从而改进H5新闻的作品及传播效果。

作品：表白祖国！一起感受70年的沧桑巨变—21世纪经济报道倾情致敬
出品：南方财经全媒体集团
https://2.u.mgd5.com/c/simn/vltu/index.html



山东广播电视台融媒体资讯中心、长城新媒体集团等媒体抓住H5的适配性高、应用面广、传播速度快等特点，已将H5新闻报道归为日常的报道形式，即专题系列化报道。再加上全新的创意以及嫁接新闻报道的特点，极大的提高了新闻舆论的传播和影响力。针对民生热点以及社会焦点，让原有传统纸媒的信息传播形式通过移动端“飞入寻常百姓家”。

作品：闪电视界｜宁津：壮丽70年 丰收颂祖国
出品：闪电视界
http://3.u.h5mc.com/c/wtmp/zpxe/index.html


作品：祖国，我想对你说
出品：闪电新闻
http://h5.iqilu.com/c/ofxv/cgvi/index.html


作品：骆宗明：388本家庭账簿忆变迁
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html


作品：闫青海：“开游船”的老党员
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html



作品：王景堂：七旬老人手绘“中国梦”
出品：长城新媒体
http://h5.hebei.com.cn/c/5c3d2 ... .html



五、对比类新闻的创新
对比类新闻最常见的是新旧物件对比、事件前后场景对比。这类H5技术实现可以使用木疙瘩的擦玻璃工具，以及坐标关联等功能实现，并将声音、动画、视频等信息载体与对比物体进一步连接，以创新的方式通过现知的内容去了解对比以往的内容，从对比交互的体验入手形成事件对比的H5新闻报道。

作品：老物件VS新玩意，超时空同框 带你穿越70年
出品：上游新闻
https://0.u.mgd5.com/c/d6pq/rhdg/index.html



作品：70年前TA们登上湖北日报创刊号，70年后……
出品：湖北日报
https://a.u.mgd5.com/c/0pfb/4cg0/index.html



那么，大家想策划制作一支经典刷屏级的H5新闻时，除了从用户心理、交互体验出发外，平时还需要多看、多积累一些经典的H5新闻案例来提高自己的H5策划制作水平。为了帮助大家策划出更好的H5新闻作品，小编汇总了各大媒体的H5新闻案例，扫描下方二维码获取：