第5講_Flash初步與矢量圖

1、1 12 2 2q教師：q電子信箱：q辦公室：q電話：3復(fù)習(xí)與回顧4 4q了解動(dòng)畫(huà)基本原理q了解動(dòng)畫(huà)的分類與存儲(chǔ)格式q了解動(dòng)畫(huà)制作軟件Flash CS4q初步熟悉Flash的工作環(huán)境 q掌握Flash的基本設(shè)置與操作q掌握Flash中各種工具的使用q學(xué)會(huì)繪制矢量圖5 5q重點(diǎn)q影片文檔屬性的設(shè)置q工具面板和屬性面板的使用q繪制矢量圖q理解Flash的兩種文件格式：fla 和 swf q難點(diǎn)q面板的使用q繪制矢量圖6動(dòng)畫(huà)的原理q19世紀(jì)20年代，英國(guó)科學(xué)家發(fā)現(xiàn)了人眼的“視覺(jué)殘留效應(yīng)”（物體被移動(dòng)后其形象在人眼視網(wǎng)膜上還可有約1秒的停留），揭示了連續(xù)分解的動(dòng)作在快速閃現(xiàn)時(shí)產(chǎn)生活動(dòng)影像的原理。q根據(jù)

2、“視覺(jué)殘留效應(yīng)”原理，當(dāng)連續(xù)相互關(guān)聯(lián)的圖像快速變化時(shí)，人眼看到的這個(gè)圖像變化的過(guò)程就是視頻。電影、電視、動(dòng)畫(huà)和計(jì)算機(jī)視頻都是根據(jù)這個(gè)原理來(lái)實(shí)現(xiàn)的。7動(dòng)畫(huà)的產(chǎn)生q傳統(tǒng)動(dòng)畫(huà)是將具有差異的圖片繪制在膠片上，然后通過(guò)攝像機(jī)連續(xù)拍攝圖片畫(huà)面，膠片播放時(shí)實(shí)現(xiàn)動(dòng)畫(huà)。q計(jì)算機(jī)動(dòng)畫(huà)技術(shù)，將動(dòng)畫(huà)中的關(guān)鍵動(dòng)畫(huà)(關(guān)鍵幀)輸入計(jì)算機(jī)，動(dòng)畫(huà)的中間過(guò)程由計(jì)算機(jī)自動(dòng)產(chǎn)生。8計(jì)算機(jī)動(dòng)畫(huà)的類型-1q二維動(dòng)畫(huà)q二維動(dòng)畫(huà)只要制作關(guān)鍵幀圖像，關(guān)鍵幀之間的圖像通過(guò)計(jì)算機(jī)計(jì)算得到的插值方法來(lái)自動(dòng)實(shí)現(xiàn)。q二維動(dòng)畫(huà)最常用的是基于角色動(dòng)畫(huà)。角色可以是：線條、形狀、文字、圖像或另一段動(dòng)畫(huà)。q二維動(dòng)畫(huà)分類q逐幀動(dòng)畫(huà)：角色變化沒(méi)有規(guī)律可尋，需要一幀幀

3、地制作，然后連續(xù)播放。q漸變補(bǔ)間動(dòng)畫(huà)：角色變化有一定規(guī)律，可以制作好角色的初始狀態(tài)和最終狀態(tài)，由計(jì)算機(jī)來(lái)產(chǎn)生中間變化過(guò)程。q制作二維動(dòng)畫(huà)軟件qVB、JAVA程序設(shè)計(jì)語(yǔ)言qAdobe公司的Flash CS4就是用來(lái)制作二維動(dòng)畫(huà)qGIF Animation用來(lái)制作短小的GIF動(dòng)畫(huà)9計(jì)算機(jī)動(dòng)畫(huà)的類型-2q三維動(dòng)畫(huà)q二維動(dòng)畫(huà)是平面的，只有上下左右的運(yùn)動(dòng)效果。三維動(dòng)畫(huà)還有前后（縱深）的運(yùn)動(dòng)效果，所以增加了立體感和空間感。 q運(yùn)用建模、透視與消隱等功能后，就制作出簡(jiǎn)單的框架結(jié)構(gòu)的立體畫(huà)面。q三維動(dòng)畫(huà)，也是由連續(xù)漸變的一幅幅畫(huà)面組成。每一幅畫(huà)面是一張靜態(tài)的三維透視圖。q制作三維動(dòng)畫(huà)軟件qVRML語(yǔ)言q3DS

