第6講_Flash元件、逐幀動畫與形狀

1、1 12 2教師信息q教師：顧振宇q電子信箱：q辦公室：學(xué)院樓B421q電話：677038553 3目的、重點(diǎn)和難點(diǎn)q目的q掌握幀的概念，類型，編輯方法q了解圖層的概念、類型和操作q掌握元件的生成和其屬性的設(shè)置q掌握Flash逐幀動畫制作q了解影片剪輯q重點(diǎn)q掌握幀、關(guān)鍵幀和空白關(guān)鍵幀的概念q掌握Flash逐幀動畫制作 q圖形元件與實(shí)例q難點(diǎn)q幀、關(guān)鍵幀和空白關(guān)鍵幀的區(qū)別及幀的各種操作q元件與實(shí)例的區(qū)別4 4幀的概念q幀是進(jìn)行Flash動畫制作的最基本的單位，在時(shí)間軸上每一個(gè)矩形小方塊即是一個(gè)幀，它是時(shí)間軸上的最小單位，是通用的動畫計(jì)量單位。q每一幀都可以包含需要顯示的所有內(nèi)容，包括圖形、聲音

2、、各種素材和其他多種對象.q一個(gè)完整的Flash動畫就是由許多幀組成，播放時(shí)依次顯示每一幀中的內(nèi)容。通過連續(xù)播放這些幀，從而實(shí)現(xiàn)所要表達(dá)的動畫效果。5 5幀的類型q空幀：q空幀不是真正意義上的幀，而只是在時(shí)間軸上一個(gè)矩形小方塊，在這些矩形方塊里可以放入幀。q空白關(guān)鍵幀：q空白關(guān)鍵幀就像一張白紙，可以在上面可以放入圖形、聲音、各種素材和其他多種對象。q關(guān)鍵幀：q在空白關(guān)鍵幀中放入對象，形成了關(guān)鍵幀。關(guān)鍵幀是特殊的幀，可以定義動畫中的變化，包括對象的運(yùn)動和特點(diǎn)(如大小和顏色) 。q普通幀：q在時(shí)間軸上，普通幀總是在關(guān)鍵幀的后面。前面關(guān)鍵幀的內(nèi)容可以一直顯示在隨后的每個(gè)普通幀中，直到到達(dá)另一個(gè)關(guān)鍵幀

3、為止。q過渡幀：q過渡幀包含了一系列幀，往往處于兩個(gè)關(guān)鍵幀之間。利用過渡幀可以制作兩種過渡動畫：運(yùn)動過渡和形狀過渡。6各類的幀在時(shí)間軸上的顯示q關(guān)鍵幀在時(shí)間軸上顯示為實(shí)心的圓點(diǎn)q空白關(guān)鍵幀在時(shí)間軸上顯示為空心的圓點(diǎn)q普通幀在時(shí)間軸上顯示為灰色或白色填充的小方格q在關(guān)鍵幀后面顯示為灰色q在空白關(guān)鍵幀后面顯示為白色q過渡幀在時(shí)間軸上顯示為淺綠色或淺紫色q表示“形狀過渡幀”，顏色為淺綠色q表示“運(yùn)動過渡幀”，顏色為淺紫色7 7各類的幀在時(shí)間軸上的示意圖關(guān)關(guān)鍵鍵幀幀普普通通幀幀空空幀幀空空白白關(guān)關(guān)鍵鍵幀幀過過渡渡幀幀普普通通幀幀8 8q實(shí)心圓的關(guān)鍵幀表示該關(guān)鍵幀中有對象（繪圖元件）,是關(guān)鍵幀。q空心圓

