WEB動畫制作與設(shè)計(jì)課件：元件和庫（一）

元件和庫元件和庫元件和庫1、元件與庫面板；2、實(shí)例的創(chuàng)建與應(yīng)用；【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】使用繪圖工具繪制圖形，使用變形工具調(diào)整圖形的大小和位置?！景咐R要點(diǎn)】使用橢圓工具繪制云朵圖形，使用創(chuàng)建補(bǔ)間動畫命令制作動畫，使用文本工具輸入文字，使用任意變形工具調(diào)整元件的大小?！菊n堂案例】—制作“快樂行”動畫【課堂案例】—制作“快樂行”動畫1、導(dǎo)入并制作元件（1）選擇“文件>新建”命令，新建舞臺窗口“寬度”設(shè)為478像素，“高度”設(shè)為352像素，“背景顏色”設(shè)為白色，單擊“確定”按鈕。（2）將“制作快樂行動畫>背景、文字”文件導(dǎo)入到“庫”面板中。【課堂案例】—制作“快樂行”動畫1、導(dǎo)入并制作元件（3）

在“庫”面板下方單擊“新建元件”按鈕

，在“名稱”選項(xiàng)的文本框中輸入“云朵”，類型選項(xiàng)中選擇“圖形”選項(xiàng)，創(chuàng)建圖形元件“云朵”。選擇“橢圓”工具，設(shè)置“筆觸顏色”設(shè)為無，“填充顏色”為白色，在舞臺窗口中繪制多個(gè)橢圓形，效果如圖所示?！菊n堂案例】—制作“快樂行”動畫

在Flash中可以將元件分為3種類型，即圖形元件、按鈕元件、影片剪輯元件?！纠碚撝R】——元件的類型1、圖形元件

圖形元件

一般用于創(chuàng)建靜態(tài)圖像或創(chuàng)建可重復(fù)使用的、與主時(shí)間軸關(guān)聯(lián)的動畫，它有自己的編輯區(qū)和時(shí)間軸。如果在場景中創(chuàng)建元件的實(shí)例，那么實(shí)例將受到主場景中時(shí)間軸的約束。換句話說，圖形元件中的時(shí)間軸與其實(shí)例在主場景的時(shí)間軸同步。另外，在圖形元件中可以使用矢量圖、圖像、聲音和動畫的元素，但不能為圖形元件提供實(shí)例名稱，也不能在動作腳本中引用圖形元件，并且聲音在圖形元件中失效。

在Flash中可以將元件分為3種類型，即圖形元件、按鈕元件、影片剪輯元件?！纠碚撝R】——元件的類型2、按鈕元件

按鈕元件

是創(chuàng)建能激發(fā)某種交互行為的按鈕。創(chuàng)建按鈕元件的關(guān)鍵是設(shè)置4種不同狀態(tài)的幀，即“彈起”（鼠標(biāo)抬起）、“指針經(jīng)過”（鼠標(biāo)移入）、“按下”（鼠標(biāo)按下）、“點(diǎn)擊”（鼠標(biāo)響應(yīng)區(qū)域在這個(gè)區(qū)域創(chuàng)建的圖形不會出現(xiàn)在畫面中）。

在Flash中可以將元件分為3種類型，即圖形元件、按鈕元件、影片剪輯元件?！纠碚撝R】——元件的類型3、影片剪輯元件

影片剪輯元件

也像圖形元件一樣有自己的編輯區(qū)和時(shí)間軸，但又不完全相同。影片剪輯元件的時(shí)間軸是獨(dú)立的，它不受其實(shí)例在主場景時(shí)間軸（主時(shí)間軸）的控制。比如，在場景中創(chuàng)建影片剪輯元件的實(shí)例，此時(shí)即便場景中只有一幀，在影片剪輯中也可播放動畫。另外，在影片剪輯元件中可以使用矢量圖、圖像、聲音、影片剪輯元件、圖形組件和按鈕組件等，并且能在動作腳本中引用影片剪輯元件?！纠碚撝R】——創(chuàng)建圖形元件

