FIREWORKS8標(biāo)準(zhǔn)實(shí)例教程教程 第八章 動(dòng)態(tài)效果設(shè)

第八章動(dòng)態(tài)效果設(shè)計(jì)

8.1動(dòng)畫元件使用Fireworks不僅能制作精美的靜態(tài)圖像，還能方便地創(chuàng)作動(dòng)畫。使用動(dòng)畫，不僅能使網(wǎng)頁生動(dòng)活潑，還能添加許多特殊效果。使用Fireworks創(chuàng)建動(dòng)畫十分簡(jiǎn)單。首先制作動(dòng)畫元件，然后隨時(shí)間改變動(dòng)畫元件的屬性。文檔中創(chuàng)建及導(dǎo)入的對(duì)象都可作為動(dòng)畫元件。同一個(gè)動(dòng)畫可以使用一個(gè)或多個(gè)動(dòng)畫元件，動(dòng)畫元件之間相對(duì)獨(dú)立，互不干擾。制作好的動(dòng)畫元件可以導(dǎo)出為GIF文件或SWF文件，使用Fireworks的優(yōu)化面板可以很方便地優(yōu)化并導(dǎo)出動(dòng)畫。8.1.1創(chuàng)建/編輯動(dòng)畫元件在Fireworks中，可以直接創(chuàng)建動(dòng)畫元件，也可將現(xiàn)有對(duì)象轉(zhuǎn)換為動(dòng)畫元件。創(chuàng)建動(dòng)畫元件后可以隨時(shí)對(duì)元件的動(dòng)畫效果進(jìn)行設(shè)置。下面以一個(gè)簡(jiǎn)單例子演示動(dòng)畫元件的創(chuàng)建和編輯方法。8.1.2編輯動(dòng)畫路徑使用Fireworks可以自動(dòng)生成直線、旋轉(zhuǎn)的動(dòng)畫效果。如果要制作一些更復(fù)雜的動(dòng)畫，就需要編輯動(dòng)畫路徑了。下面以一個(gè)簡(jiǎn)單例子演示編輯動(dòng)畫路徑的方法。8.2動(dòng)畫幀

