本文中我們用Fireworks來制作一個(gè)變色的Banner，從中我們可以掌握符號(hào)（symbol）的使用、補(bǔ)間實(shí)例動(dòng)畫（tween instance）的制作、層(Layers)和幀(Frames)的基本用法，結(jié)尾進(jìn)行精彩的技巧總結(jié)。文章末尾提供原文件供大家下載參考。
完成效果如下：
?。?）首先我們新建一個(gè)大小為468×60的文件，并設(shè)置畫布顏色為黑色，如圖1所示。
圖1 新建一個(gè)文件
?。?）然后我們導(dǎo)入一個(gè)要進(jìn)行變色效果的位圖文件，如圖2所示。當(dāng)然我們同樣可以使用繪圖工具繪制這個(gè)圖像，這里是為了方便講解選用外部圖像的。
圖2 導(dǎo)入位圖
（3）選中該幅圖像按Ctrl＋Shift＋D兩次，克隆圖像兩次。然后選中其中的一幅圖像，點(diǎn)擊“Filters”，選擇“Adjust Color”>>“Hue/Saturation”，這時(shí)在彈出對話框中調(diào)整色調(diào)的值，如圖3所示。同樣方式調(diào)整另外一幅圖像的顏色，最終得到圖4所示的圖像效果。
圖3 調(diào)整色調(diào)
圖4 對克隆對象實(shí)行變色效果后的圖像
（4）選中其中的一個(gè)圖片如左邊的紫色圖片，按快捷鍵F8或者右鍵在彈出菜單中選擇Convert to Symbol準(zhǔn)備將圖像轉(zhuǎn)換為符號(hào)。在彈出的對話框內(nèi)為符號(hào)命名并選擇動(dòng)畫符號(hào)(Animation)，如圖5所示。
圖5 將圖像轉(zhuǎn)換為符號(hào)
圖6 動(dòng)畫設(shè)置對話框
（6）單擊“OK”，這時(shí)回到工作區(qū)中，我們在畫布上會(huì)看到帶箭頭的虛線邊框的符號(hào)，如圖7所示。使用同樣方式將另外兩幅圖像轉(zhuǎn)換為符號(hào)，并分別命名為Symbol 2和Symbol 3，然后將三個(gè)符號(hào)都刪除掉。
圖7 位圖轉(zhuǎn)換為動(dòng)畫符號(hào)的效果
（7）我們再在Banner的左邊加些圖片并做適當(dāng)調(diào)整使Banner更加生動(dòng)，如圖8所示。
圖8 在Banner左邊添加圖片
圖9 命名并共享圖層
（9）單擊層面板右下角的按鈕新建一個(gè)圖層。然后將如圖10所示的Library（庫）面板中的Symbol 1拖到畫布中去，并放置到Banner的最右角，如圖11所示。同時(shí)記住它屬性面板中的位置信息（X：282，Y：0）。
圖10 Library面板
圖11 將符號(hào)拖到畫布上
（10）選中這個(gè)符號(hào)，然后點(diǎn)擊 “Modify”菜單，選擇“Animation”>>“Settings... ”，在彈出的動(dòng)畫對話框設(shè)置幀數(shù)為10，如圖12所示。
圖12 設(shè)置動(dòng)畫參數(shù)
（11）單擊OK，這時(shí)彈出圖13所示的對話框，詢問是否要自動(dòng)添加幀。
圖13 提示是否自動(dòng)添加幀的對話框
（12）選擇OK這時(shí)候我們發(fā)現(xiàn)幀面板中出現(xiàn)了10個(gè)幀，如圖14所示。
圖14 幀面板中出現(xiàn)了新幀
（13）接著使用同樣方式新建一個(gè)圖層3，并將Symbol 2拖到場畫布中，符號(hào)的位置應(yīng)當(dāng)Symbol 1的位置一樣，即都為X：282，Y：0。點(diǎn)擊 “Modify”菜單，選擇“Animation”>>“Settings... ”，在彈出的對話框設(shè)置動(dòng)畫同樣是10幀，但是將透明度由0變到100，如圖15所示。
圖15 設(shè)置動(dòng)畫屬性
?。?4）點(diǎn)擊“OK”即可。我們這時(shí)候發(fā)現(xiàn)第一幀的層面板如圖16所示。圖像效果如圖17所示，一種漸變效果已經(jīng)形成了。
圖16 第一幀層面板
圖17 第一幀的效果
（15）下面我們就來制作第二個(gè)漸變效果了。也就是由紅色變成綠色的了。在幀面板中選擇第10幀，這時(shí)我們發(fā)現(xiàn)畫布右邊的圖像是紅色的，如圖18所示。
圖18 第10幀圖像
?。?6）單擊幀面板右上角的按鈕，在彈出菜單中選擇“Duplicate Frame”，這時(shí)彈出了復(fù)制幀對話框，我們在其中選擇After current frame單選框?qū)?fù)制的幀放置到當(dāng)前幀之后，如圖19所示。
圖19 復(fù)制幀對話框
?。?7）選擇“OK”回到畫布，出現(xiàn)第11幀的圖像，這時(shí)后我們發(fā)現(xiàn)畫布變?yōu)楸尘皥D了，如圖20所示。
圖20 第11幀圖像
（18）此時(shí)在層面板中選中Layer 2，將綠色的Symbol 3拖到畫布中，在屬性面板中設(shè)置與前面相同的XY坐標(biāo)。點(diǎn)擊“Modify”菜單，選擇“Animation”>>“Settings... ”，在彈出的對話框設(shè)置動(dòng)畫同樣是10幀，這時(shí)同樣會(huì)彈出圖25所示的提示對話框。選擇“OK”這樣新的幀就被添加到了幀面板之上了，如圖21所示。
圖21 新幀被添加到了幀面板之上
?。?9）接著選擇Layer 3，將紅色的Symbol 2拖到畫布中，在屬性面板中設(shè)置與前面相同的XY坐標(biāo)。點(diǎn)擊“Modify”菜單，選擇“Animation”>>“Settings... ”，設(shè)置其不透明度由100到0，幀數(shù)為10，如圖22所示，使得紅色逐漸淡去，綠色顯示出來。
圖22 設(shè)置動(dòng)畫屬性
?。?0）接著便是由綠色再變回紫色的了。同上，在幀面板中選中20幀，再添加一幀，選中Layer 3，將紫色符號(hào)拖到畫布中，設(shè)置透明由0到100，選中Layer 2，拖入綠色符號(hào)，透明度不變，幀數(shù)也是10幀。點(diǎn)擊播放按鈕瀏覽，發(fā)現(xiàn)速度快了一些，按住Shift鍵選擇幀面板上的所有幀，雙擊鼠標(biāo)，設(shè)置幀延時(shí)為15/100 sec即可。下面來為Banner添加文字效果。
?。?1）在幀面板中選擇第1幀，然后在層面板中選擇Layer 3，接著新建一個(gè)Layer 4，選擇工具箱上的文本工具為圖像添加“天極軟件網(wǎng)”文字，如圖23所示。
圖23 添加文本
?。?2）選中文本然后按F8鍵將文本轉(zhuǎn)換為符號(hào)，在符號(hào)屬性中為其命名為nuoli，選擇轉(zhuǎn)換為動(dòng)畫符號(hào)，如圖24所示。由于要將文本保持靜止?fàn)顟B(tài)5幀，所以在設(shè)置動(dòng)畫時(shí)和前面不變色的圖片符號(hào)一樣，只輸入幀數(shù)就可以了，其他的設(shè)置不變，如圖25。
圖24 命名符號(hào)
圖25設(shè)置動(dòng)畫屬性
?。?3）同理添加諾利網(wǎng)的網(wǎng)址“http://soft.yesky.com/”這個(gè)文本，并將其轉(zhuǎn)換為符號(hào)，設(shè)置動(dòng)畫屬性如圖26所示。選擇“OK”回到畫布中，如圖27所示。其中綠色點(diǎn)為動(dòng)畫起始位置，紅色點(diǎn)為終止位置。然后在幀面板中選中第5幀，雙擊后面的數(shù)字，將幀速設(shè)為200。
圖26 設(shè)置動(dòng)畫符號(hào)屬性
圖27 文本轉(zhuǎn)換為動(dòng)畫符號(hào)后的圖像
?。?4）下面來實(shí)現(xiàn)一個(gè)“動(dòng)感模糊”效果。選中第6幀，這時(shí)我們發(fā)現(xiàn)所做的前5幀動(dòng)畫看不到了。點(diǎn)擊工具箱上的矩形工具繪制一個(gè)矩形，將矩形填充設(shè)為Folds填充，如圖28所示。
圖28 將矩形填充設(shè)為折疊填充
?。?5）在折疊填充浮動(dòng)框中設(shè)置第一個(gè)顏色塊為白色，第二個(gè)顏色塊為黑色，如圖29所示，最終得到圖30所示的圖像效果。
圖29 設(shè)置折疊填充屬性
圖30 設(shè)置填充屬性后的填充效果
?。?6）使用鼠標(biāo)調(diào)整折疊填充的控制柄，得到圖31所示的圖像效果。
圖31 調(diào)整控制柄后的圖像效果
（27）選中這個(gè)矩形，點(diǎn)擊屬性面板上的按鈕，在彈出菜單中選擇“Eye Candy 4000LE”>>“Motion Trail”，設(shè)置Motion Trail屬性如圖32所示。
（圖32 Motion Trail設(shè)置 圖片較大，請拉動(dòng)滾動(dòng)條觀看）
（28）再一次使用Motion Trail特效，不過將方向設(shè)為180度，其他的設(shè)置和上面一樣，得到圖33所示的圖像效果。
圖33 兩次使用Motion Trail特效后的效果
（29）然后打開庫面板，將“天極軟件網(wǎng)”字樣的符號(hào)拖到場景中，右擊鼠標(biāo)選擇“Symbol”>>“Break Apart”，斷開和庫的聯(lián)系，然后選中文字，點(diǎn)擊屬性面板上的按鈕，在彈出菜單中選擇“Blur”>>“Gaussian Blur”對其進(jìn)行高斯模糊，模糊度設(shè)置為2.0就可以了，然后將處理好的矩形放到模糊文字的上面，適當(dāng)調(diào)節(jié)透明度，這樣兩個(gè)文字過渡時(shí)候的動(dòng)感模糊效果就實(shí)現(xiàn)了，如圖34所示效果。
圖34 動(dòng)態(tài)模糊效果
?。?0）選中第7幀，輸入文字“真誠為您服務(wù)”，轉(zhuǎn)化為動(dòng)畫符號(hào)，也設(shè)置5幀的動(dòng)畫，設(shè)置不同的動(dòng)畫屬性，如圖47所示。得到圖35所示的圖像。
圖35 設(shè)置動(dòng)畫屬性
圖36 設(shè)置動(dòng)畫屬性后的圖像
（31）選中第12幀，輸入文字“設(shè)計(jì)在線”，復(fù)制一下，然后在14幀粘貼，然后在16幀也粘貼，并將該幀幀速改為100，這樣文字就有閃爍的效果了，如圖37所示。
圖37 Banner的第16幀圖像
?。?2）選擇第17幀，將文字復(fù)制一個(gè)，選中后再用Motion Blur特效，設(shè)置其屬性如圖38所示。然后按F8將其轉(zhuǎn)化為動(dòng)畫符號(hào)，設(shè)置其屬性如圖39所示。
圖38 設(shè)置Motion Blur屬性
圖39 設(shè)置動(dòng)畫屬性
?。?3）選擇“OK”回到工作區(qū)，得到第17幀圖像如圖40所示。然后選擇第30幀，設(shè)置幀延時(shí)為200/100 second即可。
圖40 第17幀圖像
（34）回到圖像第1幀，點(diǎn)擊下面工作區(qū)狀態(tài)欄的圖標(biāo)就可以預(yù)覽圖像效果了。適當(dāng)進(jìn)行調(diào)整然后就可以選擇導(dǎo)出向?qū)?，在?dǎo)出向?qū)υ捒蛑羞x擇導(dǎo)出類型為GIF動(dòng)畫，如圖41所示，這樣就可以將圖像導(dǎo)出為GIF動(dòng)畫了。
圖41 將圖像導(dǎo)出為GIF動(dòng)畫
小結(jié)：在上面的這個(gè)例子中，我們主要學(xué)會(huì)了漸變顏色動(dòng)畫的制作。在這個(gè)Banner的制作過程中，我們通過使用層面板、幀面板和庫面板進(jìn)一步熟悉Fireworks MX 2004中這些面板的使用方法。
在幀面板中我們學(xué)會(huì)了如何選擇各幀編輯，如何復(fù)制幀、添加幀等，還學(xué)會(huì)了如何去設(shè)置幀的時(shí)間長短。
在層面板中我們了解了如何新建圖層和設(shè)置共享圖層等。
在庫面板中我們熟悉如何將圖像和文本轉(zhuǎn)換為動(dòng)畫元件，通過動(dòng)畫屬性對話框設(shè)置動(dòng)畫的大小、透明度等來控制動(dòng)畫效果以及怎么樣將庫文件放置到場景之中。
我們通過對不同符號(hào)對象的不同設(shè)置實(shí)現(xiàn)了不同的動(dòng)畫效果，這里讀者可以在即嘗試著設(shè)置動(dòng)畫屬性對話框中的不同參數(shù)來設(shè)置動(dòng)畫圖像的效果，包括Frame（幀數(shù)）、Move（運(yùn)動(dòng)的距離）、Direction（方向）、Scale to（尺寸大?。?、Opacity（不透明度）、Rotate（旋轉(zhuǎn)）等值，從而產(chǎn)生不同的效果。
另外，在這個(gè)Banner的制作過程中，我們有進(jìn)一步熟悉了指針工具、文本工具、縮放工具、矩形工具等工具的使用方法和技巧。通過使用Motion Trail特效熟悉了它的使用，并通過它制作了文本的“動(dòng)感模糊”效果。
