flash-第6制作交互式動(dòng)畫

1、Flash 動(dòng)畫制作河南工程學(xué)院第 六章 制作交互式動(dòng)畫 課堂講解上機(jī)實(shí)戰(zhàn)課后練習(xí)Flash 動(dòng)畫制作河南工程學(xué)院課前導(dǎo)讀重點(diǎn)知識(shí)提高知識(shí)Flash 動(dòng)畫制作河南工程學(xué)院課堂講解控制動(dòng)畫對(duì)象的數(shù)量 制作交互式菜單 自動(dòng)載入其他動(dòng)畫 Flash 動(dòng)畫制作河南工程學(xué)院 Flash動(dòng)畫的一個(gè)顯著特性就是具有強(qiáng)大的交互性，它使得用戶不僅可以欣賞，也可以參與到Flash動(dòng)畫中，通過單擊按鈕、選擇選項(xiàng)等控制動(dòng)畫的播放。本課將介紹制作交互式動(dòng)畫的方法。 Flash 動(dòng)畫制作河南工程學(xué)院控制動(dòng)畫對(duì)象的數(shù)量 下面通過一個(gè)小實(shí)例來體會(huì)交互式動(dòng)畫的有趣之處。首先打開在第10課課堂講解中制作的“采花粉的蝴蝶”動(dòng)畫，如

2、圖16-1所示。下面實(shí)現(xiàn)在單擊花叢中的蝴蝶時(shí)增加一個(gè)蝴蝶的效果，其具體操作如下。 圖1-Flash 動(dòng)畫制作河南工程學(xué)院 （1）選中動(dòng)畫中的影片剪輯元件“蝴蝶”，在“屬性”面板中將實(shí)例名稱設(shè)為“hd”，如“圖16-2所示。圖16-2Flash 動(dòng)畫制作河南工程學(xué)院 （2）為了實(shí)現(xiàn)單擊蝴蝶時(shí)出現(xiàn)兩只蝴蝶的結(jié)果，選中影片剪輯元件“蝴蝶”，在“動(dòng)作”面板中輸入如下語句：onClipEvent (load) /載入當(dāng)前動(dòng)畫片段，即影片剪輯“hd”fscommand(showmenu,false); /不顯示控制菜單onClipEvent (mouseUp) /單擊鼠標(biāo)左鍵duplicateMovieC

3、lip(hd,hd1,0); /復(fù)制影片剪輯hd，生成動(dòng)畫片段hd1，并將其置于與當(dāng)前蝴蝶的同一層setProperty(hd1,_x,x+130); /設(shè)置動(dòng)畫片段hd1的x坐標(biāo)增加130像素Flash 動(dòng)畫制作河南工程學(xué)院 （3）按【Ctrl+Enter】鍵播放動(dòng)畫，單擊一下鼠標(biāo)，可以看到在原蝴蝶的左邊出現(xiàn)了另外一只相同的蝴蝶，同樣在扇動(dòng)翅膀，如圖16-3所示。圖16-3在為影片剪輯添加語句時(shí)，之所以將動(dòng)畫片段hd1的x坐標(biāo)增加130像素，是為了避免兩只蝴蝶的位置相同，發(fā)生重疊。Flash 動(dòng)畫制作河南工程學(xué)院制作交互式菜單 制作主菜單 制作菜單命令 制作菜單動(dòng)畫片段 Flash 動(dòng)畫制作

4、河南工程學(xué)院 交互式菜單有多種，如下拉菜單、彈出式菜單、滑動(dòng)式菜單等，下面制作一個(gè)典型的彈出式菜單“文件”菜單，其他菜單的制作方法與此類似，只是按鈕元件放置的位置不同而已。 Flash 動(dòng)畫制作河南工程學(xué)院制作主菜單 其具體操作如下： （ 1 ） 新 建 一 個(gè) 文 件 ， 設(shè) 置 場 景 大 小 為200200像素，背景顏色為深綠色。 （2）創(chuàng)建一個(gè)名為“主菜單”的按鈕元件，進(jìn)入按鈕元件編輯區(qū)。選中其中的“彈起”幀，單擊矩形工具 ，在場景中繪制一個(gè)矩形，將填充色設(shè)為白-灰-白的線性漸變，并為其添加黑色的底紋，增加立體感。 Flash 動(dòng)畫制作河南工程學(xué)院 （3）用文本工具 在矩形框上輸入文字