動(dòng)畫元件的每一個(gè)動(dòng)作都存放在幀中，當(dāng)按照一定順序播放這些幀時(shí)，即能產(chǎn)生動(dòng)畫效果。Fireworks中的幀就像電影膠片中的幀一樣，在某一個(gè)時(shí)刻只能看到某一個(gè)幀。在每幀的播放時(shí)間不變的前提下，增加一幀，相當(dāng)于增加了膠片的長(zhǎng)度，也就是延長(zhǎng)了動(dòng)畫的時(shí)間。也可以改變幀的順序，這和電影膠片的剪輯也是不謀而合的。8.2.1添加與刪除幀一般開始創(chuàng)建動(dòng)畫的時(shí)候，文件中只有一個(gè)幀。而動(dòng)畫必須包含2個(gè)或2個(gè)以上的幀才能在圖像中顯示動(dòng)態(tài)效果。所以，創(chuàng)建新的動(dòng)畫圖像時(shí)，首要任務(wù)是在文檔中添加幀。8.2.2重新排序幀在新建幀和復(fù)制幀的操作中，總有一些幀沒有調(diào)整到合適的位置；或者不小心誤操作，弄錯(cuò)了幀的順序，這時(shí)調(diào)整幀的順序就顯得很重要了。在Fireworks中調(diào)整幀順序的操作很簡(jiǎn)單，在幀面板中，選中需要調(diào)整順序的幀，直接用鼠標(biāo)將它拖動(dòng)到幀列表中合適的位置就行了。對(duì)幀重新排序后，F(xiàn)ireworks自動(dòng)對(duì)所有的幀重新排列，并且?guī)拿Q也會(huì)根據(jù)新的順序改變。8.2.3編輯幀對(duì)象動(dòng)畫中各幀之間是獨(dú)立的關(guān)系，編輯某幀不會(huì)對(duì)其它幀產(chǎn)生影響。不過有些時(shí)候需要跨幀編輯對(duì)象，這就需要使用一些幀命令。1.在幀之間移動(dòng)對(duì)象2.在幀之間復(fù)制對(duì)象3.將對(duì)象分發(fā)到幀有時(shí)為了編輯方便，先在同一幀中繪制多個(gè)對(duì)象，再將這些對(duì)象分發(fā)到不同的幀中。4.在幀之間共享層在幀之間共享層可以方便地實(shí)現(xiàn)在多個(gè)圖像幀中重復(fù)某些固定的內(nèi)容，如背景等。若需要修改該對(duì)象，只需要在任何一個(gè)幀中對(duì)其進(jìn)行修改，就可以反映到所有的幀中，從而減輕了工作量。8.2.4洋蔥皮技術(shù)洋蔥皮是動(dòng)畫制作術(shù)語，其原始含義是在半透明繪圖紙上繪制動(dòng)畫幀，繪制完畢后將繪有圖片的半透明紙重疊起來透光觀看。這樣，就可以看到多個(gè)動(dòng)畫圖片內(nèi)容，以便編者編輯和比較。8.2.5設(shè)置幀延遲時(shí)間幀延遲決定了一幀顯示的時(shí)間，在Fireworks中，一幀顯示的時(shí)間是以百分之一秒為單位的?？刂苿?dòng)畫中各幀的延遲時(shí)間可以改變動(dòng)畫的節(jié)奏。在Fireworks中，各幀的延遲時(shí)間可以不一樣。在某個(gè)動(dòng)畫中，為了突出重點(diǎn)，通?？梢詫?dòng)畫中某個(gè)主要內(nèi)容的延遲時(shí)間設(shè)置得比較長(zhǎng)。8.2.6設(shè)置動(dòng)畫循環(huán)在播放動(dòng)畫的時(shí)候，有時(shí)需要永久的播放動(dòng)畫，有時(shí)需要設(shè)置播放的次數(shù)，在Fireworks中，允許對(duì)動(dòng)畫的循環(huán)次數(shù)進(jìn)行控制。若要設(shè)置循環(huán)次數(shù)，單擊〖幀〗面板底部的按鈕打開如圖8-28所示的循環(huán)設(shè)定菜單。選中需要的循環(huán)次數(shù)即可。8.2.7插幀動(dòng)畫插幀也是動(dòng)畫制作術(shù)語，其原始含義是主設(shè)計(jì)師繪制出動(dòng)畫的關(guān)鍵幀，然后由助手繪制關(guān)鍵幀之間的其它幀圖，最后形成連續(xù)的幀動(dòng)畫。Fireworks的插幀動(dòng)畫功能也有同樣的效果，用戶只需設(shè)計(jì)出關(guān)鍵幀的圖像，F(xiàn)ireworks會(huì)自動(dòng)生成關(guān)鍵幀之間的過渡幀，形成連貫統(tǒng)一的動(dòng)畫效果。使用插幀動(dòng)畫可以大大較少動(dòng)畫時(shí)間的工作量，只需編輯幾個(gè)關(guān)鍵幀，其它幀圖由Fireworks自動(dòng)生成。8.2.8切片動(dòng)畫若想在一幅很大的圖像中設(shè)置較小的部分為動(dòng)畫效果，可以使用Fireworks中的切片技術(shù)。Fireworks允許將圖像的某個(gè)單獨(dú)切片設(shè)置為動(dòng)畫效果。也就是為單獨(dú)的某個(gè)切片添加多個(gè)圖幀，而導(dǎo)出時(shí)，該切片四周的其他圖像切片導(dǎo)出為普通的圖像，而動(dòng)畫的切片區(qū)域?qū)С鰹閯?dòng)畫GIF圖像。8.2.9優(yōu)化動(dòng)畫好的動(dòng)畫優(yōu)化在保持動(dòng)畫質(zhì)量基本不變情況下，大大降低文件的大小。而且，有時(shí)還能對(duì)動(dòng)畫做一些特別的設(shè)置，比如說，設(shè)置某種顏色為透明色。8.2.10導(dǎo)出動(dòng)畫使用Fireworks可以將動(dòng)畫導(dǎo)出為GIF文件或SWF文件。通常情況下，使用Fireworks編輯的動(dòng)畫都是以GIF格式導(dǎo)出的。1.導(dǎo)出動(dòng)畫為GIF文件在優(yōu)化面板中將【導(dǎo)出文件格式】設(shè)置為【GIF動(dòng)畫】。選擇菜單欄【文件】/【導(dǎo)出】命令。在【導(dǎo)出】對(duì)話框中設(shè)定導(dǎo)出GIF文件的名稱和存放路徑，并將【保存類型】設(shè)置為【僅圖像】。設(shè)置完畢，單擊【保存】按鈕，即可將動(dòng)畫以GIF格式導(dǎo)出。2.導(dǎo)出動(dòng)畫為SWF文件選擇菜單欄【文件】/【另存為】命令。在〖另存為〗對(duì)話框中設(shè)定導(dǎo)出GIF文件的名稱和存放路徑，并將【保存類型】設(shè)置為【MacromediaSWF】。8.3熱點(diǎn)和切片

