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

　　本文中我們用fireworks來制作一個變色的banner，從中我們可以掌握符號（symbol）的使用、補間實例動畫（tween instance）的制作、層(layers)和幀(frames)的基本用法，結(jié)尾進行精彩的技巧總結(jié)。

　　完成效果如下：

　　banner制作具體過程

　?。?）首先我們新建一個大小為468×60的文件，并設置畫布顏色為黑色，如圖1所示。

圖1 新建一個文件

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

圖2 導入位圖

　　 （3）選中該幅圖像按ctrl＋shift＋d兩次，克隆圖像兩次。然后選中其中的一幅圖像，點擊“filters”，選擇“adjust color”>>“hue/saturation”，這時在彈出對話框中調(diào)整色調(diào)的值，如圖3所示。同樣方式調(diào)整另外一幅圖像的顏色，最終得到圖4所示的圖像效果。

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

圖4 對克隆對象實行變色效果后的圖像

　　 （4）選中其中的一個圖片如左邊的紫色圖片，按快捷鍵f8或者右鍵在彈出菜單中選擇convert to symbol準備將圖像轉(zhuǎn)換為符號。在彈出的對話框內(nèi)為符號命名并選擇動畫符號(animation)，如圖5所示。

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

　　 （5）點擊“ok”之后會彈出動畫設置的對話框，如圖6所示。我們暫時對它不做設置。

圖6 動畫設置對話框

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

圖7 位圖轉(zhuǎn)換為動畫符號的效果

　　（7）我們再在banner的左邊加些圖片并做適當調(diào)整使banner更加生動，如圖8所示。

圖8 在banner左邊添加圖片

　　 （8）接著我們點擊“window”菜單，分別把“layers”、“frames”和“library”三個面板打開，為了我們將來創(chuàng)建動畫服務。在layers（層）面板中選中l(wèi)ayer 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... ”，在彈出的動畫對話框設置幀數(shù)為10，如圖12所示。

圖12 設置動畫參數(shù)

　　 （11）單擊ok，這時彈出圖13所示的對話框，詢問是否要自動添加幀。

圖13 提示是否自動添加幀的對話框

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

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

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

圖15 設置動畫屬性

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

圖16 第一幀層面板

圖17 第一幀的效果

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

圖18 第10幀圖像

（16）單擊幀面板右上角的按鈕，在彈出菜單中選擇“duplicate frame”，這時彈出了復制幀對話框，我們在其中選擇after current frame單選框?qū)椭频膸胖玫疆斍皫?，如圖19所示。

圖19 復制幀對話框

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

圖20 第11幀圖像

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

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

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

圖22 設置動畫屬性

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

　?。?1）在幀面板中選擇第1幀，然后在層面板中選擇layer 3，接著新建一個layer 4，選擇工具箱上的文本工具為圖像添加“天極軟件網(wǎng)”文字，如圖23所示。

圖23 添加文本

　?。?2）選中文本然后按f8鍵將文本轉(zhuǎn)換為符號，在符號屬性中為其命名為nuoli，選擇轉(zhuǎn)換為動畫符號，如圖24所示。由于要將文本保持靜止狀態(tài)5幀，所以在設置動畫時和前面不變色的圖片符號一樣，只輸入幀數(shù)就可以了，其他的設置不變，如圖25。

圖24 命名符號

圖25設置動畫屬性

　　（23）同理添加諾利網(wǎng)的網(wǎng)址“http://soft.yesky.com/”這個文本，并將其轉(zhuǎn)換為符號，設置動畫屬性如圖26所示。選擇“ok”回到畫布中，如圖27所示。其中綠色點為動畫起始位置，紅色點為終止位置。然后在幀面板中選中第5幀，雙擊后面的數(shù)字，將幀速設為200。

圖26 設置動畫符號屬性

圖27 文本轉(zhuǎn)換為動畫符號后的圖像

（24）下面來實現(xiàn)一個“動感模糊”效果。選中第6幀，這時我們發(fā)現(xiàn)所做的前5幀動畫看不到了。點擊工具箱上的矩形工具繪制一個矩形，將矩形填充設為folds填充，如圖28所示。

圖28 將矩形填充設為折疊填充

