元件實(shí)例和制作基本動(dòng)畫課件

1、、第 4 章元件實(shí)例和制作基本動(dòng)畫4.1 【案例 15】寶寶動(dòng)感相冊(cè)相關(guān)知識(shí)圖形實(shí)例和影片剪輯實(shí)例的特性在許多方面是一樣的，但也有一些不同的特性。1圖形實(shí)例的“屬性”面板當(dāng)在“屬性”面板的“實(shí)例行為”下拉列表框中選擇“圖形”選項(xiàng)時(shí)，“屬性”面板參見(jiàn)圖 4-1-6。它也有“實(shí)例行為”下拉列表框、“顏色”下拉列表框、左下角的 4 個(gè)用來(lái)精確確定實(shí)例大小與位置的文本框和“交換”按鈕。此外，該面板中還有兩個(gè)特有的選項(xiàng)，這兩個(gè)選項(xiàng)的作用如下：（1）“圖形選項(xiàng)”下拉列表框：只有圖形元件實(shí)例的“屬性”面板中才有“圖形選項(xiàng)”下拉列表框，它位于“交換”按鈕的右側(cè)，用來(lái)選擇動(dòng)畫的播放模式。其中有“循環(huán)”（循環(huán)播放

2、）“播放一次”（只播放一次）和“單幀”（只顯示第 1 幀）3 個(gè)選項(xiàng)。（2）“第一幀”文本框：用來(lái)輸入動(dòng)畫開(kāi)始播放的幀號(hào)碼，確定動(dòng)畫從第幾幀開(kāi)始播放。只有圖形實(shí)例才有該選項(xiàng)。2影片剪輯實(shí)例的“屬性”面板“影片剪輯”實(shí)例的“屬性”面板如圖 4-1-7 所示。該面板中各選項(xiàng)的作用如下：圖 4-1-7影片剪輯實(shí)例的“屬性”面板（1）“實(shí)例行為”下拉列表框：該下拉列表框中有 3 個(gè)選項(xiàng)，即“影片剪輯”、“圖形”和“按鈕”，選擇不同選項(xiàng)，可以實(shí)現(xiàn)實(shí)例類型的轉(zhuǎn)換。（2）“實(shí)例名稱”文本框：用來(lái)輸入影片剪輯或按鈕實(shí)例的名稱，該名稱可以在程序中使用。只有影片剪輯和按鈕實(shí)例才有此文本框。（3）“交換”按鈕：?jiǎn)螕?/p>

3、該按鈕可彈出“交換元件”對(duì)話框，如圖 4-1-8 所示。該對(duì)話框的列表框中會(huì)顯示當(dāng)前動(dòng)畫所有元件的名稱和圖標(biāo)，左側(cè)有一個(gè)小黑點(diǎn)的元件是當(dāng)前選中的實(shí)例的元件。單擊元件名稱或圖標(biāo)，可在對(duì)話框左上角顯示出相應(yīng)元件效果。選中元件名稱或圖標(biāo)，單擊“確定”按鈕，或者雙擊元件名稱或圖標(biāo)，即可用所選元件替換選中的實(shí)例。單擊“直接復(fù)制元件”按鈕，可彈出“直接復(fù)制元件”對(duì)話框，在“元件名稱”文本框中輸入名稱，單擊“確定”按鈕，可復(fù)制一個(gè)新元件。（4）“編輯輔助功能設(shè)置”按鈕 ：?jiǎn)螕粼摪粹o可以彈出“輔助功能”面板，如圖 4-1-9 所示。只有選中其中的“使對(duì)象可訪問(wèn)”復(fù)選框時(shí)，其他選項(xiàng)才有效。單擊“窗口”“其他面板

4、”“輔助功能”命令，也可以彈出“輔助功能”面板。圖 4-1-8 “交換元件”對(duì)話框圖 4-1-9 “輔助功能”面板（5）“混合”下拉列表框：用來(lái)設(shè)置混合模式。選擇不同的混合模式，可以更改舞臺(tái)上一個(gè)影片剪輯實(shí)例對(duì)象與位于其下方的各個(gè)對(duì)象的混合方式，可以混合重疊影片剪輯中的顏色，創(chuàng)造獨(dú)特的效果，創(chuàng)建復(fù)合圖像。復(fù)的設(shè)置方法如下：（1）亮度：選擇“亮度”選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)增加一個(gè)帶滑條的文本框，如圖 4-1-10 所示。拖曳滑塊或在文本框內(nèi)輸入數(shù)值（100%100%），均可調(diào)整實(shí)例的亮度。（2）透明度：選擇 Alpha 選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)增加一個(gè)帶滑條的文本框，如圖 4-1

