flash代碼實(shí)例 《跟隨鼠標(biāo)移動的星成心》

1、第26課時(shí)代碼實(shí)例跟隨鼠標(biāo)移動的星成心案例說明：本課將制作一個動畫實(shí)例“跟隨鼠標(biāo)移動的星成心”，動畫播放畫面如圖1所示。播 放動畫時(shí)五角星會跟隨鼠標(biāo)移動，并且在移動的過程中自身不斷進(jìn)行復(fù)制，最終組成一顆 愛心的形狀。當(dāng)鼠標(biāo)移動到其它位置時(shí)，五角星會跟著鼠標(biāo)移動，在新的位置重新組合成 愛心形狀。如圖2所示：圖1實(shí)例“跟隨鼠標(biāo)移動的星成心”動畫畫面1圖2實(shí)例“跟隨鼠標(biāo)移動的星成心”動畫畫面2授課教師：文韜教學(xué)目的：通過本案例的學(xué)習(xí)，讓學(xué)生能夠掌握引導(dǎo)圖層的使用方法、隨機(jī)函數(shù)的使 用和復(fù)制影片剪輯函數(shù)的使用方法、以及條件結(jié)構(gòu)語句IF的使用；教學(xué)重點(diǎn)：隨機(jī)函數(shù)的使用和復(fù)制影片剪輯函數(shù)(duplica

2、teMoveiClip)的使用方法； 教學(xué)難點(diǎn)：影片剪輯屬性的設(shè)置和條件結(jié)構(gòu)if語句的使用； 教學(xué)過程：一、相關(guān)知識setProperty語句的使用和參數(shù)設(shè)置格式：set Proper ty(t arge t, proper ty, expression) 功能：用來設(shè)置影片剪輯實(shí)例(t arge t)的屬性。參數(shù)：target用來設(shè)置和改變影片剪輯實(shí)例在舞臺中的地址路徑；Property用來設(shè)置 影片剪輯實(shí)例的屬性；expression是屬性的值，可以是一個表達(dá)式。duplicateMovieClip語句的使用和參數(shù)設(shè)置格式：duplica teMovieClip( targe t, new

3、name, dep th) 功能：復(fù)制一個影片剪輯實(shí)例對象到舞臺的指定層，并給該實(shí)例賦予一個新的名稱。 參數(shù)：target給出要復(fù)制的影片剪輯元件的目標(biāo)路徑。Newname給出新的影片剪輯實(shí) 例的名稱。Dep th給出新的影片剪輯元件所在的層號碼。startDrag語句的使用和參數(shù)設(shè)置格式 1： startDrag(target);格式 2： start Drag( targe t, lock);格式 3： startDrag(target, lock, left, top, right, bottom);功能：該命令用來設(shè)置鼠標(biāo)拖曳舞臺工作區(qū)的影片剪輯元件對象實(shí)例。start Drag ()

4、是 開始拖曳對象。參數(shù)：target是要拖曳的對象，lock參數(shù)是是否以鎖定中心拖曳，參數(shù)left、top、 right和bottom是拖曳的范圍。在中的參數(shù)是可選項(xiàng)。4.if語句的使用和參數(shù)設(shè)置格式1：If (條件表達(dá)式)語句體功能：如果條件表達(dá)式的值為true，則執(zhí)行語句體；如果條件表達(dá)式的值為flase, 則退出if語句，繼續(xù)執(zhí)行后面的語句。格式2：If (條件表達(dá)式)語句體1eles語句體2功能：如果條件表達(dá)式的值為true，則執(zhí)行語句體1；否則執(zhí)行語句體2。格式3：If (條件表達(dá)式1) 語句體1eles if(條件表達(dá)式2) 語句體2功能：如果條件表達(dá)式1的值為true，則執(zhí)行語句

5、體1；如果條件表達(dá)式1的值為 flase，則判斷條件表達(dá)式2的值，如果其值為true，則執(zhí)行語句體2；如果其值為 flase，則退出if語句，繼續(xù)執(zhí)行if后面的語句。二、流程分析圖形元件“星”一一繪制一顆五角星；影片剪輯元件“星成心”一一“星”元件沿心形路徑移動；影片剪輯元件“復(fù)制星”一一“星成心”元件；添加動作腳本；三、案例實(shí)現(xiàn)創(chuàng)建動畫啟動FLASH，單擊“文件”一“新建”菜單項(xiàng)，在打開的“新建文檔”對話框中 S j S 1* IS 21 K is S j S 1* IS 21 K is 4*(ActionScript 2.0) ”選項(xiàng)。新建一個文檔，設(shè)置 文檔大小為550X200像素，背景

6、顏色為“白 色”，命名為“跟隨鼠標(biāo)的星成心”，保存文檔。在圖層1的第1幀導(dǎo)入一幅圖片作為背 景，調(diào)整該圖片的大小和位置，使其正好覆蓋舞臺 范圍。按CTRL+F8鍵，打開“創(chuàng)建新元件”對話 框，創(chuàng)建名為“星”的圖形元件，在元件編輯窗口 中用多角星形工具繪制一個五角星。如圖3所示：-* nMIS W fl MB -1 1 /|卄事|* ” Arru T- r L fi：/.BKV 圖4將“星”元件拖到編輯窗口圖3繪制五角星圖4將“星”元件拖到編輯窗口返回主場景，再按CTRL+F8鍵，打開“創(chuàng) 建新元件”對話框，創(chuàng)建名為“星成心”的影片剪 輯元件，在元件編輯窗口中拖一個“星”元件。如 圖4所示：在圖