4、的關(guān)鍵幀表示該關(guān)鍵幀中沒有任何對象，也稱空白關(guān)鍵幀。q單一的實(shí)心圓點(diǎn)表示關(guān)鍵幀。獨(dú)立關(guān)鍵幀后面淺灰色的幀中具有與前面的關(guān)鍵幀同樣的畫面，這些淺灰色的幀以空心矩形符號為結(jié)尾。q空心圓點(diǎn)代表空的關(guān)鍵幀，當(dāng)你新增一個(gè)空白關(guān)鍵幀時(shí)，就會以空心圓點(diǎn)表示。9 9q只有選擇時(shí)間軸上的關(guān)鍵幀(包括空白關(guān)鍵幀)，舞臺上才可以放置各種繪圖元件、繪制各種圖形。q如果選擇時(shí)間軸上的普通幀，舞臺上不能放置任何繪圖元件，也不可以繪圖。1010插入關(guān)鍵幀、空白關(guān)鍵幀和普通幀的區(qū)別q在前一個(gè)關(guān)鍵幀的后面任一幀處插入關(guān)鍵幀，是復(fù)制前一個(gè)關(guān)鍵幀上的對象，并可對其進(jìn)行編輯操作q如果插入普通幀，是延續(xù)前一個(gè)關(guān)鍵幀上的內(nèi)容，不可對其進(jìn)

5、行編輯操作q插入空白關(guān)鍵幀，可清除該幀后面的延續(xù)內(nèi)容，可以在空白關(guān)鍵幀上添加新的實(shí)例對象。q q關(guān)鍵幀和空白關(guān)鍵幀上都可以添加幀動作腳本，普通幀上則不能。1111幀的編輯q在時(shí)間軸上選擇幀后，按右鍵打開快捷菜單，可以對所選幀進(jìn)行相應(yīng)的編輯。q幀的選擇與移動q按住“ctrl”鍵，可以同時(shí)選擇不相鄰的多幀。q按住“shift”鍵，可以選擇相鄰的多幀。q右鍵，在快捷菜單中選擇“選擇所有幀”q幀的創(chuàng)建與轉(zhuǎn)換q幀的復(fù)制、剪切與粘貼q幀的刪除與清除q幀的翻轉(zhuǎn)q如果希望制作的動畫能倒著播放，可以使用“翻轉(zhuǎn)幀”命令來達(dá)到效果。q選中時(shí)間軸上一系列幀，用鼠標(biāo)右擊它，在快捷菜單中選擇“翻轉(zhuǎn)幀”即可。12幀操作的常

6、用快捷鍵q創(chuàng)建關(guān)鍵幀：F6q創(chuàng)建空白關(guān)鍵幀：F7q創(chuàng)建普通幀：F5q刪除關(guān)鍵幀或者空白關(guān)鍵幀：Shift+F6q刪除普通幀：Shift+F513設(shè)置幀頻q在Flash中，將每一秒鐘播放的幀數(shù)稱為幀頻，幀頻的單位是fps。q幀頻是動畫播放的速度。如Flash 的幀頻是24幀/秒，即每一秒鐘可以播放24幀畫面。以每秒播放的幀數(shù)為度量，幀頻太慢會使動畫看起來不連貫，幀頻太快會使動畫的細(xì)節(jié)變得模糊。q通過“屬性面板”可以設(shè)置幀頻，幀頻越大，播放速度越快，幀頻越小，播放速度越慢。1414圖層的概念q在Flash動畫中，可以將圖層看作一疊透明的膠片，每張膠片上都有不同的內(nèi)容，將這些膠片疊在一起就組成了一幅

7、比較復(fù)雜的畫面。q在上一圖層的內(nèi)容，會遮住下一圖層相同位置的內(nèi)容。如果上一圖層的某個(gè)位置沒有任何內(nèi)容，透過這個(gè)位置就可以看到下一圖層相同位置的內(nèi)容。 圖圖層層15圖層的作用q圖層是相對獨(dú)立的，修改其中一層，不會影響到其他層，在圖層中用戶可以對其中的對象或動畫進(jìn)行編輯修改，而不會影響其他圖層中的內(nèi)容。q用戶可以將一個(gè)復(fù)雜的動畫分解成幾個(gè)簡單的小動畫，將不同的動畫放置在不同的圖層上，各個(gè)小動畫之間相互獨(dú)立，從而組成一個(gè)復(fù)雜的動畫。q利用一些特殊的圖層還可以制作特殊的動畫效果，如利用引導(dǎo)層可以制作引導(dǎo)動畫，利用遮罩層可以制作遮罩動畫。1616圖層的類型q正常（普通）圖層正常（普通）圖層：q系統(tǒng)默認(rèn)的