5、-11 所示。（3）色調(diào)：選擇“色調(diào)”選項(xiàng)后，會(huì)增加幾個(gè)帶滑條的文本框和一個(gè)按鈕，如圖 4-1-12 所示。單擊 按鈕，會(huì)彈出顏色面板，可以改變實(shí)例的色調(diào)。拖曳色比例（0%100%）。按鈕右邊文本框的滑塊或在文本框中輸入百分比數(shù)值，可調(diào)整著圖 4-1-10選擇“亮度”選項(xiàng)圖 4-1-11選擇“Alpha”選項(xiàng)圖 4-1-12選擇“色調(diào)”選項(xiàng)拖曳 RGB 欄中文本框的滑塊或在文本框中輸入數(shù)值，也可以改變實(shí)例的色調(diào)。3 個(gè)文本框分別代表紅、綠、藍(lán)三原色的值。（4）高級(jí)：選擇“高級(jí)”選項(xiàng)后，“顏色”下拉列表框右側(cè)會(huì)顯示一個(gè)“設(shè)置”按鈕。單擊“設(shè)置”按鈕，即可彈出“高級(jí)效果”對(duì)話框，如圖 4-1-13

6、 所示。利用該對(duì)話框可以調(diào)整實(shí)例的色調(diào)和透明度等。該對(duì)話框有兩欄數(shù)據(jù)，百分?jǐn)?shù)欄可從 0%100%調(diào)整，數(shù)值欄可從255+255 調(diào)整?？梢酝ㄟ^(guò)拖曳各文本框的滑塊來(lái)調(diào)整數(shù)值，也可以直接在文本框中輸入數(shù)值，最終的效果將由兩欄數(shù)值共同決定。修改后，每種顏色分量或透明度的值等于修改前的值乘以左側(cè)文本框中的百分比，再加上右側(cè)文本框中的數(shù)值。例如，一個(gè)實(shí)例原來(lái)的藍(lán)色是 100，左側(cè)文本框的百分比值是 50%，右側(cè)文本框內(nèi)的數(shù)值是 80，則修改后的藍(lán)色分量為 130。4.2 【案例 16】小小照片瀏覽器相關(guān)知識(shí)1按鈕元件的 4 個(gè)狀態(tài)Flash 影片中可以有按鈕，按鈕也是對(duì)象，當(dāng)將鼠標(biāo)指針移到按鈕上或單擊按

7、鈕時(shí)，即可產(chǎn)生交互事件，按鈕也會(huì)改變外觀。要使一個(gè)按鈕在影片中具有交互性，需要先制作按鈕元件，再由按鈕元件創(chuàng)建按鈕實(shí)例，并在制作按鈕實(shí)例時(shí)為其分配對(duì)交互事件產(chǎn)生的動(dòng)作。在 Flash CS3 中，按鈕有 4 個(gè)狀態(tài)，這 4 個(gè)狀態(tài)的特點(diǎn)如下：（1）“彈起”（即 Up）狀態(tài)：鼠標(biāo)指針沒(méi)有移到按鈕上時(shí)按鈕的狀態(tài)。圖 4-1-13 “高級(jí)效果”對(duì)話框（2）“指針經(jīng)過(guò)”（即 Over）狀態(tài)：鼠標(biāo)指針移到按鈕上時(shí)按鈕的狀態(tài)。（3）“按下”（即 Down）狀態(tài)：用鼠標(biāo)按下按鈕時(shí)按鈕的狀態(tài)。（4）“點(diǎn)擊”（即 Hit）狀態(tài)：在此狀態(tài)下可以定義鼠標(biāo)事件的響應(yīng)范圍和鼠標(biāo)事件的動(dòng)作。如果沒(méi)有設(shè)置“點(diǎn)擊”狀態(tài)的區(qū)域

