中職教材二維動畫-

Flashcc二維動畫基礎(chǔ)第5章元件和庫

學(xué)習(xí)目標(biāo)創(chuàng)建元件庫面板的管理圖形元件的創(chuàng)建與實例制作影片剪輯元件的創(chuàng)建與實例制作按鈕元件的創(chuàng)建與實例制作重點難點影片剪輯元件與圖形元件的區(qū)別圖形元件循環(huán)播放設(shè)置按鈕元件四個關(guān)鍵幀的狀態(tài)元件與實例的關(guān)系第5章元件和庫

學(xué)習(xí)內(nèi)容：5.1元件與庫面板5.2圖形元件的應(yīng)用5.3影片剪輯元件的應(yīng)用5.4按鈕元件的應(yīng)用5.5知識拓展5.6本章小結(jié)與重點回顧5.7課后實訓(xùn)5.1元件與庫面板

5.1.1課堂案例—花草繪制案例綜述案例分析操作步驟舉一反三5.1.2元件的類型5.1.3創(chuàng)建元件5.1.4轉(zhuǎn)換元件5.1.5編輯元件5.1.6庫面板的操作5.1.7元件與實例關(guān)系5.1.8改變實例類型5.1元件與庫面板

5.1.1課堂案例—花草繪制案例綜述本實例效果如圖所示，場景中多次出現(xiàn)花和草，可以將花草等素材轉(zhuǎn)換為元件后，對元件實例屬性進行變化。圖中的蝴蝶主要使用影片剪輯元件來繪制蝴蝶的扇動翅膀的過程。通過本實例的學(xué)習(xí)，不僅熟悉并掌握繪制工具的綜合應(yīng)用，而且也掌握如何創(chuàng)建元件，創(chuàng)建元件實例、編輯元件、管理元件等元件的基本操作。5.1元件與庫面板

案例分析在制作這個實例時，大致需要以下環(huán)節(jié)。新建文檔，并保存。打開外部庫，導(dǎo)入背景元件新建草的圖形元件并繪制新建花的圖形元件并繪制。新建蝴蝶的圖形元件并繪制新建蝴蝶動的影片剪輯元件并繪制將繪制好的花和草的元件放置在場景中。將蝴蝶動的影片剪輯放到場景中，制作蝴蝶飛的動畫效果測試并發(fā)布影片5.1元件與庫面板

舉一反三打開“繪制椰子樹”實例，制作椰子樹隨風(fēng)飄動的效果5.1元件與庫面板

5.1.2元件的類型

元件是制作動畫的最基本的元素，包括圖形、按鈕、影片剪輯。在整個文檔或其他文檔中重復(fù)使用該元件。使用元件可以簡化影片的編輯，大大減少文件大小。創(chuàng)建元件時需要選擇元件類型，主要包括三種類型：

（1）圖形元件。可用于靜態(tài)圖像和簡單動畫，并可用來創(chuàng)建鏈接到主時間軸的、可重復(fù)使用的動畫片段。圖形元件與主時間軸同步運行，交互式控件和聲音在圖形元件的動畫序列中不起作用。由于依附于主時間軸，圖形元件在.fla文件中的數(shù)據(jù)量小于按鈕元件和影片剪輯元件。

（2）按鈕元件?？梢詣?chuàng)建用于響應(yīng)鼠標(biāo)單擊、滑過或其他動作的交互式按鈕?？梢远x與各種按鈕狀態(tài)關(guān)聯(lián)的圖形，然后將動作指定給按鈕實例。5.1元件與庫面板

5.1.2元件的類型

（3）影片剪輯元件?？梢詣?chuàng)建可重復(fù)使用的動畫片段，影片剪輯擁有各自獨立于主時間軸的“多幀時間軸”，即使主時間軸上的幀數(shù)只有1幀，影片剪輯仍可以播放完整的動畫效果。可以將“多幀時間軸”看作是嵌套在主時間軸內(nèi)的時間軸。在影片剪輯元件中可以包含交互式控件、聲音甚至其他影片剪輯實例，也可以將影片剪輯實例放在按鈕元件的時間軸內(nèi)，以創(chuàng)建動畫按鈕。5.1元件與庫面板

5.1.3創(chuàng)建元件

可以通過舞臺上選定的對象來轉(zhuǎn)換元件，也可以創(chuàng)建一個空元件。創(chuàng)建完元件后，可以在元件編輯模式下繪制圖形、制作動畫或?qū)雰?nèi)容。方法一：創(chuàng)建元件的方法主要通過【插入】—【新建元件】命令，在彈出的對話框【創(chuàng)建新元件】對話框中可以修改元件名稱，及元件的類型。5.1元件與庫面板

