Flash課件第16課.ppt

1、第16課制作交互式動(dòng)畫(huà)，上課前導(dǎo)游課程中介紹了機(jī)器前實(shí)戰(zhàn)課后練習(xí)，上課前導(dǎo)游，提高集中知識(shí)，重點(diǎn)知識(shí)，用按鈕制作交互式動(dòng)畫(huà)，制作菜單等。讀者應(yīng)仔細(xì)閱讀相關(guān)部分，并結(jié)合上述實(shí)戰(zhàn)練習(xí)和掌握。提高知識(shí)并自動(dòng)加載其他動(dòng)畫(huà)。初學(xué)者可以暫時(shí)不學(xué)，有一定的基礎(chǔ)后再學(xué)。課堂說(shuō)明、控制動(dòng)畫(huà)對(duì)象數(shù)交互菜單編寫(xiě)附加動(dòng)畫(huà)自動(dòng)加載、Flash動(dòng)畫(huà)的一個(gè)重要特征是能夠參與Flash動(dòng)畫(huà)的強(qiáng)大交互性，通過(guò)單擊按鈕、選擇選項(xiàng)等控制動(dòng)畫(huà)播放。本課程介紹如何創(chuàng)建交互式動(dòng)畫(huà)。它控制動(dòng)畫(huà)對(duì)象的數(shù)量。以下是用于了解交互式動(dòng)畫(huà)有趣部分的小實(shí)例。首先，打開(kāi)圖16-1所示的第10課課堂上制作的“采集花粉的蝴蝶”動(dòng)畫(huà)。在花園里單擊蝴蝶的時(shí)候，

2、蝴蝶再大一個(gè)的效果如下。圖16-1，(1)在動(dòng)畫(huà)中，選擇影片剪輯元件“蝴蝶”，然后在“屬性”面板中將實(shí)例名稱(chēng)設(shè)置為“HD”，如圖16-2所示。(圖16-2，(2)選擇影片剪輯元件“蝴蝶”(單擊蝴蝶時(shí)會(huì)出現(xiàn)兩只蝴蝶的結(jié)果)，然后在“動(dòng)作”面板中加載當(dāng)前動(dòng)畫(huà)剪輯(load) /)。換句話說(shuō)，影片剪輯“HD”fs command( show menu ， false )；/不顯示控制菜單onClipEvent(mouseUp)/鼠標(biāo)左鍵duplicateMovieClip(hd，hd1，0)；/復(fù)制影片剪輯HD并生成動(dòng)畫(huà)剪輯hd1，與當(dāng)前蝴蝶相同的圖層集屬性(hd1，_ x，x130)；/將動(dòng)畫(huà)分段

3、hd1的x坐標(biāo)增加130個(gè)像素，(3)按Ctrl Enter鍵播放動(dòng)畫(huà)，然后單擊鼠標(biāo)以查看原始蝴蝶左側(cè)的另一個(gè)相同蝴蝶，如圖16-3所示。圖16-3，將語(yǔ)句添加到影片剪輯時(shí)，將動(dòng)畫(huà)段hd1的x坐標(biāo)增加130個(gè)像素，以避免在兩個(gè)蝴蝶的位置相同的情況下重疊。創(chuàng)建交互菜單、創(chuàng)建主菜單命令創(chuàng)建菜單命令創(chuàng)建菜單動(dòng)畫(huà)片段、各種交互菜單(包括下拉菜單、彈出菜單、幻燈片菜單等)、在下面創(chuàng)建典型彈出菜單“文件”菜單、按鈕元件的不同位置，其他菜單的創(chuàng)建方式類(lèi)似。創(chuàng)建主菜單，如下所示：(1)創(chuàng)建新文件，將場(chǎng)景大小設(shè)置為200200像素，將背景顏色設(shè)置為深綠色。(2)建立名為主選單的按鈕元件，進(jìn)入按鈕元件編輯區(qū)域。選

