平面動(dòng)畫設(shè)計(jì)-動(dòng)畫基本原理及技術(shù)

1、 動(dòng)畫基本原理及技術(shù)教學(xué)目標(biāo)：了解動(dòng)畫的基本原理；了解電腦動(dòng)畫的特點(diǎn)和整理的一般過程；掌握Flash平面動(dòng)畫整理軟件的特點(diǎn)；掌握Flash動(dòng)畫中逐幀動(dòng)畫的整理方法。教學(xué)重點(diǎn)：Flash平面動(dòng)畫整理軟件的特點(diǎn)；Flash動(dòng)畫中逐幀動(dòng)畫的整理方法。教學(xué)難點(diǎn)：逐幀動(dòng)畫的整理。教學(xué)媒體：多媒體網(wǎng)絡(luò)實(shí)驗(yàn)室、多媒體課件、動(dòng)畫素材。課時(shí)安排：2學(xué)時(shí)導(dǎo)入首先播放兩個(gè)用Flash整理的動(dòng)畫（商業(yè)廣告和用Flash整理的網(wǎng)頁），以激發(fā)學(xué)生學(xué)習(xí)該門課程的興趣。然后通過動(dòng)畫的發(fā)展來導(dǎo)入新課。 1831：法國人約瑟夫安東尼普拉特奧在可轉(zhuǎn)動(dòng)圓盤上畫了一些圖片。 1906：美國人J斯泰瓦德整理非常接近現(xiàn)代動(dòng)畫概念的短片“滑

2、稽面孔的幽默形象”。 1908：法國人Emile Cohl首創(chuàng)用負(fù)片整理動(dòng)畫影片，解決影片載體的問題。 1909：美國人Winsor McCay用一萬張圖片表現(xiàn)一段動(dòng)畫故事，世界上第一部真正的動(dòng)畫短片。 1915：美國人Eerl Hurd發(fā)明動(dòng)畫整理新工藝在賽珞璐片上畫動(dòng)畫片，再拍攝成動(dòng)畫影片。 1928：華特迪斯尼（Walt Disney)，商業(yè)動(dòng)畫影片之父的動(dòng)畫精品。 現(xiàn)在：“電腦動(dòng)畫”、“電腦動(dòng)畫特技效果”。新課1動(dòng)畫原理用圖片和動(dòng)畫展示早期的動(dòng)畫效果。11 什么是動(dòng)畫英國動(dòng)畫大師約翰海勒斯：動(dòng)作的變化是動(dòng)畫的本質(zhì)。由于每幅畫面物體位置和形態(tài)不同，因此連續(xù)觀看時(shí)給人以活動(dòng)的感覺。動(dòng)畫利用

3、人類眼睛的“視覺滯留效應(yīng)”，物體在大腦神經(jīng)中停留1/24s，因此若連續(xù)更換24幅以上的畫面，則給人視覺上形成連續(xù)的影象。傳統(tǒng)動(dòng)畫的性質(zhì) 由多幅畫面構(gòu)成，稱為“幀動(dòng)畫”新的本質(zhì)動(dòng)畫除了動(dòng)作的變化，還發(fā)展出顏色、材料質(zhì)地、光線強(qiáng)弱的變化等等。1.2 動(dòng)畫規(guī)則1.2.1構(gòu)成規(guī)則 (1)動(dòng)畫由多畫面組成，并且畫面必須連續(xù);(2)畫面之間的內(nèi)容必須存在差異;(3)畫面表現(xiàn)的動(dòng)作必須連續(xù)。1.2.2表現(xiàn)手法相關(guān)規(guī)則：（1）在嚴(yán)格遵循運(yùn)動(dòng)規(guī)律的前提下，可進(jìn)行適度的夸張和發(fā)展;（2）節(jié)奏的掌握以符合自然規(guī)律為主要標(biāo)準(zhǔn);（3）節(jié)奏通過畫面之間物體相對位移量進(jìn)行控制。1.3 全動(dòng)畫和半動(dòng)畫“全動(dòng)畫”指在動(dòng)畫整理中