5、“文件”，并將其設(shè)置為“宋體、37、加粗”，如圖16-4所示。 （4）選擇“指針經(jīng)過”幀，按【F6】鍵插入一個(gè)關(guān)鍵幀，選中矩形的左邊框和上邊框，用墨水瓶工具 將其設(shè)為白色，再將下邊框和右邊框的顏色設(shè)為土黃色，以使指針移到按鈕上時(shí)有凸起效果。 圖16-4Flash 動(dòng)畫制作河南工程學(xué)院 （5）在“按下”幀插入一個(gè)關(guān)鍵幀，調(diào)整左邊框和上邊框的顏色為土黃色，下邊框和右邊框的顏色為白色，并將文字“文件”稍微向右下方移動(dòng)，使單擊時(shí)有凹下效果，如圖16-5所示。 圖16-5Flash 動(dòng)畫制作河南工程學(xué)院制作菜單命令 其具體操作如下： （1）按【F11】鍵打開庫面板，選中“主菜單”元件，單擊鼠標(biāo)右鍵，在彈

6、出的快捷菜單中選擇“重制”命令，打開“復(fù)制元件”對(duì)話框，在其中的“名稱”文本框中輸入“新建”，單擊 按鈕，得到“新建”元件，如圖16-6所示。 （2）用同樣的方法得到“打開”、“關(guān)閉”、“保存”、“另存為”元件，“庫”面板如圖16-7所示。 Flash 動(dòng)畫制作河南工程學(xué)院圖16-7 圖16-6 Flash 動(dòng)畫制作河南工程學(xué)院 （3）雙擊“庫”面板中“新建”前面的 圖標(biāo)，進(jìn)入“新建”元件編輯區(qū)，將每個(gè)幀的文字改為“新建”。 （4）用同樣的方法改變“打開”、“關(guān)閉”、“保存”、“另存為”元件中的文字。 Flash 動(dòng)畫制作河南工程學(xué)院制作菜單動(dòng)畫片段 其具體操作如下： （1）創(chuàng)建一個(gè)名為“彈出

7、菜單”的影片剪輯元件。 （2）選中元件編輯區(qū)中的第1幀，打開“庫”面板，拖動(dòng)“主菜單”元件至編輯區(qū)中的適當(dāng)位置。 Flash 動(dòng)畫制作河南工程學(xué)院 （3） 在第2幀按【F6】鍵插入關(guān)鍵幀，分別把元件“打開”、“關(guān)閉”、“保存”、“另存為”拖放到編輯區(qū)中的適當(dāng)位置，然后在“對(duì)齊”面板中單擊 按鈕，對(duì)齊所有按鈕，效果如圖16-8所示。 圖16-8 Flash 動(dòng)畫制作河南工程學(xué)院 （4）為第1幀添加stop語句。選中第10幀，按【F6】鍵插入關(guān)鍵幀，在“動(dòng)作”面板中添加語句gotoAndStop(1);。 （5）選中第1幀中的“文件”按鈕元件，在“動(dòng)作”面板中為其添加如下語句： on (relea

8、se) gotoAndStop(2); /單擊該按鈕跳轉(zhuǎn)并停止在第2幀F(xiàn)lash 動(dòng)畫制作河南工程學(xué)院 （6）在第2幀中選擇“新建”按鈕，在“動(dòng)作”面板中添加如下語句：on (rollOut) gotoAndPlay(3); /鼠標(biāo)離開按鈕時(shí)延遲一段時(shí)間后，回到第1幀，只顯示主菜單按鈕on (rollOver) gotoAndStop(2); /光標(biāo)停在各按鈕上時(shí)，保持第2幀的狀態(tài) （7）選中為“新建”按鈕元件添加的語句，按【Ctrl+C】鍵復(fù)制語句。 （8）選中“打開”按鈕元件，在“動(dòng)作”面板中按【Ctrl+V】鍵粘貼語句。用同樣的方法將該語句粘貼到其他按鈕元件 。 Flash 動(dòng)畫制作河南