8、圖層類型q引導(dǎo)圖層：引導(dǎo)圖層：q動畫中的對象在運(yùn)動時(shí)的路徑引導(dǎo)的圖層，例如某一圖層中的小球沿路徑運(yùn)動，就要用到這個(gè)引導(dǎo)圖層。q被引導(dǎo)圖層：被引導(dǎo)圖層：q是一個(gè)與引導(dǎo)圖層相關(guān)聯(lián)的正常圖層q遮罩圖層：遮罩圖層：q好象是在對象上面遮著一個(gè)帶有孔的圖層，它常用于制作按照燈等動畫效果q被遮罩圖層：被遮罩圖層：q該圖層的內(nèi)容只有遮罩圖層在相應(yīng)位置有遮罩對象時(shí)才可見，其他內(nèi)容不可見q文件夾：文件夾：q當(dāng)圖層過多時(shí)，可以使用圖層文件夾，將圖層放入文件夾中便于對圖層進(jìn)行管理17圖層的模式q當(dāng)前模式：q當(dāng)前模式是指當(dāng)前層處于編輯狀態(tài)，用戶可以對該圖層中的對象進(jìn)行編輯。q判別一個(gè)圖層是否為當(dāng)前模式的方法就是查看當(dāng)前

9、圖層名稱欄是否顯示一個(gè)鉛筆圖標(biāo)。q隱藏模式：q它的作用是指在將某個(gè)圖層隱藏后，用戶在編輯該圖層以外的圖層時(shí)，被隱藏的圖層不受影響。q雖然被隱藏的圖層在場景中看不到對象，但播放過程是可以看到的。q鎖定模式：q它的作用是將一個(gè)或多個(gè)圖層鎖定后，就無法對其進(jìn)行修改。q圖層被鎖定后，但是在場景中依然可以看到它。q輪廓模式：q在選擇該模式后，將只顯示圖層中對象的輪廓。q在圖層的名稱欄上的彩色方塊輪廓的顏色就是該圖層中對象的輪廓顏色。18圖層各種模式操作示意圖單擊“時(shí)間軸”面板上方的 圖標(biāo)，可使全部圖層上的對象只顯示輪廓線；再次單擊 圖標(biāo)，可恢復(fù)原狀。單擊圖層上的 圖標(biāo)，當(dāng)其變?yōu)?形狀時(shí)，該圖層上所有對象

10、都只顯示輪廓線；再次單擊 圖標(biāo)可恢復(fù)原狀。單擊圖層 圖標(biāo)下的 圖標(biāo)，當(dāng) 圖標(biāo)變?yōu)?形狀后，該圖層即被隱藏；要顯示被隱藏的圖層，只需單擊 圖標(biāo)即可。單擊“時(shí)間軸”面板上方的 圖標(biāo)，所有圖層都將被隱藏；再次單擊 圖標(biāo)，可顯示全部圖層。單擊“時(shí)間軸”面板上方的 圖標(biāo)，可鎖定全部圖層；再次單擊 圖標(biāo)可解除所有圖層的鎖定。單擊某圖層 圖標(biāo)下的 圖標(biāo)，當(dāng)圖標(biāo)變?yōu)?形狀時(shí)，表示該圖層被鎖定；解除圖層的鎖定，單擊圖層名稱右側(cè)的 圖標(biāo)即可。1919圖層的操作q圖層操作q選擇圖層，按鼠標(biāo)右鍵，在快捷菜單中選擇操作。q通過圖層工具欄進(jìn)行操作q常用的圖層操作q創(chuàng)建新普通圖層。q創(chuàng)建新引導(dǎo)圖層q刪除圖層q將普通圖層轉(zhuǎn)化

