Banner，一般翻譯為旗幟廣告、橫幅廣告等。Banner是網站用來作為盈利或者是發布一些重要的信息的工具。Banner在設計上應該要做到制作美觀、方便點擊、與網頁協調和整體構成合理。

　　本文中我們用Fireworks來制作一個變色的Banner，從中我們可以掌握符號（symbol）的使用、補間實例動畫（tween instance）的制作、層(Layers)和幀(Frames)的基本用法，結尾進行精彩的技巧總結。文章末尾提供原文件供大家下載參考。
 
　　完成效果如下： 
Banner制作具體過程
　　（1）首先我們新建一個大小為468×60的文件，并設置畫布顏色為黑色，如圖1所示。 
 

圖1 新建一個文件
　　（2）然后我們導入一個要進行變色效果的位圖文件，如圖2所示。當然我們同樣可以使用繪圖工具繪制這個圖像，這里是為了方便講解選用外部圖像的。 
 

圖2 導入位圖
　　 （3）選中該幅圖像按Ctrl＋Shift＋D兩次，克隆圖像兩次。然后選中其中的一幅圖像，點擊“Filters”，選擇“Adjust Color”>>“Hue/Saturation”，這時在彈出對話框中調整色調的值，如圖3所示。同樣方式調整另外一幅圖像的顏色，最終得到圖4所示的圖像效果。
 

圖3 調整色調

圖4 對克隆對象實行變色效果后的圖像
　　 （4）選中其中的一個圖片如左邊的紫色圖片，按快捷鍵F8或者右鍵在彈出菜單中選擇Convert to Symbol準備將圖像轉換為符號。在彈出的對話框內為符號命名并選擇動畫符號(Animation)，如圖5所示。

圖5 將圖像轉換為符號 （5）點擊“OK”之后會彈出動畫設置的對話框，如圖6所示。我們暫時對它不做設置。

圖6 動畫設置對話框
　　 （6）單擊“OK”，這時回到工作區中，我們在畫布上會看到帶箭頭的虛線邊框的符號，如圖7所示。使用同樣方式將另外兩幅圖像轉換為符號，并分別命名為Symbol 2和Symbol 3，然后將三個符號都刪除掉。

圖7 位圖轉換為動畫符號的效果
　　（7）我們再在Banner的左邊加些圖片并做適當調整使Banner更加生動，如圖8所示。

圖8 在Banner左邊添加圖片 （8）接著我們點擊“Window”菜單，分別把“Layers”、“Frames”和“Library”三個面板打開，為了我們將來創建動畫服務。在Layers（層）面板中選中Layer 1圖層雙擊鼠標給圖層命名為Background，并選中“Share across frames”復選框即共享這個圖層，如圖9所示。

圖9 命名并共享圖層

  （9）單擊層面板右下角的按鈕新建一個圖層。然后將如圖10所示的Library（庫）面板中的Symbol 1拖到畫布中去，并放置到Banner的最右角，如圖11所示。同時記住它屬性面板中的位置信息（X：282，Y：0）。 

圖10 Library面板

圖11 將符號拖到畫布上
　　 （10）選中這個符號，然后點擊 “Modify”菜單，選擇“Animation”>>“Settings... ”，在彈出的動畫對話框設置幀數為10，如圖12所示。

圖12 設置動畫參數 （11）單擊OK，這時彈出圖13所示的對話框，詢問是否要自動添加幀。

圖13 提示是否自動添加幀的對話框
　　（12）選擇OK這時候我們發現幀面板中出現了10個幀，如圖14所示。

圖14 幀面板中出現了新幀 （13）接著使用同樣方式新建一個圖層3，并將Symbol 2拖到場畫布中，符號的位置應當Symbol 1的位置一樣，即都為X：282，Y：0。點擊 “Modify”菜單，選擇“Animation”>>“Settings... ”，在彈出的對話框設置動畫同樣是10幀，但是將透明度由0變到100，如圖15所示。

圖15 設置動畫屬性
　　（14）點擊“OK”即可。我們這時候發現第一幀的層面板如圖16所示。圖