9、工程學(xué)院 （9）單擊 回到場景中，打開“庫”面板，將“彈出菜單”元件拖放到場景中，按【Ctrl+Enter】鍵測試效果，如圖16-9所示。 圖16-9 Flash 動(dòng)畫制作河南工程學(xué)院自動(dòng)載入其他動(dòng)畫 通過自動(dòng)載入其他動(dòng)畫可以實(shí)現(xiàn)多個(gè)動(dòng)畫的自動(dòng)連續(xù)播放，載入動(dòng)畫需要用到loadMovieNum語句。其語法格式如下： loadMovieNum(url,level,variables) 其中： url是指要加載SWF文件的絕對(duì)或相對(duì)URL。相對(duì)路徑必須相對(duì)于級(jí)別0處的SWF文件。需要注意的是，必須將所有的SWF文件存儲(chǔ)在同一個(gè)文件夾中，并且其文件名不能包含文件夾或磁盤驅(qū)動(dòng)器說明。Flash 動(dòng)畫制

10、作河南工程學(xué)院 level是一個(gè)整數(shù)，用于指定SWF文件將加載到Flash Player中的哪個(gè)級(jí)別。 variables是一個(gè)可選參數(shù)，用于指定發(fā)送變量所使用的HTTP方法。如果沒有要發(fā)送的變量，則省略此參數(shù)。 下面通過一個(gè)小實(shí)例來實(shí)現(xiàn)這種效果。在動(dòng)畫的開始出現(xiàn)一個(gè)靜止畫面，顯示說明性文字，單擊play按鈕播放動(dòng)畫，當(dāng)播放到第20幀時(shí)自動(dòng)載入下一個(gè)動(dòng)畫，其中要載入的動(dòng)畫和素材，大家可以自己另外制作，也可以到http:/www.dx-下的【下載專區(qū)】【程序代碼】中下載。其具體操作如下：Flash 動(dòng)畫制作河南工程學(xué)院 （1）首先將要載入的動(dòng)畫（本例使用的是第11課的百葉窗效果）復(fù)制到某一位置，

11、如桌面上。在Flash中新建一個(gè)文件，將背景大小設(shè)為400300像素，然后將其保存在與要載入的動(dòng)畫相同的位置，即桌面上。 （2）打開“公用庫”中的“庫-按鈕”面板，將其中“Playback”類下的“gel right”拖放到舞臺(tái)的下方。 （3）新建圖層2，導(dǎo)入素材“小球.swf”到庫中，如圖16-10所示，這時(shí)庫中自動(dòng)出現(xiàn)一個(gè)名為“小球”的影片剪輯元件。 Flash 動(dòng)畫制作河南工程學(xué)院圖16-10 Flash 動(dòng)畫制作河南工程學(xué)院 （4）選中圖層2的第1幀，在“庫”面板中選擇元件“小球”，將其拖放到舞臺(tái)的上方，如圖16-11所示。 圖16-11 Flash 動(dòng)畫制作河南工程學(xué)院 （5）新建一

12、個(gè)圖層，在播放按鈕的左邊輸入如圖16-12所示的文字，文本格式可任意設(shè)置。圖16-12 Flash 動(dòng)畫制作河南工程學(xué)院 （5）新建一個(gè)圖層，在播放按鈕的左邊輸入如圖16-12所示的文字，文本格式可任意設(shè)置。 （6）新建一個(gè)圖層，選中第2幀，在播放按鈕的右邊輸入“1”，然后依次在第4、5、620幀按【F6】鍵插入關(guān)鍵幀，然后將第2幀中的數(shù)字改為“10”，第4幀中的數(shù)字改為“9”，第6幀中的數(shù)字改為“8”，第8幀中的數(shù)字改為“7”第20幀中的數(shù)字改為“1”。 （7）將所有圖層的幀均沿用到第20幀，然后再新建一個(gè)圖層，用于添加Actions語句。在第20幀插入關(guān)鍵幀，打開“動(dòng)作”面板，添加載入動(dòng)畫

13、的動(dòng)作，如下： loadMovieNum(“百葉窗效果.swf”,0); /載入影片“百葉窗效果.swf”，并將其設(shè)為與當(dāng)前動(dòng)畫在同一層級(jí)。Flash 動(dòng)畫制作河南工程學(xué)院 （8）回到動(dòng)畫的第1幀，添加stop語句，選中其中的播放按鈕，為其添加如下語句：on (release) gotoAndPlay(2); /單擊該按鈕跳轉(zhuǎn)并播放第2幀 （9）按【Ctrl+Enter】鍵播放動(dòng)畫，單擊播放按鈕，畫面開始出現(xiàn)倒計(jì)數(shù)，當(dāng)數(shù)字變?yōu)?時(shí)開始播放動(dòng)畫“百葉窗效果”，幾個(gè)畫面如圖16-13所示。Flash 動(dòng)畫制作河南工程學(xué)院圖16-13 Flash 動(dòng)畫制作河南工程學(xué)院上機(jī)實(shí)戰(zhàn) 制作Windows背景

