自己做 Firefox APNG 動態面板

ADVERTISEMENT

合成動畫與發佈

四格畫面都畫好之後,接下來就是送進可編輯APNG的軟體合成了,我們挑的是APNG Anime Maker,它的操作很呆板,一張一張送進來,個別參數設好,按「save」輸出,完畢。我們就只調整每個畫格的時間,還有Dispose和Blend的模式,畫格時間很好理解,應該不用多解釋,Blend則是混色,由於我們的二~四格只記錄有變化的部份,所以要選「Over」,Dispose則是決定要不要清除緩衝區的資料,這裡我們要選「Previous」,混色的結果才不會一直疊上去讓下一格跑不出來。

自己做 Firefox APNG 動態面板

▲先到cphktool網頁下載APNG Anime Maker,將捲軸拉到底就會看到打包好的RAR壓縮檔。

自己做 Firefox APNG 動態面板

▲按Open,依序把第一到第四格的圖片叫進來。

自己做 Firefox APNG 動態面板

▲第一格只要把Delay改成1000,按下msec鈕就好了。

自己做 Firefox APNG 動態面板

▲第二~第四格除了Delay改300,還要把Dispose和Blend依序改為Previous和Over。

自己做 Firefox APNG 動態面板

▲確定左側工作區的資訊都設對了,就可以按Save輸出。

自己做 Firefox APNG 動態面板

▲發表到Personas官網前,可以先丟進Firefox看看效果。

接下來回到剛剛的Personas說明頁面,就可以直接跳到上傳面板的程序了。前提是你得先註冊一個Personas帳號,這部份就請大家自己操作。從上傳到張貼似乎有一小段審核的時間,等不及的話,可以直接把檔案丟到本機的設定檔目錄下:「%appdata%\Mozilla\Firefox\Profiles\XXX.default」,名稱改成Persona本機快取預設的lightweighttheme-header(或footer),「.png」副檔名去掉,重啟瀏覽器就會生效。

我們臨時趕出來的Persona做得有點失敗,機器人頭像和分頁標籤上的字會互相干擾,這部份應該可以藉由調整字體和陰影顏色來改善,更精采的面板就有待各位大師創作了。

自己做 Firefox APNG 動態面板

▲設計好了之後,按說明頁面右側的「Finished Your Design?」即可開始上傳。

自己做 Firefox APNG 動態面板

▲同意使用條款後,依序輸入面板名稱、分類、字體顏色等資訊,再上傳header和footer圖片,按「submit」就算完成了。

自己做 Firefox APNG 動態面板

▲這就是我們完成的機器人拋媚眼面板,滑鼠移過就可以看到動畫效果,改天應該好好做一個T可愛面板比較稱頭。

黑眼bobo
作者

寫了超過十年的稿,以後還想繼續寫

使用 Facebook 留言
黑眼bobo
4.  黑眼bobo (發表於 2011年1月21日 15:19)
現在的製作方法還太冷門了啊,如果是要大家分享自己的Firefox配置或擴充套件,門檻應該會低很多
黑眼bobo
6.  黑眼bobo (發表於 2011年1月22日 10:22)
※ 引述《小Peggy》的留言:
> 想看一下成品動態圖片動起來的樣子耶
>
> 不過看步驟覺得好難.....囧rz
>

用Firefox開啟最後一張圖的圖說連結就看得到了,反正本來就只有Firefox和Opera支援... 囧rz
發表回應
謹慎發言,尊重彼此。按此展開留言規則