本章知識(shí)點(diǎn)和技能點(diǎn)：進(jìn)一步加深理解Fireworks的基本概念綜合應(yīng)用工具箱中的各種工具Fireworks的基本操作：羽化、蒙版、按鈕、翻轉(zhuǎn)效果、動(dòng)畫、圖像的優(yōu)化與切割第3章Fireworks應(yīng)用介紹制作及導(dǎo)出動(dòng)畫基本操作制作及導(dǎo)出彈出菜單本章要點(diǎn)和概念第3章Fireworks應(yīng)用介紹基本操作

羽化

蒙版

按鈕

翻轉(zhuǎn)效果圖像優(yōu)化、切割及導(dǎo)出

3.1Fireworks不僅能夠編輯位圖圖像中的個(gè)別像素也能編輯像素區(qū)域，它將豐富的位圖處理藝術(shù)與以往只能應(yīng)用于矢量對(duì)象的圖形工具有機(jī)地結(jié)合起來(lái)。羽化：羽化就是為所選像素創(chuàng)建透明效果，使像素選區(qū)的邊緣模糊，從而達(dá)到所選區(qū)域與周圍的像素混合的目的。羽化主要是指對(duì)選區(qū)的邊緣進(jìn)行羽化，并不會(huì)使整個(gè)位圖像素羽化。當(dāng)復(fù)制選區(qū)并將其粘貼到另一個(gè)背景中時(shí)，羽化非常有用?；静僮?.1蒙版：蒙版又稱遮罩，是一種由上層對(duì)象為下層對(duì)象提供外形，而下層對(duì)象為上層對(duì)象提供色彩的一種圖像處理效果。通常，將上層對(duì)象稱為蒙版對(duì)象，而下層對(duì)象則稱為被蒙版對(duì)象。矢量和位圖對(duì)象都可以成為蒙版對(duì)象或被蒙版對(duì)象。

基本操作3.1

矢量蒙版

文字蒙版

修改蒙版矢量蒙版：基本操作3.1文字蒙版：基本操作3.1修改蒙版：基本操作3.1按鈕：按鈕是網(wǎng)頁(yè)的導(dǎo)航元素，一般有四種不同的狀態(tài)，每種狀態(tài)都表示該按鈕在響應(yīng)鼠標(biāo)事件時(shí)的外觀。彈起狀態(tài)，指按鈕的默認(rèn)外觀或靜止時(shí)的外觀。滑過(guò)狀態(tài)，指當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí)該按鈕的外觀。此狀態(tài)提醒用戶單擊鼠標(biāo)時(shí)很可能會(huì)引發(fā)一個(gè)動(dòng)作。按下狀態(tài)，指鼠標(biāo)單擊后的按鈕外觀。此按鈕狀態(tài)通常在多按鈕導(dǎo)航欄上表示當(dāng)前網(wǎng)頁(yè)。按下時(shí)滑過(guò)狀態(tài)，指當(dāng)鼠標(biāo)滑過(guò)處于按下狀態(tài)時(shí)按鈕的外觀?；静僮?.1翻轉(zhuǎn)效果：當(dāng)鼠標(biāo)滑過(guò)或指向某一圖像時(shí)圖像會(huì)發(fā)生變化，被替換成其他圖像或文字。這種翻轉(zhuǎn)效果以往都是利用JavaScript語(yǔ)言來(lái)實(shí)現(xiàn)的，具有很強(qiáng)的專業(yè)性，但現(xiàn)在可以直接利用Fireworks方便地實(shí)現(xiàn)這種效果?；静僮?.1圖像優(yōu)化、切割及導(dǎo)出：

圖像優(yōu)化：在Fireworks中，優(yōu)化設(shè)置只應(yīng)用于被導(dǎo)出的圖像。因此，在圖像的設(shè)計(jì)制作過(guò)程中可以自由地進(jìn)行創(chuàng)作，而不必?fù)?dān)心顏色的限制或是應(yīng)用后的效果。然后在準(zhǔn)備導(dǎo)出圖像時(shí)，再對(duì)優(yōu)化設(shè)置進(jìn)行比較、選擇。在Fireworks中，對(duì)圖像進(jìn)行優(yōu)化的內(nèi)容包括以下方面：選擇一個(gè)最佳的文件儲(chǔ)存格式設(shè)置文件格式的參數(shù)選項(xiàng)調(diào)整圖像中的顏色基本操作3.1圖像優(yōu)化、切割及導(dǎo)出：