4、擇彈起幀，單擊矩形工具在場(chǎng)景中繪制一個(gè)矩形，繪制填充顏色設(shè)置為白色-灰色-白色的線性漸變，然后添加黑色陰影以增加立體感。(3)使用文本工具在矩形框中輸入字符“文件”，然后將其設(shè)置為“歌曲，37，粗體”，如圖16-4所示。(4)選擇“指針經(jīng)過(guò)”幀，按F6鍵插入關(guān)鍵幀，選擇矩形的左邊框和上邊框，使用墨水瓶工具將其設(shè)置為白色，將下邊框和右邊框的顏色設(shè)置為土黃色，以便指針移動(dòng)到按鈕上時(shí)產(chǎn)生凸起效果。圖16-4，(5)在按下框架中插入關(guān)鍵幀，將左邊框和上邊框的顏色調(diào)整為土黃色，將下邊框和右邊框的顏色調(diào)整為白色，然后將文字“文件”稍微向右下方移動(dòng)，以便在單擊時(shí)具有凹面效果，如圖16-5所示。圖16-5，創(chuàng)

5、建菜單命令，如下所示：(1)按F11打開(kāi)“庫(kù)”面板，選擇“主菜單”組件，右鍵單擊，然后從彈出快捷菜單中選擇“復(fù)制”命令以打開(kāi)“復(fù)制元件”對(duì)話框，在“名稱(chēng)”文本框中輸入“新建”，然后單擊按鈕以打開(kāi)圖16-(2)使用相同的方法獲取“打開(kāi)”、“關(guān)閉”、“保存”和“另存為”元件?！皫?kù)”面板如圖16-7所示。、圖16-7、圖16-6、(3)在“庫(kù)”面板中雙擊“新建”前面的圖標(biāo)以轉(zhuǎn)到“新建”元件編輯區(qū)域，然后將每個(gè)框架中的文本更改為“新建”。(4)使用相同的方法更改“打開(kāi)”、“關(guān)閉”、“保存”、“另存為”零部件的文字。創(chuàng)建菜單動(dòng)畫(huà)剪輯，如、(1)創(chuàng)建名為“彈出菜單”的影片剪輯元件。(2)在元件編輯區(qū)域中，

6、選擇第1幀，打開(kāi)“庫(kù)”面板，然后將“主菜單”元件拖動(dòng)到編輯區(qū)域中的適當(dāng)位置。(3)在第2幀中，按F6插入關(guān)鍵幀，將元件分別拖動(dòng)到編輯區(qū)域中的相應(yīng)位置，然后單擊“對(duì)齊”面板上的按鈕(如圖16-8所示)以對(duì)齊所有按鈕。為、圖16-8、(4)第1幀添加stop語(yǔ)句。選擇第10幀，然后按F6鍵插入關(guān)鍵幀，并將gotoAndStop(1)語(yǔ)句添加到“動(dòng)作”面板中。即可從workspace頁(yè)面中移除物件。(5)在第1幀中選擇“文件”按鈕元件，然后將on(release)gotoAndStop(2)語(yǔ)句添加到“動(dòng)作”面板中。/單擊此按鈕轉(zhuǎn)到第2幀，然后停止、(6)選擇第2幀中的“新建”按鈕，以便在“動(dòng)作”面

7、板中執(zhí)行以下操作：on(roll out) gotoand play(3)；/鼠標(biāo)離開(kāi)按鈕時(shí)短暫延遲，請(qǐng)返回到第1幀，然后單擊主菜單按鈕on goto and stop(2)；/光標(biāo)停在每個(gè)按鈕上時(shí)保持第2幀的狀態(tài)(7)為“新建”按鈕組件選擇添加的語(yǔ)句，然后按Ctrl C鍵復(fù)制語(yǔ)句。(8)選擇“打開(kāi)”按鈕元件，然后在“動(dòng)作”面板中按Ctrl V粘貼語(yǔ)句。使用相同的方法，將此門(mén)粘貼到另一個(gè)按鈕元件中。單擊、(9)返回到場(chǎng)景，打開(kāi)“庫(kù)”面板，將彈出菜單元件拖放到場(chǎng)景中，然后按Ctrl Enter測(cè)試效果，如圖16-9所示。圖16-9、自動(dòng)加載其他動(dòng)畫(huà)、自動(dòng)加載其他動(dòng)畫(huà)以啟用多個(gè)動(dòng)畫(huà)的自動(dòng)連續(xù)播放、