11、為遮罩圖層20圖層的屬性q在圖層名稱上右擊鼠標(biāo)，在快捷菜單中選擇“屬性” ，打開 “圖層屬性”對話框 ，可設(shè)置圖層的各種屬性 。2121逐幀動畫的基本原理q逐幀動畫原理q將對象的運(yùn)動過程分解成多個(gè)靜態(tài)圖形，再在時(shí)間軸上按順序?qū)⑦@些連續(xù)的靜態(tài)圖形置于連續(xù)的關(guān)鍵幀中，當(dāng)連續(xù)播放這些圖片時(shí)，就形成了動畫。 q逐幀動畫特點(diǎn)q對于要求較高的影片，逐幀動畫能發(fā)揮出它獨(dú)特的作用，具有非常大的靈活性，能最大限度地控制動畫的變化細(xì)節(jié)，很適合于表演很細(xì)膩的動畫。q消耗大量的時(shí)間。生成的動畫文件較大。22創(chuàng)建逐幀動畫的方法q用靜態(tài)圖片建立逐幀動畫q用jpg、png等格式的靜態(tài)圖片連續(xù)導(dǎo)入Flash中，就會建立一段逐

12、幀動畫。 q繪制矢量逐幀動畫q用繪圖工具等各種設(shè)計(jì)工具，在場景中一幀幀的畫出內(nèi)容。 q文字逐幀動畫q用文字作幀中的元件，實(shí)現(xiàn)文字跳躍、旋轉(zhuǎn)等特效。q導(dǎo)入序列圖像q可以導(dǎo)入gif序列圖像、swf動畫文件或者利用第3方軟件（如swish、swift 3D等）產(chǎn)生的動畫序列。2323課堂示例1：貴賓垂詢熱線 q制作如樣張所示動畫。要求電話擺動的同時(shí)，電話號碼依次出現(xiàn)，并保持靜止片刻。 q知識點(diǎn)：q逐幀動畫基本原理q幀、關(guān)鍵幀和空白關(guān)鍵幀q圖層的運(yùn)用q控制動畫的播放速度q控制某幀的延遲時(shí)間q參考“貴賓垂詢熱線-樣張.swf”2424課堂示例1-關(guān)鍵步驟q打開“貴賓垂詢熱線.fla”，設(shè)置舞臺大小500

13、*130像素。q靜態(tài)文字“貴賓垂詢 敬請蒞臨”單獨(dú)放一個(gè)圖層，并延續(xù)到40幀；q電話單獨(dú)放一個(gè)圖層，并延續(xù)到40幀；2525課堂示例1-關(guān)鍵步驟（續(xù)）q電話號碼單獨(dú)放一個(gè)圖層，每間隔5幀增加一個(gè)數(shù)字。q先在第1幀輸入第1個(gè)數(shù)字 q然后在第5幀插入關(guān)鍵幀，并編輯第5幀增加一個(gè)數(shù)字q按上述步驟分別編輯第10、15、20、25、30、35幀q分別保存為“貴賓垂詢熱線.fla”和“貴賓垂詢熱線.swf”2626思考題q在本示例基礎(chǔ)上，參考“貴賓垂詢熱線-思考-樣張.swf”，完成思考題。27元件的概念q元件的建立是以重復(fù)使用為目的的，不但可以將其應(yīng)用于當(dāng)前影片，而且可以將其應(yīng)用于其它影片。q元件中可以