14、 設(shè)置“運(yùn)行”菜單的響應(yīng)Flash 動(dòng)畫制作河南工程學(xué)院 在本課上機(jī)實(shí)戰(zhàn)中將制作一個(gè)模擬Windows XP的工作界面，最終效果如圖16-14所示。其制作過程為：首先制作Windows的主要工作界面，然后制作“開始”按鈕和“開始”菜單。將“開始”按鈕和“開始”菜單中的每一項(xiàng)制作成按鈕元件，單擊“開始”按鈕，彈出“開始”菜單，在其中選擇“運(yùn)行”命令，則打開“運(yùn)行”對(duì)話框，如圖16-15所示。制作的關(guān)鍵是幾個(gè)按鈕元件的制作和為按鈕添加響應(yīng)語句。通過本上機(jī)實(shí)戰(zhàn)的練習(xí)，大家可以對(duì)交互式動(dòng)畫有一個(gè)更深刻的認(rèn)識(shí)。 Flash 動(dòng)畫制作河南工程學(xué)院 圖15-14 圖15-15Flash 動(dòng)畫制作河南工程學(xué)院

15、制作Windows背景 （1）新建一個(gè)件，將舞臺(tái)大小設(shè)為825600像素（這個(gè)數(shù)據(jù)是根據(jù)Windows桌面圖片的長寬比例來設(shè)置的），導(dǎo)入圖片“背景.jpg”，用任意變形工具 將背景圖片按比例縮放，使背景圖片剛好能覆蓋整個(gè)舞臺(tái)，如圖16-16所示。 圖16-16 其具體操作如下:Flash 動(dòng)畫制作河南工程學(xué)院 （2）創(chuàng)建一個(gè)名為“背景”的影片剪輯元件，進(jìn)入其編輯區(qū)，選中第1幀，為其添加stop語句。然后在第6幀按【F7】鍵插入空白關(guān)鍵幀，在第10幀按【F5】鍵沿用幀。 （3）新建一個(gè)名為“按鈕”的按鈕元件，在“彈起”幀中導(dǎo)入圖片“開始”，在“點(diǎn)擊”幀按【F5】鍵沿用幀。 （4）回到“背景”的元

16、件編輯區(qū)，打開“庫”面板，將按鈕元件“開始”拖放到元件編輯區(qū)的中心位置。選中該元件，在“動(dòng)作”面板中添加如下語句：on (release) gotoAndStop(6); /單擊該按鈕跳轉(zhuǎn)并停止在第6幀 Flash 動(dòng)畫制作河南工程學(xué)院 （5）選中第6幀，導(dǎo)入圖片“菜單”和“開始”，并調(diào)整兩張圖片的位置，效果如圖16-17所示。 圖16-17Flash 動(dòng)畫制作河南工程學(xué)院 （6）新建一個(gè)名為“運(yùn)行”的按鈕元件，進(jìn)入其編輯區(qū)，選中“彈起”幀，導(dǎo)入圖片“運(yùn)行.jpg”，在“指針經(jīng)過”按插入關(guān)鍵幀，在“點(diǎn)擊”幀插入普通幀。 在調(diào)整圖片位置時(shí)，一定要注意讓導(dǎo)入的圖片“開始”與第1幀中的“開始”按鈕元

17、件處于相同位置?？梢詥螕魰r(shí)間軸上的按鈕，再單擊按鈕，在彈出菜單中選擇“繪制全部”命令，以觀察所有幀中的對(duì)象位置 。Flash 動(dòng)畫制作河南工程學(xué)院 （7）為了使鼠標(biāo)光標(biāo)移到“運(yùn)行”上時(shí)，“運(yùn)行”選項(xiàng)變顏色，可以新建一個(gè)圖層，在“指針經(jīng)過”幀插入關(guān)鍵幀，在其中繪制一個(gè)深藍(lán)色矩形，其大小應(yīng)與“運(yùn)行”按鈕完全相同，矩形顏色的Alpha值設(shè)為24%，如圖16-18所示。 （8）回到“背景”元件的編輯區(qū)，新建一個(gè)圖層，并命名為“子菜單”，將其移到“開始”層的上方。 圖16-18Flash 動(dòng)畫制作河南工程學(xué)院 （9）在圖層“子菜單”的第6幀插入關(guān)鍵幀，在“庫”面板中選中“運(yùn)行”元件，將其拖動(dòng)到元件編輯區(qū)