選擇“插入>新建元件”命令，彈出“創(chuàng)建新元件”對話框，在“名稱”選項(xiàng)的文本框中輸入“梅花鹿”，在“類型”選項(xiàng)下拉列表中選擇“圖形”選項(xiàng)。單擊“確定”按鈕，創(chuàng)建一個(gè)新的圖形元件“梅花鹿”，如圖所示?！纠碚撝R】——創(chuàng)建圖形元件

圖形元件的名稱出現(xiàn)在舞臺的左上方，舞臺切換到了圖形元件“梅花鹿”的窗口，窗口中間出現(xiàn)十字“+”，代表圖形元件的中心定位點(diǎn)，如左圖所示。在“庫”面板中顯示圖形元件，如右圖所示。1、導(dǎo)入并制作元件（4）創(chuàng)建名為“影片云彩”的新元件，類型為“影片剪輯”，舞臺窗口也隨之轉(zhuǎn)換為影片剪輯元件的舞臺窗口。（5）將“庫”面板中的圖形元件“云朵”拖曳到舞臺窗口的右側(cè)。在“時(shí)間軸”面板中選中“圖層1”的第25幀，按F6鍵，插入關(guān)鍵幀，如圖所示?！菊n堂案例】—制作“快樂行”動畫【理論知識】——創(chuàng)建影片剪輯元件

選擇“插入>新建元件”命令，彈出“創(chuàng)建新元件”對話框，在“名稱”選項(xiàng)的文本框中輸入“變形”，在“類型”選項(xiàng)下拉列表中選擇“影片剪輯”選項(xiàng)，如左圖所示。單擊“確定”按鈕，創(chuàng)建一個(gè)新的影片剪輯元件“變形”，如右圖所示的“庫”面板中顯示影片剪輯元件。1、導(dǎo)入并制作元件（6）在舞臺窗口中將圖形元件向左拖曳到適當(dāng)?shù)奈恢?，如左圖所示。選中“圖層1”的第1幀，在舞臺窗口中選中“云朵”，在“屬性”面板“顏色”選項(xiàng)的下拉列表中選擇“Alpha”選項(xiàng)，在右側(cè)的數(shù)字框中輸入0％，如右圖所示。【課堂案例】—制作“快樂行”動畫1、導(dǎo)入并制作元件（7）選中“圖層1”的第25幀，在舞臺窗口中選中“云朵”實(shí)例，在“屬性”面板“顏色”選項(xiàng)下拉列表中選擇“Alpha”選項(xiàng)，在右側(cè)的數(shù)字框中輸入63％，如左圖所示。選中“圖層1”的第l幀，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“創(chuàng)建傳統(tǒng)補(bǔ)間動畫”命令，如右圖所示?！菊n堂案例】—制作“快樂行”動畫1、導(dǎo)入并制作元件（8）創(chuàng)建名稱為“文字按鈕”的新元件，在“類型”選項(xiàng)中選擇“按鈕”選項(xiàng)，單擊“確定”按鈕，如左圖所示，舞臺窗口也隨之轉(zhuǎn)換為按鈕元件的舞臺窗口。將“庫”面板中的圖形元件“文字”拖曳到舞臺窗口的中心位置，如右圖所示?！菊n堂案例】—制作“快樂行”動畫1、導(dǎo)入并制作元件（9）選中“圖層1”的“指針經(jīng)過”幀，按F6鍵，插入關(guān)鍵幀，如左圖所示。多次按Ctrl+B組合鍵，將文字打散，在工具箱中將“填充顏色”設(shè)為黃色（#FFFF00），將文字更改為黃色，效果如右圖所示?！菊n堂案例】—制作“快樂行”動畫【理論知識】——創(chuàng)建按鈕元件

