與作者聯繫

動畫世界：GIMP

內容摘要： 本專欄中， 我們來談點簡單的技巧，用 Gimp 處理動畫。

阿囉哈！ 歡迎再度來到 GIMP 動畫世界。 這一次， 我想來點特別的， 不再追著使用手冊跑。 我想秀一下 GIMP 展現動畫的功力。 不會很難， 別擔心。 不但如此， 這些技巧還很有實用價值哦！

來， 古今第一問， 何謂動畫? 耶，別小看， 動畫這兩個字可是從拉丁文衍生出來的， 代表著生命， 或是不朽的靈魂。 動畫不是靜止的圖像， 彷若有生命的實體。 這就是說大部份活著的生物都有一個共同的特徵， 那就是都會動。 你想想， 還有什麼方法會比讓一張圖像產生動態的效果， 要來得富有生命的感覺呢?

你可能不曉得， 過去藝術家製作動畫的傳統方法， 就是實際製作出許多張所需的圖像。 每一張圖像代表某一場景不同時間的照片， 就好像有人拿著照像機對著這個場景， 不斷地拍照一樣， 得到數張時間連續的圖像。 這樣的圖像， 我們稱為圖框 (frame)。 這些圖框會按時間順序來排列， 從最早時間的圖框排到最晚時間的圖框， 如一部編年史。 所謂的動畫， 就只是把這些圖框， 如流水般播放出來而形成的動態效果而已。 只要播放的速度恰當， 動畫看起來會非常的真實。 動畫播放的速率一般稱作「圖框比率 (frame rate)」， 衡量的時間單位常常是每秒幾張圖框。 現在， 我們來看看 GIMP 在傳統方法上， 提供了那些工具。

如果沒記錯的話， 前兩次談 GIMP 時， 都有提到 GIMP Layers 的各種功能和用法。 我們已經能應用多層圖層 (layers) 靈巧地處理各式各樣的圖像； 也許你不相信， Layers 的功能對我們這一次的主題 -- 動畫而言， 仍然扮演了舉足輕重的角色。 簡單的講， 每一層圖層都是一張單獨的圖框。 要播放動畫， 選 filter 選單中的選項 Animation Playback 就可以了。 最後一層圖層的圖框， 就是播放動畫時最先執行的圖框； 也就是說， 動畫會從最底層的圖層開始依序往前播放。 現在， 我們先弄個小小的範例， 來說明動畫的製作。

呵！ 今夜偶然憶起昔日 Microsoft 充滿 80 年代風格的批次作業， 真真令人又愛又恨。 如果話說錯了， 請別見怪， 這不是淘氣， 只是覺得有點可愛， 嗯， 反正我現在就是想做個跟 Microsoft 有關的動畫嘛。 第一步是先建好 Microsoft 的商標， 白底黑字。 找來找去， 只有 "Eras" 字型和真正 Microsoft 的商標長得最像。 "Eras" 字型沒有斜體字， 不然， 我敢打包票， 一定和 Microsoft 字型沒什麼兩樣。 盡量逼真就夠了， 不用要求完美吧！

現在要做的是秀出 Microsoft 商標飄飄墜墜的美感。 先打開 Layers & Channels 對話盒， 點選 Duplicate Layer 鈕， 圖層會再複製出另一層， 我會稍微修改這層位於最上面一層的新圖層。 接著再點選這一圖層， 確定這一層是當前的工作圖層。 然後是從 toolbox 中選 Rectangular Select tool。 接著是到 image 視窗選 Microsoft 商標的最後一個字母‘t’， 用選擇框把‘t’圍起來。 選了之後， 選擇框的框框會像行進中的螞蟻一樣在動， 很有動感。 如果你把滑鼠的游標移到這個方框裡面， 滑鼠的游標會變成十字形的游標。 這表示你可以點選這個選擇框， 也可以在螢幕上拖著選擇框到處跑。 而我要做的是把這個‘t’字母往下拉大約 5 個圖點左右。 最後， 按組合鍵 Ctrl + H， 新移的位置就成了。

