别人家的h5,得了戛纳数字广告全场大奖

《别人家的h5,得了戛纳数字广告全场大奖》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、别人家的H5，得了戛纳数字广告全场大奖…“如果，不只是听音乐——”“你还能和它玩？”戛纳国际创意节，被誉为广告界的奥斯卡，每年都会冒出很多各种各样能让人拍大腿叫好的营销奇招！今年它照样没让世界人民失望，当我们还在安安静静地听MP3、看MV的时候，一个与音乐互动的网络体验项目《BecauseRecollection》，一举夺下史上首个数字工艺类全场大奖。获奖页面的部分交互界面制作团队的脑洞不要开得太大，把20首歌玩出了20种花样，不带重样的。这是一个基于HTML5的数字项目，创意一流、交互设计一流，用户体验更是一流，可谓互联网体验经济的里程碑。1、神一

2、样的交互体验！网站为纪念BM建立十周年《BecauseRecollection》是业界响当当的法国广告公司84.Paris为音乐厂牌BecauseMusic（以下称BM）设计的音乐互动网站，作为后者成立十周年的优秀作品回顾。究竟是什么样的作品，广受业界好评，还能让谷歌的ChromeMusicLab屈居戛纳数字工艺类金奖？下面这个视频是我一首首歌体验后，剪辑出来的精华版，你可以看到它的视觉效果非常惊艳。http://v.qq.com/page/v/k/u/v0313jimsku.html视频《谁击败谷歌，获得首个戛纳数字广告全场大奖？》那么效果怎么样？

3、网站发布后一周内，BM涨了30%的粉，来自129个国家的用户平均每人玩了5分钟——试想人家开了十年的网站，突然一夜间名声大噪的狂喜。然后它就开挂了，不仅获得各大媒体的报道，更斩获各种国际大奖，金铅笔、FWA、戛纳，也算实至名归。2、如何做出这么惊艳的创意视觉？其实每首歌互动体验的步骤都差不多：（1）长按空格键缓冲-->（2）做出指定动作-->（3）动态还原专辑封面&播放音乐片段-->（4）进入专辑介绍。虽然内地暂时登不上这个网站，但它特意为每首歌设计出与专辑封面极其吻合的场景，这种超前的视觉创意设计还是让人好奇。于是很快就有人在知乎询问它的技术实现，

4、问题如下：知乎上有人询问如何实现有一个回答，指出它应用的都是视频素材——还好回答的人匿名，否则我可能要直接找他理论了。以第一首歌《ByYourSide》为例，为了实现点击后进行多次换装的效果，用到的素材是这样的：换装场景的部分原始素材这能是视频？当然，有的页面的确用到了视频，但这只是这些交互场景的一小部分。当场景设计的变换越讲究精细化，就越需要素材能分离出来变化、能独立进行交互，所以并不能完全依赖视频。在H5页面的开发上，84.Paris采用WebGL进行渲染，一种比较复杂的3D绘图标准。具体实现上可能和下面介绍的方法不大一样，但视觉效果差不了多少，

5、所以应该怎么利用iH5进行制作？3、怎么触发这些场景的运行？不同类型的触发提示首先，触发交互的方法很简单，这个项目大概主要用6种：点击、按下、离开、键盘按键、滑动、拖拽。这些触发在iH5里实现大部分非常简单：新建一个透明按钮，在它下面加一个事件就能看到很多种触发条件，点击、手指按下或离开等等；键盘按键设置则需要在舞台下添加触发条件，填上是什么按键；而拖拽其实就是把图片的一个属性设为允许拖动。透明按钮对象下触发事件的示例还有一些鼠标悬停、上下滚动等触发，和上面也差不了多少。滑动控制如果涉及动画的播放和倒退，就稍微复杂点，得用滑动时间轴、幻灯片等功能进行

6、调节。你可能纳闷，为什么这些动作都这么容易？点一点、按一按、滑一滑。因为用户玩的是音乐，而不是音乐游戏。你也可以设计一个围住神经猫，挑战×步成功才能听到这些歌，但过于复杂化就弱化了欣赏音乐的感官，也丧失了项目存在的意义——让用户享受和音乐融为一体的感觉。4、如何如法炮制一样的视觉场景？歌曲《Complètementfou》的场景运动具体到某个场景，原理上并没有那么复杂，只是在设计上有时为了完善某种视觉效果，需要多费点脑细胞、多尝试几次。页面的分层示意图这次揭秘的是歌曲《Complètementfou》中，鼠标滚动向上时那张俏美的人脸会从蓝色花瓣中浮上

7、来、一松开鼠标就下降的场景，准备素材为以上三张图片。实现只需三步：（1）在iH5新建一个时间轴1，按顶后层顺序把三张图片放里面，为它们分别添加轨迹和关键帧——为了让人脸一边逼近一边浮上来，轨迹既要控制运动层往上移动，还要保证三层图片都在放大。iH5的操作界面（2）在舞台下添加一个事件，设置滚动向上时，时间轴1播放指定时长，如1S——这个时间长度的设置是体验的关键。（3）添加一个1S的时间轴2，设置结束时，时间轴1播放指定时长，比如-0.5S（负值代表反向播放）——这个时间长度不得高于正向播放的时长，否则这张人脸一辈子都别想浮上来。最终做出的滚动特效最

8、终效果如上，前景层我对得不是很准望见谅。另外，实际播放上还得考虑音频的控制等问题。还有很多其他场景，比如点击