1、第1章 Flash應(yīng)用基礎(chǔ),1.1 Flash動(dòng)畫(huà)基礎(chǔ)及其制作流程 1.2 Flash簡(jiǎn)介 1.3 Flash應(yīng)用領(lǐng)域 1.4 習(xí)題與實(shí)驗(yàn)指導(dǎo),主目錄,1.1 Flash動(dòng)畫(huà)基礎(chǔ)及其制作流程,1.1.1 Flash動(dòng)畫(huà)的基本概念,計(jì)算機(jī)動(dòng)畫(huà)是在傳統(tǒng)動(dòng)畫(huà)的基礎(chǔ)上，采用計(jì)算機(jī)圖形圖像技術(shù)而迅速發(fā)展起來(lái)的一門(mén)高新技術(shù)。動(dòng)畫(huà)使得多媒體信息更加生動(dòng)，富于表現(xiàn)。從傳統(tǒng)意義上說(shuō)，動(dòng)畫(huà)是一門(mén)通過(guò)在連續(xù)多格的膠片上拍攝一系列的單個(gè)畫(huà)面，膠片進(jìn)行運(yùn)動(dòng)從而產(chǎn)生動(dòng)態(tài)視覺(jué)的技術(shù)和藝術(shù)。這種視覺(jué)是通過(guò)將膠片以一定的速率放映的形式體現(xiàn)出來(lái)的。一般說(shuō)來(lái)，動(dòng)畫(huà)是一種動(dòng)態(tài)生成一系列相關(guān)畫(huà)面的處理方法，其中的每一幅與前一幅略有不同

2、。計(jì)算機(jī)動(dòng)畫(huà)是采用連續(xù)播放靜止圖像的方法產(chǎn)生運(yùn)動(dòng)的效果，計(jì)算機(jī)動(dòng)畫(huà)的原理與傳統(tǒng)動(dòng)畫(huà)基本相同，只是在傳統(tǒng)動(dòng)畫(huà)的基礎(chǔ)上把計(jì)算機(jī)技術(shù)用于動(dòng)畫(huà)的處理和應(yīng)用，并可以達(dá)到傳統(tǒng)動(dòng)畫(huà)所達(dá)不到的效果。由于采用數(shù)字處理方式，動(dòng)畫(huà)的運(yùn)動(dòng)效果、畫(huà)面色調(diào)、紋理、光影效果等可以不斷改變，輸出方式也多種多樣。Flash動(dòng)畫(huà)是以“流”的形式進(jìn)行播放，在播放的同時(shí)還能自動(dòng)將后面部分文件下載，實(shí)現(xiàn)多媒體的交互。,1.1.2 數(shù)字圖像類(lèi)型,計(jì)算機(jī)記錄數(shù)字圖像的方式有兩種：一種是通過(guò)數(shù)學(xué)方法記錄，即矢量圖；另一種是用像素點(diǎn)陣方法記錄，即位圖。,1矢量圖 矢量圖，也叫向量圖，是一種面向?qū)ο蠡跀?shù)學(xué)方法的繪圖方式，在數(shù)學(xué)上定義為一系列由

3、線連接的點(diǎn)。矢量文件中的圖形元素稱為對(duì)象。每個(gè)對(duì)象都是一個(gè)自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。既然每個(gè)對(duì)象都是一個(gè)自成一體的實(shí)體，就可以在維持它原有清晰度和彎曲度的同時(shí)，多次移動(dòng)和改變它的屬性，而不會(huì)影響圖例中的其他對(duì)象。這些特征使得基于矢量的程序特別適用于圖例和三維建模，因?yàn)樗鼈兺ǔＲ竽軇?chuàng)建和操作單個(gè)對(duì)象。矢量繪圖是基于算法的，與分辨率無(wú)關(guān)。這意味著它們可以按最高分辨率顯示到輸出設(shè)備上，其顯示效果仍然相同，如右下圖所示。,矢量圖形的致命缺陷是，色彩單調(diào)，無(wú)法像位圖可以精確地表現(xiàn)自然界的景象。,矢量圖放大效果,2位圖 位圖，也叫點(diǎn)陣圖，由像素組成。像素是組成位圖圖像

