說到前陣子最風糜的互動電子書莫過於 William Joyce (曾任職於Pixar、Dreamworks 和 Disney) 所出產的 The Fantastic Flying Books of Mr. Morris Lessmore,它的魅力在於豐富的視覺效果與互動內容,即使是未滿週歲的孩童也深深的被它所吸引住,沒有 iPad 的讀者可以從影片的互動過程感受到他的威力。
我要如何開發這麼迷人的 App? 需要用到哪些技術? 台灣做得到嗎? 請告訴我該如何做!!!
若不是在這個行業耕耘多時,還真不知道這背後藏了多少 magic,這篇文章從3個月前起稿,一直被中斷到現在才寫完出稿 (佛心的開了3個月的講座、出國 co-work orz),也算是給 App 開發者一個交待,將來國內有興趣開發類似 App 做為電影行銷的話,不失為一個好方法 (如 BBS 鄉民的正義半動畫片)。
就程式開發面來講,這個 App 所使用的技術有很大一部分只有以下兩項
- UIImageView 的 Animation
- Video/Audio Player
在開始剖析技術內容之前,筆者用5分鐘的時間寫了一小段 code (是的,不超過十行,你也可以試試),這個動畫是第4個場景,使用者輕敲房屋的門之後,Morris 從屋內墜落的動畫
- 影片
- 程式碼 Screenshot
解壓縮 ipa 檔會發現有 243 個 MP3,26 個 m4a,12 個 mp4,27 個 m4v 與多達 1279 個圖檔,整個 ipa 大小為 336 MB,整本書有27個場景,在這裡我們就幾個比較特殊的場景做講解。
場景一:巨風吹過書堆 – 從一開始的動畫互動就讓人印象深刻,可曾想像手指滑過會帶來一陣巨風
- 靜態時為圖片 + UISwipeGestureRecognizer 判斷使用者的手勢是否由左往右
- 接受到 swipe 手勢做 video 播放
- 波浪的白色箭頭為一張靜態圖片做 alpha 0->1->0 的 animation
場景二:巨風下連建築物也被連根拔除,除了 shake animation 之外,沒做太多的額外 work。
- 兩棟建築物為獨立兩張圖片,做 shake transform
- tap 到建築物後做 UIView animation (reset UIView.center)
場景三:旋轉的屋子 – 採用的技術除了筆者的 sample code 之外,就是 UIRotationGestureRecognizer 來判斷旋轉手勢
- 滾動的房屋與 Morris 是採用筆者的 sample code 所達成的效果
- UIRotationGestureRecognizer 用來判斷旋轉的角度
- 房屋墜落的效果則是將 UIView.frame.size 做 UIView animation
場景五:可繪字的翻開書本 – 寫下的字會隨風飄走
- 畫面中央放一塊可寫字的 View,實作 drawRect:
- 一段時間沒有寫字,將 UIView.center 做 UIView animation
場景六:手繪的天空形成一片藍 – 所及之處僅有天空會變藍色
- 巧妙的利用3張圖層做 mask,天空灰圖片 + 天空藍圖片 + 天空的 touch event (見下圖
- 手指所及之處用 CoreGraphic 在 drawRect 做 Blur + Path 處理 mask 的範圍
場景十:空中飛翔的書本 – 透過讀者的手指頭,將所有書本帶進建築物內
- 空中飛翔的5本書可以想像成在畫面上的五個 UIActivityIndicator,只是他的圖長不一樣罷了
- 將書本拉進屋子的效果為 UIPanGestureRecognizer
- 一些小細節再搭配 transform 與 UIView animation 達成
場景十二:讓 Book 教你彈鋼琴 – 一直環繞在整個 App 中的音樂旋律,由小書人來教你怎麼彈
- 寫好腳本,排好鋼琴鍵的順序,讀者每 touch 到一個正確的音鍵後,變換圖片 high light 的位置即可
- 鋼琴鍵用 UIButton 刻成不同音鍵
- 紅色的音符與鋼琴鍵則是根據腳本將各式形狀的紅色 mask 貼在不同位置上
場景十三:小孩最喜歡玩的 ABC 麥片早餐 – A到Z的餅乾可以讓你自由的排列組合,還可以拍照留念
- 26個字母圖片 + UITapGestureRecognizer 點選一塊餅乾 (同時產生新的餅乾)
- UIPanGestureRecognizer 移動餅乾到適當位置
- 透過 renderInContext: 完成的圖片並用 UIImageWriteToSavedPhotosAlbum 將之存進內建的相簿中
場景十五:修復破碎的書本 – 將破碎的書頁一塊一塊拼回來原本的樣子
- 利用 UIPanGestureRecognizer 並對 UIView 做個簡單的 bound check 就可以完成拼圖的效果
場景十六:騰空的 Morris 在空中飛來飛去 – 利用 iPad 的 Sensor 來操控 Morris 要往上飛還是往下飛還是往左往右飛
- 背景是一個 loop 的影片
- 前景是一個 Morris 被風吹的動畫
- 用 Core Motion 取回 CMDeviceMotion 的 roll pitch yaw 三個軸向的值,來決定 Morris 要飛行的方向
場景十九:日夜交替的動畫 – 當讀者點選窗外的世界,馬上呈現日月一昇一落的動畫
- 這裡分為前中後景,前景為 Morris 所在的屋內,明亮的白天與昏暗的夜晚兩張圖片做 alpha blending
- 中景為太陽和月亮,做 Move animation
- 後景為草原,同樣是明亮的草原和昏暗的草原做 alpha blending
講到這裡,相信具有一定開發經驗的 iOS programmer 已經知道這款 App 整個細節的來龍去脈很清楚了,實作面大概也不出那幾種技巧,detail 的 coding 也曾經在 Techmemo 舉辦的活動中講解過
- 如果你是 iOS programmer,歡迎提出實作上的問題彼此交流交流
- 如果你是客戶,請忘掉前文所敘,有一定經驗的開發者的確可以達到此 App 的絕大部分效果,若是程式要穩定/流暢/效能/架構清楚,還是精選一下開發商,免得做出一個四不像的產品 🙂
除了技術,你還要能活用它,而不是被技術所支配
註1:解壓縮 .ipa 方式請直接修改副檔名為 .zip 執行解壓縮。
註2:因為 png 圖檔皆被 Xcode optimized 過, 擷取原始圖檔方式請參考 Viewing iPhone-Optimized PNGs 將其 revert 回 original file。
註3:所有圖片版權為 Moonbot Studio 所有,此 blog 文章僅做教學用途。