2008/5/6

HTC Diamond Touch3D and Flash Lite

這篇主要來探討HTC Diamond-Tocuh 3D UI裏,Flash Lite有哪些做得到,哪些做不到。以下純推測,畢竟我不在HTC裏,也不認識Touch 3D的實作團隊,所以是純技術討論,但實際上Touch 3D是不是用我說的方法來做?就不在本篇範圍內了。


Youtube上已有很多影片了,請自行前往
http://tw.youtube.com/user/HTC
沒時間的話,直接看這段就好


1.時鐘

時鐘翻字效果,如果我來用Flash實作的話,我會直接把數字切半後做上下垂直壓扁,不需真的做梯形變形。有變梯形的,只有白色紙片底圖。重點是白色紙片跟黑色數字兩者是分開的。在變梯形的白色紙片與垂直壓扁的黑色數字疊在一起後,自然看起來就像一個翻頁效果了。


2.Music Play List


在iTune, iPod的Cover flow出現後,許多廠商爭相模仿,我也被許多人問過如何以FlashLite做cover flow,但答案是不行,至少標準的作法是不行的。重點仍在梯形變形,FlashLite截至目前3.1版,仍無法對bitmap做處理,因此無法做梯形變形。而非正規的作法(如mask),可以模擬個大概,但不是很標準,且也很耗效能。
不過去除技術因素後,我仍強烈反對再做一套cover flow,原因是何苦做個me too產品再被大家笑呢?

HTC這個music play list的作法就滿聰明的,有抓到end user想要的重點:3D & rotation,但又跟Apple的效果不太一樣,而免去copy cat的罪名。另外就FlashLite的技術來看,實作機會也大為提高,原因是我們仔細看可以發現,它並沒有變梯形,而是平行四邊形。如下圖:

以Flash來說,變平行四邊形是非常容易的,以上圖的連續動畫,就可以弄出這個類3D效果了。
(同樣效果也有做在Phone book裏)

3.一些純動畫的地方
另外比較單純的,像氣象動畫


或是email翻轉動畫

(註:但email裏的文字部份在下一點補述)

甚至三軸加速計小遊戲

都是單純的動畫+互動功能,也是Flash擅長之處。

4.Flash實作困難之處
前面一直有強調梯形的問題,以下我們可以先挑出幾處有這種效果的地方。
如兩單元間的轉場:


或是photo & vidow單元:


或是email裏的文字:

從Youtube上各影片來看,email動畫中的文字每次出現都不同,所以應該是真實email的內容,不是隨便打些假字。可以看到文字的部份也做了變形。

5.結語
雖然昨天才launched,不過我們大概已不難想像Diamond將會贏得多少話題多少目光,就像一代阿福機一樣。

不過雖然Diamond的UI做得很棒,特殊UI項目也比一代阿福多很多,但總有一種「本來就該如此」的感覺,而較沒有一代阿福出現時的驚豔感。但就「起、承、轉、合」的步驟來看,Diamond算是在「承」的位置,這樣的表現也算恰如其分,之後的第三支TouchFlo,應該是更值得期待的。
(謎:你忘了Shadow了…)

最後就Flash的部份再說一下心得。從事Flash工作以來,常在視覺效果與效能之間做拔河,即便是以前在PC上做Flash也是。而這中間的秘辛常常是以類似變魔術的手法來達成,以各種取巧,不擇手段的方式,欺騙user的眼睛,來營造出常規做法做不出的效果。就像大衛考伯菲穿越長城一樣。我們都知道他不可能真的穿牆,但他確實有做出「好像穿過去」的假象,而且弄得很像。
(謎:這年頭沒人記得大衛了吧,該用日本的賽洛或是大衛白爛來舉例吧…)

若能以這種變魔術的心態來創作Flash視覺特效,我認為常會是作品致勝的關鍵。很多人都能想出不錯的idea,即使不是UI 設計師,也常有一些不錯的天馬行空。但重點在不是每個人都能想出戲法關鍵。
講到這,會讓我想到日本Flash大師Yugo近期的DropClock

http://scr.sc/products/dropclock/
這個視覺效果很棒,但由於沒辦法以Actionscript實作出來,或是讓出來的效果良好,所以最後他決定用影片的方式來做,整個screensaver要130多mb。
我覺得這就是想出了不錯的idea,但卻沒想到很好的戲法關鍵,直接用影片來做,等於是表演穿牆魔術時,真的跑去挖牆壁一樣。130多mb的screensaver,我看完效果就移除了。
不過Yugo以前的作品還是很不錯的,值得大家學習。 :)

不論如何,用Flash來變魔術,真的是很有趣的一件事。