8、加載動(dòng)畫(huà)需要loadMovieNum語(yǔ)句。語(yǔ)法格式為loadmovienum (URL ，level ，variables)。其中URL是要加載的SWF文件的絕對(duì)或相對(duì)URL。相對(duì)路徑必須相對(duì)于位于0級(jí)的SWF文件。請(qǐng)記住，所有SWF文件必須存儲(chǔ)在同一文件夾中，并且該文件名不能包含文件夾或磁盤(pán)驅(qū)動(dòng)器說(shuō)明。和level是整數(shù)，指定將SWF文件加載到FlashPlayer中的級(jí)別。Variables是一個(gè)可選參數(shù)，它指定用于發(fā)送變量的HTTP方法。如果沒(méi)有要發(fā)送的變量，則省略此參數(shù)。以下是通過(guò)小示例實(shí)現(xiàn)此效果的示例。如果動(dòng)畫(huà)開(kāi)始處出現(xiàn)顯示說(shuō)明文本的停止屏幕，請(qǐng)單擊“播放”按鈕播放動(dòng)畫(huà)，然后在播放到

9、第20幀時(shí)自動(dòng)加載下一個(gè)動(dòng)畫(huà)。此時(shí)要導(dǎo)入的動(dòng)畫(huà)和素材可以由讀者自行創(chuàng)建，也可以從http:/www.dx-下面的下載區(qū)域程序代碼下載。此操作將、(1)首先要加載的動(dòng)畫(huà)(在本例中使用11的百葉窗效果)復(fù)制到與桌面相同的位置。Flash將創(chuàng)建新文件，將背景大小設(shè)置為400300像素，然后將其保存到與要加載的動(dòng)畫(huà)相同的桌面上。(2)打開(kāi)“公用庫(kù)”的“庫(kù)-按鈕”面板，然后將“gelright”從“Playback”類(lèi)下面拖到舞臺(tái)下面。(3)在將素材“small ball.swf”導(dǎo)入庫(kù)中的新圖層2中，庫(kù)中會(huì)自動(dòng)出現(xiàn)名為“small ball”的影片剪輯元件，如圖16-10所示。、圖16-10、(4)選

10、擇第2層的第1幀，然后在“庫(kù)”面板中選擇元件“球”，并將其拖到舞臺(tái)上，如圖16-11所示。、圖16-11、(5)創(chuàng)建新層，并在播放按鈕的左側(cè)輸入圖16-12所示的字符。您可以根據(jù)需要設(shè)置文本格式。、圖16-12、(5)創(chuàng)建新層，并在播放按鈕的左側(cè)輸入圖16-12所示的字符。您可以根據(jù)需要設(shè)置文本格式。(6)創(chuàng)建新圖層，選擇第2幀，在播放按鈕的右側(cè)輸入“1”，然后選擇第4、5、6幀.在20處，按F6插入關(guān)鍵幀，然后將第2幀中的數(shù)字更改為“10”，將第4幀中的數(shù)字更改為“9”，將第6幀中的數(shù)字更改為“8”，將第8幀中的數(shù)字更改為“7”.將第20幀中的數(shù)字更改為“1”。(7)將所有圖層的幀繼承到第2

