这个H5刷屏,却被广告人和设计师集体吐槽?

原创文章 分类: 经验/观点 版权:
3935 4 25 8
2017-03-31
24.7
编辑推荐

昨天微信出现一起群体刷屏事件,H5《这是一个关于你的故事》突然肆虐各大广告人的朋友圈,传播势头之猛堪比“罗一笑”公益事件……


这个H5又叫“此处故意留白”,采用纯黑白的手绘画风,长长的卷轴漫画讲述着都市人生活——无休止的加班、被压得透不过气。你一边滑一边可能飞出一只鸟,画面变成地铁人挤人时,还会伴随沉闷的呼吸声(卖的就是情怀)。

 

一说到生死、加班这种敏感话题,广告人、传媒人都嗨了,转发的时候各种好评。

Image title

结果,剧情反转的速度比“罗一笑”事件还快。

 

中午没过一会儿,陆续有人扒皮指出H5的漫画原作是法国APP《Phallaina》,一本广受国际业界好评的数字漫画书,16年1月已在iTunes、Google Play上线。


差不多两点左右,H5主创Sigma的创始人之一杨亮发布声明致歉,说明H5其实是3人小团队的自发公益作品,没料到传播得这么广,因为“10-15处画面以及3处音效”并非原创,已将H5下线。反正打不开,就不给链接了。

Image title

虽然原作被下架,但不得不存疑,这种互动漫画H5应该怎么做?漫画电子书是不是要火了?这篇文章会一一为你解答。


一、你不能错过的交互漫画H5


国内这个H5到底和国外那个APP有什么关联?


首先,为了客观公正我特意下载了Phallaina的APP——不得不承认它做得太好了,难怪能让这么多人动心。以下是我观察后的结论:


1、扒扒两个作品的差别


1)H5套用了Phallaina原画


先给大家看2张网传截图,上面是国内的,下面是法漫的:

Image title

不难看出,Sigma这个H5的基调和原作一模一样,还有很多画面是直接从原图上改的,比如把主人公Audrey全都换成符合广告公司形象的“广告狗”。


2)交互形式一致


H5和原作都是向左滑动,触发画面切换、动效、音效。Sigma虽然用了原作的BGM,但几乎给所有场景道具都配了音效。


3)新的元素和转场效果


H5中多处采用了一群或一支乌鸦进行转场,配上乌鸦的叫声,给整个作品定下了压抑、凄凉的基调。


这一块,应该是主创团队的创意,也是一大亮点。


2、未来故事都得这么讲?


Phallaina,一个体积高达333MB的APP,据说是世上第一个可以在移动端观看的、只需要向左滑动画面的卷轴形漫画数字书。这部超现实漫画的作者是漫画师 Marietta Ren,讲的是一个名叫 Audrey 的女孩奇幻生活。


漫画制作精良,但付出的心血也是巨大的。首先原画的素材非常庞大,在手机或平板上会看到各种实时的视差动效(前景移动快、后景移动慢)、听到各种应景的音效(打碎东西、流水,等等),简直就是2D版的VR体验!

Image title

这种介于电影、漫画、交互动画之间的形式,可能是未来讲故事的一大法宝,尤其在H5的助力下,会让这种互动电子书更加容易传播。


近的是这个现在已经打不开的H5《此处故意留白》,据说5小时内依靠自传播就惊动了15万广告人,如果没有及时下线不知道会飙到多高。


稍远的还有悟脚叔叔的神作《致胜之道:致炫勇士冒险战记》,模仿美漫的画法、美国英雄电影的特效,讲故事的节奏和交互效果堪称一绝。

Image title

http://0c8a0952908d.vxplo.cn/idea/PBGxwqX


二、H5完全实现的实战教程


扒完了创意和互动本质,接下来说说这个H5的完整实现吧,用iH5.cn作为复现工具,涉及滑动交互、进度条显示和记录播放进度三大要点。


由于原H5已经打不开,如果你想回顾的话,可以看以下赵四部分复现的版本:

Image title

http://5f630a50018f.ih5.cn/idea/ik_4Hoh

[注] 为了方便教学,这里直接在原作品扒了素材(赶在它下线之前),在此承诺非商用,素材归原创团队所有。

 

仔细看这个H5,大致有五个步骤——

① 长幅背景

② 视差动效

③ 进度条

④ 实时音效

⑤ 播放进度记录


1、先让长背景滑起来!

Image title

先在舞台下设置一个40秒(时间自定)、大小与舞台一致的滑动时间轴。