4、的最小單位，是圖像中的一個(gè)顏色點(diǎn)。每個(gè)像素都有一個(gè)特定的位置和顏色值。當(dāng)放大位圖時(shí)，可以清晰的看見(jiàn)構(gòu)成整個(gè)圖像的無(wú)數(shù)單個(gè)方塊。擴(kuò)大位圖尺寸的效果是增多單個(gè)像素，從而使線條和形狀顯得參差不齊。然而，如果從稍遠(yuǎn)的位置觀看它，位圖圖像的顏色和形狀又顯得是連續(xù)的。由于每一個(gè)像素都是單獨(dú)染色的，讀者可以通過(guò)以每次一個(gè)像素的頻率操作選擇區(qū)域而產(chǎn)生近似相片的逼真效果，諸如加深陰影和加重顏色?？s小位圖尺寸也會(huì)使原圖變形，因?yàn)榇伺e是通過(guò)減少像素來(lái)使整個(gè)圖像變小的。同樣，由于位圖圖像是以排列的像素集合體形式創(chuàng)建的，所以不能單獨(dú)操作局部位圖，如右下圖所示。,位圖放大效果,位圖圖像彌補(bǔ)了矢量圖像的缺陷，它可以很容易地

5、在不同軟件之間交換文件，而缺點(diǎn)則是它無(wú)法制作真正的3D圖像，并且圖像縮放和旋轉(zhuǎn)時(shí)會(huì)產(chǎn)生失真現(xiàn)象，同時(shí)文件較大，對(duì)內(nèi)存和硬盤(pán)空間容量的需求也較高。,3矢量圖與位圖的關(guān)系 矢量圖與位圖是兩種不同類(lèi)型的圖像，他們各有優(yōu)缺點(diǎn)，兩者各自的好處幾乎是無(wú)法相互替代的，各自都有著廣泛的應(yīng)用。 （1）矢量圖與位圖的轉(zhuǎn)換 通過(guò)軟件，矢量圖可以輕松地轉(zhuǎn)化為位圖，而位圖轉(zhuǎn)化為矢量圖就需要經(jīng)過(guò)復(fù)雜而龐大的數(shù)據(jù)處理，而且生成的矢量圖的質(zhì)量絕對(duì)不能和原來(lái)的圖形比擬。 （2）矢量圖與位圖的組合使用 矢量圖和位圖在應(yīng)用上也是可以相互結(jié)合的，比如在矢量文件中嵌入位圖實(shí)現(xiàn)特別的效果，再比如在三維影像中用矢量建模和位圖貼圖實(shí)現(xiàn)逼真的