11、0幀，然后創(chuàng)建要添加Actions語(yǔ)句的新圖層。在第20幀中插入關(guān)鍵幀，打開(kāi)“動(dòng)作”面板，然后添加加載動(dòng)畫(huà)的動(dòng)作，如下所示：loadMovieNum(“快門(mén)效果”)。swf ，0)；/視頻“百葉窗效果”。加載swf”，并將其設(shè)置為與當(dāng)前動(dòng)畫(huà)相同的級(jí)別。返回到、(8)動(dòng)畫(huà)的第1幀，添加stop語(yǔ)句，然后選擇播放按鈕以打開(kāi)(release) goto and play(2)；/單擊此按鈕轉(zhuǎn)到第2幀(9)，按Ctrl Enter播放動(dòng)畫(huà)，單擊播放按鈕后，屏幕開(kāi)始倒數(shù)，數(shù)字為1時(shí)，開(kāi)始播放動(dòng)畫(huà)“百葉窗效果”，如圖16-13所示。、圖16-13、實(shí)際戰(zhàn)斗、Windows背景設(shè)置“執(zhí)行”菜單的響應(yīng)制作，本

12、課程中制作了模擬實(shí)際WindowsXP的操作界面，最終效果如圖16-14所示。首先創(chuàng)建Windows的主操作界面，然后創(chuàng)建“開(kāi)始”按鈕和“開(kāi)始”菜單。使“開(kāi)始”按鈕和“開(kāi)始”菜單中的每個(gè)項(xiàng)目都成為按鈕元件，單擊“開(kāi)始”按鈕，然后彈出“開(kāi)始”菜單。在此選擇“運(yùn)行”命令將打開(kāi)“運(yùn)行”對(duì)話框，如圖16-15所示。創(chuàng)建的關(guān)鍵是創(chuàng)建多個(gè)按鈕元件，并將響應(yīng)語(yǔ)句添加到按鈕中。通過(guò)實(shí)戰(zhàn)練習(xí)，讀者可以更深入地了解交互式動(dòng)畫(huà)。圖15-14，圖15-15，創(chuàng)建Windows背景，(1)將舞臺(tái)大小設(shè)置為825600像素(此數(shù)據(jù)根據(jù)Windows桌面圖像的長(zhǎng)寬比設(shè)置)，圖“background.jpg，(2)創(chuàng)建名為圖

13、16-16、(背景)的影片剪輯元件，轉(zhuǎn)到“編輯”區(qū)域，選擇第1幀，然后添加停止語(yǔ)句，如下所示：然后在第6幀中，按F7插入空白關(guān)鍵幀，在第10幀中，按F5繼承幀。(3)創(chuàng)建名為“按鈕”的新按鈕元件，從“開(kāi)始”幀獲取圖片“開(kāi)始”，然后在“單擊”幀中按F5鍵繼承幀。(4)返回到“背景”的元件編輯區(qū)域，打開(kāi)“庫(kù)”面板，然后將按鈕元件“開(kāi)始”拖動(dòng)到元件編輯區(qū)域的中心位置。選取元件，然后將on goto and stop (6)陳述式加入動(dòng)作面板。/單擊此按鈕在第6幀移動(dòng)，選擇“停止”、“”、(5)第6幀，獲取圖片“菜單”和“開(kāi)始”，然后調(diào)整這兩個(gè)圖片的位置，如圖16-17所示。圖16-17，(6)創(chuàng)建名