8、，則鼠標(biāo)事件的響應(yīng)范圍由“彈起”狀態(tài)的按鈕外觀區(qū)域決定?！包c(diǎn)擊”幀的圖形不顯示。2創(chuàng)建按鈕（1）單擊“插入”“新建元件”命令，彈出“創(chuàng)建新元件”對(duì)話框。在該對(duì)話框中選中“按鈕”單選按鈕，在“名稱”文本框中輸入元件的名稱。單擊“確定”按鈕，進(jìn)入按鈕元件的編輯狀態(tài)，此時(shí)時(shí)間軸中有 4 個(gè)連續(xù)幀，參見(jiàn)圖 4-2-3。用戶需要在這 4 個(gè)幀中分別創(chuàng)建相應(yīng)的按鈕外觀，可以導(dǎo)入圖形、圖像、文字、元件實(shí)例等，但不能在一個(gè)按鈕中添加其他按鈕實(shí)例。最好將按鈕圖形精確定位，使圖形的中心與十字標(biāo)記對(duì)齊，并記下坐標(biāo)值。要制作動(dòng)畫按鈕，可以使用影片剪輯元件實(shí)例。（2）用鼠標(biāo)選中第 l 幀（彈起），再制作按鈕“彈起”狀態(tài)

9、的外觀。（3）選中第 2 幀（指針經(jīng)過(guò)），再按【F6】鍵，使第 2 幀成為關(guān)鍵幀，并復(fù)制第 l 幀的按鈕外觀。改變第 2幀的對(duì)象，作為鼠標(biāo)指針經(jīng)過(guò)時(shí)的按鈕外觀。另外，可以按【F7】鍵，使第 2 幀成為空白關(guān)鍵幀，重新創(chuàng)建一個(gè)新對(duì)象，作為鼠標(biāo)指針經(jīng)過(guò)時(shí)的按鈕外觀。（4）選中第 3 幀（按下），按照上述方法，制作鼠標(biāo)按下?tīng)顟B(tài)的按鈕外觀。選中第 4 幀，繪制一個(gè)圖形，用來(lái)確定鼠標(biāo)事件的響應(yīng)范圍。（5）單擊元件編輯窗口中的 按鈕，返回到主場(chǎng)景，可以看到“庫(kù)”面板中已有了剛才制作的按鈕元件。從“庫(kù)”面板中將其拖曳到工作區(qū)中，即可創(chuàng)建按鈕實(shí)例。按鈕的各種狀態(tài)不但可以是圖形，還可以是圖像、文字和動(dòng)畫（影片剪

10、輯或圖形實(shí)例）等，還可以在按鈕中插入聲音。按鈕的每一幀可以由多個(gè)圖層組成。3按鈕實(shí)例的“屬性”面板按鈕實(shí)例的“屬性”面板如圖 4-2-3 所示?！皩傩浴泵姘逯兄饕x項(xiàng)的作用前面已經(jīng)介紹了。該面板中的特有選項(xiàng)是“按鈕選項(xiàng)”下拉列表框，它用來(lái)選擇按鈕的跟蹤模式，其中有“當(dāng)作按鈕”和“當(dāng)作菜單項(xiàng)”兩個(gè)選項(xiàng)。只有按鈕實(shí)例才有此下拉列表框。圖 4-2-3按鈕元件實(shí)例的“屬性”面板圖 4-3-8導(dǎo)入一幅圖像圖 4-3-9圖形與文字圖 4-3-10創(chuàng)建遮罩層在建立遮罩層后，F(xiàn)lash 會(huì)自動(dòng)鎖定遮罩層和被遮罩層。如果需要編輯遮罩層，應(yīng)先解除鎖定，解除鎖定后就不會(huì)顯示遮罩效果了。如果需要顯示遮罩效果，需要再次

11、鎖定圖層。如果輸入的文字產(chǎn)生不了遮罩效果，可以將文字打散。2遮罩層與普通圖層的關(guān)聯(lián)（1）建立遮罩層與普通圖層關(guān)聯(lián)的操作方法有以下兩種： 在遮罩層的下方創(chuàng)建一個(gè)普通圖層，將該普通圖層拖曳到遮罩層的右下方。 在遮罩層的下方創(chuàng)建一個(gè)普通圖層。右擊普通圖層，在彈出的快捷菜單中選擇“屬性”命令，彈出“圖層化形式的動(dòng)畫。2動(dòng)作動(dòng)畫的特點(diǎn)動(dòng)作動(dòng)畫是補(bǔ)間動(dòng)畫的一種。在 Flash CS3 中可以創(chuàng)建出豐富多彩的動(dòng)作動(dòng)畫效果，可以使一個(gè)對(duì)象在畫面中沿直線移動(dòng)，沿曲線移動(dòng)，變換大小、形狀和顏色，以中心為圓心自轉(zhuǎn)，產(chǎn)生淡入/淡出效果等。各種變化可以獨(dú)立進(jìn)行，也可合成復(fù)雜的動(dòng)畫。例如，一個(gè)對(duì)象不斷自轉(zhuǎn)的同時(shí)水平移動(dòng)。

