實(shí)用技術(shù)貼：手把手教你打造淘寶、騰訊這樣的爆款H5
來源：iH5
原標(biāo)題《淘寶、騰訊H5如何欺騙你的眼睛？你可能沒看出大品牌的這些障眼法…》
6月是國內(nèi)現(xiàn)象級H5爆發(fā)的時(shí)節(jié)，也是廣告人利用智慧“造假”以實(shí)現(xiàn)創(chuàng)意的高峰期，HTML5相關(guān)行業(yè)的都在轉(zhuǎn)發(fā)淘寶造物節(jié)的偽VR場景，“外行”的在分享騰訊Next Idea的偽網(wǎng)頁動(dòng)畫，最多的疑問就是“到底是怎么做的？！”
很多人不知道，造物節(jié)其實(shí)出了兩個(gè)H5，除了VR全景是“造”出來的，還有一個(gè)三屏互動(dòng)視頻的案例也耍了點(diǎn)障眼法；至于騰訊的“穿越故宮來看你”，策劃創(chuàng)意值得借鑒，技術(shù)門檻卻是最低的，更暗藏著微信不得不提的潛在“行規(guī)”。
為什么它們能成功欺騙我們的眼睛？
怎么用iH5.cn做出這么酷炫的H5？
它們又標(biāo)志著什么發(fā)展趨勢？
1.“假裝它是3D”
《ZAO》，制作團(tuán)隊(duì)：VML
掃描二維碼，了解更多！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識(shí)別）
淘寶這個(gè)H5在業(yè)內(nèi)太火了，通過全景圖、分層運(yùn)動(dòng)的方式，在網(wǎng)頁中構(gòu)造出動(dòng)漫VR場景，基本上看過都贊不絕口。因?yàn)樗谂笥讶Φ幕鸨?，順帶還宣傳了背景音樂——華晨宇的新歌《造物者》。然而，它沒有真的構(gòu)建出3D場景，卻帶來一場近似的視覺盛宴，究竟耍了什么花招？
創(chuàng)作分析
（1）360度全景圖的搭建
淘寶H5的全景圖背景
淘寶H5分為背景層、前景層、導(dǎo)航菜單三個(gè)部分，背景的設(shè)計(jì)便是實(shí)現(xiàn)360度全景的關(guān)鍵。上面是導(dǎo)出淘寶H5的原始素材后進(jìn)行拼接，還原出來的背景——相信你一眼就能看出一張背景居然被切成了這么多塊！
淘寶H5的動(dòng)態(tài)效果
是的，而且背景層共有兩層：靠后的漸變圖片基本固定，靠前的是20張帶有透明像素的切片，寬度均為129像素。
模擬H5的滑動(dòng)變形過程
因?yàn)樽笥疫吘壍漠嬅孢B貫，這20張切片可以通過旋轉(zhuǎn)拼接的方式圍成一個(gè)環(huán)形；當(dāng)我們在手機(jī)上上下、左右觸摸屏幕時(shí)，就是看著這20張切片不停地輪播、變形。
（2）前景的分層搭建
部分分層素材的分組示例
為了讓場景變換效果更真實(shí)，制作團(tuán)隊(duì)還搭建了多層前景，并通過不同層素材的人物大小比例、物體運(yùn)動(dòng)速度的區(qū)分，讓人眼感受出不同層的遠(yuǎn)近。
不過對于大部分門外漢來說，就算懂得怎么用Photoshop切圖，沒能耐也沒工夫堆砌出這么復(fù)雜的玩意兒，更拿不出幾十萬請VML制作，所以還是乖乖用點(diǎn)旁門左道吧！
VR場景嵌入方法
既然淘寶H5虛構(gòu)出的3D場景本質(zhì)上就是全景圖，那么我們只需要找一個(gè)全景場景制作平臺(tái)就行，比如720云。使用過程非常簡單，上傳一張全景圖就能自動(dòng)生成全景場景——以下是我用淘寶造物節(jié)全景圖直接生成的效果：
全景圖導(dǎo)入720云的效果
把內(nèi)容嵌入H5也非常簡單，使用iH5的“網(wǎng)頁”工具，添加新的網(wǎng)頁并設(shè)置頁面大小，在資源位置填寫全景場景的網(wǎng)頁地址就行。
比如下面萬達(dá)的VR視頻、天津美院的VR場景，都是在iH5嵌入第三方全景制作平臺(tái)網(wǎng)頁，自己設(shè)計(jì)加載頁、導(dǎo)航菜單等完成的。
嵌入iH5的萬達(dá)VR視頻
嵌入iH5的天津美院VR場景
2.“假裝它是視頻”
《淘寶造物節(jié)》，制作團(tuán)隊(duì)：VML
掃描二維碼，了解更多！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識(shí)別）
“60秒內(nèi)邀2位好友掃碼，用三分之一價(jià)格，享百分百造物節(jié)?！?/p>
淘寶三屏互動(dòng)H5的創(chuàng)意，更偏向于活動(dòng)策劃，限時(shí)讓好友完成掃碼，三部手機(jī)就會(huì)同時(shí)播放三段內(nèi)容不同、但非常相似的“視頻”?？缙粱?dòng)實(shí)現(xiàn)并不復(fù)雜，熟悉iH5的人，可能還看過去年我們用八個(gè)屏幕召喚“神龍”的案例。
淘寶H5的三個(gè)偽視頻
但這里需要注意的是，淘寶這個(gè)H5比較有心機(jī)，它看起來播放的是視頻（尤其還用了具有欺騙性的“播放”LOGO），其實(shí)三段所謂的視頻都是圖片！
造物節(jié)H5的資源加載界面
上面是這個(gè)H5打開時(shí)的資源情況，你會(huì)看到一整片都是JPG（靜態(tài)圖片）！每張圖片控制在10多K、20多K，讓它們一張一張連續(xù)播放，再加一段音頻廣告，就以假亂真了。
造物節(jié)H5同時(shí)播放的畫面
雖然知道很多創(chuàng)意玩的就是套路，但這個(gè)套路實(shí)在太深，過程如下：
1. 制作一段垂直視頻；
2. 把視頻輸出為圖片序列幀；
3. 把圖片序列導(dǎo)入H5頁面；
4. 點(diǎn)擊播放按鈕，同時(shí)播放圖片和音頻。
跨屏互動(dòng)制作方法
用iH5實(shí)現(xiàn)跨屏互動(dòng)很簡單，對原理感興趣的話可以看看下面這個(gè)不到5分鐘的視頻：
具體到淘寶造物節(jié)這個(gè)H5，也不難：
1. 在“舞臺(tái)”下面放三個(gè)屏幕；
2. 把1號作為掃碼的主屏幕，在1號頁面放置2號屏幕的二維碼；
3. 在2號頁面放置3號屏幕的二維碼；
4. 3號屏幕頁面顯示時(shí)，觸發(fā)三個(gè)屏幕中圖片、音頻的播放。
圖片輪播制作方法
《BMW集團(tuán) 100周年》
如果你看了上一期《10000種H5特效完全制作攻略！》，還會(huì)知道寶馬100周年也玩過用圖片偽造視頻這招兒，使用iH5制作只需兩步：
1. 在畫布下加幻燈片，導(dǎo)入英文命名的圖片序列幀的壓縮包（zip/gif）；
2. 設(shè)置是否自動(dòng)播放、時(shí)間間隔、圖片的預(yù)加載比例。
12張圖片能播放1.2秒的視頻
圖片輪播的最終效果
即便我們沒能自己拍攝或制作一個(gè)視頻，照樣可以用視頻軟件把一段電影剪切成垂直視頻；然后用After Effects把視頻導(dǎo)出為靜態(tài)圖片序列和獨(dú)立的音頻；最后把圖片序列打包壓縮，并和音樂一起導(dǎo)入iH5，制作出獨(dú)一無二的偽視頻。
3.“假裝它不是視頻”
《Next Idea x 故宮》，制作團(tuán)隊(duì)：Treedom
掃描二維碼，了解更多！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識(shí)別）
最后壓軸的騰訊，剛好做了一件和上面完全相反的事情：人家要把H5偽裝成一個(gè)視頻，他們卻是硬要把視頻偽裝成一個(gè)H5！
沒有播放進(jìn)度條的H5界面
沒錯(cuò)，上面這段在安卓設(shè)備里播放也不會(huì)出現(xiàn)控制條的動(dòng)畫，是一段視頻。你以為控制皇帝的旋轉(zhuǎn)、跳躍，花式自拍背后用了多復(fù)雜的技術(shù)，其實(shí)你只是看了一段垂直視頻。
《WOW！好久不見》，同樣采用垂直視頻
掃描二維碼，了解更多！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長按識(shí)別）
這不是騰訊第一次這么玩了，魔獸電影上映的時(shí)候，他們推出的H5那么燃，其實(shí)也是視頻。我們還做過一期技術(shù)揭秘《拋開代碼！iH5十五分鐘完美重做騰訊魔獸經(jīng)典H5！》，做了個(gè)高仿版本的H5，效果對比如下：
上面是iH5仿制的效果，下面是原開發(fā)案例
網(wǎng)頁視頻在安卓設(shè)備上播放，就會(huì)默認(rèn)冒出播放器，控制條都出來了肯定就知道是視頻了；但一旦強(qiáng)制取消播放器，可能導(dǎo)致各種播放問題。那為什么故宮、魔獸兩個(gè)H5不會(huì)？唉，原因很簡單，微信是騰訊自己的，他們在瀏覽器里做了一些配置，對旗下出品的H5有所“優(yōu)待”，才能確保視頻的順利“喬裝”。
所以同樣的故宮視頻，我們嵌入就可能變成這樣——
難以忽視的播放器控制條
天無絕人之路，還好我們還能“造”視頻。無論是一開頭的VR、還是后面奔馳的寶馬，其實(shí)都巧妙利用了靜態(tài)的疊加，以實(shí)現(xiàn)動(dòng)態(tài)的效果。
看了這些作品，我們會(huì)發(fā)現(xiàn)H5的個(gè)性化定制趨勢越來越明顯，大家開始對簡單形式的H5不再那么感冒，而更加期待新鮮的形式。
轉(zhuǎn)載請?jiā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) 后臺(tái)授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（2條）