18、中，注意其放置位置應(yīng)與圖片“菜單”中的“運(yùn)行”選項(xiàng)位置完全相同，使得該按鈕與原菜單看起來像一個(gè)整體，如圖16-19所示。 圖16-19Flash 動(dòng)畫制作河南工程學(xué)院 （10）可以用相同的方法將“開始”菜單中的所有選項(xiàng)都制作成按鈕元件，由于篇幅所限，這里不再一一講述，大家可以自行練習(xí)。 （11）在真正的Windows中，當(dāng)出現(xiàn)“開始”菜單后，單擊“開始”菜單外的任意位置可以使“開始”菜單隱藏起來，為了達(dá)到這種效果，可在“背景”元件中新建一個(gè)圖層，并命名為“隱藏”，將其拖到最底層。 （12）在“隱藏”層的第6幀插入關(guān)鍵幀，用任意變形工具 繪制一個(gè)足夠大的矩形，使其能夠覆蓋整個(gè)工作區(qū)域。 Flas

19、h 動(dòng)畫制作河南工程學(xué)院 （13）將繪制的矩形轉(zhuǎn)換為按鈕元件，選中矩形按鈕，在“屬性”面板中將其Alpha值設(shè)為0%，這樣不會(huì)影響桌面背景的顯示。然后在“動(dòng)作”面板中添加如下語句： on (release) gotoAndStop(1); /單擊該按鈕跳轉(zhuǎn)并停止在第1幀 這樣當(dāng)將鼠標(biāo)移到“開始”菜單外單擊時(shí)動(dòng)畫轉(zhuǎn)到第1幀并停止，“開始”菜單消失。Flash 動(dòng)畫制作河南工程學(xué)院設(shè)置“運(yùn)行”菜單的響應(yīng) 其具體操作如下: （1）進(jìn)入“背景”元件的 編輯區(qū)，在“子菜單”層的第 11幀插入空白關(guān)鍵幀，導(dǎo)入圖片“對(duì)話框.jpg”，單擊時(shí)間軸上的 按鈕，顯示前一幀中的圖像位置，然后將“對(duì)話框.jpg”移動(dòng)

20、到如圖16-20所示的位置。圖16-20Flash 動(dòng)畫制作河南工程學(xué)院 （2）用文本工具 在“運(yùn)行”對(duì)話框的“打開”下拉列表框位置拖拉出一個(gè)輸入文本框，文本的屬性設(shè)置如圖16-21所示。 圖15-21Flash 動(dòng)畫制作河南工程學(xué)院 （3）選中“子菜單”層中的“運(yùn)行”按鈕，為其添加如下語句： on (release) gotoAndStop(11); /單擊該按鈕跳轉(zhuǎn)并停止在第11幀 單擊“運(yùn)行”按鈕即可跳轉(zhuǎn)到第11幀，出現(xiàn)“運(yùn)行”對(duì)話框。 （4）創(chuàng)建一個(gè)名為“確定”的按鈕元件，在“彈起”幀中導(dǎo)入圖片“確定.jpg”，回到“背景”元件編輯區(qū)中，將“確定”元件拖放到第11幀的“運(yùn)行”對(duì)話框上，

21、注意其位置應(yīng)與原對(duì)話框上的“確定”按鈕完全相同。 Flash 動(dòng)畫制作河南工程學(xué)院 （5）選中“確定”元件，為其添加如下語句： on (release) gotoAndStop(1); /單擊該按鈕跳轉(zhuǎn)并停止在第1幀 （6）至此Windows XP的模擬動(dòng)畫制作完成。按【Ctrl+Enter】鍵播放，單擊“開始”按鈕，在彈出的“開始”菜單中選擇“運(yùn)行”命令，可以打開“運(yùn)行”對(duì)話框，在其中單擊“確定”按鈕，又可回到桌面，最終效果如圖16-14、圖16-15所示。 Flash 動(dòng)畫制作河南工程學(xué)院課后練習(xí)填空題判斷題 問答題 上機(jī)操作題Flash 動(dòng)畫制作河南工程學(xué)院填空題 （1）Flash動(dòng)畫的一個(gè)顯著特性就是具有強(qiáng)大的 性，它使得用戶不僅可以欣賞，也可以參與到Flash動(dòng)畫中。 （2）onClipEvent (load)語句的作用是