12、Flash CS3 允許對(duì)實(shí)例、圖形、圖像、文本和組合創(chuàng)建動(dòng)作動(dòng)畫。創(chuàng)建動(dòng)作動(dòng)畫時(shí)，F(xiàn)lash 自動(dòng)將對(duì)象轉(zhuǎn)換成補(bǔ)間的實(shí)例，“庫(kù)”面板中會(huì)自動(dòng)增加元件，名稱為“補(bǔ)間 l”等。動(dòng)作動(dòng)畫可以借助于引導(dǎo)層使對(duì)象沿任意路徑運(yùn)動(dòng)，即創(chuàng)建引導(dǎo)動(dòng)作動(dòng)畫。動(dòng)作動(dòng)畫還可以借助遮罩層的作用產(chǎn)生千奇百態(tài)的動(dòng)畫效果。選中動(dòng)畫關(guān)鍵幀，彈出關(guān)鍵幀的“屬性”面板。利用該面板可以設(shè)置動(dòng)畫類型和其他屬性。在“補(bǔ)間”下拉列表框中選擇“動(dòng)畫”選項(xiàng)（應(yīng)該理解為“動(dòng)作”）后，該面板如圖 4-4-12 所示。其中有關(guān)選項(xiàng)的作用如下：圖 4-4-12動(dòng)畫關(guān)鍵幀的“屬性”面板鈕（8）“貼緊”復(fù)選框：選中該復(fù)選框，可使運(yùn)動(dòng)對(duì)象的中心點(diǎn)標(biāo)記與運(yùn)

13、動(dòng)路徑對(duì)齊。4.5 【案例 19】海底世界相關(guān)知識(shí)1引導(dǎo)層可以在引導(dǎo)層內(nèi)創(chuàng)建圖形等。引導(dǎo)層中的圖形只能在舞臺(tái)工作區(qū)中看到，在輸出的影片中不會(huì)出現(xiàn)。在時(shí)間軸中，引導(dǎo)層名稱的左側(cè)有 圖標(biāo)（運(yùn)動(dòng)引導(dǎo)層）或 圖標(biāo)（普通引導(dǎo)層），它們代表了不同的引導(dǎo)層類型。（1）運(yùn)動(dòng)引導(dǎo)層可以引導(dǎo)對(duì)象沿線條移動(dòng)，產(chǎn)生引導(dǎo)動(dòng)作動(dòng)畫。單擊時(shí)間軸左下角的“添加運(yùn)動(dòng)引導(dǎo)層”按，即可在選中圖層的上方添加一個(gè)運(yùn)動(dòng)引導(dǎo)層。（2）普通引導(dǎo)層只起到輔助繪圖的作用。創(chuàng)建普通引導(dǎo)層的方法是：創(chuàng)建一個(gè)普通圖層。右擊該圖層名稱，在彈出的快捷菜單中選擇“引導(dǎo)層”命令，即可在選中圖層上方創(chuàng)建一個(gè)普通引導(dǎo)層，如圖 4-5-14 所示。圖 4-5-14

