1、第第18章章 Fireworks動畫動畫機械工業(yè)出版社機械工業(yè)出版社 2008學習要求提前預習，上課認真聽講提前預習，上課認真聽講課后及時復習，獨立認真完成作業(yè)課后及時復習，獨立認真完成作業(yè) 教學內(nèi)容教學內(nèi)容18.1元件元件 18.1.1 元件的創(chuàng)建與分類元件的創(chuàng)建與分類 18.2 層與幀的操作層與幀的操作 18.2.1 層的基本操作層的基本操作 18.2.2 幀的基本操作幀的基本操作18.3 動畫的制作與輸出動畫的制作與輸出 18.3.1動畫的制作與預覽動畫的制作與預覽 18.3.2動畫的導出與優(yōu)化動畫的導出與優(yōu)化 18.4 實例介紹實例介紹 實例實例1 水中倒影水中倒影 18.5 本章小結(jié)

2、本章小結(jié) 思考與練習思考與練習18.1元件元件18.1.1 元件的創(chuàng)建與分類元件的創(chuàng)建與分類 在利用Fireworks進行圖像處理的過程中，對于一些需要反復使用的對象可以將其存儲為元件，這些元件在創(chuàng)建的時間被自動添加到了當前文件的庫中，在需要的時間直接從庫里拖出來就可以得到一個它的副本，也就是實例，對應一個元件可以有多個實例，當編輯這個元件的時間，它所對應的所有元件都會自動更新。一個元件里面還可以嵌套有其它的元件。Fireworks的元件有三種類型：圖形、按鈕和動畫。1.創(chuàng)建新元件創(chuàng)建新元件 1)單擊“編輯”“插入”“新建元件”菜單命令，會彈出如圖18-1所示的“元件屬性”對話框。Firewo

3、rks默認的元件名稱為“元件1”，可以輸入其它的名字，此處命名為淡入淡出，并選擇元件“類型”為圖形，單擊“確定”按鈕，彈出元件文本1的編輯窗口，利用“工具”面板中的“文本”工具輸入“淡入淡出”文字，并且最好如圖18-2所示將文字的中心位置與元件編輯窗口中心“”對齊。單擊元件編輯器窗口左上角的“完成”按鈕結(jié)束元件的編輯。18.1.1 元件的創(chuàng)建與分類元件的創(chuàng)建與分類圖圖18-1 “元件屬性元件屬性”對話框?qū)υ捒?此時在當前文檔中出現(xiàn)該元件的一個實例，若打開“庫“”面板，就可以看到圖18-3所示的內(nèi)容，并且可以拖出多個實例。實例中藍色的“+”號，與元件編輯窗口中“+”的相對位置保持一致。18.1.

4、1 元件的創(chuàng)建與分類元件的創(chuàng)建與分類圖圖18-2 元件編輯器圖元件編輯器圖 18-3 “庫庫”面板面板2.對象轉(zhuǎn)化為元件符號對象轉(zhuǎn)化為元件符號 在設計中可以根據(jù)需要將文檔中已有的對象轉(zhuǎn)換為元件，具體操作步驟如下： 在文檔中選中要轉(zhuǎn)換的對象或?qū)ο蠼M。單擊“修改”“元件”“轉(zhuǎn)換為元件”菜單命令，就會彈出圖18-1所示的“元件屬性”對話框。其余的操作就與創(chuàng)建新元件的相同了。 設置完成后，文檔中的對象也就自動轉(zhuǎn)換為元件的實例了。18.1.1 元件的創(chuàng)建與分類元件的創(chuàng)建與分類 在Fireworks 8中，可以隨時對元件的屬性進行修改。在文檔中雙擊要編輯元件的實例，或者雙擊“庫”面板中要編輯的元件都可打開

5、元件編輯窗口，對元件編輯完成后單擊“完成”按鈕，所有該元件的實例將全部自動更新。 若要刪除元件，可以在“庫”面板中選中要刪除的元件，然后單擊“庫”面板右下角的“刪除元件”圖標即可。若要對元件眾多實例中的一個進行編輯而不影響其它實例，可將這個實例與元件的鏈接斷開，方法是選中要修改的實例，然后單擊“修改”“元件”“分離”菜單命令即可。 元件實例的有些屬性是可以在不影響其它實例的情況下進行修改的，如：濾鏡效果、不透明度、大小的縮放，坐標位置的移動等。18.1.2 元件的編輯元件的編輯18.2 層與幀的操作層與幀的操作 18.2.1 層的基本操作層的基本操作 在Fireworks 8中，利用層繪制圖像