接下來回到 Layers 對話盒， 再複製第三層圖層， 記住是在最上面的一層做這件事， 以此例而言， 就是剛才修改過的第二層圖層。 接著再點選第三層圖層， 讓它成為工作圖層， 然後再從 toolbox 選 Rectangular Selection tool， 再回 image 視窗。 接著我選商標最後兩個字母‘f’和‘t’， 把這兩個字母往下移大約 5 點圖點左右。

現在還看不出效果， 不過字母已經有逐漸往下降的趨勢了。 為了讓商標能秀出完美的波浪動畫， 我們得不停地複製圖層， 每一次多選一個字母， 每次都移動差不多 5 點圖點左右。 基本上， 我是希望做到所有的字母都選過了為止。

要注意， 可能有問題會出現。 當我們在上層圖層工作時， 把下面的圖層關掉， 是最好的方法。 只要把 Layers 對話盒中該層圖的 eye icons 關掉， 那一層圖層就被關掉了。 另外， 當你把某一選擇框往下移時， 任何一塊被覆蓋的面積有可能會變成透明的。 這種情況下， 你得選 pencil 或是 paint brush 再上色一遍。

整個過程結束之後， 我得到了 15 張圖框。 我重新替每張圖框命名， 並替每張圖框編上編號 (在每張圖框的 text 上面 double click 就可以改了)。 你可以把 milliseconds 的時間值， 用小括弧圍起來加到每一層圖層的 title 裡， Animation Playback filter 會以你所定的時間來顯現圖框。 這樣一來， 你就可以控制動畫的圖框比率了。 圖框比率不必是常數值， 每一張圖框可以有不同的比率。 以這個商標例來講， 我用的是 50 millisecond 的延遲時間， 每一張圖框喔。

現在我們有了小小的動畫， 展現如波浪般浮沉不定的 Microsoft。 接著是把做好的動畫儲存起來， 以便於置放到網頁上去。 GIMP 有提供 GIF 的動畫檔案格式， 是瀏覽器最能接受的動畫格式。 儲存前， 得再確定圖像的色彩格式是 indexed 的， 而不是 RGB 的。 視窗的 title 會告訴我們這項訊息， 括弧裡會顯現出來。 如果說的是 RGB， 不是 indexed， 你得在 image 視窗上按滑屬右鍵， 得到功能表， 然後選 Image -> Indexed。 選了之後， GIMP 會告訴我們 255 種顏色或是較少的顏色量已經最佳化了， 如果我們正在做 GIF 格式的動畫。 選 Indexed 會得到一個 Index Color Conversion 對話盒， 我們可以從對話盒裡改變一些跟顏色轉換有關的選項。 我用預設值， 點選了 OK 鈕。 Title 欄會秀出圖像的顏色已經改成 indexed 的格式了。

現在， 就是儲存圖像的最佳時刻了。 讓我們回到 image 視窗， 按滑鼠右鍵， 得到功能表。 選 File -> Save As， 會得到 Save Image 對話盒。 然後選儲存檔案的目錄路徑， 輸入檔案名稱 DownfallOfMicrosoft.gif， 然後點 OK 鈕。 GIMP 會自行認定該檔的檔案格式為 GIF， 並顯示 Save As GIF 對話盒， 可以讓我們選些跟 GIF 格式有關的選項。 你可以選擇把檔案存成交錯格式， 加一些註解到檔案裡頭， 讓 GIF 檔的動畫播放不止， 設定圖框間的延遲時間， 決定圖框間在動畫播放期間如何互動等。 這些選項使用與否全在於你自己， 不妨試驗看看， 怎樣做才有最佳的動畫效果。

那麼， 這裡就是我的動畫了。 很簡單吧！ 如果創造力夠的話， 循著這套步驟， 你可以做的更多。 其實， 也可以做 Linux 商標的動畫； 我只希望不會收到一些 Microsoft 律師的警告信函。