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