Fireworks制作GIF動畫圖片教程

時間：2025-10-03 15:26:11 網頁設計

　　當我們看到一些動畫圖片的時候都會覺得和美觀和喜歡，那么它們是如何制作的呢?下面將為大家講解Fireworks制作GIF動畫圖片教程，希望對您有所幫助!

　　其實動畫的原理很簡單，就是讓圖片有秩序地輪流顯示。

　　利用Firework 3制作動畫總共有三種方法，由易到難分別為：合并已有圖片生成動畫，利用Tween Instances生成動畫和手工繪制。

　　一、合并已有圖片生成動畫

　　合并已有圖片形成動畫，顧名思義就是將一系列圖片按順序排列在不同的幀中從而生成動畫，當然，首先我們必須有一串連續的圖片，然后，在 Fireworks中，選擇菜單指令“File/Open Multiple”，這時將彈出“打開”對話框(如圖1)，進入所需圖片所在的目錄，然后按照動畫中圖片顯示的順序依次選取圖片，并單擊“Add”按鈕將這三張圖片加入到對話框下面的窗口;注意：我們還必須勾選對話框最下面的“Open as Animation”(以動畫打開)選項，不然的話，我們打開的將是三張分開的靜態圖片;最后，單擊“Done”(完成)按鈕。

　　圖1 以動畫打開

　　單擊窗口右下角狀態欄的`播放按鈕，怎么樣?效果還不錯吧!

　　現在只是一只海鷗在不停地飛，如果為它再添加一副背景，效果一定會更好，好吧，下面我們就為海鷗添加一副大海的背景。

　　添加背景的方法有兩種：自動復制和共享圖層。

　　1. 自動復制

　　圖2 添加幀

　　首先，單擊“Frames”面板右上角如圖2按鈕，選擇“Add Frames”，在彈出的對話框中選擇“Number”為1和“At the end”，單擊“ok”按鈕。

　　圖3 編輯模式狀態

　　然后將畫布的大小改為200x150(Pixels);接下來，打開背景圖片，發現圖片周圍有一個如圖3的邊框，說明圖片處于圖像編輯模式，選擇 “Modify/Exit Image Edit (Ctrl+Shift+D)”，使圖片進入對象編輯模式，如果想讓圖片打開時總為對象編輯模式，我們將“File/Preferences”的. “Editing”面板中“Open in Image Edit Mode”復選框前面的對鉤去掉即可。(如圖4)

　　圖4 Prefernces對話框

　　選中新添加的“Frame 4”，將背景圖片拷入其中并適當地調整一下背景圖片的位置，然后選中圖片，單擊“Frames”面板右上角如圖4按鈕，在彈出菜單中選擇“Copy to Frames”，進入“Copy to Frames”窗口，選擇拷貝范圍為：All Frames，單擊“ok”按鈕。

　　圖4 拷貝幀

　　打開“Frames”面板，我們發現前三幀的圖片都被背景圖片遮住了，單擊第一幀，然后選中畫布中的圖片，執行菜單指令“Modify/Arrange/Send”;或者單擊修改工具欄的置后工具(如圖5)，將背景圖片移到動畫圖片的.后面，其它幀同理。

　　圖5 置后工具

　　最后雙擊“Frame 4”，將它的時間延遲設置為0(如圖6)。

　　圖6 延時設置

　　至此，背景添加完畢，趕快預覽一下動畫的效果吧!(如圖7)

　　圖7 動畫效果圖

　　2. 共享圖層

　　共享圖層就是使用“Layers”圖層面板，將指定的背景圖片設定為共享圖層，如此即可在所有的幀中看到該背景。

　　我們有時可能會誤認為每一幀都擁有一個圖層，其實不論設定的幀有多少，這些幀都位于同一圖層上，只是出現的時間不同罷了。

　　下面我們就利用此方法為剛才的動畫添加一個背景：首先，將畫布的大小改為200x150(Pixels)，然后開啟“Layers”圖層面板，單擊“Layers”圖層面板右上角如圖按鈕，選擇“New Layer”，在彈出的.“New Layer”對話框中，為新層起一個名字，例如：background，鉤選“Share Across Frames”復選框，單擊“ok”按鈕，“background”圖層就成了共享圖層，(如圖8)左鍵按住“background”圖層，將它拖到 “Layer 1”圖層下面;然后打開背景圖片，單擊“矩形選擇工具”

　　，選擇我們需要的背景，將其拷到“background”圖層的畫布中，并適當地調整一下背景的位置。好了，一切ok!