圖像與動(dòng)畫(huà)的制作與優(yōu)化.ppt

1、8.1 圖像的制作與優(yōu)化,Fireworks是集創(chuàng)建、編輯和優(yōu)化網(wǎng)頁(yè)圖形為一體的應(yīng)用軟件，它不僅可以創(chuàng)建與編輯位圖和矢量圖，而且可以通過(guò)修剪和優(yōu)化圖形圖像來(lái)減小文件的大小。而在不影響圖形圖像質(zhì)量的情況下，文件的體積越小，網(wǎng)頁(yè)的下載速度就越快。這也是Fireworks大受歡迎的原因之一。,8.1.1 Fireworks簡(jiǎn)介-1,Fireworks擁有與Dreamweaver相似的操作界面，同樣由編輯區(qū)域、屬性面板和浮動(dòng)面板等組成。,8.1.1 Fireworks簡(jiǎn)介-2,單擊菜單欄上的“文件”，在下拉菜單中選擇“新建”命令，打開(kāi)“新建文檔”對(duì)話框，在“新建文檔”對(duì)話框中，可以通過(guò)更改寬度和高度的

2、值，來(lái)更改畫(huà)布的大小，還可以對(duì)分辨率和畫(huà)布顏色進(jìn)行修改。最后單擊“確定”。,8.1.1 Fireworks簡(jiǎn)介-3,窗口左邊的工具面板分為六個(gè)區(qū)域，分別有不同的功能。在該面板上集成了編輯圖像所需的各種工具，只需要在面板上選擇相應(yīng)的工具就可以對(duì)矢量圖、位圖進(jìn)行操作，這樣就省去了在位圖和矢量圖之間的切換操作。,8.1.1 Fireworks簡(jiǎn)介-4,和Dreamweaver的屬性面板一樣，F(xiàn)ireworks的屬性面板也是一個(gè)包含各種選項(xiàng)的動(dòng)態(tài)面板。隨著操作內(nèi)容的變化，屬性面板上的內(nèi)容也隨著發(fā)生相應(yīng)的變化。如圖8.6所示是選中畫(huà)布時(shí)，屬性面板的樣子。,8.1.1 Fireworks簡(jiǎn)介-5,在默認(rèn)的

3、情況下，Dreamweaver的面板組停放在工作區(qū)的右側(cè)。我們可以取消面板組，以及疊放面板，排列面板順序等操作。在該面板組中可以完成許多高性能操作。如圖8.7所示該面板組中有“優(yōu)化”、“層”、“資源”、“幀和記錄”和“答案”等面板，其中“層”和“答案”面板是打開(kāi)的。,8.1.1 Fireworks簡(jiǎn)介-6,在窗口中間是畫(huà)布，它是對(duì)圖像進(jìn)行繪制、修改或編輯的地方。從圖8.8中可以發(fā)現(xiàn)它提供了四種預(yù)覽模式：原始、預(yù)覽、2幅和4幅。具體的使用可以在下面的實(shí)例中給予說(shuō)明。,8.1.2 Fireworks中圖片的制作-1,更改畫(huà)布,單擊菜單欄上的“修改”，彈出其子菜單，然后移動(dòng)鼠標(biāo)指針到畫(huà)布上，在彈出其

4、子菜單后，單擊“畫(huà)布大小”命令。在對(duì)話框中輸入寬和高的值，單擊“確定”按鈕。,8.1.2 Fireworks中圖片的制作-2,畫(huà)出紅色的矩形區(qū)域,在工具面板的“矢量”區(qū)中單擊“矩形”工具，然后在工具面板的“顏色”區(qū)中單擊填充顏色塊，在彈出的調(diào)色板中選擇紅色。在畫(huà)布上,拖動(dòng)鼠標(biāo)，畫(huà)出一個(gè)紅色的矩形區(qū)域。,8.1.2 Fireworks中圖片的制作-3,輸入字母,在工具面板的“矢量”區(qū)中單擊“文本”工具，然后在編輯區(qū)的紅色矩形塊中單擊鼠標(biāo)，出現(xiàn)一個(gè)有光標(biāo)閃動(dòng)的文本框。在 文本框中輸入大寫(xiě)的字母“JL”，然后拖動(dòng)鼠標(biāo)選中這兩個(gè)字母，接著在“屬性”面板中單擊“顏色”塊，在彈出的調(diào)色板中選擇“黃色”。在