7、層1上新建一個引導(dǎo)圖層，并在引導(dǎo) 圖層中畫一“半個心形”的線條作為引導(dǎo)路徑。(注意相對于中心點(diǎn)的位置，它會影響到最終效果 的拖動位置)如圖5所示：在圖層1的第20幀插入一個關(guān)鍵幀，在 引導(dǎo)層的20幀處插入幀。選中圖層1的第1幀，將“星”元件的 中心點(diǎn)放到引導(dǎo)層中引導(dǎo)線的上部(此時(shí)打開吸 附工具可以很方便地放置上去)。如圖6所示：圖6調(diào)整“星”元件運(yùn)動的起點(diǎn)(9)選中圖層1第1幀后單擊 右鍵，選擇“創(chuàng)建補(bǔ)間動畫”，完成 “星”元件沿引導(dǎo)線運(yùn)行的動畫。 (此時(shí)按回車鍵播放，看“星”元件 是否沿著引導(dǎo)線在運(yùn)行。如果不是， 重新調(diào)整圖層1的第1幀與第20幀圖7調(diào)整“星”元件運(yùn)動的終點(diǎn) Q I 510

8、LSFI 24 丹 =5 孔 ”的“星”元件位置，使它的中心點(diǎn)吸 附到引導(dǎo)線上。)(10)鎖住圖層1和引導(dǎo)層，新 建一個圖層3,在庫中再拖出一個 “星”元件，按照以上介紹的方法， 將拖出的“星”元件沿另一半心線路 運(yùn)動的效果做出來。如圖8所示：(11)調(diào)整好后在最后一個關(guān)鍵幀上加上stop();讓它只運(yùn)行一次。圖6調(diào)整“星”元件運(yùn)動的起點(diǎn)(9)選中圖層1第1幀后單擊 右鍵，選擇“創(chuàng)建補(bǔ)間動畫”，完成 “星”元件沿引導(dǎo)線運(yùn)行的動畫。 (此時(shí)按回車鍵播放，看“星”元件 是否沿著引導(dǎo)線在運(yùn)行。如果不是， 重新調(diào)整圖層1的第1幀與第20幀圖7調(diào)整“星”元件運(yùn)動的終點(diǎn) Q I 510 LSFI 24 丹

9、 =5 孔 ”的“星”元件位置，使它的中心點(diǎn)吸 附到引導(dǎo)線上。)(10)鎖住圖層1和引導(dǎo)層，新 建一個圖層3,在庫中再拖出一個 “星”元件，按照以上介紹的方法， 將拖出的“星”元件沿另一半心線路 運(yùn)動的效果做出來。如圖8所示：(11)調(diào)整好后在最后一個關(guān)鍵幀上加上stop();讓它只運(yùn)行一次。VX.FClC圖9 “復(fù)制星”元件的制作1返回主場景，按CTRL+F8 鍵，打開“創(chuàng)建新元件”對話框，創(chuàng)建 名為“復(fù)制星”的影片剪輯元件，在元 件編輯窗口中拖入“星成心”元件，并 調(diào)整好它的大小和位置，然后給它取實(shí) 例名稱為“star”。如圖9所示：新建一圖層，并在此圖層上 插入兩個空白關(guān)鍵幀(此時(shí)圖層上

10、應(yīng)該 有三個空白關(guān)鍵幀)，然后將圖層1也 延長兩幀(在圖層1的第三幀“插入 幀”)。如圖10所示：二場豈1囹復(fù)制星二場豈1囹復(fù)制星圖10 “復(fù)制星”元件的制作2編寫代碼(1)選中圖層2的第1幀，單擊鼠標(biāo)右鍵, 項(xiàng)，將“動作”面板打開，輸入以下動作腳本。startDrag(star, true);(1)選中圖層2的第1幀，單擊鼠標(biāo)右鍵, 項(xiàng)，將“動作”面板打開，輸入以下動作腳本。startDrag(star, true);月n = 0;setProperty (star, _visible, false);在彈出的快捷菜單中單擊“動作”菜單/開始拖動star元件/初始化復(fù)制數(shù)量/在復(fù)制前將star元件設(shè)置為不可見(2)選中圖層2的第2幀輸入以下動作腳本。if(n20) /如果沒有復(fù)制到20顆星，則執(zhí)行以下程序duplicateMovieClip(star.star, n);/繼續(xù)復(fù)制 starn+;/復(fù)制數(shù)每次加1else /如果復(fù)制到20顆星n = 0;/則復(fù)制個數(shù)清0(3)選中圖層2的第3幀輸入以下動作腳本。gotoAndPlay(2);/兆轉(zhuǎn)到第2幀播放四、測試影片回到主場景，在圖層1上新建一圖層，將“復(fù)制星”元件拖入到主場景中，按 CTRL+ENTER鍵進(jìn)行