4、MAX、MAYAqUlead公司推出的Cool 3D可以快速建立三維圖形，通過(guò)設(shè)置關(guān)鍵幀，快速完成動(dòng)畫(huà)。10計(jì)算機(jī)動(dòng)畫(huà)的類型-3q虛擬現(xiàn)實(shí)q虛擬現(xiàn)實(shí)，英文名為VirtualReality，簡(jiǎn)稱VR技術(shù)，也稱假想現(xiàn)實(shí)，也就是用計(jì)算機(jī)合成人工世界。q虛擬現(xiàn)實(shí)的最大特點(diǎn)是用戶可以與虛擬環(huán)境進(jìn)行人機(jī)交互，將被動(dòng)式觀看變成更逼真地體驗(yàn)互動(dòng)。q應(yīng)用于旅游、房地產(chǎn)、大廈、別墅公寓、寫(xiě)字樓、景點(diǎn)展示、觀光游覽、酒店飯店、賓館餐飲、園林景觀、公園展覽展示、博物館，地鐵、機(jī)場(chǎng)、車站、碼頭等行業(yè)項(xiàng)目展示、宣傳。11常用的動(dòng)畫(huà)存儲(chǔ)格式qGIF動(dòng)畫(huà)格式qGIF圖像文件的數(shù)據(jù)是經(jīng)過(guò)無(wú)損壓縮的，在一個(gè)GIF文件中可以存多幅

5、彩色圖像，把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡(jiǎn)單的動(dòng)畫(huà)。qAVI格式qAVI是對(duì)視頻、音頻文件采用的一種有損壓縮方式，該方式的壓縮率較高，并可將音頻和視頻混合到一起，其應(yīng)用范圍非常廣泛。 qSWF格式qSWF是ADOBE公司的動(dòng)畫(huà)設(shè)計(jì)軟件Flash的專用格式，是一種支持矢量和點(diǎn)陣圖形的動(dòng)畫(huà)文件格式，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)，動(dòng)畫(huà)制作等領(lǐng)域 。qFLIC FLI/FLC 格式q FLC/FLI是Autodesk公司在其出品的2D、3D動(dòng)畫(huà)制作軟件中采用的動(dòng)畫(huà)文件格式。Autodesk Animator和3DSudio等動(dòng)畫(huà)制作軟件均采用了這種彩色動(dòng)畫(huà)文件格式。 qM

6、OV、QT格式q MOV即QuickTime影片格式，它是Apple公司開(kāi)發(fā)的一種音頻、視頻文件格式。qQt是諾基亞開(kāi)發(fā)的一個(gè)跨平臺(tái)的C+圖形用戶界面應(yīng)用程系框架。它提供給應(yīng)用程序開(kāi)發(fā)者建立藝術(shù)級(jí)的圖形用戶界面所需的所用功能。 q虛擬現(xiàn)實(shí)動(dòng)畫(huà)（VR）qVR是一項(xiàng)綜合集成技術(shù)，涉及計(jì)算機(jī)圖形學(xué)、人機(jī)交互技術(shù)、傳感技術(shù)、人工智能等領(lǐng)域，它用計(jì)算機(jī)生成逼真的三維視、聽(tīng)、嗅覺(jué)等感覺(jué)，使人作為參與者通過(guò)適當(dāng)裝置，自然地對(duì)虛擬世界進(jìn)行體驗(yàn)和交互作用。 1212FlashqAdobe Flash簡(jiǎn)介qAdobe Flash前稱Macromedia Flash，簡(jiǎn)稱Flash。q自從Macromedia公司于