4、，為了追求畫面的完美、動(dòng)作的細(xì)膩和流暢，按照每秒播放24幅畫面的數(shù)量做作的動(dòng)畫，具有極佳的觀賞性。“半動(dòng)畫”又稱“有限動(dòng)畫”，采用少于每秒24幅的畫面來繪制動(dòng)畫，常見的一般為每秒6幅。一般采用重復(fù)動(dòng)作、延長畫面動(dòng)作停頓的畫面數(shù)來湊足24幅畫面。全動(dòng)畫和半動(dòng)畫幾乎需要完全相同的技巧，不同之處僅在于整理畫面的工作量和經(jīng)濟(jì)原因。1.4 動(dòng)畫整理過程動(dòng)畫整理過程中，要事先準(zhǔn)確的策劃好每一個(gè)動(dòng)作的時(shí)間、畫面數(shù)，以此來避免財(cái)力和時(shí)間的浪費(fèi)。 動(dòng)畫整理過程一般為： （1）整理聲音對白和背景音樂。由聲音計(jì)算動(dòng)畫格數(shù)； （2）整理關(guān)鍵畫面。設(shè)計(jì)人員繪制動(dòng)畫人物造型、景物等關(guān)鍵畫面； （3）繪制動(dòng)畫畫面。繪制人員

5、繪制關(guān)鍵畫面間的過渡插畫； （4）復(fù)制成賽珞璐片； （5）上色。為賽珞璐片上的人物和景物上色； （6）核實(shí)檢查動(dòng)畫畫稿。拍攝電影膠片前最后檢查； （7）拍攝電影膠片。賽珞璐片到電影的拍攝； （8）后期整理。對膠片進(jìn)行剪輯和編輯，以達(dá)到最好的銀幕效果。 電腦的出現(xiàn)使這個(gè)過程得以簡化：有些人完成動(dòng)畫畫面的繪制以后采用圖像掃描儀把畫稿轉(zhuǎn)換成數(shù)字圖像，利用電腦來上色或其他處理，或者再利用專門的設(shè)備把數(shù)字圖像轉(zhuǎn)換成錄像帶，供電視播放用。2. 電腦動(dòng)畫指用計(jì)算機(jī)整理的動(dòng)畫。 發(fā)展經(jīng)歷三個(gè)階段：第一階段：用電腦畫出簡單的線條和幾何圖形，電腦把繪畫過程記錄下來，在需要時(shí)，可利用電腦重復(fù)繪畫過程，使人們看到活動(dòng)

6、的畫面。第二階段：活動(dòng)的主體從簡單的線條、幾何圖形過渡到比較復(fù)雜的圖形。畫面上的變化模式和多種顏色的運(yùn)用使這一階段的動(dòng)畫具有良好的視覺效果，開始體現(xiàn)電腦動(dòng)畫的風(fēng)格。第三階段：模擬手工動(dòng)畫，進(jìn)一步整理收集動(dòng)畫難以表現(xiàn)的題材。21 電腦動(dòng)畫基本概念電腦動(dòng)畫的種類:幀動(dòng)畫 模擬以幀為基本單位的傳統(tǒng)動(dòng)畫，占動(dòng)畫產(chǎn)品的98%。矢量動(dòng)畫 經(jīng)過電腦運(yùn)算而確定的運(yùn)行軌跡和形狀的動(dòng)畫。按表現(xiàn)形式分：平面動(dòng)畫亦稱“二維動(dòng)畫”，以傳統(tǒng)平面繪畫為基礎(chǔ)的動(dòng)畫。變形動(dòng)畫 將物體形態(tài)從一種形態(tài)過渡到另一種形態(tài)的動(dòng)畫?？臻g動(dòng)畫 亦稱“三維動(dòng)畫”，形成三維造型及空間運(yùn)動(dòng)的動(dòng)畫。電腦動(dòng)畫的特點(diǎn):所有動(dòng)畫必須經(jīng)過電腦的運(yùn)算和處理。

7、電腦軟件是動(dòng)畫整理的必要條件，并提供自動(dòng)動(dòng)畫功能。電腦動(dòng)畫以文件形式保存，采用國際標(biāo)準(zhǔn)的FLC和GIF89a格式。2.2 動(dòng)畫整理軟件Animator Pro、Animation Studio、Flash、WinImage：morph等用于整理各種平面動(dòng)畫，例如專業(yè)動(dòng)畫、網(wǎng)頁動(dòng)畫、變形動(dòng)畫等。3D Studio、3D Studio Max、Cool 3D、Maya等用于各種各樣的三維動(dòng)畫，例如三維動(dòng)畫、文字三維、特技三維動(dòng)畫等。實(shí)際動(dòng)畫素材中，一般不止使用一個(gè)動(dòng)畫軟件，而是多個(gè)動(dòng)畫軟件共同編輯的結(jié)果。3.Flash動(dòng)畫整理軟件 3.1 Flash簡介Flash是Macromedia公司推出的著

