实用技术贴：打造《此处故意留白》这样的交互漫画 H5
原标题：一不小心就火了的《此处故意留白》，可以这么做
数英对原文稍有改动
数英用户原创，如需转载请遵守文章底部规范！
昨天微信出现一起群体刷屏事件，H5《这是一个关于你的故事——此处故意留白》突然肆虐各大广告人的朋友圈，传播势头之猛堪比“罗一笑”公益事件（点击查看：《此处故意留白》H5 刷屏后又反转，值得所有广告人反思）。
这个H5又叫“此处故意留白”，采用纯黑白的手绘画风，长长的卷轴漫画讲述着都市人生活——无休止的加班、被压得透不过气。你一边滑一边可能飞出一只鸟，画面变成地铁人挤人时，还会伴随沉闷的呼吸声（卖的就是情怀）。
一说到生死、加班这种敏感话题，广告人、传媒人都嗨了，转发的时候各种好评。
结果，剧情反转的速度比“罗一笑”事件还快。
中午没过一会儿，陆续有人扒皮指出H5的漫画原作是法国APP《Phallaina》，一本广受国际业界好评的数字漫画书，16年1月已在iTunes、Google Play上线。
下午差不多两点左右，H5主创Sigma的创始人之一杨亮发布声明致歉，说明H5其实是3人小团队的自发公益作品，没料到传播得这么广，因为“10-15处画面以及3处音效”并非原创，已将H5下线。
接近凌晨，我在朋友圈刷到Sigma联合创始人Brad的一则消息，正式承认抄袭。
看到这里，可能你会好奇为什么要说是抄袭？原作到底怎么样？这篇文章会一一为你解答，并介绍快速制作这种互动漫画的完整过程和注意事项。
一、你不能错过的交互漫画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万广告人，如果没有及时下线不知道会飙到多高。
稍远的还有悟脚叔叔的神作《致胜之道：致炫勇士冒险战记》，模仿美漫的画法、美国英雄电影的特效，讲故事的节奏和交互效果堪称一绝。
二、H5完全实现的实战教程
扒完了创意和互动本质，接下来说说这个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。这个时间最好不要太短，否则更新太频繁；也不能太长，不然保存的进度不够准确。
3）为时间轴1添加事件组
事件组设置当它结束时，触发两个事件，分别是：
这一步表示每一秒结束，先把动画播放的当前时间赋值给变量1，再把变量1的值写入Cookie，赋值给名为“进度”的标识。
（4）为舞台添加事件组
这个事件组设置当它结束时，触发两个事件，分别是：
这里一方面把浏览器中保存的Cookie调出来，赋值给变量1（即speed，记得要加前缀$，表示引用这个变量）；另一方面又把滑动时间轴的时间设为变量1的值，实现了调出历史进度给当前动画的效果。
总算写完了……
总之，这件事告诉我们：好的东西总是会发光的。还是继续坚持创作吧！
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（6条）