多媒體技術應用5計算機動畫技術Flash CS4

多媒體技術應用數(shù)學與計算機學院陳永強chenyqw2013-2014-21多媒體技術應用5計算機動畫技術FlashCS4第五章計算機動畫制作技術5.1計算機動畫概述

5.1.1計算機動畫概念5.1.2計算機動畫應用

5.1.3計算機動畫的發(fā)展及趨勢

5.1.4計算機動畫的常用格式5.2計算機動畫制作流程與軟件5.2.1二維動畫制作流程5.2.2三維動畫制作流程

5.2.3計算機動畫制作軟件5.3常用計算機動畫制作軟件

5.3.1Flash

5.3.23DStudioMax2多媒體技術應用5計算機動畫技術FlashCS4第五章計算機動畫制作技術5.3常用計算機動畫制作軟件5.3.1Flash5.3.2

3DStudioMax3多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash1.功能介紹2.編輯環(huán)境3.基本操作4.操作實例4多媒體技術應用5計算機動畫技術FlashCS4版本演變2013，F(xiàn)lashCC2012，F(xiàn)lashCS62011，F(xiàn)lashCS5.52010，F(xiàn)lashCS52008，F(xiàn)lashCS42007，F(xiàn)lashCS32005，Adobe公司收購Macromedia，F(xiàn)lash82003，F(xiàn)lashMXPro1996，美國Macromedia公司收購了FutureWave，并將FutureSplash其改名為Flash15多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash1.功能介紹Adobe公司的Flash是一款優(yōu)秀的交互式矢量動畫軟件，由于它的市場地位等原因，已經漸漸成為交互式矢量動畫的事實標準。6多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash1.功能介紹Flash是一種創(chuàng)作工具，設計人員和開發(fā)人員可使用它來創(chuàng)建演示文稿、應用程序和其他允許用戶交互的內容。Flash可以包含簡單的動畫、視頻內容、復雜演示文稿和應用程序，以及介于它們之間的任何內容。通常，使用Flash創(chuàng)作的各個內容單元稱為應用程序，即使它們可能只是很簡單的動畫?？梢酝ㄟ^添加圖片、聲音、視頻和特殊效果，構建包含豐富媒體的Flash應用程序。所以，它既是二維動畫的制作軟件，也是多媒體創(chuàng)作的有力工具。7多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash1.功能介紹Flash是基于矢量圖形動畫，結合腳本語言（ActionScript）交互的時序類多媒體創(chuàng)作工具。其主要優(yōu)點在于：①Flash圖形和動畫都是矢量的，尺寸比點陣圖要小得多，聲音基于MP3壓縮，也是高壓縮比的。②Flash特別適用于創(chuàng)建通過Internet提供的內容，因為它的文件非常小。③Flash動畫的播放支持“數(shù)據(jù)流式”技術，既不必等待數(shù)據(jù)完全下載完即可播放。④Flash制作動畫比較簡單，靈活性大。8多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash1.功能介紹FlashCS4的新功能：編程方面的增強音頻、視頻方面的增強動畫方面的增強繪畫方面的增強改進的用戶界面9多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境10多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（1）菜單欄（2）舞臺（3）時間軸（4）動畫編輯器（5）面板組（6）工具面板（7）工作場所切換器11多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（1）菜單欄包含軟件的大部分命令，實現(xiàn)大部分功能。文件，編輯，視圖，插入，修改，文本，命令，控制，調試，窗口，幫助12多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（2）舞臺顯示當前編輯的Flash文檔。舞臺大小可縮放。在用戶發(fā)布或導出項目后，舞臺范圍決定用戶的可見區(qū)域。13多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（3）時間軸組織和控制一定時間內的圖層、幀、播放幀等元素，是制作動畫最常用的面板之一。時間軸主要由圖層區(qū)、播放頭、時間軸標尺、時間軸狀態(tài)欄以及幀組成。圖層區(qū)用來創(chuàng)建和管理圖層；播放頭是時間軸上方的一條紅色垂直線；幀是構成動畫的最基本的單位。14多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（4）動畫編輯器對關鍵幀屬性進行獨立控制。15多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（5）面板組可選擇或關閉面板。16多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（6）工具面板包含各種選擇工具、繪圖工具、文本工具、填充工具、視圖工具，以及對應于不同工具的相關選項。17多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash2.編輯環(huán)境（7）工作場所切換器用于選擇合適的工作區(qū)布局方式。18多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（1）Flash文檔處理（2）項目管理（3）元件、實例的使用（4）庫資源的使用（5）顏色的使用（6）文本的使用（7）圖形繪制