5.1.3創(chuàng)建元件方法二：創(chuàng)建新元件的快捷鍵為Ctrl+F8，可以直接彈出【創(chuàng)建新元件】對話框。方法三：在庫面板左下角的【新建元件】按鈕，可以彈出【創(chuàng)建新元件】對話框，進行創(chuàng)建元件。5.1元件與庫面板

5.1.3創(chuàng)建元件

可以通過舞臺上選定的對象來轉(zhuǎn)換元件，也可以創(chuàng)建一個空元件。創(chuàng)建完元件后，可以在元件編輯模式下繪制圖形、制作動畫或?qū)雰?nèi)容。方法一：創(chuàng)建元件的方法主要通過【插入】—【新建元件】命令，在彈出的對話框【創(chuàng)建新元件】對話框中可以修改元件名稱，及元件的類型。5.1元件與庫面板

5.1.4轉(zhuǎn)換元件對于已經(jīng)在舞臺上繪制好的元素對象，可以將其轉(zhuǎn)換為元件，具體操作如下所示。方法一：在舞臺上選擇一個或多個元素。選擇【修改】—【轉(zhuǎn)換為元件】。方法二：在舞臺上選擇一個或多個元素，右鍵單擊，在右鍵菜單中選擇“轉(zhuǎn)換為元件”。方法三：在舞臺上選擇一個或多個元素，按快捷鍵F8即可彈出轉(zhuǎn)換為元件對話框。5.1元件與庫面板

5.1.5編輯元件（1）新建元件

新建一個元件之后，會進入一個元件的編輯窗口，在元件的編輯窗口中可以對元件進行編輯，5.1元件與庫面板

5.1.5編輯元件（2）庫中元件編輯

對于庫中的元件，可以雙擊進入編輯窗口?；蛘哌x擇某個元件，右鍵單擊，在彈出的右鍵快捷菜單中選擇【編輯】選項，即進入元件的編輯窗口。編輯窗口的背景顏色為舞臺設(shè)置的顏色。5.1元件與庫面板

5.1.5編輯元件（3）舞臺上已有元件的編輯

對于舞臺上存在的元件，可以雙擊進入元件的編輯窗口，這時會發(fā)現(xiàn)舞臺上的背景已虛影的形式存在，方便以舞臺為背景參考進行元件設(shè)計。5.1元件與庫面板

5.1.6庫面板的操作5.1元件與庫面板

5.1.7元件與實例關(guān)系

元件是制作Flash動畫的最基本的元素，可在整個文檔或其他文檔中重復(fù)使用該元件。

而實例是指位于舞臺上或嵌套在另一個元件內(nèi)的元件副本。用戶可以隨意地對實例進行改變大小、顏色等操作，對實例的這些操作不會影響到元件本身，但如果用戶對元件進行了修改,那么Flash就會更新該元件的所有實例。5.1元件與庫面板

5.1.8改變實例類型

不同的元件類型在屬性面板中會呈現(xiàn)不同的屬性。如果需要改變實例的元件類型，可以在屬性面板【實例行為】下拉列表中進行“影片剪輯”、“圖形”、“按鈕”三種元件類型進行切換。5.2圖形元件的應(yīng)用

5.2.1課堂案例—制作下雪動畫效果案例綜述案例分析操作步驟舉一反三5.2.2圖形元件屬性面板5.2圖形元件的應(yīng)用

5.2.1課堂案例—制作下雪動畫效果案例綜述

本實例制作下雪動畫效果，是FLASH動畫特效中使用頻率比較高的動畫效果。實例制作主要通過創(chuàng)建補間動畫制作雪花飄落的不規(guī)則曲線運動，并將其保存為圖形元件。通過圖形元件的【循環(huán)】屬性，設(shè)置開始播放幀來實現(xiàn)一串雪花的效果。最后再將一串雪花組合為一片雪花下落效果，如圖所示。5.2圖形元件的應(yīng)用