5、屬性面板中單擊“字體”框，在下拉列表中選擇“Tahoma”字體，然后單擊字號(hào)框右邊的下拉按鈕，拖動(dòng)滑動(dòng)指針，設(shè)置字號(hào)為31，在編輯區(qū)域單擊鼠標(biāo)，文字變成設(shè)置的效果。,8.1.2 Fireworks中圖片的制作-4,在工具面板的“選擇”區(qū)中單擊“選取”工具，然后在編輯區(qū)域中拖動(dòng)文本框到合適的位置，使兩個(gè)字母看起來(lái)更美觀。,8.1.2 Fireworks中圖片的制作-5,輸入漢字,重復(fù)上述操作，在紅色矩形塊的右邊輸入“杰力”兩個(gè)漢字，設(shè)置字體為“楷體”，字號(hào)為28。,單擊菜單欄上的“文件”，在彈出的文件菜單中單擊“保存”命令。對(duì)文件進(jìn)行保存。,8.1.2 Fireworks中圖片的制作-6,導(dǎo)出

6、圖片,單擊菜單欄上的“文件”，在文件菜單中單擊“導(dǎo)出”命令。 在對(duì)話框中輸入文件名，單擊“保存”按鈕。,8.1.3 Fireworks中圖片的優(yōu)化-1,除了可以直接制作圖片以外，F(xiàn)ireworks還可以對(duì)已有的圖片進(jìn)行優(yōu)化，使圖片在不影響視覺(jué)效果的情況下，體積更小，更有利于網(wǎng)絡(luò)傳輸。,8.1.3 Fireworks中圖片的優(yōu)化-2,打開(kāi)圖片,單擊菜單欄上的文件，打開(kāi)“文件”菜單，在下拉菜單中單擊“打開(kāi)”命令，在“打開(kāi)”對(duì)話框中，單擊“查找范圍”框，在下拉列表中找到存放圖片文件的文件夾，然后選種要優(yōu)化的文件，最后單擊“打開(kāi)”按鈕。,8.1.3 Fireworks中圖片的優(yōu)化-3,在窗口右邊的面板

7、組中單擊“優(yōu)化”面板的“小三角”按鈕，將“優(yōu)化”面板展開(kāi)。在“優(yōu)化”面板中單擊“設(shè)置”框，在下拉列表中選擇“GIF接近256”,將圖片優(yōu)化成GIF,文件，圖片顏色為256色。,優(yōu)化圖片,8.1.3 Fireworks中圖片的優(yōu)化-4,單擊文件菜單，在下拉菜單中選擇“導(dǎo)出”命令，打開(kāi)“導(dǎo)出”對(duì)話框。在“導(dǎo)出”對(duì)話框中輸入文件名，單擊“保存”命令。,導(dǎo)出圖片,打開(kāi)保存文件的文件夾，可以發(fā)現(xiàn)優(yōu)化的效果是非常明顯的。,8.1.4 Fireworks與Dreamweaver 整合應(yīng)用-1,網(wǎng)站的制作過(guò)程一般可分為網(wǎng)頁(yè)組件制作準(zhǔn)備、網(wǎng)頁(yè)制作和網(wǎng)頁(yè)管理三個(gè)階段。在網(wǎng)頁(yè)組件制作準(zhǔn)備階段主要使用Firework

8、s對(duì)圖片進(jìn)行處理，其他兩個(gè)階段主要采用Dreamweaver 進(jìn)行操作。通過(guò)兩個(gè)軟件的整合可以實(shí)現(xiàn)網(wǎng)站的決大部分操作。,除了這種整合應(yīng)用以外，在Dreamweaver中隨時(shí)可以打開(kāi)Fireworks，對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行編輯和優(yōu)化。,8.1.4 Fireworks與Dreamweaver 整合應(yīng)用-2,在Dreamweaver窗口中，選中圖片，然后在“屬性”面板中單擊“編輯”按鈕，打開(kāi)Fireworks。,在Fireworks窗口中可以發(fā)現(xiàn)，圖形文件被打開(kāi)，特別是圖片編輯區(qū)有“編輯自Dreamwea”的字樣，表明該圖片來(lái)自Dreamweaver。對(duì)圖片進(jìn)行編輯或優(yōu)化后，單擊“完成”按鈕，F(xiàn)ire

9、works編輯窗口自動(dòng)關(guān)閉，同時(shí)Fireworks程序窗口最小化。Dreamweaver窗口中圖片顯示編輯后的樣子。,8.2 動(dòng)畫(huà)的制作與優(yōu)化,現(xiàn)在的網(wǎng)絡(luò)可以說(shuō)是Flash時(shí)代，越來(lái)越多的人喜歡Flash動(dòng)畫(huà)；越來(lái)越多的網(wǎng)站使用Flash制作的動(dòng)畫(huà)。不知Flash為何物，會(huì)直接被人認(rèn)為是網(wǎng)絡(luò)盲，甚至是電腦盲。,Flash功能強(qiáng)大，不僅僅是制作動(dòng)畫(huà)，甚至有人直接用它來(lái)制作網(wǎng)頁(yè)。特別值得一提的是，它與Dreamweaver、Fireworks等軟件整合使用天衣無(wú)縫。,8.2.1 Flash簡(jiǎn)介-1,Flash為廣大用戶提供了三種不同的使用模式，我們多采用一般用戶模式，設(shè)計(jì)者模式是專為動(dòng)畫(huà)設(shè)計(jì)師準(zhǔn)備

10、的；而開(kāi)發(fā)者模式是給程序開(kāi)發(fā)人員使用的。采用不同的模式可以屏蔽掉一些功能，為不同需求的用戶帶來(lái)極大的便利。單擊“,窗口”菜單，選擇“面板設(shè)置”下的不同命令可以在不同的模式下進(jìn)行切換。,8.2.1 Flash簡(jiǎn)介-2,工具面板提供了一些常用的繪圖工具。使用這些工具可以很容易地繪制出各種圖形。該面板共分為4部分，工具部分主要用來(lái)創(chuàng)建或改變圖像或文本；查看部分用來(lái)調(diào)整編輯的舞臺(tái)；顏色部分選擇填充的顏色或線條的顏色；選項(xiàng)部分則隨著選取工具的不同，而出現(xiàn)相應(yīng)的修改工具。,8.2.1 Flash簡(jiǎn)介-3,動(dòng)作-幀面板是提供內(nèi)嵌程序語(yǔ)言的編輯面板，作為初級(jí)使用者一般用不到。屬性面板則用處很大，它和Dream

11、weaver、Fireworks的屬性面板一樣，其內(nèi)容會(huì)根據(jù)所選對(duì)象的不同而發(fā)生變化。如圖是新建一個(gè)文件時(shí)，屬性面板的樣子。,8.2.1 Flash簡(jiǎn)介-4,在窗口中間的編輯區(qū)域，我們稱其為舞臺(tái)。它主要用于繪制或?qū)雸D片，添加文本或聲音以及添加附加行為作為導(dǎo)航按鈕等等操作。在沒(méi)有特殊效果的情況下，F(xiàn)lash動(dòng)畫(huà)都可以直接在舞臺(tái)上播放，而不必轉(zhuǎn)換成可播放的動(dòng)畫(huà)文件。,8.2.1 Flash簡(jiǎn)介-5,Flash的時(shí)間軸主要用來(lái)組織和控制動(dòng)畫(huà)在一定時(shí)間內(nèi)播放的層數(shù)和幀數(shù)。我們知道一幀一幀靜止的圖片連續(xù)起來(lái)就形成了動(dòng)畫(huà)。所以最簡(jiǎn)單的動(dòng)畫(huà)制作方法就是畫(huà)出一幀一幀的圖片，然后通過(guò)時(shí)間軸來(lái)控制他們的播放速度