14、包含位圖、圖形、組合、聲音甚至是其它元件。q在Flash中創(chuàng)建的所有元件都會出現(xiàn)在庫面板中，拖拽庫面板中的元件到場景，就可以反復(fù)利用元件q每個(gè)元件都具有獨(dú)立的時(shí)間軸、工作區(qū)和圖層，除此以外，每種元件類型都具有獨(dú)特的屬性。 28元件的類型qFlash中包括三種元件類型，分別為圖形元件、影片剪輯元件與按鈕元件。q圖形元件主要用于定義靜態(tài)的、常用的圖像符號。q按鈕元件是一種具有交互功能的圖形元件，用于響應(yīng)各種鼠標(biāo)事件，以實(shí)現(xiàn)用戶的相應(yīng)動作。q影片剪輯元件是Flash中應(yīng)用最為廣泛的元件類型，可以將它自身理解成為一個(gè)小動畫。q在影片剪輯元件中可以制作獨(dú)立的影片，制作影片的方法與在場景中沒有區(qū)別 。29

15、創(chuàng)建元件q在Flash中，可以通過兩種方式創(chuàng)建元件，分別為創(chuàng)建新元件與將對象轉(zhuǎn)換為元件。q創(chuàng)建新元件是指直接創(chuàng)建一個(gè)空白元件，然后自動進(jìn)入元件編輯模式，接著在元件中創(chuàng)建和編輯元件中的對象。q將對象轉(zhuǎn)換為元件是指將選定的對象轉(zhuǎn)換為元件，對象可以為任何元素，將對象轉(zhuǎn)換為元件后，即可改變對象的屬性 。q選擇對象，用“修改/轉(zhuǎn)換為元件”菜單命令，可以實(shí)現(xiàn)元件轉(zhuǎn)換。30編輯元件q在快捷菜單中選擇“編輯” ，或雙擊庫面板中的元件，就可進(jìn)入元件的編輯狀態(tài)。q元件的修改會直接影響到影片中每一個(gè)以它為基礎(chǔ)的實(shí)例。元件編輯狀態(tài)元件編輯狀態(tài)31實(shí)例q應(yīng)用于影片的元件均被稱之為實(shí)例。q在工作區(qū)中選中實(shí)例，可以改變實(shí)例

16、的尺寸、顏色與元件類型，但這些改動只針對實(shí)例本身，不會影響到庫面板中的元件 。3232課堂示例2-瓢蟲與花 q打開“瓢蟲與花.fla”，利用庫中的素材制作瓢蟲飛舞的影片剪輯；制作花叢中5只大小不一，頭部朝向不同的小瓢蟲飛舞的動畫 。q知識點(diǎn)：q掌握制作影片剪輯的方法q區(qū)分場景動畫與影片剪輯動畫q區(qū)分實(shí)例與元件q進(jìn)一步理解逐幀動畫q參考“瓢蟲與花-樣張.swf”3333課堂示例2-關(guān)鍵步驟q打開文件“瓢蟲與花.fla”q“插入/新建元件”創(chuàng)建影片剪輯 “瓢蟲飛舞”；q利用庫中的“瓢蟲1”、“瓢蟲2”、 “瓢蟲3” 、“瓢蟲4”元件和逐幀動畫方法制作“瓢蟲飛舞”；q注意：調(diào)整圖片位置可以利用“對齊

17、面板”q一定要把“相對于舞臺”按鈕按下q將庫中的“花”元件拖放3次到舞臺上形成3個(gè)實(shí)例，調(diào)整3個(gè)實(shí)例的大小或者進(jìn)行翻轉(zhuǎn)，得到花叢；q將庫中的“瓢蟲飛舞”元件拖放5次到舞臺上形成5個(gè)實(shí)例，調(diào)整5個(gè)實(shí)例的大小得到瓢蟲群； q保存為“瓢蟲與花.fla”和“瓢蟲與花.swf”34補(bǔ)間形狀動畫q補(bǔ)間形狀動畫的概念q補(bǔ)間形狀動畫是指在兩個(gè)或兩個(gè)以上的關(guān)鍵幀之間對形狀進(jìn)行補(bǔ)間的動畫，從而創(chuàng)建出類似于形變的效果，使一個(gè)形狀看起來隨著時(shí)間變成另一個(gè)形狀。q補(bǔ)間形狀動畫可以改變對象的位置、大小和顏色等屬性。q補(bǔ)間形狀動畫在CS4以前的版本叫形狀補(bǔ)間動畫q補(bǔ)間形狀動畫的要求q補(bǔ)間形狀動畫的對象必須是分離的(矢量圖)