（8）創(chuàng)建動畫（9）編輯動畫（10）使用視頻（11）處理聲音（12）發(fā)布（13）導出19多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（1）Flash文檔處理1）創(chuàng)建Flash文檔2）從模板創(chuàng)建新文檔3）打開現(xiàn)有文檔4）設置新文檔或現(xiàn)有文檔的屬性5）使用“命令”菜單自動處理任務6）用“屬性”檢查器更改文檔屬性7）使用“查找和替換”功能8）保存Flash文檔

20多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（2）項目管理使用“項目”面板來創(chuàng)建和管理項目。1）創(chuàng)建新項目2）打開現(xiàn)有項目3）添加文件4）創(chuàng)建文件夾5）移動文件或文件夾

6）刪除某個文件或文件夾7）重命名項目或文件夾8）測試項目9）發(fā)布項目10）關閉項目21多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（3）元件、實例的使用元件是在Flash中創(chuàng)建的圖形、按鈕或影片剪輯。元件可在整個文檔或其它文檔中重復使用。實例是指位于舞臺上或嵌套在另一個元件內的元件副本。元件的具體表現(xiàn)形式就叫實例。Flash有三類元件：圖形元件、按鈕元件以及影片剪輯元件。

22多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（3）元件、實例的使用1）創(chuàng)建元件2）編輯元件3）創(chuàng)建實例4）編輯實例23多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（4）庫資源的使用

共享庫資源允許在多個目標文檔中使用源文檔的資源?？墒褂脙煞N不同的方法共享庫資源。1）運行時的共享資源2）使用共享庫資源

24多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（5）顏色的使用提供了多種應用、創(chuàng)建和修改顏色的方法。使用默認調色板或自己創(chuàng)建的調色板，可以選擇應用于要創(chuàng)建的對象或舞臺中已有對象的筆觸或填充的顏色。將筆觸顏色應用于形狀將會用這種顏色對形狀的輪廓涂色，將填充顏色應用于形狀將會用這種顏色對形狀的內部涂色。

25多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（6）文本的使用1）創(chuàng)建文本2）設置文本屬性3）編輯文本

26多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（7）圖形繪制1）繪制直線、橢圓和矩形2）繪制多邊形和星形3）使用鋼筆工具27多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（8）創(chuàng)建動畫1）使用時間軸特效2）創(chuàng)建關鍵幀3）創(chuàng)建逐幀動畫逐幀動畫是將每一幀的畫面組織好，然后逐幀播放。4）創(chuàng)建補間動畫補間動畫是通過為一個對象的某一幀指定屬性值并為該對象的另一個幀指定一個相關屬性的不同值。Flash自動計算這兩個幀之間其它屬性的值。

示例：逐幀動畫，補間動畫，形狀補間動畫，傳統(tǒng)補間動畫。28多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（9）編輯動畫1）在時間軸中插入幀2）刪除或修改幀或關鍵幀

29多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（10）使用視頻“視頻導入”向導為視頻導入到Flash文檔提供了簡潔的界面。通過此向導，可以選擇將視頻剪輯導入為流式文件、漸進式下載文件、嵌入文件或鏈接文件。而且根據(jù)文件的位置，“視頻導入”向導為不同的部署提供一系列選項。

30多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（11）處理聲音1）導入聲音2）向文檔中添加聲音3）使用聲音編輯控件

31多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（12）發(fā)布要發(fā)布Flash文檔，可以使用“發(fā)布設置”對話框選擇發(fā)布文件格式和文件格式設置，然后用“發(fā)布”命令發(fā)布Flash文檔。在“發(fā)布設置”對話框中指定的發(fā)布配置將隨文檔一起保存。也可以創(chuàng)建并命名發(fā)布配置文件，以便可以隨時使用已建立的發(fā)布設置。

32多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.基本操作（13）導出1）導出文件格式2）導出Flash內容和圖像

33多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（1）內容（2）步驟34多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（1）內容通過一個蝴蝶在花叢中翻飛的例子，學習Flash圖層、引導線運動、幀與補間動畫等技術。35多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟①啟動Flash，新建Flash文檔，550×400像素，如圖5-16所示。36多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟②在圖層1分別導入背景圖和四個透明背景蝴蝶。選擇菜單“文件”→“導入”→“導入到庫”。導入素材后的效果如圖5-17所示。37多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟③選擇菜單“窗口”→“庫”，打開庫。把庫里的背景圖“藍花花”拖進舞臺并調整為和舞臺一樣大小，如圖5-18所示。38多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟④選擇“窗口”→“對齊”，調出“對齊”面板，選擇“相對于舞臺”，水平對齊，垂直對齊，如圖5-19所示。39多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑤在時間軸第100幀插入幀，鎖定圖層1，如圖5-20所示。40多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑥新建圖層2，把“蝴蝶1”從庫拖進舞臺，右擊蝴蝶1，然后從彈出菜單中選擇“轉換為元件”（影片剪輯），元件名為“蝶1”，如圖5-21所示。41多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑦右擊蝴蝶1，然后從彈出菜單中選擇“編輯”，進入元件編輯區(qū)。右擊蝴蝶1，并從彈出菜單中選擇“分離”，打散蝴蝶圖片，如圖5-22所示。42多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑧選用“任意變形工具”，蝶1圖片四周出現(xiàn)8個小方框，把鼠標放在右下角的小方框上，待鼠標指針變?yōu)橐粋€圓形箭頭時輕輕向左一拖，把蝴蝶轉個方向，如圖5-23所示。43多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑨移動蝴蝶，使蝴蝶的頭部正好在舞臺的正中央，右鍵單擊時間軸上的第3幀，插入關鍵幀，如圖5-24所示。44多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟⑩在第3幀，用“箭頭”工具框選蝴蝶的一個翅膀，如圖5-25所示。

