自己做 Firefox APNG 動態面板
上次我們刊出〈為什麼你的 Firefox 面板會動？〉，解釋了APNG這個新的動畫格式，現在就來實際動手做一遍試試看吧。目前APNG的編輯工具不是很完善，你得單格單格的設計好，再送進編輯軟體合成動畫，所以必須要額外準備一套支援圖層的影像處理軟體，並且對圖層的運用有一定的概念才可以。
▲先連上Personas面板的官網，按上方的「Create Your Own」。
▲接下來依序會有製作header和footer的說明。
Personas官網上的教學很清楚簡單，位在上方的header面板圖解析度必須是3000 x 200像素，接受PNG和JPG檔，建議是柔和、反差小、漸層上色的圖形，檔案大小不要超過300KB。底部的footer也適用類似的原則，差別只在解析度改為3000 x 100像素。
了解基本格式之後，比較困難的部份其實是在「構思」，也就是這麼長的一張畫布上面到底要擺什麼東西？這裡我們不會在「美學」的部份卡關太久，只會告訴大家要完成一張「會動的」、「正確的」Persona面板應該怎麼做，所以等一下各位發現我們的作品很醜的時候，請不要笑的太大聲。
我們簡單的構想是這樣的，Mozilla建議header影像的重點畫面要擺在右側，所以小編直接拉一顆很久以前塗鴉的機器人頭像放在這個位置，如果畫面動的太誇張，會干擾使用者的操作，我們就設定讓機器人拋個媚眼，也就是只有眼睛動一動就好了。至於footer的重點畫面跟header相反，是在左側，這裡我們就先直接跳過。
▲謎之機器人眨眼四連拍。
（下一頁：四個畫框的影像處理）
四個畫框的影像處理
確定畫面之後，就是打開繪圖軟體實際畫出來了，如果你的動畫總共要由四個畫框（frames）來構成，那麼Photoshop編輯的結果就是把這四張圖都畫好存出來。但是因為Personas面板有300KB的大小限制，加上檔案太肥大會影響到預覽和載入的效率，所以這四張圖建議不要「整張畫滿滿」，第二～四格只要記錄「有變化」的部份就好。
對於不熟悉影像處理的人來說，以上的做法看起來好像有點吃力，其實也沒有那麼困難，只要哪個區域的顏色會有變化，就開一個新圖層，把變化之後的色塊塗上去即可，其他部份保持透明不要上色。輸出的時候，把「底圖」關掉，只顯示「有變化」的部份就可以了。
▲塗上底色和機器人未眨眼之前的頭像，當成第一張畫面。
▲眨眼的時候右眼會緊閉，所以畫一塊綠色把原本的眼睛遮住，再畫一段眨眼的黑色。
▲輸出二～四格的時候把底圖圖層旁邊的眼睛關掉，只輸出有變化的部份就好。
▲Photoshop選「File＞Save for Web & Devices」就會進入PNG輸出視窗。
▲實際輸出的二～四格局部畫面。
（下一頁：合成動畫與發佈）
合成動畫與發佈
四格畫面都畫好之後，接下來就是送進可編輯APNG的軟體合成了，我們挑的是APNG Anime Maker，它的操作很呆板，一張一張送進來，個別參數設好，按「save」輸出，完畢。我們就只調整每個畫格的時間，還有Dispose和Blend的模式，畫格時間很好理解，應該不用多解釋，Blend則是混色，由於我們的二～四格只記錄有變化的部份，所以要選「Over」，Dispose則是決定要不要清除緩衝區的資料，這裡我們要選「Previous」，混色的結果才不會一直疊上去讓下一格跑不出來。
▲先到cphktool網頁下載APNG Anime Maker，將捲軸拉到底就會看到打包好的RAR壓縮檔。
▲按Open，依序把第一到第四格的圖片叫進來。
▲第一格只要把Delay改成1000，按下msec鈕就好了。
▲第二～第四格除了Delay改300，還要把Dispose和Blend依序改為Previous和Over。
▲確定左側工作區的資訊都設對了，就可以按Save輸出。
▲發表到Personas官網前，可以先丟進Firefox看看效果。
接下來回到剛剛的Personas說明頁面，就可以直接跳到上傳面板的程序了。前提是你得先註冊一個Personas帳號，這部份就請大家自己操作。從上傳到張貼似乎有一小段審核的時間，等不及的話，可以直接把檔案丟到本機的設定檔目錄下：「%appdata%\Mozilla\Firefox\Profiles\XXX.default」，名稱改成Persona本機快取預設的lightweighttheme-header（或footer），「.png」副檔名去掉，重啟瀏覽器就會生效。
我們臨時趕出來的Persona做得有點失敗，機器人頭像和分頁標籤上的字會互相干擾，這部份應該可以藉由調整字體和陰影顏色來改善，更精采的面板就有待各位大師創作了。
▲設計好了之後，按說明頁面右側的「Finished Your Design？」即可開始上傳。
▲同意使用條款後，依序輸入面板名稱、分類、字體顏色等資訊，再上傳header和footer圖片，按「submit」就算完成了。
▲這就是我們完成的機器人拋媚眼面板，滑鼠移過就可以看到動畫效果，改天應該好好做一個T可愛面板比較稱頭。
