甜心巧克力
先前使用一些Flash小物件, 最近利用Swiffy逐步改成Html5檔案. 倒也不是因為跟隨潮流, 轉檔後的網頁檔會膨脹約15% (Swiffy開發者公開的數據約17%). 且依照原始匯入的圖檔尺寸, 很可能比swf檔案大上數倍以上; 這對載入會有很大的殺傷力.
相對來說, 我較喜歡Flash. 檔案可壓縮, 在文章裡縮放尺寸也很方便. 不過非向量檔製作出來的swf嵌入網頁後, 有時會產生鋸齒邊緣的情形. 而轉成Html5檔案後卻沒有這種情形. 這才是我將flash轉成html5的主要原因; 看起來比較順眼．．．
不過要玩Html5轉檔樂也是要負擔風險.
例如號稱完美支援HTML和CSS3的IE 9, 其實很多元素與HTML5趨勢項目是不相容的. (我採用"趨勢項目"而不宣稱"標準項目", 是因為全規格的標準尚未定案)
IE9 有個很奇妙的特性, 它可以很智慧地判定載入的網頁要如何讀取它.
例如這個網頁可以採行IE8的版本來讀取文件, 於是它模擬了在IE8的文件模式而不至於頁面錯亂. 這本來是個很棒的設計...
但是我說IE9大哥, 你嘛幫幫忙咧! 無法解析的語意就含糊過去; 強制以向下版本來讀取, 然後造成頁面當機的狀況. (處理非法文檔的問題?) 加掛 - 追查篇
所以在使用Swiffy轉檔成Html5之前, 最好考慮清楚. 使用Flash還是最安全的策略.
不過也不能一面倒責怪IE, 畢竟Blogger的基本模版就是CSS2, 有些固定模組是無法改變. 儘管你可以在文件裡添加CSS3語意, 或是大膽採用Html5的潛規則. Blogger還是無法變身成CSS3. (除了新式動態模版外)
尤其Swiffy被Google蒐羅為合作關係後, 整個發展環繞在Google資源中. (可以預見Google行動裝置與平板電腦的企圖)
但是同樣的檔案, 在Firefox上面依然完美運行 (IE沒有藉口了吧!). 而且我覺得火狐在運行SVG和Canvas時的效果更勝於Chrome, 圖形呈現與原設計相差無幾.
以上是最近玩動畫轉檔的感想, 想想自己很像實驗白鼠, 縱然IE在台灣有很高的市占率 (見此篇-如何將Flash轉成HTML5), 決定還是換成Html5 (我看這個部落格近期數據IE只占20%以下). 原因在文首有提到.
碎碎念結束後來看看這一次的實驗作品.
上一次的分類選單在製作之初沒有先規劃完成尺寸, 匯入的圖檔造成輸出後的html5網頁很大. Swiffy無法像Flash一樣可以壓縮檔案, 如非使用向量檔; 圖檔宜先經過計算, 尺寸正好即可. (可以先用螢幕量尺在網頁上畫出範圍)
剛好我在吃巧克力, 忽然想做個巧克力感覺的選單. 小肥貓一直在旁邊討吃的; 但是貓咪跟狗狗都不能吃巧克力, 切記!
當滑鼠移向巧克力球上方, 部落格名稱就滑出來.
滑鼠按下則跳出彩色泡泡的主選單. 每個彩色泡泡有按鈕功能, 可到達分類標籤.
我覺得好玩之處是, 滑鼠掠過這些泡泡會消失又繼續跑出來, 當做可憐宅宅的舒壓道具. 原本想在每個泡泡上附上音效, 應該更好玩. (似乎只能播放一次, 算了...)
不想玩泡泡時, 再按下巧克力球回到最初的靜止狀態.
你可能會有疑問：一般的選單應該攤開讓人看見才符合網路習慣.
我認為無所謂, 有發現就讓他玩; 沒注意到也就算了.
使用HTML5來呈現動畫, 需要運算與動態渲染等等技術, 適合多核心處理與較佳的圖形處理器. 選單靜止時並不會經由JSON一直做canvas運算, 對處理速度較低的裝置有利. 等到HTML5成為標準以後, 屆時處理器已經汰換了好幾代.