6、視覺(jué)效果等等。,1.1.3 色彩的應(yīng)用基礎(chǔ),自然界有許許多多的色彩，可分為非彩色和彩色兩大類(lèi)。非彩色是指沒(méi)有飽和度的顏色，如黑色、白色和灰色。彩色是指有飽和度的顏色，如紅、橙、黃、綠、藍(lán)、紫等。盡管自然界的色彩千千萬(wàn)萬(wàn)，各不相同，但任何一種顏色（排除非彩色類(lèi)，因?yàn)樗鼈冎挥辛炼葘傩裕┒加猩{(diào)、飽和度和亮度三個(gè)方向的屬性，這就是色彩的三要素。 (1)色調(diào) 色調(diào)也叫色相，是指顏色所呈現(xiàn)出來(lái)的質(zhì)地面貌，即從物體反射或透過(guò)物體傳播的顏色，是區(qū)別色彩種類(lèi)的重要依據(jù)，如紅、橙、黃、綠、藍(lán)、紫等都代表一種具體的色調(diào)。 (2)飽和度 飽和度也叫彩度，指顏色的強(qiáng)度或純度。飽和度表示色相中灰色分量所占的比例，它使用

7、從0（灰色）至100%（完全飽和）的百分比來(lái)度量。光譜中的紅、黃、綠、藍(lán)、紫等色光都是最純的高純度色彩。,1. 色彩的三要素,(3)亮度 亮度也叫明度，是指顏色的相對(duì)明暗程度，這是所有色彩都具有的屬性，表現(xiàn)為光源所發(fā)的光由極暗(亮度最小)到極亮(亮度最大)之間的變化。通常用從0(黑色)至100%(白色)的百分比來(lái)度量。明度關(guān)系是搭配色彩的基礎(chǔ)，明度最適宜于表現(xiàn)物體的立體感和空間感。 (4)色調(diào)、飽和度和亮度三要素的關(guān)系 任何色調(diào)在高飽和度時(shí)都具有特定的亮度，假如亮度變了飽和度就會(huì)降低。 高飽和度的色調(diào)加白或加黑，降低了該色相的飽和度，同時(shí)也提高或降低了該色調(diào)的亮度。 高飽和度的色調(diào)與之不同亮度

8、的灰色相加，降低了該色彩的飽和度，同時(shí)使亮度向該灰色的亮度靠攏。高飽和度的色調(diào)如果與同亮度的灰色混合，可構(gòu)成色相相同亮度不同的系列。,2. 色彩模式,色彩模式是指計(jì)算機(jī)以及輸入輸出設(shè)備用來(lái)定義顏色的不同方式。在Photoshop中，顏色模式?jīng)Q定用來(lái)顯示和打印Photoshop文檔的色彩模型。在Photoshop中常用的色彩模式有RGB模式、CMYK模式、HSB模式和Lab模式等，其中最常用的是RGB與CMYK模式。RGB用于屏幕圖像處理，CMYK用于圖像打印。,（1）RGB模式 RGB色彩模式是一種最為常見(jiàn)并且使用最廣泛的色彩模式，RGB是“Red(紅色)”、“Green(綠色)”和“Blue

9、(藍(lán)色)”的縮寫(xiě)。它是一種加色模式，如右圖所示，大部分色譜都是由紅色、綠色和藍(lán)色三色光混合而成。,RGB色彩模式,（2）HSB模式 HSB色彩模式是根據(jù)日常生活中人眼的視覺(jué)特征而制定的一套色彩模式，最接近于人類(lèi)對(duì)色彩辨認(rèn)的思考方式。HSB色彩模式以色相（H）、飽和度（S）和亮度（B）描述顏色的基本特征。HSB色彩模式比RGB色彩模式更為直觀和更容易理解。在各種圖像處理程序的色彩設(shè)置對(duì)話框中經(jīng)常會(huì)看到HSB模式，如下圖所示，這是Flash的“顏色”對(duì)話框和Windows畫(huà)圖程序的“編輯顏色”對(duì)話框，可以看到，在對(duì)話框的右下部分都有HSB參數(shù)。,Flash“顏色”對(duì)話框,1.1.4 Flash動(dòng)畫(huà)

10、的制作流程,完成一部?jī)?yōu)秀的Flash動(dòng)畫(huà)作品需要經(jīng)過(guò)很多的制作環(huán)節(jié)，其中每一環(huán)節(jié)的質(zhì)量都直接關(guān)系到作品的最終效果，因此應(yīng)該認(rèn)真地把握每個(gè)環(huán)節(jié)的制作，切忌邊做邊看邊想。Flash動(dòng)畫(huà)的制作工作流程大致可分為前期策劃、素材搜集、動(dòng)畫(huà)制作、后期測(cè)試與發(fā)布等環(huán)節(jié)，如下圖所示。,動(dòng)畫(huà)制作工作流程圖,本章目錄,1.2 Flash簡(jiǎn)介,1.2.1 Flash概述,Flash的前身是Future Splash，它是為了完善Macromedia的拳頭產(chǎn)品Drector而開(kāi)發(fā)的一款用于網(wǎng)絡(luò)發(fā)布的插件。1996年原開(kāi)發(fā)公司被Macromedia收購(gòu)后，其核心產(chǎn)品也正式更名為Flash。Flash已相繼發(fā)行了Flas