6、就象在膠片上繪制一樣，一幅圖像可以由多個放在不同層中的圖像對象組合而成，這些層相互重疊，形成一幅完整的文檔。每個層中的圖像又都有著獨立的編輯空間，在編輯的時間彼此不干擾，相互獨立。1.創(chuàng)建層創(chuàng)建層 利用利用“層層”面板創(chuàng)建層面板創(chuàng)建層 單擊“窗口”“層”菜單命令可調(diào)出層面板如圖18-4所示，再單擊層面板右下端的“新建/重制層” 圖標，即可添加一個新層，它的默認名稱為“層n”（n為層建立的序號），也可以雙擊這個圖層的名稱為它重新命名，新創(chuàng)建的層位于選中層的上方。 也可以單擊“層”面板右上角的 圖標，在彈出菜單中，單擊“新建層”命令，調(diào)出“新建層”對話框來新建圖層。 利用莁單創(chuàng)建層利用莁單創(chuàng)建層

7、單擊“編輯”“插入”“層”菜單命令，也可插入層。圖圖18-4 “層層“面板面板18.2.1 層的基本操作層的基本操作2.編輯層編輯層顯示顯示/隱藏層隱藏層 在“層“面板中，每個層的左側(cè)起的每二列都對應有一個 圖標如圖18-4所示，它表示該層的所有對象都可以在畫布中顯示，單擊該標志可以使它消失，同時該圖層也就被隱藏了，相應地該圖層的所有對象也就在畫布中隱藏了。鎖定鎖定/解鎖層解鎖層 在“層“面板的左起第三列是一類型標志列，系統(tǒng)默認它為“解鎖”狀態(tài)，此時該層的所有對象都可以編輯，顯示的圖標為 ，單擊此圖標，可切換為“鎖定”圖標 ，此時該層的對象雖然顯示在畫布上，但卻不能編輯。層的復制與刪除層的復制

8、與刪除 若要復制某一圖層及其上的全部內(nèi)容，只需要在“層”面板中選中該層，并拖曳到“層”面板右下角的“新建/重制層”圖標 上即可。 18.2.1 層的基本操作層的基本操作3“層層”的編輯模式的編輯模式 “層”有兩種編輯模式：多層編輯模式與單層編輯模式，默認為多層編輯模式。在多層編輯模式下，要編輯不同層的對象，只需要在畫布中單擊要編輯的對象即可，選中某一層對象的同時也就選中了該層，這在某種程度上為編輯操作帶來了方便，但同時也容易產(chǎn)生一些誤操作。如果選用單層編輯模式就可以避免這種誤操作，切換到單層編輯模式的方法是單擊“層“面板右上角的 圖標，在它的彈出菜單中單擊“單層編輯”命令，這時只能編輯當前選中

9、層中的對象，在畫布中無法切換到其它圖層對象的編輯，重新單擊“單層編輯”命令，可以取消單層編輯模式。18.2.1 層的基本操作層的基本操作 在Fireworks中，幀是動畫構建的關鍵，由多幀圖像組合在一起連續(xù)播放，可以形成豐富多彩的動畫。單擊“窗口”“幀”菜單命令就可以打開“幀”面板如圖18-5所示，通過“幀”面板可以查看幀列表、設置幀的序號、設置“幀延時”的值等。單擊“幀”面板上的 圖標，就可以新建一個空白幀，它被放在當前幀的下面，它的幀序號比當前幀的序號大一個數(shù)，將來動畫播放的時間就是按照幀序號由小到大進行播放的。要改變幀的播放順序只要在“幀”面板中選取幀，拖曳到目標幀處釋放鼠標即可。一個幀

10、中可以有多個圖層。創(chuàng)建新的空白幀也可以單擊“編輯”“插入”“幀“菜單命令18.2.2 幀的基本操作幀的基本操作 若要插入的空白幀較多，可以單擊“幀”面板右上角的 圖標，在彈出菜單中，單擊“添加幀”命令，調(diào)出“添加幀”對話框如圖18-6所示。在“數(shù)量”文本框中輸入要添加空白幀的數(shù)目，在“插入新幀”欄中可以選擇要插入的幀相對于當前幀的位置。“ 幀延時”的值圖圖18-5 “幀幀“面板面板 圖圖18-6 “添加幀添加幀“對話框?qū)υ捒?8.2.2 幀的基本操作幀的基本操作 “幀延時”的值在“幀”面板中的位置如圖18-5所示，雙擊它可以彈出“幀延時”對話框如圖18-7所示?！皫訒r”表示在動畫播放的過程中