45多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟?再用“任意變形工具”，把翅膀壓扁，如圖5-26所示。46多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟?用同樣的方法做好另一個蝴蝶翅膀。?單擊第1幀，選擇“修改”→“組合”；單擊第3幀，選擇“修改”→“組合”，如圖5-27所示。47多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟?單擊場景1，返回場景1。為了方便操作，我們把舞臺調整為50%，如圖5-28所示。

48多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟?在場景1的第2層，分別在40、60、100幀插入關鍵幀，并分別在1～40、41～60、61～100幀三個區(qū)間分別創(chuàng)建補間動畫。鎖住圖層2，插入引導層，如圖5-29所示。

49多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟?在引導層的第1幀，選用鉛筆工具，選擇“平滑”，畫出蝴蝶飛行的軌跡(引導線)，用橡皮擦工具在引導線上，在想要蝴蝶停留的位置上擦出一個小缺口，鎖定引導層，打開圖層2的鎖，如圖5-30所示。

50多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟17在圖層2的第1幀，用箭頭工具將蝶1元件拖到引導線的最左端，蝶1的中心點一定要壓在引導線上，如圖5-31所示。

51多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟18在圖層2的第40幀，用箭頭工具將蝶1元件拖到缺口的左端，蝶1的中心點一定要壓在引導線上，如圖5-32所示。

52多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟19同第18步一樣，在圖層2的第60幀，用箭頭工具將蝶1元件拖到缺口的右端，蝶1的中心點一定要壓在引導線上。20在圖層2的第100幀，用箭頭工具將蝶1元件拖到引導線的最右端，蝶1的中心點一定要壓在引導線上，如圖5-33所示。53多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟現(xiàn)在一只蝴蝶已經做好了，可以測試影片了。但這只是單個蝴蝶戀花的做法，如果要三對蝴蝶飛舞在花叢中，還需要如下的工作。

21把圖層2和引導層鎖好，增加圖層3，如圖5-34所示。

54多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟22為了方便操作，單擊圖層2和引導層的眼睛樣的按鈕，使圖層2和引導層不可見，把蝴蝶2從庫里拖入舞臺。重復④～⑥步得到元件蝶2。23在場景1的第3層，分別在35、55、100幀插入關鍵幀，并分別在1～35、36～55、56～100幀三個區(qū)間分別創(chuàng)建補間動畫。鎖住圖層3，插入引導層，單擊引導層上眼睛樣的按鈕，使引導層可見，如圖5-35所示。55多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟24操作方法同第16步。在引導層的第1幀，選用鉛筆工具，選擇“平滑”，畫出蝴蝶2飛行的軌跡(第二條引導線)，用橡皮擦工具在引導線上，在想要蝴蝶停留的位置上擦出一個小缺口，鎖定引導層，打開圖層3的鎖(只要操作正確，引導線畫好，蝴蝶元件會自動跑上引導線)，如圖5-36所示。

56多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟25這步操作方法與17、18、19、20步相同。在圖層3的第1幀，用箭頭工具將蝶2元件拖到引導線的最左端，蝶2的中心點一定要壓在引導線上。在圖層3的第35幀，用箭頭工具將蝶2元件拖到缺口的左端，蝶2的中心點一定要壓在引導線上。在圖層3的第55幀，用箭頭工具將蝶2元件拖到缺口的右端，蝶2的中心點一定要壓在引導線上。在圖層3的第100幀，用箭頭工具將蝶2元件拖到引導線的最左端，蝶2的中心點一定要壓在引導線上。注意：不管做多少層，最后一幀一定要對齊，否則會全部變亂。到現(xiàn)在為止，第2個蝴蝶也做好了，可以再測試一下。57多媒體技術應用5計算機動畫技術FlashCS45.3.1Flash3.操作實例（2）步驟26第3、第4個蝴蝶和上面兩個蝴蝶做法