Flash骨骼遮罩引導(dǎo)層動(dòng)畫

1、復(fù)習(xí)與回顧 補(bǔ)間形狀 傳統(tǒng)補(bǔ)間 補(bǔ)間動(dòng)畫目的、重點(diǎn)和難點(diǎn) 目的 掌握骨骼動(dòng)畫； 掌握遮罩動(dòng)畫； 掌握引導(dǎo)層動(dòng)畫 。 重點(diǎn) 掌握遮罩動(dòng)畫； 掌握引導(dǎo)層動(dòng)畫 。 難點(diǎn) 骨骼動(dòng)畫適用范圍 遮罩層和被遮罩層的關(guān)系。 如何在遮罩層和被遮罩中設(shè)置動(dòng)畫。 遮罩層和被遮罩層中應(yīng)分別放置什么對(duì)象。 引導(dǎo)路徑的設(shè)置 引導(dǎo)層動(dòng)畫調(diào)整到路徑 骨骼動(dòng)畫 用途 制作機(jī)械類轉(zhuǎn)動(dòng)，使用元件+骨骼的形式； 制作生物類關(guān)節(jié)，使用圖形+骨骼的形式。 課堂示例1_鏟土車運(yùn)行 實(shí)驗(yàn)指導(dǎo)P157-5 利用庫中的元件，制作鏟土車運(yùn)行的示意動(dòng)畫，動(dòng)畫總幀數(shù)為60幀遮罩的概念 什么是遮罩 在圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可

2、以在遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對(duì)象可以通過該“視窗”顯示出來，而“視窗”之外的對(duì)象將不會(huì)顯示。 遮罩有什么用 是用在整個(gè)場(chǎng)景或一個(gè)特定區(qū)域，使場(chǎng)景外的對(duì)象或特定區(qū)域外的對(duì)象不可見， 是用來遮罩住某一元件的一部分，從而實(shí)現(xiàn)一些特殊的效果。遮罩層是任意形狀被遮罩層（在遮罩層下）遮罩后的效果創(chuàng)建遮罩的方法 遮罩層是由普通圖層轉(zhuǎn)化而來的。 在某個(gè)圖層上單擊右鍵，在彈出菜單中選擇【遮罩層】，該圖層就會(huì)生成遮罩層， “層圖標(biāo)”就會(huì)從普通層圖標(biāo) 變?yōu)檎谡謱訄D標(biāo) ，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”， 如果想關(guān)聯(lián)更多層被遮罩，只要把這些層拖到被遮罩層下面就可以了構(gòu)成遮罩和被遮

3、罩層的元素 遮罩層中的圖形對(duì)象在播放時(shí)是看不到的，遮罩層中的內(nèi)容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉(zhuǎn)化為“填充”。 被遮罩層中的對(duì)象只能透過遮罩層中的對(duì)象被看到。在被遮罩層，可以使用按鈕，影片剪輯，圖形，位圖，文字，線條。 創(chuàng)建遮罩動(dòng)畫的步驟 首先在普通圖層中，放入被遮罩對(duì)象，創(chuàng)建動(dòng)畫 (如果需要可以在被遮罩層中使用形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、引導(dǎo)線動(dòng)畫等動(dòng)畫) 然后在當(dāng)前圖層上方新建圖層，放入遮罩對(duì)象，創(chuàng)建動(dòng)畫 (如果需要可以在遮罩層中使用形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、引導(dǎo)線動(dòng)畫等動(dòng)畫 ) 最后將放入遮罩對(duì)象的圖層設(shè)置為遮罩圖層課堂示例2_簡(jiǎn)