7、2005年被Adobe公司收購(gòu)，F(xiàn)lash也就成為了Adobe旗下的軟件。qAdobe Flash 特點(diǎn) q基于矢量繪圖q流式播放技術(shù)q多媒體特性q強(qiáng)大的交互功能q廣泛的平臺(tái)支持q易學(xué)易用、可擴(kuò)展性好qFlash與網(wǎng)絡(luò)聯(lián)系密切，其大量的特性是與網(wǎng)絡(luò)相關(guān)的?？梢哉f(shuō)，沒(méi)有網(wǎng)絡(luò)的結(jié)合，F(xiàn)lash絕對(duì)不能取得如此大的成功。13Flash 特點(diǎn)-基于矢量繪圖q矢量圖像僅由線條和線條所封閉的填充區(qū)域組成，所需存儲(chǔ)空間小，可任意縮放尺寸而不影響畫(huà)面質(zhì)量。q位圖圖像由大量的像素點(diǎn)組成，比較逼真，但所需存儲(chǔ)空間大，隨著圖像尺寸的放大畫(huà)面品質(zhì)將大幅度下降。14Flash 特點(diǎn)-流式播放技術(shù)q流式（stream）播

8、放技術(shù)使得動(dòng)畫(huà)可以邊播放邊下載，從而緩解瀏覽者焦急等待的情緒。qGIF動(dòng)畫(huà)需等到動(dòng)畫(huà)全部下載完畢后才能觀看，對(duì)于大動(dòng)畫(huà)等待時(shí)間過(guò)長(zhǎng)。15Flash的特點(diǎn)-多媒體特性q可以將動(dòng)畫(huà)、視頻、音樂(lè)、聲效等有機(jī)融合在一起q支持多種圖像格式文件導(dǎo)入q可導(dǎo)入Photoshop、Illustrator、Freehand等軟件制作的圖形和圖像q可導(dǎo)入Adobe PDF電子文檔和Adobe Illustrator 10文件q支持視頻、音頻文件導(dǎo)入q可從外部調(diào)用視頻文件q可使用MP3q支持多種動(dòng)畫(huà)輸出格式qSWF、SPL、GIF、AI、BMP、JPG、PNG、AVI、MOV、MAV、EMF、WMF、EPS、DXF1

9、6Flash的特點(diǎn)-強(qiáng)大的交互功能q內(nèi)置的ActionScript腳本語(yǔ)言，易于精確實(shí)現(xiàn)復(fù)雜的交互事件行為控制q可在動(dòng)畫(huà)中加入滾動(dòng)條、復(fù)選框、下拉菜單和拖動(dòng)物體等各種交互組件。q可與Java或其他類型的程序融合在一起，在不同的操作平臺(tái)和瀏覽器中播放。q支持動(dòng)態(tài)數(shù)據(jù)交互，ASP功能的全面嵌入使其可用于動(dòng)態(tài)電子商務(wù)網(wǎng)站及虛擬社區(qū)等的建設(shè)。17Flash的特點(diǎn)-廣泛的平臺(tái)支持q任何安裝有Flash Player插件的網(wǎng)頁(yè)瀏覽器都可以觀看Flash動(dòng)畫(huà)，目前已經(jīng)有95%以上的瀏覽器安裝了Flash Player，幾乎包含了所有的瀏覽器和操作系統(tǒng)。IE、Firefox、Opera 18Flash的特點(diǎn)-