8、名的矢量動(dòng)畫整理軟件 ，用它能整理精湛的網(wǎng)頁畫面。 Flash整理的動(dòng)畫，除在網(wǎng)頁瀏覽外，還可以在專門的播放器播放，也可以直接輸出為可執(zhí)行文件、AVI文件、GIF動(dòng)畫或圖像。 Flash的整理是以時(shí)間軸為主線，方便地控制每一關(guān)鍵幀，還可根據(jù)需要，調(diào)整每秒顯示幀數(shù)。 3.2 Flash 應(yīng)用的幾個(gè)方面 Flash 2D動(dòng)畫整理：包括MTV動(dòng)畫、片頭光盤、廣告動(dòng)畫等 。多媒體課件開發(fā) ：用Flash整理出來的課件具有高質(zhì)量低容量的特點(diǎn)，適應(yīng)了網(wǎng)絡(luò)課件的要求。 基于網(wǎng)頁的Flash動(dòng)畫：由于受網(wǎng)絡(luò)速度的影響，人們都希望用在網(wǎng)頁里的素材容量越小越好。而Flash是基于矢量模式的，做出來的動(dòng)畫容量可以很

9、小。 3.3 Flash的基本概念 3.3.1圖層 一個(gè)圖層，指動(dòng)畫編輯的物理層,層如一張透明的紙 , 除了畫有圖形或文字的地方，其他部分都是透明的；圖層又是相對獨(dú)立的，修改其中一層，不會(huì)影響到其他層。 圖層有4種狀態(tài)：l 活動(dòng)狀態(tài)：可以對該層進(jìn)行各種操作。l 隱藏狀態(tài)：即在編輯時(shí)是看不見的， l 鎖定狀態(tài)：被鎖定的圖層無法進(jìn)行任何操作。l 外框模式：處于外框模式的層，其上的所有圖形只能顯示輪廓。 3.3.2 場景 場景猶如一個(gè)舞臺(tái)，所有的演員與所有的情節(jié)，都在這個(gè)舞臺(tái)上進(jìn)行。舞臺(tái)由大小、音響、燈光等條件組成，場景也有大小、色彩等的設(shè)置。對場景的主要操作:（1）添加一個(gè)新場景,有兩種方法；（2

10、）清除某個(gè)場景：也有兩種方法；（3）為場景改名。3.3.3 幀和關(guān)鍵幀 在時(shí)間軸上，每一個(gè)小方格就是一個(gè)幀，時(shí)間軸是對幀進(jìn)行操作的場所。在默認(rèn)狀態(tài)下，每隔5幀進(jìn)行數(shù)字標(biāo)示。幀在時(shí)間軸上的排列順序決定了一個(gè)動(dòng)畫的播放順序，至于每幀有什么具體內(nèi)容，則需在相應(yīng)的幀的工作區(qū)域內(nèi)進(jìn)行整理 。動(dòng)畫播放的內(nèi)容即幀的內(nèi)容 。在Flash整理中，不必將所有動(dòng)作整理出來，只需制定起始和結(jié)束這兩個(gè)關(guān)鍵幀。兩個(gè)關(guān)鍵幀之間的部分就是過渡幀 ，是起始關(guān)鍵幀動(dòng)作向結(jié)束關(guān)鍵幀動(dòng)作變化的過渡部分。這部分的延續(xù)時(shí)間越長，整個(gè)動(dòng)作變化越流暢，動(dòng)作前后的了解越自然。 在一個(gè)關(guān)鍵幀里，什么對象也沒有，就稱為空白關(guān)鍵幀。特別是那些要進(jìn)行

11、動(dòng)作（Action）調(diào)用的場合，常常是需要空白關(guān)鍵幀的支持的。 3.4 Flash 的基本操作 （1）創(chuàng)建Flash文件：在啟動(dòng)Flash軟件后就自動(dòng)創(chuàng)建了一個(gè)文件名為“無標(biāo)題-1”的Flash文件。 （2）修改影片/文檔屬性：在創(chuàng)作Flash動(dòng)畫之前，先要對屏幕的大小，背景顏色以及播放速度進(jìn)行設(shè)置。 （3）導(dǎo)入對象：執(zhí)行“文件/導(dǎo)入庫”菜單命令，將彈出“導(dǎo)入到庫”對話框，選擇要導(dǎo)入的文件 。（4）整理動(dòng)畫。（5）預(yù)覽動(dòng)畫：動(dòng)畫創(chuàng)作完畢，執(zhí)行“控制/測試影片”菜單命令，或按Ctrl+Enter組合鍵調(diào)試影片 。（6）保存動(dòng)畫：執(zhí)行“文件/保存”菜單命令，保存格式為fla,稱為動(dòng)畫源文件。 （7