4、單遮罩動(dòng)畫 打開“簡(jiǎn)單遮罩動(dòng)畫.fla”文件，利用素材創(chuàng)建遮罩動(dòng)畫 關(guān)鍵步驟： 將庫中文字拖動(dòng)到舞臺(tái)，持續(xù)40幀 新建圖層，畫球，并創(chuàng)建球來回滾動(dòng)動(dòng)畫，持續(xù)40幀 選擇“球”所在圖層，按右鍵選擇“遮罩層” 保存為“簡(jiǎn)單遮罩動(dòng)畫.fla”，導(dǎo)出為“簡(jiǎn)單遮罩動(dòng)畫.swf”課堂示例3_羅馬假日 題目 制作如“羅馬假日1.swf”和“羅馬假日2.swf”所示的動(dòng)畫效果，一種效果是文字不動(dòng)，但是文字上的圖案運(yùn)動(dòng)；一種效果是圖案不動(dòng)，但是文字動(dòng)。 知識(shí)點(diǎn) 遮罩動(dòng)畫的制作方法。 將補(bǔ)間動(dòng)畫分別應(yīng)用到遮罩層和被遮罩層的效果區(qū)別。參考步驟 “羅馬假日1.swf”的參考步驟： 新建文件，導(dǎo)入素材 設(shè)置文檔背景色為

5、黑色； 將海報(bào)作為背景圖層圖片，并設(shè)置動(dòng)作補(bǔ)間動(dòng)畫，使圖片從舞臺(tái)上方移動(dòng)到舞臺(tái)下方； 在背景圖層上方新建文字圖層，輸入文字“ROMAN HOLIDAY”，Impact字體，擴(kuò)展到和背景圖層相同的幀數(shù)； 并將文字層設(shè)置為遮罩層。 保存為“羅馬假日1.fla”，導(dǎo)出為“羅馬假日1.swf” “羅馬假日2.swf”的參考步驟： 新建文件，導(dǎo)入素材 設(shè)置文檔背景色為黑色； 將海報(bào)作為背景圖層圖片 在背景圖層上方新建圖層，先創(chuàng)建多邊形形狀變化的形狀補(bǔ)間動(dòng)畫； 在形狀補(bǔ)間動(dòng)畫后面制作文字移動(dòng)的動(dòng)作補(bǔ)間動(dòng)畫，文字為“ROMAN HOLIDAY”，Impact字體，從小到達(dá)變化，并從舞臺(tái)上方移動(dòng)到舞臺(tái)中央；

6、將文字層設(shè)置為遮罩層。 保存為“羅馬假日2.fla”，導(dǎo)出為“羅馬假日2.swf”羅馬假日1羅馬假日2課堂示例4_文字遮罩動(dòng)畫 題目 打開“金立手機(jī).fla”文件，利用素材創(chuàng)建遮罩動(dòng)畫 一道白色輝光從文字左邊掠過到文字右邊，又從文字右邊掠過到文字左邊。 效果參見“文字遮罩動(dòng)畫-樣張.swf”。 知識(shí)點(diǎn)： 利用遮罩動(dòng)畫的制作輝光效果文字。該效果在各種廣告宣傳的文字中都有很好應(yīng)用。參考步驟 打開“金立手機(jī).fla”文件 創(chuàng)建“背景文字”層，持續(xù)到60幀 復(fù)制“背景文字”層(建立“遮罩文字層”) 在兩個(gè)文字層中間新建圖層，創(chuàng)建“輝光運(yùn)動(dòng)”動(dòng)畫 將“輝光運(yùn)動(dòng)”動(dòng)畫上方文字圖層，設(shè)置為遮罩層 保存為“金

7、立手機(jī).fla”課堂示例5_金立手機(jī) 題目 在示例4基礎(chǔ)上，完成劉德華的圖片漸漸出現(xiàn)又漸漸消失，添加背景音樂。 效果參見“金立手機(jī)-樣張.swf”。 知識(shí)點(diǎn)： 遮罩動(dòng)畫和其他動(dòng)畫相結(jié)合，又互不干擾。 參考步驟 在示例4基礎(chǔ)上，新建圖層 人物變化動(dòng)畫層 背景圖片層 背景音樂層引導(dǎo)層動(dòng)畫的原理 將一個(gè)或多個(gè)層鏈接到一個(gè)運(yùn)動(dòng)引導(dǎo)層，使一個(gè)或多個(gè)對(duì)象沿同一條路徑運(yùn)動(dòng)的動(dòng)畫形式被稱為“引導(dǎo)路徑動(dòng)畫”。這種動(dòng)畫可以使一個(gè)或多個(gè)元件完成曲線或不規(guī)則運(yùn)動(dòng)。創(chuàng)建引導(dǎo)層和被引導(dǎo)層 在普通圖層上單擊時(shí)間軸面板中的“添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層”按鈕，該層的上面就會(huì)添加一個(gè)引導(dǎo)層，同時(shí)該普通層縮進(jìn)成為“被引導(dǎo)層” 引導(dǎo)層和被引

