實用技術貼：打造《此處故意留白》這樣的交互漫畫 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條）