10、易學(xué)易用、可擴(kuò)展性好q強(qiáng)大的動(dòng)畫(huà)編輯功能使得設(shè)計(jì)者可以隨心所欲地設(shè)計(jì)出高品質(zhì)的動(dòng)畫(huà)。q通過(guò)第三方開(kāi)發(fā)的Flash插件程序，可以方便地實(shí)現(xiàn)一些以往需要非常繁瑣的操作才能實(shí)現(xiàn)的動(dòng)態(tài)效果，大大提高了Flash影片的制作效率。19Flash的發(fā)展史qFuture Splash Animator (1995年)-由簡(jiǎn)單的工具和時(shí)間線組成 qMacromedia Flash 1 (1996年)-Macromedia更名后為Flash的第一個(gè)版本 qMacromedia Flash 2 (1997年)-引入庫(kù)的概念qMacromedia Flash 3 (1998年)-影片剪輯，Javascript插件，獨(dú)

11、立播放器 qMacromedia Flash 4 (1999年)-文本輸入框，ActionScript，流媒體，MP3 qMacromedia Flash 5 (2000年)-HTML文本格式和Smart Clip(智能影片剪輯)qMacromedia Flash MX (2002年)-Unicode，組件，XML，流媒體視頻編碼 qMacromedia Flash MX2004 (2003年)-ActionScript2.0，流媒體視頻行為 qMacromedia Flash 8 (2005年)-為移動(dòng)設(shè)備開(kāi)發(fā)的功能，創(chuàng)建Flash WebqAdobe Flash CS3 (2007年)-A

12、dobe耗資34億美元并購(gòu)MacromediaqAdobe Flash CS4 (2008年年)- Actionscript 3.0，針對(duì) Adobe AIR進(jìn)行創(chuàng)作 qAdobe Flash CS5 Professional (2010年)-FlashBuilder、TLF文本支持 qAdobe Flash CS6 Professional (2012年)-支持HTML、3D轉(zhuǎn)換 20Flash CS4啟動(dòng)界面21q菜單欄q舞臺(tái)和工作區(qū)q時(shí)間軸q工具面板q屬性面板q其他面板屬性面板屬性面板舞臺(tái)和工作區(qū)舞臺(tái)和工作區(qū)時(shí)間軸時(shí)間軸工具面板工具面板2222場(chǎng)景qFlash中，制作影片的工作區(qū)域。類似

13、話劇、電影等的場(chǎng)景，在Flash里以場(chǎng)景的形式來(lái)劃分時(shí)間段或故事情節(jié)。q在制作動(dòng)畫(huà)的過(guò)程中，可以根據(jù)創(chuàng)作的需要隨時(shí)添加、復(fù)制、移動(dòng)、修改或刪除場(chǎng)景。q場(chǎng)景在flash中是不可缺少的(至少要有一個(gè)場(chǎng)景)。qFlash在編輯的時(shí)候，只有一個(gè)當(dāng)前場(chǎng)景處于顯示狀態(tài)。qFlash動(dòng)畫(huà)播放的時(shí)候，默認(rèn)的播放順序就是按照?qǐng)鼍暗南群蟠涡蛞来尾シ?。q一個(gè)Flash文件中可以包含多個(gè)場(chǎng)景，播放時(shí)對(duì)于幀數(shù)多的，又便于“分段”的動(dòng)畫(huà)，應(yīng)該分場(chǎng)景制作q場(chǎng)景管理使用“場(chǎng)景”面板q可以使用ActionScript的相關(guān)語(yǔ)句進(jìn)行播放控制。 23場(chǎng)景的操作q在菜單欄選擇“插入/場(chǎng)景”命令，插入空白場(chǎng)景。q使用編輯欄上的“編輯場(chǎng)