　?。?5）在折疊填充浮動框中設置第一個顏色塊為白色，第二個顏色塊為黑色，如圖29所示，最終得到圖30所示的圖像效果。

圖29 設置折疊填充屬性

圖30 設置填充屬性后的填充效果

　　（26）使用鼠標調(diào)整折疊填充的控制柄，得到圖31所示的圖像效果。

圖31 調(diào)整控制柄后的圖像效果

　?。?7）選中這個矩形，點擊屬性面板上的按鈕，在彈出菜單中選擇“eye candy 4000le”>>“motion trail”，設置motion trail屬性如圖32所示。

圖32 motion trail設置

　?。?8）再一次使用motion trail特效，不過將方向設為180度，其他的設置和上面一樣，得到圖33所示的圖像效果。

圖33 兩次使用motion trail特效后的效果

　?。?9）然后打開庫面板，將“天極軟件網(wǎng)”字樣的符號拖到場景中，右擊鼠標選擇“symbol”>>“break apart”，斷開和庫的聯(lián)系，然后選中文字，點擊屬性面板上的按鈕，在彈出菜單中選擇“blur”>>“gaussian blur”對其進行高斯模糊，模糊度設置為2.0就可以了，然后將處理好的矩形放到模糊文字的上面，適當調(diào)節(jié)透明度，這樣兩個文字過渡時候的動感模糊效果就實現(xiàn)了，如圖34所示效果。

圖34 動態(tài)模糊效果

　?。?0）選中第7幀，輸入文字“真誠為您服務”，轉(zhuǎn)化為動畫符號，也設置5幀的動畫，設置不同的動畫屬性，如圖47所示。得到圖35所示的圖像。

圖35 設置動畫屬性

圖36 設置動畫屬性后的圖像

（31）選中第12幀，輸入文字“設計在線”，復制一下，然后在14幀粘貼，然后在16幀也粘貼，并將該幀幀速改為100，這樣文字就有閃爍的效果了，如圖37所示。

圖37 banner的第16幀圖像

　?。?2）選擇第17幀，將文字復制一個，選中后再用motion blur特效，設置其屬性如圖38所示。然后按f8將其轉(zhuǎn)化為動畫符號，設置其屬性如圖39所示。

圖38 設置motion blur屬性

圖39 設置動畫屬性

　　

　?。?3）選擇“ok”回到工作區(qū)，得到第17幀圖像如圖40所示。然后選擇第30幀，設置幀延時為200/100 second即可。

圖40 第17幀圖像

　?。?4）回到圖像第1幀，點擊下面工作區(qū)狀態(tài)欄的圖標就可以預覽圖像效果了。適當進行調(diào)整然后就可以選擇導出向?qū)?，在導出向?qū)υ捒蛑羞x擇導出類型為gif動畫，如圖41所示，這樣就可以將圖像導出為gif動畫了。

圖41 將圖像導出為gif動畫

　　小結(jié)：在上面的這個例子中，我們主要學會了漸變顏色動畫的制作。在這個banner的制作過程中，我們通過使用層面板、幀面板和庫面板進一步熟悉fireworks mx 2004中這些面板的使用方法。

　　在幀面板中我們學會了如何選擇各幀編輯，如何復制幀、添加幀等，還學會了如何去設置幀的時間長短。

　　在層面板中我們了解了如何新建圖層和設置共享圖層等。

　　在庫面板中我們熟悉如何將圖像和文本轉(zhuǎn)換為動畫元件，通過動畫屬性對話框設置動畫的大小、透明度等來控制動畫效果以及怎么樣將庫文件放置到場景之中。

　　我們通過對不同符號對象的不同設置實現(xiàn)了不同的動畫效果，這里讀者可以在即嘗試著設置動畫屬性對話框中的不同參數(shù)來設置動畫圖像的效果，包括frame（幀數(shù)）、move（運動的距離）、direction（方向）、scale to（尺寸大?。pacity（不透明度）、rotate（旋轉(zhuǎn)）等值，從而產(chǎn)生不同的效果。

　　另外，在這個banner的制作過程中，我們有進一步熟悉了指針工具、文本工具、縮放工具、矩形工具等工具的使用方法和技巧。通過使用motion trail特效熟悉了它的使用，并通過它制作了文本的“動感模糊”效果。

最新評論