banner，一般翻譯為旗幟廣告、橫幅廣告等。banner是網(wǎng)站用來(lái)作為盈利或者是發(fā)布一些重要的信息的工具。banner在設(shè)計(jì)上應(yīng)該要做到制作美觀、方便點(diǎn)擊、與網(wǎng)頁(yè)協(xié)調(diào)和整體構(gòu)成合理。

　　本文中我們用fireworks來(lái)制作一個(gè)變色的banner，從中我們可以掌握符號(hào)（symbol）的使用、補(bǔ)間實(shí)例動(dòng)畫(huà)（tween instance）的制作、層(layers)和幀(frames)的基本用法，結(jié)尾進(jìn)行精彩的技巧總結(jié)。

　　完成效果如下：

　　（1）首先我們新建一個(gè)大小為468×60的文件，并設(shè)置畫(huà)布顏色為黑色，如圖1所示。

圖1 新建一個(gè)文件

　　（2）然后我們導(dǎo)入一個(gè)要進(jìn)行變色效果的位圖文件，如圖2所示。當(dāng)然我們同樣可以使用繪圖工具繪制這個(gè)圖像，這里是為了方便講解選用外部圖像的。

圖2 導(dǎo)入位圖

圖3 調(diào)整色調(diào)

圖4 對(duì)克隆對(duì)象實(shí)行變色效果后的圖像

圖5 將圖像轉(zhuǎn)換為符號(hào)

圖6 動(dòng)畫(huà)設(shè)置對(duì)話框

圖7 位圖轉(zhuǎn)換為動(dòng)畫(huà)符號(hào)的效果

　　（7）我們?cè)僭赽anner的左邊加些圖片并做適當(dāng)調(diào)整使banner更加生動(dòng)，如圖8所示。

圖8 在banner左邊添加圖片

圖9 命名并共享圖層

9）單擊層面板右下角的按鈕新建一個(gè)圖層。然后將如圖10所示的library（庫(kù)）面板中的symbol 1拖到畫(huà)布中去，并放置到banner的最右角，如圖11所示。同時(shí)記住它屬性面板中的位置信息（x：282，y：0）。

圖10 library面板

圖11 將符號(hào)拖到畫(huà)布上

　　 （10）選中這個(gè)符號(hào)，然后點(diǎn)擊 “modify”菜單，選擇“animation”>>“settings... ”，在彈出的動(dòng)畫(huà)對(duì)話框設(shè)置幀數(shù)為10，如圖12所示。

圖12 設(shè)置動(dòng)畫(huà)參數(shù)

　　 （11）單擊ok，這時(shí)彈出圖13所示的對(duì)話框，詢(xún)問(wèn)是否要自動(dòng)添加幀。

圖13 提示是否自動(dòng)添加幀的對(duì)話框

　　（12）選擇ok這時(shí)候我們發(fā)現(xiàn)幀面板中出現(xiàn)了10個(gè)幀，如圖14所示。

圖14 幀面板中出現(xiàn)了新幀

　　 （13）接著使用同樣方式新建一個(gè)圖層3，并將symbol 2拖到場(chǎng)畫(huà)布中，符號(hào)的位置應(yīng)當(dāng)symbol 1的位置一樣，即都為x：282，y：0。點(diǎn)擊 “modify”菜單，選擇“animation”>>“settings... ”，在彈出的對(duì)話框設(shè)置動(dòng)畫(huà)同樣是10幀，但是將透明度由0變到100，如圖15所示。

圖15 設(shè)置動(dòng)畫(huà)屬性

　　（14）點(diǎn)擊“ok”即可。我們這時(shí)候發(fā)現(xiàn)第一幀的層面板如圖16所示。圖像效果如圖17所示，一種漸變效果已經(jīng)形成了。

圖16 第一幀層面板

圖17 第一幀的效果

　　（15）下面我們就來(lái)制作第二個(gè)漸變效果了。也就是由紅色變成綠色的了。在幀面板中選擇第10幀，這時(shí)我們發(fā)現(xiàn)畫(huà)布右邊的圖像是紅色的，如圖18所示。

圖18 第10幀圖像

（16）單擊幀面板右上角的按鈕，在彈出菜單中選擇“duplicate frame”，這時(shí)彈出了復(fù)制幀對(duì)話框，我們?cè)谄渲羞x擇after current frame單選框?qū)?fù)制的幀放置到當(dāng)前幀之后，如圖19所示。

圖19 復(fù)制幀對(duì)話框

　　（17）選擇“ok”回到畫(huà)布，出現(xiàn)第11幀的圖像，這時(shí)后我們發(fā)現(xiàn)畫(huà)布變?yōu)楸尘皥D了，如圖20所示。

圖20 第11幀圖像

　　（18）此時(shí)在層面板中選中l(wèi)ayer 2，將綠色的symbol 3拖到畫(huà)布中，在屬性面板中設(shè)置與前面相同的xy坐標(biāo)。點(diǎn)擊“modify”菜單，選擇“animation”>>“settings... ”，在彈出的對(duì)話框設(shè)置動(dòng)畫(huà)同樣是10幀，這時(shí)同樣會(huì)彈出圖25所示的提示對(duì)話框。選擇“ok”這樣新的幀就被添加到了幀面板之上了，如圖21所示。

圖21 新幀被添加到了幀面板之上

　　（19）接著選擇layer 3，將紅色的symbol 2拖到畫(huà)布中，在屬性面板中設(shè)置與前面相同的xy坐標(biāo)。點(diǎn)擊“modify”菜單，選擇“animation”>>“settings... ”，設(shè)置其不透明度由100到0，幀數(shù)為10，如圖22所示，使得紅色逐漸淡去，綠色顯示出來(lái)。

圖22 設(shè)置動(dòng)畫(huà)屬性

　　（20）接著便是由綠色再變回紫色的了。同上，在幀面板中選中20幀，再添加一幀，選中l(wèi)ayer 3，將紫色符號(hào)拖到畫(huà)布中，設(shè)置透明由0到100，選中l(wèi)ayer 2，拖入綠色符號(hào)，透明度不變，幀數(shù)也是10幀。點(diǎn)擊播放按鈕瀏覽，發(fā)現(xiàn)速度快了一些，按住shift鍵選擇幀面板上的所有幀，雙擊鼠標(biāo)，設(shè)置幀延時(shí)為15/100 sec即可。下面來(lái)為banner添加文字效果。