Transcript 製作GIF 動畫 - www2.chihlee.edu.tw

使用 GIF Animator
製作動畫
著作權所有 © 旗標出版股份有限公司
本章提要
20-1 什麼是 GIF 動畫
20-2 初探 GIF Animator
20-3 製作 GIF 動畫
2
GIF 動畫
3
20-1 什麼是 GIF 動畫
GIF 的全名為 Graphics Interchange
Format (圖形轉換格式), 是由美國
CompuServe 公司制定利用 LZW 之壓縮演
算法的點陣圖。GIF 格式可減少網路傳輸的
時間, 是全球資訊網所有瀏覽器中, 最常用的
影像檔格式格式之一。
單一個 GIF 檔中, 可以加入數張圖片, 並依
序播放每一張圖。開始連續播放時, 這些連
接的影像便會快速依序顯示, 因而產生動畫
的效果。
4
什麼是 GIF 動畫
5
LZW 壓縮技術
LZW 全名是 Lempel-Ziv-Welch , 此壓縮方
法可以儲存單一或多個影像, 可將影像檔縮
到很小, 而且不會破壞原始影像品質, 雖然說
GIF 是一種非破壞性的壓縮格式, 但由其他
檔案格式轉換到 GIF 格式影像時, 從全彩到
256 色的轉換過程中將會無法顯示原來所有
的影像顏色。
6
GIF 動畫與 FLASH 動畫的差異
GIF 動畫是以點陣圖所製作的動畫, 而
FLASH 動畫則是以向量圖方式處理內容, 在
製作方面, FLASH 動畫能夠製作出比GIF 動
畫更為複雜的變化 (例如可匯入聲音檔、視
訊檔等) , 但製作方式也相對的比 GIF 動畫
複雜許多。
GIF 動畫圖形在轉換壓縮後, 不會破壞原始
影像品質, 而且檔案小, 適合網路運用, 並可
製作成透明及動畫格式, 但是目前只能支援
256 色, 不適合用在相片或高彩度影像上。
7
20-2 初探 GIF Animator
在安裝好 PhotoImpact 10 後, 除了
PhotoImpact 主程式之外, 還附有一套中文
版的動畫製作軟體 - GIF Animator 5.05, 您
可以使用這套軟體來製作動畫, 請執行『開
始/所有程式/Ulead PhotoImpact 10/Ulead
GIF Animator 5.05』命令來開啟。
8
啟動精靈
啟動 GIF Animator 之後, 畫面上會出現一個
啟動精靈交談窗, 讓您選擇建立空白動畫或
是開啟現有的影像檔；我們先開啟一個現成
的範例檔, 以方便各位認識 GIF Animator 的
操作環境。
9
啟動精靈
10
啟動精靈
11
認識 GIF Animator 的工作環境
12
認識 GIF Animator 的工作環境
A.工作區：含有 3 個頁次。
編輯頁次：顯示目前被選取的畫格內容, 也就是
您編輯動畫的主要區域。
最佳化頁次：在最後要輸出成 GIF 動畫時, 可協
助您將動畫進行壓縮與精簡, 並把原來全彩模式
的圖片轉換成 256 色的 GIF 格式。
預覽頁次：用來播放目前的動畫成果 (以 256 色
模式預覽, 模擬 GIF 動畫在網頁上的情形), 以方
便您在編輯的同時立即做修正。預覽完畢後只
要切換到其它頁次, 便會停止播放。
13
認識 GIF Animator 的工作環境
B.工具面板及屬性工具列：此面板中提供了一
些基本的影像編輯工具, 您可在此對每一個
畫格裡的圖片進行修改, 不必回到
PhotoImpact 中處理。
C.物件管理員面板：用來管理此動畫中的所有
物件, 例如選取物件、顯示或隱藏物件、為
物件加上陰影等...；您可以利用此面板來控
制每個物件要顯示在哪些畫格中。
14
認識 GIF Animator 的工作環境
D.畫格面板：就像是一卷電影底片, 將動畫內
的每個畫格顯示成縮圖, 由左至右便是此動
畫的播放順序。選取某個畫格之後, 它裡面
所包含的物件就會顯示在上方的工作區內,
而物件管理員中的對應物件則會出現眼睛圖
示。
15
20-3 製作 GIF 動畫
大致瀏覽過工作環境後, 接著就要來製作動
畫了, 前面曾提到過, GIF 動畫是由一張張圖
片組合而成的, 所以我們要先做好前置作業,
那就是準備好連續動畫所需的每張圖片 (這
裡是使用練習檔 20-01.jpg ~ 20-06.jpg), 請
把它們匯入到 GIF Animator 中進行整合。
16
製作 GIF 動畫
1. 首先在一般工具列中按下開新檔案鈕, 建立
一個空白的動畫檔。
17
製作 GIF 動畫
2. 按下一般工具列中的新增影像鈕 。
18
製作 GIF 動畫
3. 選擇將要做成動畫的圖檔, 並匯入。
19
製作 GIF 動畫
4. 匯入圖片後, 發現圖片超過編輯區, 這時候
請在物件管理員面板中選擇尺寸最大的圖
片, 然後執行『編輯/剪裁底框』命令 , 這
樣底框尺寸就會跟最大尺寸的圖片吻合了。
20
製作 GIF 動畫
21
製作 GIF 動畫
5. 圖片尺寸跟底框尺寸吻合了, 但圖片還是超
過編輯區, 為了讓編輯時可以直接瀏覽到全
圖以方便作業, 請執行『檢視/拉遠』命令
中的 1/2x 選項, 將圖片倍率縮小二分之一,
這樣你就能夠看到圖的全貌了。
22
製作 GIF 動畫
23
製作 GIF 動畫
6. 接下來你可以按下畫格面板中的播放動畫
鈕, 在播放過程中可以很清楚的在編輯區發
現到, 循環播放中突然會出現空白的畫面,
那是因為在畫格 1 的地方是空白的, 請選
取空白畫格並按下 [Delete] 鍵, 即可刪除。
24
製作 GIF 動畫
7. 雖然已經刪除多餘的畫格, 可是播放後會感
覺速度太快, 請選取畫格 1 並按滑鼠右鈕,
選取『畫格內容』命令, 在延遲項目中填入
50 , 以相同的方式更改畫格 6 的延遲時間
值為 30, 調整完畢後請再次按下播放動畫
鈕, 你就會感覺到圖片中的人物, 比較像是
在做起跳時的準備動作, 及落地稍微休息動
作。
25
製作 GIF 動畫
26
製作 GIF 動畫
27
製作 GIF 動畫
8. 最後請執行『檔案/另存新檔/GIF檔』命令,
命名完畢後按下儲存鈕存檔, GIF動畫就完
成了。你可以開啟書附光碟中的 2001A.gif 圖檔做對照。
28
增加、位移畫格
增加圖片：若想在目前畫格後面再加入圖片,
可以按下新增影像鈕後, 選擇要增加的圖片
加入畫格。
位移畫格：對於匯入的圖片, 欲更動其順序
時, 可用滑鼠拉曳畫格的方式, 來更改播放順
序。
29
儲存成其它格式
儲存成 UFO 檔：將目前所選取的畫格內容
存成 PhotoImpact 專用圖檔格式, 畫格中的
每個物件都會保留下來, 不會合併, 方便再次
的編輯。
儲存成 PSD 檔：將目前所選取的畫格內容
存成 Photoshop 專用圖檔格式, 畫格中的每
個物件將會放置在個別的圖層 (Layer), 不會
合併在一起。
30
儲存成其它格式
儲存成影像畫格：將每個畫格一一儲存成單
獨的 JPG 或 PNG 圖檔。
儲存成視訊檔：將整個動畫內容轉成視訊影
片, 可儲存成的格式包括 AVI、MPEG 、
MOV 等格式。
儲存成 Macromedia Flash (SWF)：能將
整個動畫內容輸出成 Flash 的 SWF 格式動
畫檔, 可直接放在網頁上, 用瀏覽器來播放。
31