本小節中我們看看怎樣使用Fireworks MX 2004設計一張GIF動畫Banner，以一個宣傳天柱山的Banner為例，主要熟悉Fireworks中幀面板、動畫、元件等工具的使用方法。文章末尾提供.png檔案供大家下載參考。
完成效果如圖：
（1） 建立一個大小為468×60的檔案，設定其畫布顏色為透明，並匯入一幅汽車的位元影像映像，得到圖1所示的映像。
圖1 建立檔案並匯入映像
（2） 選中這幅汽車映像，單擊【修改】菜單，選擇【元件】|【轉換為元件】，這時候會跳出元件屬性對話方塊，將這個圖形檔案命名為"汽車圖 1"，如圖2所示。
圖2 將映像轉換為圖形元件
（3） 單擊【確定】，這時候位元影像映像就已經轉換為了圖形元件了，如圖3所示。選中這個圖形元件，單擊【修改】菜單，選擇【動畫】|【選擇動畫】，跳齣動畫對話方塊，在其中設定幀數為10，移動到380，如圖4所示。
圖3 位元影像轉換為圖形元件
圖4 設定動畫屬性 圖5 彈出對話方塊
（4） 單擊【確定】，這時候跳出圖5所示的對話方塊，詢問是否添加新幀，選擇【確定】，這時候在幀面板中就已經添加了新幀，得到圖6所示的動畫元件映像。
圖6 動畫元件映像
（5） 預設的幀延時的時間太短，可以將前面9幀幀延時設為10，第10幀的幀延時設為35來控制汽車運動的效果。為了將第10幀的映像始終能夠顯示在這個GIF動畫上，所以有必要將第10幀的映像效果複製到後面的所有幀中去。設計這幅動畫共有30幀，所以後面的20幀中都需要有這個第10幀中的汽車映像。這裡要調用庫中的圖形元件來實現所有幀中都有第一幅汽車圖的效果。開啟幀面板，建立一幀，設定其幀延時為10。單擊幀面板的洋蔥皮工具，在快顯功能表中選擇【之前和之後】，這樣在編輯第11幀時就能夠看到第10幀的汽車映像了。單擊【視窗】，選擇【庫】，開啟了庫面板。發現庫面板中有一個動畫元件和開始儲存的名為"汽車圖形 1"的圖形元件，如圖7所示。
圖7 庫面板
（6） 從庫面板中拖動圖形元件到畫布之中，使其和第10幀的汽車圖形完全對齊。得到第11幀的映像，如圖8所示。
（7） 選中第11幀，在幀面板中單擊 按鈕，在快顯功能表中選擇【重製幀】，在彈出對話方塊中設定幀的數量為9，如圖9所示。
圖9 複製第11幀
（8） 選中第11幀，匯入另外一幅汽車映像，如圖10所示。
圖10 匯入另外一幅汽車映像
（9） 同樣單擊【修改】菜單，選擇【元件】|【轉換為元件】，在元件屬性對話方塊，將這個圖形檔案命名為"汽車圖 2"，如圖11所示。
圖11 將映像轉換為圖形元件
（10）單擊【確定】，這時候位元影像映像就已經轉換為了圖形元件了。選中這個圖形元件，單擊【修改】菜單，選擇【動畫】|【選擇動畫】，跳齣動畫對話方塊，在其中設定幀數為10，移動到290，得到圖13所示的映像。
圖12 第二個動畫元件
（11）設定第20幀的映像幀延時為35，11幀到19幀幀延時為10。然後建立一幀並設定幀延時為10，從庫面板中拖動"汽車圖1"和"汽車圖2"到畫布之上，使其和第20幀中映像完全對齊，如圖14所示。
圖13 第21幀映像
（12）選擇第21幀，和第7步一樣，將其重製9次。在21幀中匯入第三幅汽車圖，只將車的前半部分放在畫布之中，好像車子是逐漸開進來的一樣。接下來和前面一樣，將它轉化為圖形元件，並設定動畫效果，設定其幀數為10，移動為100即可，如圖15所示。
圖14 匯入第三幅汽車圖並設定動畫
（13）將"汽車圖 3"元件拖到第30幀中並與動畫元件對齊。接著為映像添加兩個小圓形和一個圓角矩形，並在矩形中添加"我也要去天柱山"幾個字來增強效果，如圖16所示。
圖15 第30幀映像
（14）將第30幀幀延時設為200即可，讓它的顯示時間長一些。最後儲存這個檔案並將其匯出為一個GIF檔案，這樣在個人網頁中就可以使用這個GIF圖片了。 .png檔案下載