Fireworks是專門針對(duì)網(wǎng)絡(luò)開發(fā)的圖像處理軟件，因此具有很多基于網(wǎng)絡(luò)圖像的處理功能。使用熱點(diǎn)功能，能將圖像劃分為多個(gè)熱點(diǎn)并為每個(gè)熱點(diǎn)分配不同的URL。這樣，單擊圖像上的不同區(qū)域，就能鏈接到不同的網(wǎng)頁上了。切片是將較大的圖像分割為多幅小圖像，這在高級(jí)網(wǎng)頁制作中常常使用到。切片可以有效解決圖像下載緩慢的問題。8.3.1創(chuàng)建熱點(diǎn)8.3.2編輯熱點(diǎn)熱點(diǎn)實(shí)際上PNG文檔中一種特殊的對(duì)象，它們被保存在網(wǎng)頁層中。用戶可以根據(jù)需要編輯創(chuàng)建好的熱點(diǎn)。8.3.3URL面板當(dāng)文檔中含有多個(gè)URL地址時(shí)，可以通過URL面板來編輯和管理文檔中的URL地址。選擇菜單欄【窗口】/【URL】命令，即可調(diào)出URL面板，如圖8-65所示。URL面板中的URL地址是保存在URL庫中的。用戶可以根據(jù)需要制作多個(gè)URL庫，用于存放不同類型的URL地址。8.3.4導(dǎo)出圖像映射在瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)遇到這樣的情況：?jiǎn)螕粢粋€(gè)圖像的不同區(qū)域，可以跳轉(zhuǎn)到不同的網(wǎng)頁，這種方式是利用圖像映射建立的超鏈接。圖像映射實(shí)際上就是在一幅圖像上創(chuàng)建多個(gè)鏈接區(qū)域，通過單擊不同的區(qū)域，可以跳轉(zhuǎn)至不同的鏈接目標(biāo)。使用圖像映射時(shí)，輸出的是一個(gè)完整的圖像文件。8.3.6創(chuàng)建切片當(dāng)網(wǎng)頁中放置了一幅較大的圖片時(shí)，網(wǎng)頁的下載時(shí)間就比較長(zhǎng)。為了加快網(wǎng)頁的下載速度，可以把大圖片分成若干個(gè)小圖片，然后再將這些小圖片重新組合成一體，這就是所謂的切片技術(shù)，利用Fireworks8提供的切片工具，我們可以很輕松地對(duì)圖像實(shí)施切片。當(dāng)建立了圖像切片以后，還可以為不同的切片建立超鏈接。8.3.7編輯切片切片同熱點(diǎn)一樣是PNG文檔中一種特殊的對(duì)象，它們被保存在網(wǎng)頁層中。用戶可以根據(jù)需要編輯創(chuàng)建好的切片。8.3.8創(chuàng)建文本切片F(xiàn)ireworks中不僅圖像可以制作切片，文本同樣也可以制作切片。與圖像切片不同的是，文本切片不導(dǎo)出圖像，它導(dǎo)出的是出現(xiàn)在由切片定義的表格單元格中的HTML文本。8.3.9導(dǎo)出切片一個(gè)圖像加入切片后，實(shí)際上是被分成了多個(gè)部分。在網(wǎng)頁中再通過表格引用這些切片。因此導(dǎo)出切片前應(yīng)設(shè)置每部分的屬性以及表格參數(shù)。在導(dǎo)出包含切片的文檔時(shí)，有一些同常規(guī)的導(dǎo)出操作不一樣的地方。1．命名切片因?yàn)槊總€(gè)切片對(duì)象都對(duì)應(yīng)于一個(gè)真正的圖像文件，所以在文檔中需要給切片對(duì)象命名。Fireworks在導(dǎo)出時(shí)自動(dòng)對(duì)每個(gè)切片文件進(jìn)行命名，同時(shí)也允許用戶手動(dòng)為切片對(duì)象命名。

