為什麼你的 Firefox 面板會動？
跨年歡樂的煙火彷彿還沒散去，年關的氣味又已經緩緩飄起，可惜對於身負兩本雜誌出刊重任的編輯部來說，現在就已經開始水深水熱的截稿。不過不管怎麼說，大過年的總要應應景，幫瀏覽器變個裝應該也是個不錯的點子，最近小編發現了幾個Firefox面板是「會動的」，你知道是怎麼做到的嗎？
▲如果是從附加元件視窗去尋找「更多佈景主題」，要再按這裡才是面板的主頁。
▲由於Personas是由擴充套件發展而來的，所以這裡還有另一個入口。
▲只要滑鼠移過面板圖片就可以預覽套用後的效果。
Firefox面板的英文名稱是Personas，是一種輕量的佈景主題，簡單的說，只是把瀏覽器操作介面下的底圖換掉而已，所以門檻十分低。而Firefox跟Personas各自都有面板的下載網頁，看起來資源也都差不多，差別是Firefox官網提供了中文使用介面。
▲這個閃電特效的動態面板，會由左至右劃過天際。
▲雖然萬聖節早就過了，不過這個面板的配色和右邊的蜘蛛動畫很有趣。
▲這個寫輪眼轉啊轉的卡卡西面板實在太酷了。
▲肚子會變大變小的Snoopy睡午覺面板，小編現正套用中。
比GIF更漂亮的APNG
為什麼會有動態面板呢，這是因為Firefox面板支援APNG這個進階的動畫格式。APNG主要是為了取代陽春的GIF發展出來的，如果有玩過GIF動畫的人，應該知道GIF只有256色，雖然可以支援透明背景，但是透明度只有透明、不透明兩種變化。簡單的說，就是套用在複雜背景的時候效果會很粗糙，文字說起來複雜，看看底下Mozilla所製作的示範網頁應該會更清楚：
▲示範網頁會先以一張小圖來測試你的瀏覽器能不能支援APNG。
▲網頁中間有一段GIF（第一排）和APNG（第二、三排）的對比。
剛剛提到了GIF的限制，再來比對一下APNG的優點，基本上可以把APNG視為PNG的動態版，所以它支援24位元的影像與8位元的透明度，也就是顏色更豐富，透明度變化更多，可以呈現半透明或漸層的邊緣效果。
從示範網頁來看，第一排的GIF在有色背景下，恐龍邊緣會出現不該出現的鋸齒狀邊線，另外恐龍本身的顏色也有一些斑點狀、不連續的色塊。至於APNG的版本除了恐龍的「皮膚」質感更滑嫩，邊緣還有一小圈光暈的效果。
APNG的發展瓶頸
既然APNG這麼棒，以後大家都改用APNG取代GIF不就好了？可惜APNG目前的應用並不普及，甚至有點到了冷門的地步。支援APNG的瀏覽器只有Firefox和Opera，其他瀏覽器看起來都沒有想支援的打算，另外Firefox操作介面上的小動畫，例如網頁載入時分頁標籤上的甜甜圈也是APNG，這是因為最早APNG就是為了儲存瀏覽器介面上的動畫，而被Mozilla所創造出來的。
APNG的另一個問題，就是缺乏主流的繪圖軟體支援，教學資源也十分匱乏，小編試用了其中還算可以搬上檯面的GIMP外掛，弄了半天也搞不懂它的製作流程是什麼，而且目前的製作工具不像GIF、Flash，有針對動畫設計的視覺化編輯功能，而是得「一格一格」的自己土法煉鋼。
如果你剛剛已經套用一些動態面板的話，Firefox設定檔裡頭就會底圖快取下來，設定檔的位置是在「%appdata%\Mozilla\Firefox\Profiles」底下，裡頭有個「XXX.default」的資料夾便是，裡面會有兩個「lightweighttheme-」為首而命名的檔案，就是現成的APNG練習題了。
▲在Firefox設定檔目錄找到「lightweighttheme-header」、「lightweighttheme-footer」兩個檔案。
▲複製出來並且加上副檔名「PNG」，就可以看到APNG的真面目。
▲GIMP並不是裝好外掛就可以直接偵測出APNG，要手動選取檔案格式才行。
▲用APNG格式打開後，會發現一共是有四個畫格的連環圖。
由於APNG檔的第一個畫格會被儲存為一般的PNG檔串流，所以當你用不支援APNG的影像打開，便出現不會動的一般PNG檔了。這個「向下相容」的特性似乎是它的優點，但是應用軟體並沒有辦法簡單判別圖檔是一般PNG或動態APNG，它們的副檔名都是PNG，這也造成APNG發展的限制。
撇開APNG不夠普及和難以製作的問題，動態的Firefox面板還是相當好玩的，也許之後會有人研發更好的動畫格式和編輯工具，不過這些就留給程式人員去傷腦筋吧。
- 延伸閱讀：
- 維基百科的APNG條目：http://en.wikipedia.org/wiki/APNG
- GIMP繪圖軟體：http://www.gimp.org/
- GIMP APNG外掛：http://registry.gimp.org/node/24394
- Firefox的APNG編輯外掛之一：https://addons.mozilla.org/en-US/firefox/addon/apng-edit/
- Firefox的APNG編輯外掛之二：
- https://addons.mozilla.org/en-US/firefox/addon/animat/
