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

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

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

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

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

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

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

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

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

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

1、扒扒两个作品的差别

1）H5套用了Phallaina原画

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

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

2）交互形式一致

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

3）新的元素和转场效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

① 长幅背景

② 视差动效

③ 进度条

④ 实时音效

⑤ 播放进度记录

1、先让长背景滑起来！

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

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

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

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

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

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

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

① 滑动放大比例：可以理解为画面滑动时的变化幅度，推荐值：0.03-0.1；

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

③ 自动跳转控制点：关闭。

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

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

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

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

3、底部进度条的设置

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

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

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

4、音效触发

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

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

第一个用于控制动画向后播到起点时，音效播放（即正向播放）；向前播到起点时，音效停止（即反向播放）。

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

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

5、怎么记录播放进度？

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

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

（1）新建变量1

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

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

（2）新建时间轴1

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

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

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

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

总算写完了……

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

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

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

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

各位拜了个拜~