然后把完整的背景图平均切成很多张小图——避免加载时间过长;接着选中滑动时间轴,把切出来的第一张素材拖进工作台,调整好位置后添加轨迹。


注:制作横屏案例时,有一个小技巧——右键舞台,先将其旋转-90°,在做完之后再将其恢复正常,这样能避免歪着脖子做案例。

Image title

接下来,把背景图移到屏幕最右边,直至在屏幕范围消失时,设第一个关键帧。


然后在播放末尾(比如40秒处)添加第二个关键帧,点击选中这个关键帧(激活成黄色),调整它的y坐标为完整图片长度的负值。

Image title

接下来,把其他图片拖到第一张图下面,调整位置为彼此衔接,因为其他图片是第一张图的子对象,也会和它一起向左运动。

 

注:有几个参数需要特别注意——

 

滑动放大比例:可以理解为画面滑动时的变化幅度,推荐值:0.03-0.1;

滑动方向:上/下/左/右,任选一个,选中后的方向即为滑动正方向,比如选了“上”,那么页面可以上下滑动,其中上滑为正方向,下滑为反方向。推荐设置:上;

自动跳转控制点:关闭。


2、设置有视差动效的素材

Image title

有视差效果的素材,实际上和背景图位移的原理是一样的,只是位移的速度、时间有所差异。


这里得把背景素材一一拖到时间轴下,然后拖动时间轴拉杆到与背景匹配的对应位置,为背景素材设置位移。原则只有一个,它的时间间隔要比背景同样位移的间隔短——这样运动速度更快。

 

注:如果想要更佳的视差效果,还可以修改这些独立元素的“视距”参数,让它与背景图之间的上下层关系更为明显。

 

3、底部进度条的设置

  

进度条的制作看起来复杂,其实是最简单的,只需在滑动时间轴下放一个黑色的小矩形,控制它的总时长和时间轴、背景图一致,改变它的宽度就好:

 

① 滑动时间轴第一个关键帧——宽度=0

② 滑动时间轴第二个关键帧——宽度=最长时。

 

4、音效触发

 

音效的触发,需要在滑动时间轴下添加和对应时间匹配的事件——

 

这个看起来简单,但反而很复杂。这个H5的音效不是单次触发的,而是在某个时间范围内循环播放,这就意味着每个时间范围内需要分别在起点、终点设两个触发器:


第一个用于控制动画向后播到起点时,音效播放(即正向播放);向前播到起点时,音效停止(即反向播放)。


第二个用于控制动画向前播到终点时,音效播放;向后播到终点时,音效停止。

Image title

注:大家可以先设完全部音频的正向播放&暂停事件,再调转播放&暂停的两个触发时间,变成反向控制,这样就简洁且不易出错了。


5、怎么记录播放进度?

 

看到一半退出再次进这个H5,你会发现居然会回到上次播放的位置!其实原理很简单,主要使用浏览器的Cookie记录播放进度,在iH5上使用变量就可以实现。

 

注:Cookie可以理解为每个网站在你的浏览器上保存的标识,比如用户名和密码,多用于个性化服务。


(1)新建变量1

变量名称可以随便填,比如“speed”,用于存取Cookie的属性。

 

注:为你要保存的Cookie标识起个名字,比如“进度”,利用上面的变量存取内容。

 

(2)新建时间轴1

自动播放、循环播放设为YES,总时长可以是1。

 

注:这个时间轴是用来自动更新Cookie的,它的总时长设为1,表示每隔1秒更新一次名为“进度”的Cookie。这个时间最好不要太短,否则更新太频繁;也不能太长,不然保存的进度不够准确。

Image title

注:这一步表示每一秒结束,先把动画播放的当前时间赋值给变量1,再把变量1的值写入Cookie,赋值给名为“进度”的标识。


Image title

注:这里一方面把浏览器中保存的Cookie调出来,赋值给变量1(即speed,记得要加前缀$,表示引用这个变量);另一方面又把滑动时间轴的时间设为变量1的值,实现了调出历史进度给当前动画的效果。


总算写完了……

Image title

总的来说,这件事告诉我们:好的东西总是会发光的。继续坚持创作吧!


本次分享就到这儿了,衷心希望接下来能看到SIGMA的优质原创作品。


另,即将迎来三天法定假期,大家趁机好好歇会吧,特别是最近特忙的各位广告人,注意休息,别透支身体。


套用原H5里的结束语:“别让清明节变成你的节日。”


各位拜了个拜~

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

2145粉丝/8关注

原创小生
震惊!这个H5居然是在线聊天室!(内附完整教程)网易的爆款H5,手把手教你做!

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN