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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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