5.2.1課堂案例—制作下雪動畫效果案例分析在制作這個實例時，大致需要以下環(huán)節(jié)。新建文檔，并保存。導(dǎo)入背景元件創(chuàng)建“雪花”圖形元件，繪制雪花。創(chuàng)建“一片雪花飄落”圖形元件，利用補間動畫制作一片雪花飄落的動畫。創(chuàng)建“一組雪花飄落”圖形元件，制作一組雪花飄落的動畫。創(chuàng)建“下雪”圖形元件，分別制作前層大雪花，中層中雪花，后層小雪花，加強遠近透視的縱深感，形成錯落有致的效果。測試并發(fā)布影片5.2圖形元件的應(yīng)用

操作步驟新建元件“雪花”。執(zhí)行【插入】—【新建元件】命令，在彈出的【新建元件】對話框中，選擇“圖形”元件，名稱為“雪花”。雪花繪制最簡單的方法就是使用【刷子工具】，在舞臺上點一個點，然后執(zhí)行【修改】—【形狀】—【柔化填充邊緣】，效果如下。5.2圖形元件的應(yīng)用

操作步驟創(chuàng)建雪花下落動畫。

5.2圖形元件的應(yīng)用

操作步驟制作一串雪花下落效果

5.2圖形元件的應(yīng)用

操作步驟制作一片雪花下落效果5.2圖形元件的應(yīng)用

操作步驟制作舞臺場景動畫

將4到5個“一片雪花”元件實例放置在舞臺上。近大遠小，改變兩個實例制作為遠處雪花的效果。同樣在制作時，為了使需要下落的狀態(tài)錯落有致，可以將這幾個“一片雪花”的【循環(huán)】屬性的“第一幀”設(shè)置為不同的數(shù)值。5.2圖形元件的應(yīng)用

舉一反三

利用此方法也可以制作下雨的動畫效果，相對與下雪，下雨的運動路徑為直線，只需要制作一串下雨的動畫，然后將實例元件分布畫面即可。5.2圖形元件的應(yīng)用

5.2.2圖形元件屬性面板

圖形元件用于制作可重復(fù)使用的靜態(tài)圖像，以及依附于主影片時間軸的可重復(fù)使用的動畫片段。已經(jīng)創(chuàng)建并繪制好的圖形元件拖放到舞臺上或者另一個元件內(nèi)后，選擇圖形元件實例，在屬性面板中即出現(xiàn)圖形元件的屬性面板。5.2圖形元件的應(yīng)用

5.2.2圖形元件屬性面板面板功能：（1）改變實例元件類型：在“實例行為”下拉列表中可以改變元件實例的元件類型，修改后屬性面板的屬性也相應(yīng)的進行變化。（2）交換實例：點擊“交換”按鈕，會彈出【交換元件】對話框，選擇需要交換的元件，點擊【確定】按鈕后即可完成實例交換。（3）樣式：“樣式”的下拉列表中可以對元件的色彩效果進行變化，包括亮度、色調(diào)、高級和Alpha透明的的設(shè)置。（4）循環(huán)播放。

選擇圖形元件之后，可以在“屬性”面板的中設(shè)置圖形元件的循環(huán)方式，共有3種循環(huán)方式供選擇。在后面的“第一幀”文本框中，可以設(shè)置動畫的起始幀。循環(huán)：播放到最后一幀之后，又回到開頭繼續(xù)播放。播放一次：播放到最后一幀之后，就靜止不動了。單幀：只顯示一幀。5.3影片剪輯元件的應(yīng)用

5.3.1課堂案例—制作角色表情動畫案例綜述案例分析操作步驟舉一反三5.3.2影片剪輯屬性面板5.3.3影片剪輯元件與圖形元件區(qū)別5.3影片剪輯元件的應(yīng)用

5.3.1課堂案例—制作角色表情動畫案例綜述在繪制花草的實例中，繪制的花、草采用的圖形元件來完成的，而蝴蝶的翅膀扇動采用的影片剪輯元件來做的，在主場景中，蝴蝶會一邊移動位置一邊扇動翅膀的運動效果。影片剪輯元件是獨立于主影片時間軸的動畫片段，所以即使主時間軸只有1幀，也可以完整的播放影片剪輯中的動畫。所以在Flash動畫中，規(guī)律性比較強，循環(huán)運動的動畫片段適合用影片剪輯來制作、例如馬跑步、鳥飛行、蝴蝶飛、人走等。5.3影片剪輯元件的應(yīng)用

5.3.1課堂案例—制作角色表情動畫案例綜述5.3影片剪輯元件的應(yīng)用