8、導(dǎo)層中的對(duì)象 引導(dǎo)層是用來指示元件運(yùn)行路徑的，所以“引導(dǎo)層”中的內(nèi)容可以是用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具等繪制出的線段。 “被引導(dǎo)層”中的對(duì)象是跟著引導(dǎo)線走的，可以使用影片剪輯、圖形元件、按鈕、文字等，但不能應(yīng)用形狀。 由于引導(dǎo)線是一種運(yùn)動(dòng)軌跡，不難想象，“被引導(dǎo)”層中最常用的動(dòng)畫形式是動(dòng)畫補(bǔ)間動(dòng)畫，當(dāng)播放動(dòng)畫時(shí)，一個(gè)或數(shù)個(gè)元件將沿著運(yùn)動(dòng)路徑移動(dòng)。 向被引導(dǎo)層中添加元件 “引導(dǎo)動(dòng)畫”最基本的操作就是使一個(gè)運(yùn)動(dòng)動(dòng)畫“附著”在“引導(dǎo)線”上。所以操作時(shí)特別得注意“引導(dǎo)線”的兩端，被引導(dǎo)的對(duì)象起始、終點(diǎn)的2個(gè)“中心點(diǎn)”一定要對(duì)準(zhǔn)“引導(dǎo)線”的2個(gè)端頭。 下圖中“元件”中心的十字星正好對(duì)

9、著線段的端頭，這一點(diǎn)非常重要，是引導(dǎo)線動(dòng)畫順利運(yùn)行的前提。應(yīng)用引導(dǎo)路徑動(dòng)畫的技巧 把“屬性”面板上的“調(diào)整到路徑”前打上勾，對(duì)象的基線就會(huì)調(diào)整到運(yùn)動(dòng)路徑。 在做引導(dǎo)路徑動(dòng)畫時(shí)，按下主工具欄上的“對(duì)齊對(duì)象”功能按鈕，可以使“對(duì)象附著于引導(dǎo)線”的操作更容易成功。 創(chuàng)建引導(dǎo)層動(dòng)畫步驟 首先在普通圖層中，創(chuàng)建被引導(dǎo)對(duì)象動(dòng)畫 (通常為傳統(tǒng)補(bǔ)間動(dòng)畫) 然后在當(dāng)前圖層上方創(chuàng)建引導(dǎo)圖層 在引導(dǎo)圖層中創(chuàng)建引導(dǎo)線 將被引導(dǎo)對(duì)象吸附到引導(dǎo)線上課堂示例6_樹葉飄落 題目： 打開“古詩詞配畫.fla”，利用引導(dǎo)層動(dòng)畫，制作如“樹葉飄落-樣張.swf”所示動(dòng)畫。 要求：樹葉沿不規(guī)則曲線飄落，并逐漸變小。 知識(shí)點(diǎn)： 利用引