14、創(chuàng)建普通引導(dǎo)層圖 4-5-15 “圖層屬性”對(duì)話框2引導(dǎo)層與普通圖層的關(guān)聯(lián)（1）引導(dǎo)層與普通圖層關(guān)聯(lián)：方法是將一個(gè)普通圖層拖曳到運(yùn)動(dòng)引導(dǎo)層或普通引導(dǎo)層的右下方，如果原來(lái)的引導(dǎo)層是普通引導(dǎo)層，與普通圖層關(guān)聯(lián)后會(huì)自動(dòng)變?yōu)檫\(yùn)動(dòng)引導(dǎo)層。一個(gè)引導(dǎo)層可以與多個(gè)普通圖層關(guān)聯(lián)。如果要斷開(kāi)圖層與引導(dǎo)層的關(guān)聯(lián)，可將已關(guān)聯(lián)的圖層拖曳到運(yùn)動(dòng)引導(dǎo)層的下方。此時(shí)，如果運(yùn)動(dòng)引導(dǎo)層沒(méi)有與其相關(guān)聯(lián)的圖層，則該運(yùn)動(dòng)引導(dǎo)層會(huì)自動(dòng)變?yōu)槠胀ㄒ龑?dǎo)層。（2）引導(dǎo)層轉(zhuǎn)換為普通圖層：右擊引導(dǎo)層，在彈出的快捷菜單中選擇“引導(dǎo)層”命令，即可將其轉(zhuǎn)換為普通圖層。3設(shè)置圖層的屬性單擊“修改”“時(shí)間軸”“圖層屬性”命令，彈出“圖層屬性”對(duì)話框，如圖 4

15、-5-15 所示。利用該對(duì)話框可以為選定的圖層命名、顯示/隱藏圖層、鎖定/解鎖圖層、選擇圖層類型、設(shè)置輪廓線顏色、選擇是否以輪廓線方式顯示該圖層內(nèi)的對(duì)象等。4.6 【案例 20】寶寶圖像開(kāi)關(guān)門式切換相關(guān)知識(shí)1形狀動(dòng)畫關(guān)鍵幀的“屬性”面板在圖 4-6-3 所示的“屬性”面板中，“混合”下拉列表框中各選項(xiàng)的作用如下：（1）“角形”選項(xiàng)：創(chuàng)建的過(guò)渡幀中的圖形更多地保留了原來(lái)圖形的尖角或直線特征。如果關(guān)鍵幀中的圖形沒(méi)有尖角，則與選擇“分布式”選項(xiàng)的效果一樣。（2）“分布式”選項(xiàng)：可使形狀動(dòng)畫中創(chuàng)建的過(guò)渡幀中的圖形比較平滑。2添加形狀提示的方法為了控制形狀動(dòng)畫的中間過(guò)程，可使用形狀提示，以獲得特殊的變形

16、過(guò)程。形狀提示就是在形狀的初始圖形與結(jié)束圖形上，分別指定一些形狀的關(guān)鍵點(diǎn)，它們?cè)谄鹗紟徒Y(jié)束幀中一一對(duì)應(yīng)，F(xiàn)lash 會(huì)根據(jù)這些關(guān)鍵點(diǎn)的對(duì)應(yīng)關(guān)系來(lái)計(jì)算形狀變化的過(guò)程。例如，制作了一個(gè)圓形變五角星變形動(dòng)畫后，選中第 1 幀，單擊“修改”“形狀”“添加形狀提示”命令（也可以按【Ctrl+Shift+H】組合鍵），在第 1 幀的圓形中加入一個(gè)形狀提示標(biāo)記“a”，重復(fù)上述過(guò)程，添加形狀提示標(biāo)記“a”“e”5 個(gè)形狀提示標(biāo)記（可以添加 26 個(gè)英文小寫字母形狀提示標(biāo)記）。如果沒(méi)有顯示形狀提示標(biāo)記，可單擊“視圖”“顯示形狀提示”命令。拖曳這些形狀提示標(biāo)記，分別放置在第 1 幀圖形的特定位置，如圖 4-6-7 所示。選中終止幀單元格，會(huì)看到終止幀五角星中也有“a”“e”形狀提示標(biāo)記（幾個(gè)形狀提示標(biāo)記重疊）。拖曳這些標(biāo)記，分別放置在五角星的適當(dāng)位置。形狀提示標(biāo)記不一定越多越好，重要的是放置位置合適，可以通過(guò)實(shí)驗(yàn)來(lái)決定其位置。圖 4-6-7形狀提示標(biāo)記、4.7 【案例 21】寶寶圖像特效切換相關(guān)知識(shí)1時(shí)間軸特效動(dòng)畫簡(jiǎn)介時(shí)間軸特效是 Flash CS3 中內(nèi)置的一組動(dòng)畫效果，可用于快速創(chuàng)建復(fù)雜的動(dòng)畫。時(shí)間軸特效有“變形”“轉(zhuǎn)換”、“分離”、“展開(kāi)”、“投影”和“模糊