5.3.1課堂案例—制作角色表情動畫案例分析在制作這個實例時，大致需要以下環(huán)節(jié)。（1） 新建文檔，并保存。導(dǎo)入角色身體和角色頭部的角色元件，將角色身體與頭部元件擺放到舞臺上。（2） 創(chuàng)建“嘴”影片剪輯元件，繪制嘴動的效果動畫（3） 創(chuàng)建“眼淚”影片剪輯元件，逐幀繪制流眼淚的動畫效果（4） 制作“張嘴”的影片剪輯。（5） 創(chuàng)建表情動畫效果（6） 測試并發(fā)布影片5.3影片剪輯元件的應(yīng)用

5.3.1課堂案例—制作角色表情動畫舉一反三5.3影片剪輯元件的應(yīng)用

5.3.2影片剪輯屬性面板

影片剪輯元件用來制作可重復(fù)使用的、獨立于主時間軸的動畫片段。由于影片剪輯具有獨立的時間軸，無法在編輯窗口上預(yù)覽影片剪輯實例內(nèi)的動畫效果，在舞臺上看到的只是影片剪輯第一幀的畫面。如果要欣賞影片剪輯內(nèi)的完整動畫，必須按快捷鍵【Ctrl+Enter】測試影片才行。（1）實例名稱（2）3D定位和查看（3）顯示（4）輔助功能（5）濾鏡設(shè)置375.3影片剪輯元件的應(yīng)用

5.3.3影片剪輯元件與圖形元件區(qū)別5.4按鈕元件的應(yīng)用

5.4.1課堂案例—制作水晶按鈕案例綜述案例分析操作步驟舉一反三5.4.2按鈕元件關(guān)鍵幀設(shè)置5.4.3按鈕元件屬性設(shè)置5.4按鈕元件的應(yīng)用

5.4.1課堂案例—制作水晶按鈕案例綜述

在第二章的課后實訓(xùn)中制作了水晶按鈕，本實例是在次繪制的基礎(chǔ)上增加按鈕的交互響應(yīng)效果，當(dāng)鼠標(biāo)經(jīng)過時變成文字，當(dāng)鼠標(biāo)點擊時文字變大。5.4按鈕元件的應(yīng)用

5.4.1課堂案例—制作水晶按鈕案例分析在制作這個實例時，大致需要以下環(huán)節(jié)。（1） 新建文檔，并保存。繪制動畫的背景顏色。（2） 創(chuàng)建“按鈕1”圖形元件，繪制鼠標(biāo)彈起狀態(tài)圖形（3） 創(chuàng)建“按鈕1”圖形元件，繪制指針經(jīng)過狀態(tài)圖形（4） 創(chuàng)建“按鈕1”圖形元件，繪制鼠標(biāo)按下狀態(tài)圖形（5） 直接復(fù)制“按鈕1”為“按鈕2”，修改“按鈕2”的各個幀的狀態(tài)。同樣的方法制作“按鈕3”和“按鈕4”（6） 測試并發(fā)布影片5.4按鈕元件的應(yīng)用

5.4.1課堂案例—制作水晶按鈕舉一反三5.4按鈕元件的應(yīng)用

5.4.2按鈕元件關(guān)鍵幀設(shè)置用來創(chuàng)建按鈕元件的對象可以是圖形元件實例、影片剪輯實例、位圖、組合、文本、分散的矢量圖形等。在按鈕元件內(nèi)部可以添加聲音但不能在幀上添加動作腳本。創(chuàng)建按鈕元件后，進入按鈕的編輯頁面。在時間軸上可以觀察到按鈕元件為包括四個幀，分別表示內(nèi)容如下：彈起：表示按鈕的正常顯示狀態(tài)， 指針經(jīng)過：表示鼠標(biāo)經(jīng)過按鈕的響應(yīng)區(qū)域時，按鈕的狀態(tài)。按下：表示鼠標(biāo)按下時，按鈕的狀態(tài)點擊：表示鼠標(biāo)的響應(yīng)區(qū)域，只有在這區(qū)域內(nèi)，鼠標(biāo)的滑過、按下才會起作用。5.4按鈕元件的應(yīng)用

5.4.3按鈕元件屬性設(shè)置

將制作好的按鈕放置在舞臺上或其他元件內(nèi)，點擊按鈕實例會出現(xiàn)對應(yīng)的按鈕的屬性面板，按鈕屬性面板的設(shè)置與影片剪輯相似，包括設(shè)置按鈕實例名稱、實例行為、交換實例、實例的位置及大小、色彩效果、混合方式、輔助功能及添加濾鏡等功能，與其他元件的屬性設(shè)置類似。455.