10、導(dǎo)層動(dòng)畫制作樹葉飄落的效果 結(jié)合傳統(tǒng)補(bǔ)間參數(shù)的設(shè)置，使樹葉運(yùn)動(dòng)更自然參考步驟 打開“古詩詞配畫.fla” 制作背景層，并持續(xù)到55幀 創(chuàng)建樹葉運(yùn)動(dòng)圖層 創(chuàng)建引導(dǎo)圖層，畫引導(dǎo)線 使樹葉吸附在引導(dǎo)線上，注意“調(diào)整到路徑”選項(xiàng) 保存“古詩詞配畫.fla”課堂練習(xí) 完成課堂示例16 繼續(xù)課堂示例6，要求：毛筆書寫出“天蒼蒼 野茫茫”文字。參見“古詩詞配畫-樣張.swf”。古詩詞配畫-參考步驟 繼續(xù)課堂示例6 文字效果：新建一個(gè)圖層，利用逐幀動(dòng)畫制作文字逐個(gè)出現(xiàn)的效果； 毛筆字效果：新建一個(gè)圖層，利用傳統(tǒng)補(bǔ)間動(dòng)畫，制作毛筆字移動(dòng)的效果；注意調(diào)整文字層和毛筆字層的幀數(shù)，從而使兩層播放時(shí)配合一致。 保存為“

11、古詩詞配畫.fla”，導(dǎo)出為“古詩詞配畫.swf”課后練習(xí) 實(shí)驗(yàn)指導(dǎo)書P153156 第2、3、4題 實(shí)驗(yàn)指導(dǎo)書P158159 第2、3、5題 空中歷險(xiǎn)的飛機(jī) 題目：一個(gè)飛機(jī)沿曲線運(yùn)動(dòng)，機(jī)頭方向沿曲線 知識(shí)點(diǎn)： 通過引導(dǎo)層添加飛機(jī)的曲線運(yùn)動(dòng)路徑 如何將運(yùn)動(dòng)對(duì)象吸附在引導(dǎo)線上 如何使飛機(jī)機(jī)頭沿飛行線方向目的、重點(diǎn)和難點(diǎn) 目的 掌握骨骼動(dòng)畫； 掌握遮罩動(dòng)畫； 掌握引導(dǎo)層動(dòng)畫 。 重點(diǎn) 掌握遮罩動(dòng)畫； 掌握引導(dǎo)層動(dòng)畫 。 難點(diǎn) 骨骼動(dòng)畫適用范圍 遮罩層和被遮罩層的關(guān)系。 如何在遮罩層和被遮罩中設(shè)置動(dòng)畫。 遮罩層和被遮罩層中應(yīng)分別放置什么對(duì)象。 引導(dǎo)路徑的設(shè)置 引導(dǎo)層動(dòng)畫調(diào)整到路徑 向被引導(dǎo)層中添加元

12、件 “引導(dǎo)動(dòng)畫”最基本的操作就是使一個(gè)運(yùn)動(dòng)動(dòng)畫“附著”在“引導(dǎo)線”上。所以操作時(shí)特別得注意“引導(dǎo)線”的兩端，被引導(dǎo)的對(duì)象起始、終點(diǎn)的2個(gè)“中心點(diǎn)”一定要對(duì)準(zhǔn)“引導(dǎo)線”的2個(gè)端頭。 下圖中“元件”中心的十字星正好對(duì)著線段的端頭，這一點(diǎn)非常重要，是引導(dǎo)線動(dòng)畫順利運(yùn)行的前提。應(yīng)用引導(dǎo)路徑動(dòng)畫的技巧 把“屬性”面板上的“調(diào)整到路徑”前打上勾，對(duì)象的基線就會(huì)調(diào)整到運(yùn)動(dòng)路徑。 在做引導(dǎo)路徑動(dòng)畫時(shí)，按下主工具欄上的“對(duì)齊對(duì)象”功能按鈕，可以使“對(duì)象附著于引導(dǎo)線”的操作更容易成功。 課堂練習(xí) 完成課堂示例16 繼續(xù)課堂示例6，要求：毛筆書寫出“天蒼蒼 野茫?！蔽淖帧⒁姟肮旁娫~配畫-樣張.swf”。古詩詞配畫-參考步驟 繼續(xù)課堂示例6 文字效果：新建一個(gè)圖層，利用逐幀動(dòng)畫制作文字逐個(gè)出現(xiàn)的效果； 毛筆字效果：新建一個(gè)圖層，利用傳統(tǒng)補(bǔ)間動(dòng)畫，制作毛