flash-第6制作交互式動畫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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