選擇“插入>新建元件”命令，彈出“創(chuàng)建新元件”對話框，在“名稱”選項(xiàng)的文本框中輸入“開始”，在“類型”選項(xiàng)下拉列表中選擇“按鈕”選項(xiàng)。單擊“確定”按鈕，創(chuàng)建一個(gè)新的按鈕元件“開始”。在“時(shí)間軸”窗口中顯示出4個(gè)狀態(tài)幀：“彈起”、“指針經(jīng)過”、“按下”、“點(diǎn)擊”，如圖所示。【理論知識】——創(chuàng)建按鈕元件“彈起”幀：設(shè)置鼠標(biāo)指針不在按鈕上時(shí)按鈕的外觀。“指針經(jīng)過”幀：設(shè)置鼠標(biāo)指針放在按鈕上時(shí)按鈕的外觀?！鞍聪隆睅涸O(shè)置按鈕被單擊時(shí)的外觀?！包c(diǎn)擊”幀：設(shè)置響應(yīng)鼠標(biāo)單擊的區(qū)域。此區(qū)域在影片里不可見。2.在場景中編輯元件（1）單擊“時(shí)間軸”面板下方的“場景1”圖標(biāo)

，進(jìn)入“場景1”的舞臺窗口。將“圖層1”重新命名為“圖片”。將“庫”面板中的“背景”圖形拖曳到舞臺窗口的中心位置，效果如圖所示?！菊n堂案例】—制作“快樂行”動畫2.在場景中編輯元件（2）單擊“時(shí)間軸”面板下方的“插入圖層”按鈕，創(chuàng)建新圖層并將其命名為“動畫”，分別將“庫”面板中的影片剪輯元件“影片云彩”和按鈕元件“文字按鈕”拖曳到舞臺窗口中，并放置到合適的位置。選擇“選擇”工具，在舞臺窗口中選中“影片云彩”實(shí)例，如圖所示。【課堂案例】—制作“快樂行”動畫2.在場景中編輯元件（3）選擇“任意變形”工具，實(shí)例周圍出現(xiàn)控制點(diǎn)，用鼠標(biāo)向內(nèi)側(cè)拖曳右上方的控制點(diǎn)，將實(shí)例縮小。按住Alt鍵的同時(shí)，用鼠標(biāo)向外拖曳“影片云彩”實(shí)例，將其復(fù)制2次并分別改變其大小。效果如圖所示。快樂行動畫效果制作完成，按Ctrl+Enter組合鍵即可查看效果?！菊n堂案例】—制作“快樂行”動畫【理論知識】——轉(zhuǎn)換元件1、將圖形轉(zhuǎn)換為圖形元件

如果在舞臺上已經(jīng)創(chuàng)建好矢量圖形并且以后還要再次應(yīng)用，可將其轉(zhuǎn)換為圖形元件。

選中矢量圖形，然后選擇“修改>轉(zhuǎn)換為元件”命令，或按F8鍵，彈出“轉(zhuǎn)換為元件”對話框，在“名稱”選項(xiàng)的文本框中輸入要轉(zhuǎn)換元件的名稱，選中“圖形”元件，單擊“確定”按鈕，矢量圖形被轉(zhuǎn)換為圖形元件?！纠碚撝R】——轉(zhuǎn)換元件2、設(shè)置圖形元件的中心點(diǎn)

選中矢量圖形，選擇“修改>轉(zhuǎn)換為元件”命令，彈出“轉(zhuǎn)換為元件”對話框，在對話框的“對齊”選項(xiàng)中有9個(gè)中心定位點(diǎn)，可以用來設(shè)置轉(zhuǎn)換元件的中心點(diǎn)。選中右下方的定位點(diǎn)，如左圖所示，單擊“確定”按鈕，矢量圖形轉(zhuǎn)換為圖形元件，元件的中心點(diǎn)在其右下方，如右圖所示。【理論知識】——轉(zhuǎn)換元件2、設(shè)置圖形元件的中心點(diǎn)在“注冊”選項(xiàng)中設(shè)置不同的