你的位置：
> 淘宝造物节、腾讯故宫H5如何欺骗你的眼睛？
发表于( 10:36) 本文标签：
浏览量：81次
&&&&值班编辑QQ：
6月是国内现象级H5爆发的时节，也是广告人利用智慧“造假”以实现创意的高峰期，HTML5相关行业的都在转发淘宝造物节的伪VR场景，“外行”的在分享腾讯Next Idea的伪网页动画，最多的疑问就是“到底是怎么做的？！”
很多人不知道，造物节其实出了两个H5，除了VR全景是“造”出来的，还有一个三屏互动视频的案例也耍了点障眼法；至于腾讯的“穿越故宫来看你”，策划创意值得借鉴，技术门槛却是最低的，更暗藏着微信不得不提的潜在“行规”。
为什么它们能成功欺骗我们的眼睛？
怎么用做出这么酷炫的H5？
它们又标志着什么发展趋势？
1、“假装它是3D”
▲《ZAO》，制作团队：VML
淘宝这个H5在业内太火了，通过全景图、分层运动的方式，在网页中构造出动漫VR场景，基本上看过都赞不绝口。因为它在朋友圈的火爆，顺带还宣传了背景音乐――华晨宇的新歌《造物者》。然而，它没有真的构建出3D场景，却带来一场近似的视觉盛宴，究竟耍了什么花招？
[创作分析]
（1）360度全景图的搭建
▲淘宝H5的全景图背景
淘宝H5分为背景层、前景层、导航菜单三个部分，背景的设计便是实现360度全景的关键。上面是导出淘宝H5的原始素材后进行拼接，还原出来的背景――相信你一眼就能看出一张背景居然被切成了这么多块！
▲淘宝H5的动态效果
是的，而且背景层共有两层：靠后的渐变图片基本固定，靠前的是20张带有透明像素的切片，宽度均为129像素。
▲模拟H5的滑动变形过程
因为左右边缘的画面连贯，这20张切片可以通过旋转拼接的方式围成一个环形；当我们在手机上上下、左右触摸屏幕时，就是看着这20张切片不停地轮播、变形。
（2）前景的分层搭建
▲部分分层素材的分组示例
为了让场景变换效果更真实，制作团队还搭建了多层前景，并通过不同层素材的人物大小比例、物体运动速度的区分，让人眼感受出不同层的远近。
不过对于大部分门外汉来说，就算懂得怎么用Photoshop切图，没能耐也没工夫堆砌出这么复杂的玩意儿，更拿不出几十万请VML制作，所以还是乖乖用点旁门左道吧！
[VR场景嵌入方法]
既然淘宝H5虚构出的3D场景本质上就是全景图，那么我们只需要找一个全景场景制作平台就行，比如720云。使用过程非常简单，上传一张全景图就能自动生成全景场景――以下是我用淘宝造物节全景图直接生成的效果：
▲全景图导入720云的效果
把内容嵌入H5也非常简单，使用iH5的“网页”工具，添加新的网页并设置页面大小，在资源位置填写全景场景的网页地址就行。
比如下面万达的VR视频、天津美院的VR场景，都是在iH5嵌入第三方全景制作平台网页，自己设计加载页、导航菜单等完成的。
▲嵌入iH5的万达VR视频
▲嵌入iH5的天津美院VR场景
2、“假装它是视频”
▲《淘宝造物节》，制作团队：VML
“60秒内邀2位好友扫码，用三分之一价格，享百分百造物节。”
淘宝三屏互动H5的创意，更偏向于活动策划，限时让好友完成扫码，三部手机就会同时播放三段内容不同、但非常相似的“视频”。跨屏互动实现并不复杂，熟悉iH5的人，可能还看过去年我们用八个屏幕召唤“神龙”的案例。
▲淘宝H5的三个伪视频
但这里需要注意的是，淘宝这个H5比较有心机，它看起来播放的是视频（尤其还用了具有欺骗性的“播放”LOGO），其实三段所谓的视频都是图片！
▲造物节H5的资源加载界面
上面是这个H5打开时的资源情况，你会看到一整片都是JPG（静态图片）！每张图片控制在10多K、20多K，让它们一张一张连续播放，再加一段音频广告，就以假乱真了。
▲造物节H5同时播放的画面
虽然知道很多创意玩的就是套路，但这个套路实在太深，过程如下：
（1）制作一段垂直视频；
（2）把视频输出为图片序列帧；
（3）把图片序列导入H5页面；
（4）点击播放按钮，同时播放图片和音频。
[跨屏互动制作方法]
用iH5实现跨屏互动很简单，对原理感兴趣的话可以看看下面这个不到5分钟的视频：具体到淘宝造物节这个H5，也不难：
（1）在“舞台”下面放三个屏幕；
（2）把1号作为扫码的主屏幕，在1号页面放置2号屏幕的二维码；
（3）在2号页面放置3号屏幕的二维码；
（4）3号屏幕页面显示时，触发三个屏幕中图片、音频的播放。
[图片轮播制作方法]
▲12张图片能播放1.2秒的视频
如果你看了上一期《10000种H5特效完全制作攻略！》，还会知道宝马100周年也玩过用图片伪造视频这招儿，使用iH5制作只需两步：
（1）在画布下加幻灯片，导入英文命名的图片序列帧的压缩包（zip/gif）；
（2）设置是否自动播放、时间间隔、图片的预加载比例。
▲12张图片能播放1.2秒的视频
▲图片轮播的最终效果
即便我们没能自己拍摄或制作一个视频，照样可以用视频软件把一段电影剪切成垂直视频；然后用After Effects把视频导出为静态图片序列和独立的音频；最后把图片序列打包压缩，并和音乐一起导入iH5，制作出独一无二的伪视频。
3、“假装它不是视频”
▲《Next Idea x 故宫》，制作团队：Treedom
最后压轴的腾讯，刚好做了一件和上面完全相反的事情：人家要把H5伪装成一个视频，他们却是硬要把视频伪装成一个H5！
▲没有播放进度条的H5界面
没错，上面这段在安卓设备里播放也不会出现控制条的动画，是一段视频。你以为控制皇帝的旋转、跳跃，花式自拍背后用了多复杂的技术，其实你只是看了一段垂直视频。
▲《WOW！好久不见》，同样采用垂直视频
这不是腾讯第一次这么玩了，魔兽电影上映的时候，他们推出的H5那么燃，其实也是视频。我们还做过一期技术揭秘《腾讯魔兽的H5燃爆了！教你15分钟做出一模一样的》，做了个高仿版本的H5，效果对比如下：
▲上面是iH5仿制的效果，下面是原开发案例
网页视频在安卓设备上播放，就会默认冒出播放器，控制条都出来了肯定就知道是视频了；但一旦强制取消播放器，可能导致各种播放问题。那为什么故宫、魔兽两个H5不会？唉，原因很简单，微信是腾讯自己的，他们在浏览器里做了一些配置，对旗下出品的H5有所“优待”，才能确保视频的顺利“乔装”。
所以同样的故宫视频，我们嵌入就可能变成这样――
▲难以忽视的播放器控制条
天无绝人之路，还好我们还能“造”视频。无论是一开头的VR、还是后面奔驰的宝马，其实都巧妙利用了静态的叠加，以实现动态的效果。
如果你对怎么学习大品牌用H5进行品牌营销、怎么在降低互联网广告的运营成本的前提下提高品牌知名度、怎么应用iH5工具快捷高效实现各类H5创意等感兴趣，可以报名坐标北京的官方H5超能训练营，参加短期速成培训。
>>>报名链接
推荐内容&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
亚马逊设想巨大的无人机塔 加速快递包裹运输
大疆和黑客陷入＂军备战＂，真的是为了体验？
诈尸更新 Google Glass三年后突增一个新功能
中国科学院大学“人工智能技术学院”获批成立
无人机成黑客新焦点，连美军开始担心自己的系统
诺基亚智能手表有望9月正式发布 售价曝光
7月15日下午，由科技主办，媒体智能、媒体家居承办的2017媒体未来科技峰会之AI+生活专场在北京昆泰酒店举办。 Fusion Fund、ivvi手机、SpeakIn、老板电器、优必选机器人、乐视致新、洛可可设计集团等特邀嘉宾，以云计算、大数据、物联网为基点、畅谈未来智能
视觉中国 本报记者 张佳星 有人通过基因改造让蜻蜓变成了活体无人机！给蜻蜓背上微导航系统，通过基因改造使蜻蜓的神经细胞和翅膀协同作用，对光脉冲做出反应，让它能够被操控。 这个模糊了生命与非生命边界的研究，7月13日刊载于本报共享科学版面上。看似聪
张智伟 无人机将会发送识别信号，确保空管机构知道是谁在飞。 经常被用在户外拍风景的无人机，今后在美国也不能随便飞了。 美国联邦航空局（FAA）上周跟74家公司和公共安全机构开了会，打算推出一个针对无人机的远程识别系统。 这套系统更多是出于公共安全的
众所周知的是：聊天机器人有着巨大的潜力。有了机器人，一些品牌可以在不牺牲用户体验的情况下，与数百万个粉丝同时进行一对一交流。但并不是所有的聊天机器人都是一样的，并不是所有的聊天机器人的设计都是出于同样的目的。 如今，聊天机器人有两个主要类别
据美国媒体6月28日报道，高通公司当天发布了一款新型指纹识别传感器，该传感器应用超声波技术，可以穿透水、玻璃，甚至金属来读取指纹。 高通表示，新的指纹识别传感器可以穿透OLED屏幕1200微米，可穿透玻璃800微米或铝合金650微米来获取指纹，而上一代的传
过去六个星期时间里，全球已经遭受两次有关勒索的恶意软件的大型攻击，这些恶意软件会锁住储存在电脑上的照片和其他文件，然后要求支付赎金。 显而易见，全球需要更好的防御系统。幸运的是已经开始出现这样的防御系统了，尽管还刚起步，发展过程仍较混杂。当
据新加坡《联合早报》6月22日报道，随着人工智能(AI)的普及，有人担心AI会替代人类工作，失业者将会增多。但人力资源服务巨头Adecco公司的调查显示，日本民间企业88.7%的管理层对AI效果表示期待，认为其有利于缩短劳动时间和提高业务效率等优势。 资料图 该山重水复疑无路，柳暗花明又一宫——NEXT IDEA x故宫项目总结
& & & 听说这个故宫的H5有点儿火，看来该写总结的时候了，恩。小伙伴们都体验过了吗？献上二维码一只，没体验的小伙伴赶快体验一发吧!
& & & &起初集团市场部联系到LAVA，经过初步沟通我们了解NEXT&IDEA&和故宫将展开长期合作，故宫博物院将开放一系列经典IP，与&NEXT&IDEA腾讯创新大赛&的两项赛事&表情设计&和&游戏创意&展开合作。除此之外，我们还将联手故宫，把&腾讯NEXT&IDEA&&故宫&项目的案例成果开发成对全社会开放的系列分享课程，形成再一次更大范围的文化辐射，推动青年人与传统文化的深度交流。目前的需求是即将有一场发布会，希望能通过一个创意素材作为切入点引起当下年轻朋友的关注，吸引更多有创意想法的人才加入到这次活动中来，从故宫的角度也希望能更开放的让年轻人了解故宫的文化、故事。两个强大IP的碰撞，激情四射，有很多可以挖掘、发挥的点。
& & & 故宫是一个世界级的超级IP，这几年的变化很大，周边创意产品，借助移动互联网，故宫已经迅速地吸引了新一代的年轻粉丝。这次与NEXTIDAE的合作还能碰出怎样的火花呢？回到项目中来看，&故宫&给我们的第一映像大多是一座大宫殿，一个文化宝藏，庄严绚丽，气质高雅，这似乎与平常的我们有些些距离感。这一印象与我们NEXTIDAE一直以来倡导创意、无边界&&的理念，有些不同！所以整个项目我们需要解决的问题就是这个&距离感&，甚至是让故宫变得好像你身边的某个朋友一样，有些搞笑、欠扁，又难以割舍！爱不释手！这个差距似乎也是创意的一个突破口，是nextidea与故宫碰撞出火花的一个点。
& & & 没错，概念就是这么滴严肃，但是我们的表现手法可以千奇百遍！于是乎打开脑门子放脑子，当下的故宫应该是怎么样的呢！
&嘿！那个故宫小伙子，注意看镜头&（想创意的时候没有时间想那么好的标题，随便YY）
& & & &从某种情况来说，故宫不是静止的，他是有生命的，他在不同的时代下扮演着不同角色，在不同人心中扮演着不同角色。像是整个历史的主角笼罩着主角光环，屹立不倒，又像是配角，在我们的故事中充当着最伟岸的背景&&其实故宫这个人的生活琐事一直都在我们周围，当下他又扮演一个怎么样的角色呢？
& & & 说要把故宫拟人化，应该不会是想要这样吧？
& & &当然不是，故宫这么强大的IP，有茫茫多的元素可以应用，应该不需要局限在故宫这个&宫&上，可以聚焦在故宫这个宫里那些人与事身上，是他们让&故宫&有了个性。
A、初期想法：
& & & &1.用历史里和当下不同的信息载体，来承载这个故事，例如：以前的壁、书、画、和现在手机电脑里的各个平台，以及VR&&一切你可以想到的）
2.借助一些大家熟悉的宫廷故事，是方案变得有趣，例如，步步惊心，还珠格格&&
B、方案优化：
NEXTIDEA与故宫的碰撞，有哪些点可以碰撞呢？如何碰撞？先寻找一些代表性元素。
传统的：大家关注故宫点可能都不一样，有的人觉得故宫的历史书，有的人喜欢故宫里的人物故事，有的人喜欢故宫的古董字画&&都是一些可以采用的元素。
现代的：找一些最近大家关注的点像高科技VR，与传统有强烈的反差感。还有当下大家的一些行为习惯,想朋友圈自拍点赞，人人都是低头族。并且结合融入我们业务，和我们这次活动的内容。
& & & 然后我们如何将传统与现代结合起来，让他们碰撞出强烈的火花。想要获得大家的亲睐，还是要从大家的喜好入手。
& & & 有很多网民，将传统艺术作品进行二次创作。
& & & 这种戏剧感，似乎是用户care的某个点。这样新与旧的碰撞，撞出的火花，产生的效果，正是我们这次NEXTIDEA与故宫合作想要表达的那个点。
& & & （初步的一些方向性想法不要太care历史细节）
& & & &对于初步的创意提案，我们与集团市场部的同学达成共识，在多个方案中这一方案比较成熟，与这次NEXT&IDEA&x故宫要表达的一些概念比较准确，方案比较成熟，可优化深入。
& & & &方案成型后，内部多媒体团队正处于需求爆发期，我们联络到合作伙伴青木团队，来一起完成最后的落地，虽只用了4周时间，但过程的不断尝试，大家都非常投入期间。
大致制作过程
第一周：落地创意草图，完善故事细节，并结合此次合作的公司内业务。
将古代场景和现代可以结合，古代人物在干我们都在干的事，用不不同信息载体来联通画面，这个方案比最初的想法比较复合，新旧元素相互融入，相互碰撞的比较到位。
第二周：设计落地。整体的风格是在已有的素材上，进行二次设计。具体到画面细节的调整，一些脸部魔性表情，并且统一这些古代作品的色调。
第三周：动画节奏的把控。除了整体的控制，还有很多细节上处理。其中最重要的一块儿是皇帝，皇帝的动作、面部表情，需要配合节奏，进行了多次调整，让皇帝更生动。
第四周：优化音乐，配合画面。音乐进行多次优化，最终效果理想。并且调整画面节奏配上音乐，把整体氛围烘托出来。不得不说音乐的创作为H5加了很多分。
& & & 截至7月7日，总访问量已突破300W，点击报名转化率18.9%，平均播放时长：57秒
& & & &未来什么样的内容才可以脱颖而出？结合更多方式打破用户的固定思维，超出用户预期才会带来主动传播，当然这一切不能偏离产品本身的传播核心及目标。
A：设计稿去哪儿了？
TG：怕文章太长观众老爷们又不想看了，扫下二维码自己嗨！多亏了他们，故宫今年才能成为“网红”
12月14日，2016 NEXT IDEA腾讯创新大赛颁奖盛典在北京举行，腾讯公司副总裁、腾讯影业首席执行官程武、故宫博物院副院长娄玮、团中央学校部副部长、全国学联副秘书长宋来等出席此次活动。本届大赛得到了团中央学校部的大力支持，进入了上千所高校，收获创意作品近7万件，不仅在数量上相比去年增长20%，更重要的是，今年涌现出了更多被专业评委高度认可的优秀作品，部分年轻选手的作品甚至已被接行业直接采纳，在业界开始崭露头角。
其中携手QQ物联与英特尔共同举办的NEXT IDEA智能硬件大赛的获奖作品“解冻键盘”，由政治青年学院社工专业的四名女生组成的团队为渐冻症患者定制，可以让手指僵硬、无法敲打文字的渐冻人仅需利用简单的位移就能敲打出文字，帮助渐冻人完成与他人交流的梦想。该项目通过NEXT IDEA的平台，得到了腾讯公益、清华同方医疗部、中国渐冻人基金会等组织公司的关注。
专为渐冻人定制的“解冻键盘”
NEXT IDEA腾讯创新大赛，经过五年的探索和实践，已发展成一个涵盖游戏、文学、动漫、影视等共十大文化创意领域的创新人才孵化平台。
腾讯NEXT IDEA项目创立于2012年。腾讯集团副总裁、腾讯影业首席执行官程武在现场发表开场致辞时表示，NEXT IDEA已经走过五年，作为一个关注艺术与技术领域创新的青年人才孵化平台，它的规模和影响力在不断持续发展，项目已经越来越成熟。与其说NEXT IDEA的生命力和精神是腾讯赋予的，不如说这个平台上充满创意的年轻人自己创造的。
腾讯公司副总裁、腾讯影业首席执行官程武
故宫博物院是NEXT IDEA项目今年新的重要战略合作伙伴，双方在7月份于故宫举办的合作新闻发布会得到社会的广泛关注，一支创意H5《穿越故宫来看你》更是成为2016年度现象级刷屏素材。故宫博物院副院长娄玮也出席了当天颁奖典礼。他表示，故宫是传统文化的载体，故宫与腾讯的合作，也正是为了通过“互联网+中华文明”的结合，为年轻人提供一个用创意活化传统文化的舞台。
故宫博物院副院长 娄玮
横跨十大领域，用“技术+艺术”助力青年创新人才孵化
NEXT IDEA腾讯创新大赛，作为一项关注艺术和技术领域的青年创新人才计划，在艺术和技术领域都硕果累累。
在艺术领域，如青年编剧项目，腾讯与北京电影学院、中国艺术研究院展开合作，累计收获超过400部长篇剧本作品。针对这些作品，还将开展剧本行业推介会，由腾讯影业牵头，将优秀剧本推向更多的行业伙伴。而在青年导演项目中，腾讯分别与中国电影导演协会、北京大学生电影节合作，更是收获优秀作品4033部。
在科技领域，NEXTIDEA智能硬件大赛由QQ物联与英特尔联合举办，得到上百所高校的的支持，挖掘出多个如“解冻键盘”、“篮球训练智能手环”、“TREE环保智能台灯”等兼具创意和商业化前景的硬件项目。
“互联网+传统文化”，用青年创意撬动故宫IP宝藏
今年是NEXT IDEA与故宫博物院合作的首年，在此次比赛中，故宫也开放了“韩熙载夜宴图”等一系列经典IP，在年轻人中征集“表情设计”和“游戏创意”。
在表情设计方面，参赛者们以故宫经典IP为素材，结合社交元素，创作出如“皇帝很忙”、“门海”、“Q版韩熙载”等萌趣表情，嗷大喵、酷巴熊等知名表情IP也参与了本次大赛。获奖的优秀作品登录QQ表情平台不到一个月，使用量已接近4000万，受到用户粉丝热烈追捧。
在游戏创意方面，上百支高校游戏团队积极报名，挖掘创新玩法和故宫文化，打造出一大批优质作品，如结合故宫建筑结构特点的3D游戏《观宫》，结合故宫的祥瑞《故宫迷画》等。
2017年NEXT IDEA将从三个维度深耕青年创新平台的建设
腾讯集团市场与公关部副总经理李明在NEXT IDEA年度盛典上对2017年进行了展望，表示NEXT IDEA将从三个维度继续深耕青年创新平台建设。
首先，深化与故宫博物院的合作，在“建筑文化”和“传统服饰文化”两个领域进行深度合作。在“传统服饰文化”领域，故宫将以《清代皇后朝服》和《胤禛美人图》为首期合作主题，与腾讯人气手游《奇迹暖暖》结合进行长期形象授权合作。
其次，引入国际化创意孵化机制“创意马拉松”模式，通过邀请行业专家和创意工作者与年轻人分享、探讨，并集中爆发创意，让年轻人学会更多的创新思维方法。
最后，搭建内容分享平台，打造“灵感社区”，开放共享NEXT IDEA 5年来积累的大量年轻人创意作品和资深导师的优质分享资源。
腾讯集团市场与公关部副总经理李明
本届NEXT IDEA项目的顺利开展，得益于团中央学校部、故宫博物院、北京电影学院、中国艺术研究院、开心麻花、撲度娱乐、英特尔等影响力合作伙伴全力支持，也广泛联动了腾讯各业务部门，如腾讯游戏旗下的自研体系管理部、腾讯QQ的增值产品部、腾讯影业、腾讯动漫、阅文集团（腾讯文学），以及腾讯精品游戏产品奇迹暖暖、QQ炫舞、天天爱消除。
本次盛典也通过QQ空间、PPTV聚力、斗鱼直播、虎牙直播、全民直播、龙珠直播、战旗直播、易直播同步在线直播，并由腾讯云Live提供直播技术支持。
免责声明：本文仅代表作者个人观点，与环球网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
环球时报系产品
扫描关注环球网官方微信
扫描关注 这里是美国微信公众号
扫描关注更多环球微信公众号手机软件手软合集推荐专题
您的位置： →
→ Next Idea x 故宫h5邀请函
扫一扫下载到手机
Next Idea x 故宫h5邀请函：这是一款全新的有趣装逼神器。收到故宫邀请函的你，能够像穿越而来的一样，完全感受古代的氛围，有趣还很好玩，快来分享给你的小伙伴吧！
Next Idea x 故宫h5邀请函特点： 1、支持自定义图片和文字； 2、支持分享到朋友圈； 3、一键制作h5动画。
Next Idea x 故宫h5邀请函制作链接：
活动内容：
截止时间：
领取方式：
活动条件：
猜你喜欢搞笑八卦游戏工具吐槽小众软件
搞笑八卦APP大全是清风小编为大家精心挑选的，都是些非常不错的搞笑八卦APP软件，这里有搞笑八卦APP下载，安卓版搞笑八卦APP下载，IOS版搞笑八卦APP下载...
Next Idea x 故宫h5邀请函
暂无下载地址，推荐手机助手下载！
应用宝海量APP福利下载!
手机扫描下载
(您的评论需要经过审核才能显示)}