12、來(lái)實(shí)現(xiàn)。,時(shí)間軸由圖層、幀和播放頭組成。,8.2.1 Flash簡(jiǎn)介-6,在默認(rèn)的情況下，面板組包含“混色器”、“顏色樣本”、“組件”和“問(wèn)題解答”四個(gè)。通過(guò)“窗口”菜單可以添加面板，當(dāng)然也可以隱藏面板。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-1,補(bǔ)間動(dòng)畫(huà)是創(chuàng)建隨時(shí)間移動(dòng)或更改的動(dòng)畫(huà)的一種有效方法，并且最大程度地減小所生成的文件。在補(bǔ)間動(dòng)畫(huà)中，F(xiàn)lash能夠自動(dòng)地在兩個(gè)關(guān)鍵幀之間插入幀的值或形狀來(lái)創(chuàng)建動(dòng)畫(huà)，使動(dòng)畫(huà)變得生動(dòng)。,補(bǔ)間動(dòng)畫(huà)分為運(yùn)動(dòng)漸變與形狀漸變兩種動(dòng)畫(huà)。 運(yùn)動(dòng)漸變是指在一個(gè)時(shí)間點(diǎn)定義一個(gè)實(shí)例或文字塊的位置、大小等特性，在另一個(gè)時(shí)間點(diǎn)改變這些屬性，F(xiàn)lash自動(dòng)插入動(dòng)畫(huà)幀，形成兩者之

13、間平滑的過(guò)度。 形狀漸變是指在一個(gè)時(shí)間點(diǎn)繪制一個(gè)形狀，在另一個(gè)時(shí)間點(diǎn)更改該形狀，F(xiàn)lash自動(dòng)插入動(dòng)畫(huà)幀，形成兩者之間平滑的過(guò)渡。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-2,修改舞臺(tái)大小,單擊菜單欄上的“修改”，在其下拉菜單中單擊“文檔”命令，在“文檔屬性”對(duì)話框中，修改尺寸值為圖片的大小，注意默認(rèn)單位為像素，單擊“確定”后，舞臺(tái)變?yōu)樵O(shè)置的大小。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-3,將圖片導(dǎo)入到舞臺(tái)中，作為背景,單擊文件菜單，選擇“導(dǎo)入”命令。在“導(dǎo)入”對(duì)話框中，選擇查找范圍，找到要導(dǎo)入的圖片文件，單擊“打開(kāi)”按鈕，單擊選擇工具，拖動(dòng)圖片，使它完全遮蓋住白色的舞臺(tái)背景。,8.2.2

14、使用Flash制作補(bǔ)間動(dòng)畫(huà)-4,使用鼠標(biāo)單擊第30幀，然后單擊“插入”菜單，在下拉菜單中單擊“幀”命令。這樣，從第1幀到第30幀都使用了該圖片作為背景。同時(shí),確定動(dòng)畫(huà)長(zhǎng)度,也設(shè)定了整個(gè)動(dòng)畫(huà)為30幀。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-5,插入圖層和文字,在時(shí)間軸面板中單擊“插入圖層”按鈕，在圖層1上插入一個(gè)新的圖層。選中圖層2的第1幀，然后單擊“工具”面板中的“文本工具”。,在圖片上方單擊鼠標(biāo)，出現(xiàn)文本框，輸入一個(gè)字“歡”，然后選中這個(gè)字，在屬性面板中更改合適的字體和字號(hào)，并設(shè)置字體顏色為藍(lán)色。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-6,選中圖層2的第30幀，單擊“插入”菜單，在下拉菜

15、單中選擇“關(guān)鍵幀”命令，在第30幀插入一個(gè)關(guān)鍵幀。,選擇“工具”面板中的選取工具，拖動(dòng)文字塊“歡”到圖片中的合適位置，,插入關(guān)鍵幀,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-7,創(chuàng)建補(bǔ)間動(dòng)畫(huà),選中圖層2上的第1幀，在屬性面板中，單擊“補(bǔ)間”右邊的下拉框，在下拉列表中選擇“運(yùn)動(dòng)”。為第1幀到第30幀之間設(shè)置上補(bǔ)間動(dòng)畫(huà)，可以發(fā)現(xiàn)兩者之間有一條黑色的箭頭。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-8,創(chuàng)建補(bǔ)間動(dòng)畫(huà),重復(fù)上述步驟，插入圖層3，在圖片下面插入一個(gè)文本框，輸入一個(gè)字“迎”，并設(shè)置字的字體、字號(hào)、字體顏色與“歡”相同。用同樣的方法在圖層3的第30幀插入一個(gè)關(guān)鍵幀，將,“迎”拖入圖片合適位置，并