11、，該幀中的對象在畫面上停留的時間，它以百分之一秒為單位，如設置“幀延時”的時間為100，則該幀畫面停留一分鐘。 為 了更好地完成動畫，可以通過“幀”面板左下角的“洋蔥皮” 圖標來觀察多個幀的圖像，以比較它們之間的差別。單擊“洋蔥皮” 圖標，會彈出如圖18-8所示的“洋蔥皮”菜單，利用它可以設置同時顯示的幀數(shù)。當有多幀同時顯示時，當前幀為正常顯示，其它的前后各幀依次變灰。圖18-9是利用“洋蔥皮”效果顯示的多幀動畫信鴿的圖像，圖中間的信鴿是當前幀中的圖像 。18.2.2 幀的基本操作幀的基本操作圖圖18-7 “幀延時幀延時”對話框?qū)υ捒?圖圖18-8 “洋蔥皮洋蔥皮”菜單菜單圖圖18-9 “洋蔥

12、皮洋蔥皮”效果示例效果示例18.2.2 幀的基本操作幀的基本操作18.3 動畫的制作與輸出動畫的制作與輸出18.3.1動畫的制作與預覽動畫的制作與預覽 在Fireworks中，除了可以一幀一幀地來創(chuàng)建動畫外，還可以創(chuàng)建“補間實例”動畫。“補間實例”動畫創(chuàng)建的第一步是先創(chuàng)建元件，這里利用本章第一節(jié)中已創(chuàng)建好的“淡入淡出”元件，將其從庫面板中拖出兩個實例作為首幀和尾幀，并調(diào)整為不同的位置、大小等屬性如圖18-10所示，在“屬性”面板中為首幀的實例設置“不透明度”為22，為尾幀的實例設置如下的“濾鏡”特效：內(nèi)斜角、黑色的內(nèi)側(cè)發(fā)光、投影和模糊等。然后單擊“修改”“元件”“補間實例”菜單命令，會彈出一個

13、“補間實例”對話框如圖18-11示，在“步驟”選項中輸入數(shù)值2 ，選中“分散到幀”選項，只有選中該選項，最后單擊“確定“按鈕。就可以預覽其效果了。圖圖18-11 首幀與尾幀的設置首幀與尾幀的設置 18-11 “補間實例補間實例”對話框?qū)υ捒?Fireworks文檔窗口的狀態(tài)行有動畫播放按鈕如圖18-12所示，利用它們可以簡便地預覽動畫的播放效果。 動畫的播放還可以單擊“文件”“在瀏覽器預覽” 菜單命令，然后在彈出的子菜單中選擇需要的瀏覽器名稱，啟動相應的瀏覽器，并播放動畫。18.3.1動畫的制作與預覽動畫的制作與預覽下一幀前一幀當前幀尾幀首幀播放/停止圖圖18-12 動畫播放按鈕動畫播放按鈕1

14、8.3.1動畫的制作與預覽動畫的制作與預覽 在Fireworks中，為了減小輸出文件的體積，提高將來網(wǎng)頁的下載速度，不管是一般圖像還是動畫在導出前都要進行優(yōu)化設置。優(yōu)化的設置可以通過優(yōu)化面板來實現(xiàn)也可以通過“圖像預覽”對話框來實現(xiàn)。 單擊“窗口”“優(yōu)化”可以調(diào)出“優(yōu)化”面板如圖18-13所示。在“導出文件格式”下拉列表中選擇的圖像格式一般為GIF格式，它是目前網(wǎng)頁中最常用的高效壓縮圖像。如果輸出的為動畫圖像，“導出文件格式”必須為GIF動畫，否則導出的為靜態(tài)圖像。利用“優(yōu)化”面板還可以進行畫布透明效果、最大顏色數(shù)目等的設置。 單擊“文件”“圖像預覽”菜單命令，可以打開“圖像預覽”對話框如圖18