2．導(dǎo)出切片默認(rèn)情況下，當(dāng)導(dǎo)出包含切片的Fireworks文檔時(shí)，將導(dǎo)出一個(gè)HTML文件及其相關(guān)圖像。導(dǎo)出的HTML文件可以在Web瀏覽器中查看，或?qū)肫渌鼞?yīng)用程序以供進(jìn)一步編輯。8.4行為

現(xiàn)在多數(shù)網(wǎng)頁都使用了動(dòng)態(tài)效果和人機(jī)交互特性。同Dreamweavre和Flash一樣，F(xiàn)ireworks中也能為對(duì)象添加行為。行為由觸發(fā)事件和動(dòng)作組成。添加了行為的對(duì)象能根據(jù)瀏覽者的動(dòng)作采取一些反應(yīng)措施，實(shí)現(xiàn)互動(dòng)效果。Fireworks中的行為與Dreamweaver中的行為是統(tǒng)一的。使用Fireworks編輯的行為在Dreamweaver的行為面板中仍能被編輯修改。不是所有對(duì)象都能添加行為的，F(xiàn)ireworks只允許為熱點(diǎn)或切片添加行為。如果要為普通對(duì)象添加行為，會(huì)彈出信息提示窗口，提示用戶先設(shè)置一個(gè)熱點(diǎn)或切片。單擊【熱點(diǎn)】按鈕即可在對(duì)象上繪制一個(gè)熱點(diǎn)；單擊【切片】按鈕即可為對(duì)象創(chuàng)建一個(gè)切片，用戶應(yīng)根據(jù)實(shí)際需要進(jìn)行選擇。如前面介紹的按鈕和導(dǎo)航條就采用了動(dòng)畫效果。Fireworks提供一種【行為】面板，可以方便的建立用戶需要的行為，而不需要編輯JavaScript代碼。此外，行為可以看作Fireworks內(nèi)置的JavaScript庫，它可以幫助構(gòu)建腳本，還可以對(duì)現(xiàn)有腳本進(jìn)行自動(dòng)的管理。Fireworks將輪替按鈕這種行為封裝起來，所以用戶感受不到。Fireworks的行為是通過行為面板添加和編輯的。選擇菜單欄【窗口】/【行為】命令即可調(diào)出行為面板。8.4.1簡(jiǎn)單變換圖像簡(jiǎn)單變換圖像可以用來創(chuàng)建簡(jiǎn)單翻轉(zhuǎn)圖，即當(dāng)鼠標(biāo)移過或單擊某一幅圖像（稱為原始圖像）時(shí)，顯示位于該圖下面的圖像（稱為翻轉(zhuǎn)圖像）。這也是最簡(jiǎn)單的翻轉(zhuǎn)效果。簡(jiǎn)單翻轉(zhuǎn)圖包含2幀，下面以一個(gè)簡(jiǎn)單實(shí)例制作演示簡(jiǎn)單變換圖像的使用方法。8.4.2交換圖像交換圖像行為可以將切片圖像切換為后面幀或外部圖像，簡(jiǎn)單變換圖像實(shí)際就是目標(biāo)為【幀2】的交換圖像行為。下面以一個(gè)簡(jiǎn)單實(shí)例制作演示交換圖像行為的使用方法。8.4.3設(shè)置導(dǎo)航欄圖像設(shè)置導(dǎo)航欄圖像行為可以用于導(dǎo)航條的制作。導(dǎo)航條實(shí)際上是一組相關(guān)聯(lián)的按鈕。當(dāng)某個(gè)按鈕按下后，其它按