16、設(shè)置補(bǔ)間動(dòng)畫(huà)。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-9,創(chuàng)建補(bǔ)間動(dòng)畫(huà),再次重復(fù)操作，在圖片上面插入“光”，在圖片下插入“臨”，并設(shè)置上動(dòng)畫(huà)。單擊“控制”菜單，在下拉菜單中選擇“播放”命令。,可以看到四個(gè)字分別進(jìn)入圖片上的動(dòng)畫(huà)效果。,8.2.2 使用Flash制作補(bǔ)間動(dòng)畫(huà)-10,導(dǎo)出動(dòng)畫(huà),單擊“文件”菜單，在下拉菜單中選擇“導(dǎo)出”命令。,在“導(dǎo)出影片”對(duì)話框中，輸入文件名，單擊保存。將影片保存，將來(lái)可以隨時(shí)將他插入到網(wǎng)頁(yè)中。另外，也,可以更改保存類型為GIF文件，生成GIF動(dòng)畫(huà)。,8.2.3 使用Flash制作逐幀動(dòng)畫(huà)-1,逐幀動(dòng)畫(huà)是指更改每一幀中的內(nèi)容，來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。它最適合于每一幀中的

17、圖像都在更改而不是僅僅簡(jiǎn)單地在舞臺(tái)上移動(dòng)的復(fù)雜動(dòng)畫(huà)。逐幀動(dòng)畫(huà)增加文件大小的速度比補(bǔ)間動(dòng)畫(huà)快的多。,在逐幀動(dòng)畫(huà)中，F(xiàn)lash會(huì)保存每個(gè)完整幀的值。,8.2.3 使用Flash制作逐幀動(dòng)畫(huà)-2,在Flash中建立一個(gè)新的文件，修改文檔大小為圖片大小，然后導(dǎo)入圖片到圖層1中，并拖動(dòng)該圖片到合適的位置。選中圖層1中的第30幀，單擊“插入”菜單，選擇“幀”命令，,設(shè)置前30幀為相同的背景。,建立文件,8.2.3 使用Flash制作逐幀動(dòng)畫(huà)-3,在時(shí)間軸面板中單擊“插入圖層”按鈕，在圖層1上插入一個(gè)新的圖層。選中圖層2的第1幀，然后單擊“工具”面板的文字工具，在圖片上輸入“歡迎光臨”四個(gè)字。使用選取工具，

18、調(diào)整文字在圖片中的位置，并設(shè)置字體、字號(hào)和文字顏色等。,拖動(dòng)鼠標(biāo)，選中圖層2中的第1幀到第30幀。保持選取狀態(tài)，單擊鼠標(biāo)右鍵，在打開(kāi)的快捷菜單中選擇“轉(zhuǎn)換為關(guān)鍵幀”命令。,8.2.3 使用Flash制作逐幀動(dòng)畫(huà)-4,選中第5幀，將文字框中的“迎光臨”幾個(gè)字刪除。,選中第10幀，將文字框中的“光臨”幾個(gè)字刪除。,選中第15幀，將文字框中的“臨”刪除。,拖動(dòng)鼠標(biāo)，選中圖層2中的第1幀到第4幀。保持選取狀態(tài)，單擊鼠標(biāo)右鍵，在打開(kāi)的快捷菜單中選擇“清除關(guān)鍵幀”命令。如圖8.65所示。然后按下鍵盤(pán)上的“del”鍵，將圖層上的文字刪除。,8.2.3 使用Flash制作逐幀動(dòng)畫(huà)-5,單擊“控制”菜單，在下拉菜單中選擇“播放”命令，這時(shí)可以看到文字依次出現(xiàn)的效果。,與補(bǔ)間動(dòng)畫(huà)一樣，保存文件后選擇“文件”菜單下的“導(dǎo)出”命令，將Flash影片導(dǎo)出，可以隨時(shí),插入到Dreamweaver中。,8.2.4 Flash與Dreamweaver 整合應(yīng)用1,Flash也能夠與Dreamweaver整合使用。在網(wǎng)頁(yè)制作過(guò)程中，插入Flash文本與Flash按鈕就是整合使用的好例子。,Dreamweaver還可以直接調(diào)用Flash對(duì)網(wǎng)頁(yè)中已插入的圖