11、h 1.0、Flash 2.0、Flash3.0、Flash 4.0、Flash 15.0、Flash MX、Flash MX 2004、Flash 8，自Macromedia被Adobe 收購(gòu)后，于2007年推出Adobe Flash CS3。 Flash技術(shù)發(fā)展到今天，已經(jīng)成為了真正的Flash動(dòng)畫(huà)標(biāo)準(zhǔn)，而且事實(shí)上還是多媒體網(wǎng)絡(luò)領(lǐng)域的鑒定標(biāo)準(zhǔn)，現(xiàn)在網(wǎng)上可以隨處看到用Flash技術(shù)制作的網(wǎng)站動(dòng)畫(huà)，網(wǎng)站廣告Banner條以及大量的動(dòng)畫(huà)、MTV、游戲等，因?yàn)镕lash簡(jiǎn)單易用而且是基于小體積的.swf格式，因此在世界范圍內(nèi)得到了廣泛的應(yīng)用和推廣，F(xiàn)lash已經(jīng)成為互聯(lián)網(wǎng)多媒體的重要分支。 Ado

12、be Flash CS3的推出，可以說(shuō)是對(duì)舊版本的一次全面擴(kuò)充和增強(qiáng)。Flash CS3功能更加強(qiáng)大，使Flash動(dòng)畫(huà)的性能和開(kāi)發(fā)效率都得到了很大的提高。,Flash具有很多的特點(diǎn)，包括矢量動(dòng)畫(huà)格式的文件體積小，圖像質(zhì)量好，流式的播放方式，支持多種多樣的文件格式，以及簡(jiǎn)單的操作和插件播放形式。 1使用矢量圖形 矢量圖形與位圖圖形不同的是，存儲(chǔ)圖片只占用極少的空間，而且播放時(shí)，矢量圖形可以任意縮放尺寸而不影響圖形的質(zhì)量。 2使用流式播放技術(shù) Flash播放器在下載Flash影片時(shí)采用流媒體方式，即實(shí)現(xiàn)Flash動(dòng)畫(huà)可以邊播放邊下載，從而緩解了網(wǎng)頁(yè)瀏覽者焦急等待的情緒。 3減小文件大小 除了矢量圖

13、文件特別小之外，通過(guò)使用關(guān)鍵幀和圖符使得所生成的動(dòng)畫(huà)（.swf）文件非常小，幾K字節(jié)的動(dòng)畫(huà)文件就可以實(shí)現(xiàn)許多令人心動(dòng)的動(dòng)畫(huà)效果，用在網(wǎng)頁(yè)設(shè)計(jì)上不僅可以使網(wǎng)頁(yè)更加生動(dòng)，提高下載速度，而且能夠以很短的時(shí)間打開(kāi)網(wǎng)頁(yè)并得以播放。,1.2.2 Flash 特點(diǎn),4引入多媒體技術(shù) 把音樂(lè)、動(dòng)畫(huà)、聲效、交互方式融合在一起，越來(lái)越多的人已經(jīng)把Flash作為設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)的首選工具，并且創(chuàng)作出了許多非常經(jīng)典的動(dòng)畫(huà)效果。而且在Flash4.0的版本中就可以支持MP3的音樂(lè)格式，這使得加入音樂(lè)的動(dòng)畫(huà)文件也能保持小巧的身材。 5強(qiáng)大的交互功能 強(qiáng)大的動(dòng)畫(huà)編輯功能使得設(shè)計(jì)者可以隨心所欲地設(shè)計(jì)出高品質(zhì)的動(dòng)畫(huà)。通過(guò)Actio

