實用技術(shù)貼：打造《此處故意留白》這樣的交互漫畫 H5
原標(biāo)題：一不小心就火了的《此處故意留白》，可以這么做
數(shù)英對原文稍有改動
數(shù)英用戶原創(chuàng)，如需轉(zhuǎn)載請遵守文章底部規(guī)范！
昨天微信出現(xiàn)一起群體刷屏事件，H5《這是一個關(guān)于你的故事——此處故意留白》突然肆虐各大廣告人的朋友圈，傳播勢頭之猛堪比“羅一笑”公益事件（點擊查看：《此處故意留白》H5 刷屏后又反轉(zhuǎn)，值得所有廣告人反思）。
這個H5又叫“此處故意留白”，采用純黑白的手繪畫風(fēng)，長長的卷軸漫畫講述著都市人生活——無休止的加班、被壓得透不過氣。你一邊滑一邊可能飛出一只鳥，畫面變成地鐵人擠人時，還會伴隨沉悶的呼吸聲（賣的就是情懷）。
一說到生死、加班這種敏感話題，廣告人、傳媒人都嗨了，轉(zhuǎn)發(fā)的時候各種好評。
結(jié)果，劇情反轉(zhuǎn)的速度比“羅一笑”事件還快。
中午沒過一會兒，陸續(xù)有人扒皮指出H5的漫畫原作是法國APP《Phallaina》，一本廣受國際業(yè)界好評的數(shù)字漫畫書，16年1月已在iTunes、Google Play上線。
下午差不多兩點左右，H5主創(chuàng)Sigma的創(chuàng)始人之一楊亮發(fā)布聲明致歉，說明H5其實是3人小團(tuán)隊的自發(fā)公益作品，沒料到傳播得這么廣，因為“10-15處畫面以及3處音效”并非原創(chuàng)，已將H5下線。
接近凌晨，我在朋友圈刷到Sigma聯(lián)合創(chuàng)始人Brad的一則消息，正式承認(rèn)抄襲。
看到這里，可能你會好奇為什么要說是抄襲？原作到底怎么樣？這篇文章會一一為你解答，并介紹快速制作這種互動漫畫的完整過程和注意事項。
一、你不能錯過的交互漫畫H5
國內(nèi)這個H5到底和國外那個APP有什么關(guān)聯(lián)？
首先，為了客觀公正我特意下載了Phallaina的APP——不得不承認(rèn)它做得太好了，難怪能讓這么多人動心。以下是我觀察后的結(jié)論：
1、扒扒兩個作品的差別
1）H5套用了Phallaina原畫
先給大家看2張網(wǎng)傳截圖，上面是國內(nèi)的，下面是法漫的：
不難看出，Sigma這個H5的基調(diào)和原作一模一樣，還有很多畫面是直接從原圖上改的，比如把主人公Audrey全都換成符合廣告公司形象的“廣告狗”。
2）交互形式一致
H5和原作都是向左滑動，觸發(fā)畫面切換、動效、音效。Sigma雖然用了原作的BGM，但幾乎給所有場景道具都配了音效。
3）新的元素和轉(zhuǎn)場效果
H5中多處采用了一群或一支烏鴉進(jìn)行轉(zhuǎn)場，配上烏鴉的叫聲，給整個作品定下了壓抑、凄涼的基調(diào)。
這一塊，應(yīng)該是主創(chuàng)團(tuán)隊的創(chuàng)意，也是一大亮點。
2、未來故事都得這么講
Phallaina，一個體積高達(dá)333MB的APP，據(jù)說是世上第一個可以在移動端觀看的、只需要向左滑動畫面的卷軸形漫畫數(shù)字書。這部超現(xiàn)實漫畫的作者是漫畫師 Marietta Ren，講的是一個名叫 Audrey 的女孩奇幻生活。
漫畫制作精良，但付出的心血也是巨大的。首先原畫的素材非常龐大，在手機(jī)或平板上會看到各種實時的視差動效（前景移動快、后景移動慢）、聽到各種應(yīng)景的音效（打碎東西、流水，等等），簡直就是2D版的VR體驗。
這種介于電影、漫畫、交互動畫之間的形式，可能是未來講故事的一大法寶，尤其在H5的助力下，會讓這種互動電子書更加容易傳播。
近的是這個現(xiàn)在已經(jīng)打不開的H5《此處故意留白》，據(jù)說5小時內(nèi)依靠自傳播就驚動了15萬廣告人，如果沒有及時下線不知道會飆到多高。
稍遠(yuǎn)的還有悟腳叔叔的神作《致勝之道：致炫勇士冒險戰(zhàn)記》，模仿美漫的畫法、美國英雄電影的特效，講故事的節(jié)奏和交互效果堪稱一絕。
二、H5完全實現(xiàn)的實戰(zhàn)教程
扒完了創(chuàng)意和互動本質(zhì)，接下來說說這個H5的完整實現(xiàn)吧，涉及滑動交互、進(jìn)度條顯示和記錄播放進(jìn)度三大要點。
1、先讓長背景滑起來
先在舞臺下設(shè)置一個40秒（時間自定）、大小與舞臺一致的滑動時間軸。
然后把完整的背景圖平均切成很多張小圖——避免加載時間過長；接著選中滑動時間軸，把切出來的第一張素材拖進(jìn)工作臺，調(diào)整好位置后添加軌跡。
注：制作橫屏案例時，有一個小技巧——右鍵舞臺，先將其旋轉(zhuǎn)-90°，在做完之后再將其恢復(fù)正常，這樣能避免歪著脖子做案例。
接下來，把背景圖移到屏幕最右邊，直至在屏幕范圍消失時，設(shè)第一個關(guān)鍵幀。
然后在播放末尾（比如40秒處）添加第二個關(guān)鍵幀，點擊選中這個關(guān)鍵幀（激活成黃色），調(diào)整它的y坐標(biāo)為完整圖片長度的負(fù)值。
接下來，把其他圖片拖到第一張圖下面，調(diào)整位置為彼此銜接，因為其他圖片是第一張圖的子對象，也會和它一起向左運(yùn)動。
注：有幾個參數(shù)需要特別注意——
① 滑動放大比例：可以理解為畫面滑動時的變化幅度，推薦值：0.03-0.1；
② 滑動方向：上/下/左/右，任選一個，選中后的方向即為滑動正方向，比如選了“上”，那么頁面可以上下滑動，其中上滑為正方向，下滑為反方向。推薦設(shè)置：上；
③ 自動跳轉(zhuǎn)控制點：關(guān)閉。
2、設(shè)置有視差動效的素材
有視差效果的素材，實際上和背景圖位移的原理是一樣的，只是位移的速度、時間有所差異。
這里得把背景素材一一拖到時間軸下，然后拖動時間軸拉桿到與背景匹配的對應(yīng)位置，為背景素材設(shè)置位移。原則只有一個，它的時間間隔要比背景同樣位移的間隔短——這樣運(yùn)動速度更快。
注：如果想要更佳的視差效果，還可以修改這些獨(dú)立元素的“視距”參數(shù)，讓它與背景圖之間的上下層關(guān)系更為明顯。
3、底部進(jìn)度條的設(shè)置
進(jìn)度條的制作看起來復(fù)雜，其實是最簡單的，只需在滑動時間軸下放一個黑色的小矩形，控制它的總時長和時間軸、背景圖一致，改變它的寬度就好：
① 滑動時間軸第一個關(guān)鍵幀——寬度=0
② 滑動時間軸第二個關(guān)鍵幀——寬度=最長時。
4、音效觸發(fā)
音效的觸發(fā)，需要在滑動時間軸下添加和對應(yīng)時間匹配的事件——
這個看起來簡單，但反而很復(fù)雜。
這個H5的音效不是單次觸發(fā)的，而是在某個時間范圍內(nèi)循環(huán)播放，這就意味著每個時間范圍內(nèi)需要分別在起點、終點設(shè)兩個觸發(fā)器：
第一個用于控制動畫向后播到起點時，音效播放（即正向播放）；向前播到起點時，音效停止（即反向播放）。
第二個用于控制動畫向前播到終點時，音效播放；向后播到終點時，音效停止。
注：大家可以先設(shè)完全部音頻的正向播放&暫停事件，再調(diào)轉(zhuǎn)播放&暫停的兩個觸發(fā)時間，變成反向控制，這樣就簡潔且不易出錯了。
5、怎么記錄播放進(jìn)度？
看到一半退出再次進(jìn)這個H5，你會發(fā)現(xiàn)居然會回到上次播放的位置。其實原理很簡單，主要使用瀏覽器的Cookie記錄播放進(jìn)度，在iH5上使用變量就可以實現(xiàn)。
注：Cookie可以理解為每個網(wǎng)站在你的瀏覽器上保存的標(biāo)識，比如用戶名和密碼，多用于個性化服務(wù)。
1）新建變量1
變量名稱可以隨便填，比如“speed”，用于存取Cookie的屬性。
為你要保存的Cookie標(biāo)識起個名字，比如“進(jìn)度”，利用上面的變量存取內(nèi)容。
2）新建時間軸1
自動播放、循環(huán)播放設(shè)為YES，總時長可以是1。
說明一下，這個時間軸是用來自動更新Cookie的，它的總時長設(shè)為1，表示每隔1秒更新一次名為“進(jìn)度”的Cookie。這個時間最好不要太短，否則更新太頻繁；也不能太長，不然保存的進(jìn)度不夠準(zhǔn)確。
3）為時間軸1添加事件組
事件組設(shè)置當(dāng)它結(jié)束時，觸發(fā)兩個事件，分別是：
這一步表示每一秒結(jié)束，先把動畫播放的當(dāng)前時間賦值給變量1，再把變量1的值寫入Cookie，賦值給名為“進(jìn)度”的標(biāo)識。
（4）為舞臺添加事件組
這個事件組設(shè)置當(dāng)它結(jié)束時，觸發(fā)兩個事件，分別是：
這里一方面把瀏覽器中保存的Cookie調(diào)出來，賦值給變量1（即speed，記得要加前綴$，表示引用這個變量）；另一方面又把滑動時間軸的時間設(shè)為變量1的值，實現(xiàn)了調(diào)出歷史進(jìn)度給當(dāng)前動畫的效果。
總算寫完了……
總之，這件事告訴我們：好的東西總是會發(fā)光的。還是繼續(xù)堅持創(chuàng)作吧！
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（6條）