14、景”按鈕，可以快速切換場(chǎng)景。q在菜單欄選擇“窗口/其他面板/場(chǎng)景”命令，打開(kāi)“場(chǎng)景”面板，可以看到當(dāng)前文件場(chǎng)景的列表。編輯欄中的編輯欄中的“編輯場(chǎng)景編輯場(chǎng)景”按鈕按鈕場(chǎng)景面板場(chǎng)景面板2424面板q面板q作用類似于對(duì)話框，用于進(jìn)行相關(guān)設(shè)置。q通過(guò)窗口菜單可以顯示或關(guān)閉各種面板。qFlash中面板包括4大類共有20幾種。q常用面板q屬性面板 q工具面板q庫(kù)面板 q時(shí)間軸面板 2525q屬性面板是一個(gè)綜合性的面板。q可以設(shè)置圖形、圖像、元件，以及工具和文檔的有關(guān)屬性。q例如，選用“文本”工具時(shí)，就可以設(shè)置文本的字體、字號(hào)、顏色等屬性。q提示：屬性面板中的內(nèi)容隨用戶所選定的內(nèi)容的不同而變化。26262

15、727Flash 面板_庫(kù)面板q元件（Symbol）q元件也被稱作符號(hào)或圖符，是Flash動(dòng)畫(huà)的重要組成部分，元件對(duì)象可以應(yīng)用于當(dāng)前動(dòng)畫(huà)或其他動(dòng)畫(huà)中。q元件的主要特性是可以被重復(fù)利用，且不會(huì)影響影片的大小。 qFlash中包括三種元件類型，分別為圖形元件、影片剪輯元件與按鈕元件，每一種元件都具有獨(dú)特的屬性 。q庫(kù)（Library）qFlash中的所有元件都被歸納在庫(kù)面板中，庫(kù)可以理解為保存各種元件的文件夾，當(dāng)元件被創(chuàng)建后，將自動(dòng)保存到庫(kù)中。q應(yīng)用庫(kù)面板中的元件時(shí)，只需將元件從庫(kù)中拖拽到場(chǎng)景舞臺(tái)。q即使在場(chǎng)景中將所有元件全部刪除，也不會(huì)影響庫(kù)面板中的元件。2828q主要用于組織和控制影片中圖層和

16、幀的內(nèi)容，使這些內(nèi)容隨著時(shí)間的推移而發(fā)生相應(yīng)變化。q設(shè)計(jì)者可以將不同的對(duì)象安排在時(shí)間軸內(nèi)，讓不同的對(duì)象或圖層上的部件，有一個(gè)共同的時(shí)間標(biāo)準(zhǔn)。只要對(duì)準(zhǔn)了同一幀，就可保證所有的動(dòng)作都會(huì)在同一時(shí)間發(fā)生。q時(shí)間軸最重要的組成部分：幀、圖層和播放頭。2929圖層圖層幀幀播放頭播放頭時(shí)間軸時(shí)間軸3030工具欄q工具欄q主工具欄命令按鈕q編輯欄場(chǎng)景編輯、元件編輯、顯示比例q控制器控制影片播放q通過(guò)“窗口/工具欄”打開(kāi)或關(guān)閉各個(gè)工具欄31基本操作q工具面板中的復(fù)合工具和提示q 面板的折疊與展開(kāi)、打開(kāi)與關(guān)閉、移動(dòng)及變形q通過(guò)折疊按鈕實(shí)現(xiàn)面板折疊與展開(kāi)q通過(guò)“窗口”菜單實(shí)現(xiàn)面板打開(kāi)與關(guān)閉q通過(guò)鼠標(biāo)拖動(dòng)實(shí)現(xiàn)面板移動(dòng)