18、q元件、組合、文字需要分離q有的對象需要分離多次，如文字q繪圖工具繪制的圖形本身就是分離的3535q補(bǔ)間形狀動畫的創(chuàng)建步驟q在動畫開始處創(chuàng)建一個(gè)空白關(guān)鍵幀，并放入需要變形的對象q在動畫結(jié)束處創(chuàng)建一個(gè)空白關(guān)鍵幀，并放入變形后的對象q選擇兩關(guān)鍵幀之間任何一幀，按鼠標(biāo)右鍵，在快捷菜單中選擇“創(chuàng)建補(bǔ)間形狀”命令q 或者打開“插入”菜單，選擇“補(bǔ)間形狀”命令3636q補(bǔ)間形狀動畫頭尾必須是關(guān)鍵幀，兩關(guān)鍵幀中間被帶有一個(gè)黑箭頭和淺綠色背景的中間過渡幀分開(如圖層4所示)q如果兩關(guān)鍵幀中間的黑箭頭變?yōu)楹邳c(diǎn)，代表補(bǔ)間形狀動畫創(chuàng)建錯(cuò)誤q缺少開始或結(jié)束關(guān)鍵幀(如圖層2,3所示)q對象分離或沒有徹底分離(如圖層1所

19、示)3737補(bǔ)間形狀動畫參數(shù)設(shè)置q選擇補(bǔ)間形狀動畫中任何一幀，打開補(bǔ)間形狀動畫的屬性面板，設(shè)置屬性q“緩動”選項(xiàng)q在1到 -100 的負(fù)值之間，動畫運(yùn)動的速度從慢到快，朝運(yùn)動結(jié)束的方向加速度補(bǔ)間。q在1 到 100 的正值之間，動畫運(yùn)動的速度從快到慢，朝運(yùn)動結(jié)束的方向減速度補(bǔ)間。q默認(rèn)為0，補(bǔ)間幀之間的變化速率是不變的。 q“混合”選項(xiàng)q角形：創(chuàng)建的動畫中間形狀會保留有明顯的角和直線，適合于具有銳化轉(zhuǎn)角和直線的混合形狀。q分布式：創(chuàng)建的動畫中間形狀比較平滑和不規(guī)則。 3838q運(yùn)用補(bǔ)間形狀動畫實(shí)現(xiàn)“雪球”字變成“雪人”的過程。參看“雪人-樣張.swf”q知識點(diǎn)：q文字與元件的分離q補(bǔ)間形狀動畫

20、3939q打開“雪人.fla”。q設(shè)置舞臺背景色為藍(lán)色。q在第1幀的中畫白色的圓。q在第30幀插入空白關(guān)鍵幀，將庫中元件“小雪人”拖放到舞臺中央，并分離。q選擇第1幀到第30幀中的某一幀，按右鍵，創(chuàng)建補(bǔ)間形狀動畫。q“緩動”值設(shè)置為-100。q保存為“雪人.fla”和“雪人.swf”4040課堂示例4：白天黑夜 q參考“白天黑夜-樣張.swf”文件，制作補(bǔ)間形狀動畫q要求：q動畫持續(xù)到60幀，其中變化50幀，停留10幀；q天空由黑逐漸變成下藍(lán)上白的線性漸變色；q天空變化同時(shí)，月亮變成太陽。q知識點(diǎn)：q分層補(bǔ)間形狀動畫4141課堂示例4q打開“白天黑夜.fla”文件，修改幀頻為10；q把庫中“背景”設(shè)置為舞臺背景，持續(xù)到60幀；q新建圖層，創(chuàng)建天色的變化；q在第1幀和第50幀分別畫一個(gè)矩形，分別填充黑色和藍(lán)到白的漸變色，設(shè)置大小與舞臺一樣大；通過在第60幀上插入幀