14、為“執(zhí)行”的新按鈕元件，移動(dòng)到相應(yīng)的編輯區(qū)域，選擇“開(kāi)始”幀，然后執(zhí)行“圖”。導(dǎo)入jpg ，按“指針經(jīng)過(guò)”以插入關(guān)鍵幀，然后在“點(diǎn)擊”幀中插入常規(guī)幀。調(diào)整圖片位置時(shí)，導(dǎo)入的圖片“開(kāi)始”必須與第1幀中的“開(kāi)始”按鈕元件位于同一位置。您可以按一下時(shí)間軸中的按鈕，再按一下按鈕，然后從彈出式選單中選取全部繪制命令，查看所有影格中物件的位置。(7)要在鼠標(biāo)光標(biāo)移動(dòng)到“運(yùn)行”上時(shí)為“運(yùn)行”選項(xiàng)上色，可以在矩形顏色的alpha值設(shè)置為24%的“指針經(jīng)過(guò)”幀上創(chuàng)建新的深藍(lán)色矩形關(guān)鍵幀，如圖16-18所示。(8)返回到背景元件的編輯區(qū)域，創(chuàng)建一個(gè)新圖層，將其命名為“子菜單”，然后將其移動(dòng)到“開(kāi)始”圖層上。，(圖

15、16-18，(9)在圖層“子菜單”的第6幀中插入關(guān)鍵幀，在“庫(kù)”面板中選擇“運(yùn)行”元件，然后將其拖動(dòng)到元件編輯區(qū)域。必須位于圖“菜單”的“運(yùn)行”選項(xiàng)位置的相同位置，以便按鈕看起來(lái)與原始菜單相同，如圖16-19所示。圖16-19、(10)等方法使“開(kāi)始”菜單中的所有選項(xiàng)成為按鈕元素。由于空間上的限制，讀者可以直接練習(xí)，而不用在這里一一說(shuō)明。(11)在實(shí)際的Windows中，當(dāng)出現(xiàn)“開(kāi)始”菜單時(shí)，可以單擊“開(kāi)始”菜單以外的任意位置以隱藏“開(kāi)始”菜單。為此，請(qǐng)?jiān)凇氨尘啊苯M件中創(chuàng)建新圖層，將其命名為“隱藏”，然后將其拖到底部。(12)在隱藏圖層的第6幀中插入關(guān)鍵幀，然后繪制一個(gè)足夠大的矩形，以便自由變

16、換工具復(fù)蓋整個(gè)畫(huà)板。(13)將繪制的矩形轉(zhuǎn)換為按鈕元件，選擇矩形按鈕，然后在“屬性”面板中將alpha值設(shè)置為0%，不會(huì)影響桌面背景的顯示。然后，將on goto and stop (1)語(yǔ)句添加到“動(dòng)作”面板中。/單擊此按鈕轉(zhuǎn)到第1幀并停止。然后，將鼠標(biāo)移出“開(kāi)始”菜單時(shí)，動(dòng)畫(huà)將移動(dòng)到第1幀停止，“開(kāi)始”菜單消失。如下所示，(1)進(jìn)入背景元件的編輯區(qū)域，在子菜單層的第11幀中插入空白關(guān)鍵幀，然后在“圖”對(duì)話框中。導(dǎo)入“jpg”，單擊時(shí)間軸上的按鈕以顯示上一幀的圖像位置，然后顯示“對(duì)話框”。將“jpg”移至圖16-20所示的位置。圖16-20，(2)使用文本工具從運(yùn)行對(duì)話框的“打開(kāi)”下拉列表框

17、位置拖動(dòng)輸入文本框，如圖16-21所示。(圖15-21，(3)選擇子菜單層的“run(release) goto and stop(11)；/將顯示“執(zhí)行”對(duì)話框，通過(guò)單擊此按鈕進(jìn)行移動(dòng)，然后單擊停止幀11上的“執(zhí)行”按鈕轉(zhuǎn)至幀11。(4)創(chuàng)建名為“確定”的按鈕元件，然后在“開(kāi)始”幀中檢查“插圖”。導(dǎo)入jpg ，然后返回到背景元件編輯區(qū)域，將“確定”元件拖放到第11幀的“執(zhí)行”對(duì)話框中。必須與原始對(duì)話框中的“確定”按鈕位于同一位置。選取、(5)檢查元件，然后選取on(release) goto and stop(1)；/單擊此按鈕可跳過(guò)此WindowsXP的第1幀(6)上模擬動(dòng)畫(huà)的完成并停止。按Ctrl Enter播放，單擊“開(kāi)始”按鈕，然后從彈出開(kāi)始菜單中選擇“運(yùn)行”命令，將打開(kāi)“運(yùn)行”對(duì)話框。在這里，單擊“確定”按鈕，返回到桌面，獲得圖16-14、圖16-15