圖像切割：在不減少內(nèi)容的情況下，網(wǎng)頁(yè)應(yīng)做得越小越好。而給網(wǎng)頁(yè)瘦身最有效的方法就是減小圖片的大小。但是當(dāng)不得不在網(wǎng)頁(yè)中插入一幅大尺寸的圖像時(shí)，可以采用切圖的方法將一整幅圖片按照相近的色區(qū)切割成多個(gè)小圖片，并對(duì)每個(gè)小圖片進(jìn)行優(yōu)化，這樣可達(dá)到減小圖片大小的目的?；静僮?.1制作動(dòng)畫在Fireworks中，可以通過(guò)創(chuàng)建動(dòng)畫元件自動(dòng)生成動(dòng)畫。每個(gè)元件儲(chǔ)存在對(duì)應(yīng)的一個(gè)狀態(tài)中，當(dāng)按順序播放所有狀態(tài)時(shí)，就形成了動(dòng)畫。利用動(dòng)畫元件可以制作出淡入、淡出、變大、變小、旋轉(zhuǎn)等效果。一個(gè)文檔中可以有多個(gè)動(dòng)畫元件，從而創(chuàng)建較復(fù)雜的動(dòng)畫效果。Fireworks可以將動(dòng)畫作為GIF動(dòng)畫文件或SWF文件等導(dǎo)出。制作及導(dǎo)出動(dòng)畫3.2

狀態(tài)動(dòng)畫

創(chuàng)建元件動(dòng)畫

狀態(tài)動(dòng)畫制作及導(dǎo)出動(dòng)畫3.2

創(chuàng)建動(dòng)畫元件制作及導(dǎo)出動(dòng)畫3.2導(dǎo)出動(dòng)畫在導(dǎo)出動(dòng)畫之前，需要進(jìn)行一些設(shè)置，這樣可以使動(dòng)畫的載入更容易、播放更流暢。導(dǎo)出動(dòng)畫的設(shè)置可以在優(yōu)化面板或者“圖像預(yù)覽”對(duì)話框中進(jìn)行，設(shè)置的內(nèi)容包括：動(dòng)畫文件的導(dǎo)出格式、透明度、調(diào)色板、抖動(dòng)等。制作及導(dǎo)出動(dòng)畫3.2制作彈出菜單：彈出菜單在網(wǎng)頁(yè)制作中起到重要的導(dǎo)航作用，當(dāng)鼠標(biāo)移到觸發(fā)網(wǎng)頁(yè)對(duì)象，如切片、熱點(diǎn)、按鈕上或單擊這些對(duì)象時(shí)，瀏覽器中即顯示彈出菜單，供用戶選擇瀏覽。一般在彈出菜單中都附加URL鏈接。每個(gè)彈出菜單項(xiàng)都以HTML或圖像單元格的形式顯示，并具有“彈起”狀態(tài)和“滑過(guò)”狀態(tài)，并且在這兩種狀態(tài)中都包含文本。要預(yù)覽彈出菜單，可按F12鍵在瀏覽器中預(yù)覽。在Fireworks文檔窗口中的預(yù)覽狀態(tài)不會(huì)顯示彈出菜單。制作及導(dǎo)出彈出菜單3.3導(dǎo)出彈出菜單：執(zhí)行菜單【文件】→【導(dǎo)出】命令，打開“導(dǎo)出”對(duì)話框，選擇導(dǎo)出類型為“HTML和圖像”，文件名為popmenu.htm，單擊【保存】按鈕，即可將彈出菜單導(dǎo)出。Fireworks生成了在Web瀏覽器中查看彈出菜單所需的所有JavaScript。將含有彈出菜單的Fireworks文檔導(dǎo)出為HTML時(shí)，會(huì)自動(dòng)生成一個(gè)名為mm_css_menu.js的JavaScript文件，此文件與HTML文件在同一文件夾中。當(dāng)菜單包含子菜單時(shí)，F(xiàn)ireworks會(huì)生成一個(gè)名為arrows.gif的圖像文件。該圖像是一個(gè)出現(xiàn)在菜單項(xiàng)旁邊的小箭頭，它表示存在一個(gè)子菜單。無(wú)論文檔中包含多少個(gè)子菜單，F(xiàn)ireworks總是使用同一個(gè)arrows.gif文件。制作及導(dǎo)出彈出菜單3.3

金屬特效文字

圖標(biāo)立體按鈕水波漣漪飛舞的蝴蝶制作實(shí)例本章要點(diǎn)和概念羽化就是為所選像素創(chuàng)建透明效果，使像素選區(qū)的邊緣模糊，從而達(dá)到所選區(qū)域與周圍的像素混合的目的。羽化半徑?jīng)Q定了選區(qū)邊緣模糊的像素量，數(shù)值越大，羽化程度也越大。蒙版又稱遮罩，是一種由最上層對(duì)象為下層對(duì)象提供外形，而下層對(duì)象為最上層對(duì)象提供色彩的一種圖像處理效果。按鈕是網(wǎng)頁(yè)的導(dǎo)航元素，利用Fireworks中的按鈕編輯器可以創(chuàng)建各種形式的JavaScript按鈕。導(dǎo)航欄實(shí)際上是一組外觀、形狀一樣的按鈕，只是其上顯示的文字不同而已。翻轉(zhuǎn)效果是指當(dāng)鼠標(biāo)滑過(guò)或指向某一圖像時(shí)圖像會(huì)發(fā)生變化。注意在交換圖像的位置上只能創(chuàng)建切片區(qū)域。本章要點(diǎn)和概念對(duì)圖像進(jìn)行優(yōu)化時(shí)，在圖