跨年歡樂的煙火彷彿還沒散去,年關的氣味又已經緩緩飄起,可惜對於身負兩本雜誌出刊重任的編輯部來說,現在就已經開始水深水熱的截稿。不過不管怎麼說,大過年的總要應應景,幫瀏覽器變個裝應該也是個不錯的點子,最近小編發現了幾個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/