14、n Script動(dòng)作腳本和組件可以實(shí)現(xiàn)交互，使Flash具有更加強(qiáng)大的設(shè)計(jì)空間。另外，它與當(dāng)今最流行的網(wǎng)頁(yè)設(shè)計(jì)工具Dreamweaver配合默契，可以直接嵌入網(wǎng)頁(yè)的任一位置，非常簡(jiǎn)便。 但是美中不足的是，在網(wǎng)絡(luò)上觀看Flash動(dòng)畫(huà)需要插件的支持。因此，只有當(dāng)用戶的瀏覽器已經(jīng)安裝了這樣相應(yīng)的插件時(shí)，才可以正常播放Flash動(dòng)畫(huà)。在線下單獨(dú)播放Flash動(dòng)畫(huà)時(shí)需要使用支持Flash動(dòng)畫(huà)的專(zhuān)門(mén)播放器。,Adobe Flash CS3是Adobe公司收購(gòu)Macromedia公司后將享譽(yù)盛名Macromedia Flash更名為Adobe Flash后的一款動(dòng)畫(huà)軟件。與前面的版本相比，F(xiàn)lash CS3

15、與Adobe其他產(chǎn)品的結(jié)合非常緊密，給使用Flash工作帶來(lái)極大便利，增加了許多實(shí)用的新功能。 （1）用戶界面 Flash CS3工作界面具有與其它Adobe CS3組件一致的界面風(fēng)格。工具箱可伸縮成單雙列的，面板調(diào)板可以縮為精美的圖標(biāo)，半透明標(biāo)題欄，可隨意伸縮，可隨意組合與分離，以改進(jìn)工作流程和最大化工作區(qū)空間。 （2）Adobe Photoshop 和 Illustrator 導(dǎo)入 在保留圖層和結(jié)構(gòu)的同時(shí), 導(dǎo)入 Photoshop (PSD) 和 Illustrator (AI) 文件, 然后在 Flash CS3 中編輯它們。使用高級(jí)選項(xiàng)在導(dǎo)入過(guò)程中優(yōu)化和自定義文件。 （3）將動(dòng)畫(huà)復(fù)制

16、為 ActionScript 可以將時(shí)間軸動(dòng)畫(huà)轉(zhuǎn)換為可由開(kāi)發(fā)人員輕松編輯、再次使用和利用的 ActionScript 3.0 代碼。將動(dòng)畫(huà)從一個(gè)對(duì)象復(fù)制到另一個(gè)對(duì)象。,1.2.3 Adobe Flash CS3新增功能,（4）ActionScript 3.0開(kāi)發(fā) 使用新的 ActionScript 3.0 語(yǔ)言節(jié)省時(shí)間，該語(yǔ)言具有改進(jìn)的性能、增強(qiáng)的靈活性及更加直觀和結(jié)構(gòu)化的開(kāi)發(fā)，“腳本助手”模式得到更新。 （5）高級(jí)調(diào)試器 使用功能強(qiáng)大的新的 ActionScript 調(diào)試器測(cè)試內(nèi)容, 該調(diào)試器提供極好的靈活性和用戶反饋以及與 Adobe Flex Builder 2 調(diào)試的一致性。 （6）豐

17、富的繪圖功能 使用智能形狀繪制工具以可視方式調(diào)整工作區(qū)上的形狀屬性, 使用 Adobe Illustrator 所倡導(dǎo)的新的鋼筆工具創(chuàng)建精確的矢量插圖, 從 Illustrator CS3 將插圖粘貼到 Flash CS3 中, 等等。 （7）用戶界面組件 使用新的、輕量的、可輕松設(shè)置外觀的界面組件為 ActionScript 3.0 創(chuàng)建交互式內(nèi)容。 使用繪圖工具以可視方式修改組件的外觀, 而不需要進(jìn)行編碼。 （8）高級(jí)QuickTime導(dǎo)出 使用高級(jí)QuickTime導(dǎo)出器, 將在SWF文件中發(fā)布的內(nèi)容渲染為QuickTime視頻。導(dǎo)出包含嵌套的MovieClip的內(nèi)容、Actionscr