12、）發(fā)布動(dòng)畫：Flash MX支持多種格式的輸出，包括swf、html、gif、exe、jpeg等 。主要輸出的是swf和html格式。3.5 元件與庫 元件是Flash MX中一個(gè)很基本的概念，它是指在Flash 中所創(chuàng)建的圖形、按鈕和影片剪輯3種元素，所有的元件都存放在庫里 。（1）圖形元件。圖形元件可以是靜止的圖片，也可以是動(dòng)畫 ，但不能被用于添加交互行為。 （2）按鈕元件。按鈕元件可以響應(yīng)鼠標(biāo)事件，有Up、鼠標(biāo)經(jīng)過、Down和反應(yīng)區(qū)四種狀態(tài)。 （3）影片剪輯元件。影片剪輯元件使用相對較復(fù)雜，可以看成是一個(gè)獨(dú)立的動(dòng)畫。當(dāng)播放主動(dòng)畫時(shí)，影片剪輯元件本身也在循環(huán)播放。 3.6 動(dòng)畫基本類型 (

13、1)逐幀動(dòng)畫(2)補(bǔ)間動(dòng)畫(3)引導(dǎo)動(dòng)畫(4)遮罩動(dòng)畫注：該部分內(nèi)容會(huì)在后續(xù)的課程中作重點(diǎn)講解，第一次課僅作了解。3.7 實(shí)例整理 注：實(shí)例操作僅限于最基本的逐幀動(dòng)畫。實(shí)例操作（1）網(wǎng)絡(luò)小廣告的整理打開Flash軟件。選擇“文件”/“導(dǎo)入”/“導(dǎo)入到庫”，將需要的兩張圖片導(dǎo)入進(jìn)庫。選中第1幀，從庫中拖動(dòng)一張圖片至舞臺(tái)，根據(jù)圖片的大小更改舞臺(tái)的大小，然后使圖片相對于舞臺(tái)居中。選中第10幀插入一個(gè)空白關(guān)鍵幀，從庫中拖動(dòng)另一張圖片至舞臺(tái)。同理，選中第20幀插入一個(gè)空白關(guān)鍵幀，放入第一張圖片。使用快捷鍵Ctrl+Enter預(yù)覽動(dòng)畫效果。最后保存文件。（2）走動(dòng)的小雞 設(shè)定寬 400 像素、高 150

14、像素的淡綠色舞臺(tái)。進(jìn)入創(chuàng)建名為“并立”的圖形元件編輯場景，用橢圓工具、鉛筆工具、選擇工具和顏料桶工具畫一只頭朝右兩腳并立的小雞。按下快捷鍵Ctrl+L打開庫面板，在元件列表區(qū)選中“并立”元件名，右擊，執(zhí)行“重制”命令，把新元件命名為“右前”；單擊“編輯元件”按鈕，打開名為“ 右前 ” 圖形元件的編輯場景，把小雞修改成右腳在前的形狀。用同樣的方法新建一只名為“左前” 的小雞圖形元件?；氐綀鼍?1 ，執(zhí)行“ 視圖 網(wǎng)格顯示網(wǎng)格”命令 。選中圖層 1 的第 1 幀，把 “右前”小雞元件拖到舞臺(tái)最左邊。在第 3 幀插入空白關(guān)鍵幀，單擊“繪圖紙外觀”按鈕，把 “并立”小雞元件拖到舞臺(tái)的適當(dāng)部位，讓右腳的位置在前一只小雞的前腳位置上。在第 5 幀插入空白關(guān)鍵幀，把 “ 左前”小雞元件拖到舞臺(tái)的適當(dāng)部位，讓后腳的位置在前一只小雞的右腳位置上。在第 7 幀插入空白關(guān)鍵幀，把 “并立”小雞元件拖到舞臺(tái)的適當(dāng)部位，讓左腳的位置在前一只小雞的前腳位置上。在第 9 幀插入空白關(guān)鍵幀，