17、及變形q “基本功能”菜單q可以切換工作界面的布局3232q創(chuàng)建新文件或打開(kāi)文件q設(shè)置 文檔屬性q通過(guò)菜單“修改/文檔”或“屬性面板”設(shè)置q導(dǎo)入文件(素材)q通過(guò)菜單“文件/導(dǎo)入”可以導(dǎo)入q導(dǎo)入到舞臺(tái)(將素材導(dǎo)入到舞臺(tái)，同時(shí)也導(dǎo)入到庫(kù)) q導(dǎo)入到庫(kù)(將素材只導(dǎo)入到庫(kù)) 3333q創(chuàng)建動(dòng)畫(huà)q在舞臺(tái)上和時(shí)間軸中排列各種對(duì)象元素，以定義它們?cè)趧?dòng)畫(huà)中顯示的時(shí)間和顯示方式。q常用的動(dòng)畫(huà)q逐幀動(dòng)畫(huà)q形狀補(bǔ)間動(dòng)畫(huà)q動(dòng)作補(bǔ)間動(dòng)畫(huà)q動(dòng)畫(huà)參數(shù)設(shè)置3434q播放q在編輯環(huán)境中演示動(dòng)畫(huà)。q控制器、按回車、“控制”菜單。q測(cè)試q在獨(dú)立窗口中演示動(dòng)畫(huà)。q相當(dāng)于發(fā)布成SWF影片后，用播放器播放（按CtrlEnter）。q會(huì)

18、自動(dòng)生成SWF文件。q發(fā)布q“發(fā)布”就是把Flash編輯成果以多種形式保存。q“發(fā)布設(shè)置”對(duì)話框上設(shè)置保存形式。q“發(fā)布預(yù)覽”保存成設(shè)置形式，并在在獨(dú)立窗口中播放 。3535q保存文件的幾種格式qFlash文件（擴(kuò)展名fla）qFlash的編輯格式q影片文件（擴(kuò)展名swf） SWFq用Flash播放器播放SWF文件可與播放器集成q網(wǎng)頁(yè)中用插件（Active控件）播放q動(dòng)畫(huà)GIF（非逐幀動(dòng)畫(huà)不能用此方式）3636q利用繪圖和文字工具，繪制矢量圖和文字q知識(shí)點(diǎn)：q文檔屬性設(shè)置q文字工具q線條工具q多角星形工具37q新建Flash文件，“屬性面板”設(shè)置文檔屬性：舞臺(tái)顏色設(shè)置為藍(lán)色；q“文本工具”輸入

19、并設(shè)置文字格式；q字體Blackadder ITC，顏色#00FFFF ，大小100點(diǎn)，間距20；q分離兩次q墨水瓶工具（黃色描邊）q利用“橢圓”工具畫(huà)橢圓，利用“箭頭”工具拉出心形，注意筆觸顏色和填充顏色；q注意有無(wú)按Ctrl鍵的不同q“線條工具”繪制直線：黃色，筆觸大小2；按樣張做成彎曲形狀；q“矩形工具”展開(kāi)運(yùn)用“多角星形工具”繪制五角星：注意筆觸顏色和填充顏色；q保存為“矢量圖.fla”，導(dǎo)出為“矢量圖.swf”。3838q利用繪制工具繪制有規(guī)律矢量圖形。q知識(shí)點(diǎn)：q文檔屬性設(shè)置q橢圓工具q顏料桶工具q任意變形工具q變形面板3939q修改文檔背景為淺棕黃色；q“橢圓工具”繪制橢圓，改變橢圓形狀；q設(shè)置筆觸顏色為紅色q按Ctrl鍵，用鼠標(biāo)拖動(dòng)橢圓邊緣改變形狀q打開(kāi)“顏色面板”，設(shè)置紅到白的漸變色；q“顏料桶工具”填充橢圓，繪制單片形狀；q（注意漸變變形工具的使用）q利用“任意變形工具”將單片形狀的中心調(diào)整到底端；q利用“變形面板”，設(shè)置旋轉(zhuǎn)角度為90度，并點(diǎn)擊“重置選區(qū)并變形”按鈕復(fù)制該形狀形成藝術(shù)形狀；q保存為“藝術(shù).fla”，導(dǎo)出為“藝術(shù).swf”。重制選區(qū)并變形重制選區(qū)并變形4040課堂示例3：去掉圖片背景 q去掉老虎的白色背景，并復(fù)制。q知識(shí)點(diǎn)：q素材的導(dǎo)入q任意變形工具q對(duì)象的分離q套索