18、ipt 生成的內(nèi)容和運(yùn)行時(shí)效果（如投影和模糊）。,（9）省時(shí)編碼工具 使用新的代碼編輯器增強(qiáng)功能節(jié)省編碼時(shí)間。使用代碼折疊和注釋專(zhuān)注于相關(guān)代碼， 及使用錯(cuò)誤導(dǎo)航功能跳到代碼錯(cuò)誤。 （10）復(fù)雜的視頻工具 使用全面的視頻支持，創(chuàng)建、編輯和部署流和漸進(jìn)式下載的 Flash Video。使用獨(dú)立的視頻編碼器、Alpha 通道支持、高質(zhì)量視頻編解碼器、嵌入的提示點(diǎn)、視頻導(dǎo)入支持、QuickTime 導(dǎo)入和字幕顯示等等, 確保獲得最佳的視頻體驗(yàn)。,本章目錄,1.3.1 制作網(wǎng)頁(yè),Flash以其強(qiáng)大的矢量動(dòng)畫(huà)編輯功能，靈活的操作界面，開(kāi)放式的結(jié)構(gòu)，早已滲透到了圖像設(shè)計(jì)的多個(gè)領(lǐng)域，例如影視、動(dòng)漫、游戲、網(wǎng)頁(yè)

19、、課件、演示、廣告宣傳等領(lǐng)域。,1.3 Flash的應(yīng)用領(lǐng)域,網(wǎng)頁(yè)制作是Flash的重要領(lǐng)域，是展示個(gè)性的平臺(tái)。Flash出色的交互功能、圖形圖像表現(xiàn)能力，以及對(duì)聲音的良好支持，使它可以配合其他工具軟件制作出各種形式的動(dòng)態(tài)網(wǎng)頁(yè)，或者整個(gè)網(wǎng)站都用Flash動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。下圖所示就是利用Flash制作的一個(gè)“南寧映象”動(dòng)態(tài)網(wǎng)站。,“南寧映象”動(dòng)態(tài)網(wǎng)站,一個(gè)好的網(wǎng)站的瀏覽量很大，自然就有了網(wǎng)絡(luò)廣告。通過(guò)Flash制作的網(wǎng)頁(yè)廣告可以很好地體現(xiàn)廣告的短小精悍和表現(xiàn)力強(qiáng)等特點(diǎn)，因此Flash也在網(wǎng)頁(yè)廣告的制作領(lǐng)域得到了廣泛應(yīng)用。如下圖所示就是一個(gè)關(guān)于QQ音速的網(wǎng)頁(yè)廣告。,1.3.2 制作商業(yè)廣告,QQ音速的網(wǎng)頁(yè)廣告,Flash還可以為網(wǎng)站、宣傳片、電影和光盤(pán)制作片頭動(dòng)畫(huà)，如左下圖所示就是“千姿百色”網(wǎng)站的宣傳頁(yè)動(dòng)畫(huà)。 動(dòng)畫(huà)中的形象可愛(ài)、詼諧生動(dòng)，為無(wú)數(shù)觀眾增添了不少樂(lè)趣，F(xiàn)lash動(dòng)畫(huà)以“流”媒體的形式進(jìn)行播放，這樣使其制作的作品非常適合網(wǎng)絡(luò)環(huán)境下的傳輸，也使Flash成為網(wǎng)絡(luò)動(dòng)畫(huà)的重要制作工具之一。另外，F(xiàn)lash對(duì)矢量圖的應(yīng)用及對(duì)視頻、聲音的良好支持，使它能在文件容量不大的情況下實(shí)現(xiàn)多媒體的播放，如右下圖所示就是動(dòng)畫(huà)流氓兔之釣魚(yú)中的劇照。,1.3.3 制作片頭動(dòng)畫(huà)與動(dòng)畫(huà)片,“千姿百色”網(wǎng)站片頭動(dòng)畫(huà),流氓兔之釣魚(yú)中的劇照,許多游戲都是使用Fla