15、-14所示。 “圖像預覽”對話框在剛打開時的“動畫”選項卡呈灰色，不可選，只有在“格式”選項中選18.3.2 動畫的導出與優(yōu)化動畫的導出與優(yōu)化 擇了GIF動畫，該選項卡才可選。如果某一動畫圖像已經(jīng)用“優(yōu)化”面板優(yōu)化過了，也仍可以再用“圖像預覽”對話框繼續(xù)優(yōu)化和設置，在對話框的右下角有一“導出區(qū)域” 圖標，利用它可以改變動畫及畫布導出區(qū)域大小。保存的設置導出文件格式索引調(diào)色板最大的顏色數(shù)目圖圖18-13 “優(yōu)化優(yōu)化“面板面板18.3.2 動畫的導出與優(yōu)化動畫的導出與優(yōu)化 在利用“圖像預覽”對話框進行圖像優(yōu)化的時間，可以預覽動畫的播放效果，還可以用多窗口進行預覽，同時還動態(tài)地顯示輸出文檔的體積。優(yōu)

16、化設置守后，單擊“確定”按鈕會保存所有的設置并返回Fireworks文檔的編輯窗口中，若單擊“導出”按鈕，會打開“導出”對話框，以選擇合適的路徑進行保存。 單擊“文件”“導出向?qū)А辈藛蚊睿蜷_“導出向?qū)А睂υ捒?，利用Fireworks的圖像導出向?qū)?，也可以打開“圖像預覽”對話框，使圖像大小減到最小而品質(zhì)達到最優(yōu)。18.3.2 動畫的導出與優(yōu)化動畫的導出與優(yōu)化圖圖18-14 “圖像預覽圖像預覽”對話框?qū)υ捒?8.3.2 動畫的導出與優(yōu)化動畫的導出與優(yōu)化18.4 實例介紹實例介紹實例實例1 水中倒影水中倒影 圖18-15是水中倒影的靜態(tài)圖像。本實例運用了Fireworks的動畫制作、蒙版和濾鏡特

17、效等知識，是一個綜合中性的實例，通過對本實例制作要領的掌握，能夠?qū)ireworks的圖像動畫的制作有一個較全面的理解。它的制作過程如下:圖圖18-15 水中倒影的靜態(tài)圖像水中倒影的靜態(tài)圖像18.4 實例介紹實例介紹 1）先導入一張要為其作倒影的圖片到Fireworks中， Fireworks會自動生成一個背景層如圖18-16所示。并為該圖片命名為“導入圖片”。圖圖18-16 自動生成的背景層自動生成的背景層18.4 實例介紹實例介紹 2）制作倒影選中導入圖片，單擊“編輯”“克隆”菜單命令，為其克隆一副本，命名為“翻轉(zhuǎn)圖”。單擊“修改”“變形”“垂直翻轉(zhuǎn)”菜單命令將副本翻轉(zhuǎn)過來，并用鼠標拖動到

18、原圖片的下面，如圖18-17所示。然后同時選中這兩張圖片單擊“修改”“對齊”“左對齊”菜單命令。圖圖18-17 翻轉(zhuǎn)圖與原圖的相對位置翻轉(zhuǎn)圖與原圖的相對位置18.4 實例介紹實例介紹3）選中背景“層”，單擊“層”面板右上角的 圖標，在彈出菜單中，單擊“共享此層”命令，使得該層的所有對象在動畫的每一幀中都能完整顯示。4）復制“翻轉(zhuǎn)圖”，并將其粘貼到圖層1 中，命名為“動畫”，在“屬性”面板中修改它的“Y”向坐標值比“翻轉(zhuǎn)圖”的“Y”向坐標值少1。單擊“修改”“動畫”“選擇動畫” 命令，打開“動畫”設置對話框，各參數(shù)設置如圖18-18所示。單擊“確定”按鈕，會打開是否自動添加幀信息詢問提示框如圖18-19。單擊“確定”按鈕，一個具有六幀的動畫就生成了?？深A覽一下效果。5）水波效果的繪制。用“矩形”工具繪制出如圖18-20 所示的多個矩形條，然后按住【shift】鍵，選中所有的矩形條，單擊“修改”“組合”菜單命令，將它們組合為一個整體。同時選中組合后的矩形組與“動畫”圖片，單擊“修改”“蒙板”“組合為蒙板”菜單命令，