項(xiàng)目3交互動(dòng)畫的制作

1、項(xiàng)目3交互動(dòng)畫的制作教學(xué)目標(biāo)熟悉ActionScript 3.0的基本語法掌握ActionScript 3.0的條件判斷制語句掌握ActionScript 3.0的事件和函數(shù)掌握按鈕對時(shí)間軸的控制掌握影片剪輯的控制掌握滑桿控制物體任務(wù)1 東莞地圖簡介的制作案例效果 隱形按鈕的制作；動(dòng)態(tài)按鈕的制作；使用按鈕控制影片剪輯實(shí)例。案例分析本案例的實(shí)現(xiàn)思路：首先制作與地圖上鎮(zhèn)區(qū)圖形一致的隱形按鈕，該按鈕在普通狀態(tài)下是透明的，只有當(dāng)鼠標(biāo)經(jīng)過按鈕時(shí)，按鈕的狀態(tài)才發(fā)生改變；然后，將鎮(zhèn)區(qū)的文字介紹放置在不同的幀當(dāng)中；最后，添加腳本實(shí)現(xiàn)單擊按鈕跳轉(zhuǎn)到對應(yīng)的幀。相關(guān)知識(shí)1. 使用使用ActionScript 3.0

2、實(shí)現(xiàn)按鈕控制影片剪實(shí)現(xiàn)按鈕控制影片剪輯輯實(shí)例實(shí)例 在幀上添加代碼play_btn.onpress=function() animation_mc.play();在按鈕上添加代碼on(press) animation_mc.play();相關(guān)知識(shí)2.使用使用ActionScript 3.0實(shí)現(xiàn)按鈕控制影片剪輯實(shí)例實(shí)現(xiàn)按鈕控制影片剪輯實(shí)例只能在幀上輸入代碼function playMovie():void animation_mc.play();play_btn.addEventListener( MouseEvent.CLICK, playMovie);相關(guān)知識(shí)3.函數(shù)函數(shù) 使用ActionSc

3、ript編寫程序時(shí)，常常需要將某些相對獨(dú)立的功能封裝起來，提供給程序在需要的時(shí)候調(diào)用，從而提高程序的靈活性與重用性。我們把這種封裝起來的代碼稱為函數(shù)。 函數(shù)的定義函數(shù)的定義function addData(a:int, b:int):void var sum = a + b; trace(“a + b = ” + sum); 函數(shù)的調(diào)用函數(shù)的調(diào)用 在ActionScript 3.0中，函數(shù)的調(diào)用有兩種不同的情況：第一種情況，調(diào)用的函數(shù)有參數(shù)，需要先寫明函數(shù)名稱，然后在函數(shù)名后的小括號(hào)里填入?yún)?shù)；第二種情況，調(diào)用的函數(shù)沒有參數(shù)，直接寫好函數(shù)名，然后加上小括號(hào)，保持小括號(hào)里為空。相關(guān)知識(shí)4. 添加

4、事件添加事件 在ActionScript中事件的處理分為偵聽和響應(yīng)兩個(gè)步驟。偵聽的任務(wù)交給addEventListener()方法，由它負(fù)責(zé)偵聽特定對象的特定事件，響應(yīng)的任務(wù)交給“事件處理器”函數(shù)，由它對事件的發(fā)生做出響應(yīng)。function jump (e:MouseEvent):void/時(shí)間軸跳轉(zhuǎn)代碼btn1.addEventListener(MouseEvent.CLICK, jump);相關(guān)知識(shí)5.常用常用時(shí)間軸控制時(shí)間軸控制命令命令 gotoAndPlay(場景,幀) 作用：跳轉(zhuǎn)并播放。跳轉(zhuǎn)到指定場景的指定幀，并從該幀開始播放，如果沒有指定場景，則將跳轉(zhuǎn)到當(dāng)前場景的指定幀。 goto

5、AndStop(場景,幀) 作用：跳轉(zhuǎn)并停止播放。跳轉(zhuǎn)到指定場中的指定幀，并從該幀停止播放，如果沒有指定場景，則將跳轉(zhuǎn)到當(dāng)前場景的指定幀。 play() 作用：指定影片繼續(xù)播放。當(dāng)某個(gè)影片在某一幀停止了，想接著繼續(xù)播放，則可用play()語句實(shí)現(xiàn)。 stop() 作用：停止當(dāng)前影片的播放。相關(guān)知識(shí)5.常用常用時(shí)間軸控制時(shí)間軸控制命令命令 nextFrame() 作用：將播放頭轉(zhuǎn)到下一幀并停止，如果當(dāng)前幀是最后一幀，則播放頭不移動(dòng)。 prevFrame() 作用：將播放頭轉(zhuǎn)到前一幀并停止，如果當(dāng)前幀是第1幀，則播放頭不移動(dòng)。 nextScene() 作用：跳至下一場景并停止。 prevScene

6、() 作用：跳至前一場景并停止。相關(guān)知識(shí)5.條件語句條件語句（1）if語句語句 if語句是對條件表達(dá)式（如ab）進(jìn)行判斷，根據(jù)判斷結(jié)果執(zhí)行不同的程序分支。if語句有3種不同的形式。if(條件表達(dá)式) /語句if(條件表達(dá)式) /語句else /語句if(條件表達(dá)式) /語句else if(條件表達(dá)式) /語句else /語句相關(guān)知識(shí)5.條件語句條件語句（2）switch語句語句 switch語句是對變量（如字符串變量s或整數(shù)變量i）進(jìn)行判斷，根據(jù)變量的不同取值執(zhí)行不同的程序分支。switch(變量)case 值1:/語句1break;case值2:/語句2break;case值N:/語句Nbr

7、eak;default:/語句N+1相關(guān)知識(shí)6.隱形按鈕的制作隱形按鈕的制作 隱形按鈕是指該按鈕在動(dòng)畫中是隱蔽的、透明的，表面上看到的是按鈕所覆蓋的下方圖像，但當(dāng)鼠標(biāo)經(jīng)過或點(diǎn)擊按鈕時(shí)，依然可以有按鈕的狀態(tài)變化和功能。方法一（沒有按鈕的狀態(tài)變化）：1. 新建按鈕元件，進(jìn)入按鈕元件編輯區(qū)；2. “彈起”、“指針經(jīng)過”、“按下”三幀均為空幀；3. “點(diǎn)擊”幀插入關(guān)鍵幀，繪制出響應(yīng)區(qū)域。方法二（有按鈕的狀態(tài)變化）：1. 新建按鈕元件，進(jìn)入按鈕元件編輯區(qū)；2. “彈起”幀為空幀；3. “指針經(jīng)過”、“按下”這兩幀中分別插入關(guān)鍵幀，制作這兩個(gè)狀態(tài)下的圖形或影片剪輯；4. “點(diǎn)擊”幀為空幀。相關(guān)知識(shí)7.動(dòng)態(tài)

8、按鈕的制作動(dòng)態(tài)按鈕的制作 制作制作縮放的動(dòng)態(tài)縮放的動(dòng)態(tài)按鈕按鈕第一步：制作按鈕拉伸的形狀補(bǔ)間動(dòng)畫；第二步：制作隱形按鈕；第三步：添加腳本控制。相關(guān)知識(shí)7.動(dòng)態(tài)按鈕的制作動(dòng)態(tài)按鈕的制作 制作透明度變化的動(dòng)態(tài)按鈕制作透明度變化的動(dòng)態(tài)按鈕第一步：制作按鈕底圖；第二步：制作半透明方塊漸變動(dòng)畫；第三步：制作隱形按鈕；第四步：添加腳本控制。案例實(shí)現(xiàn)1.制作隱形按鈕中“指針經(jīng)過”狀態(tài)所需的影片剪輯。時(shí)間軸“背景”圖層鳳崗鎮(zhèn)圖形繪制“鳳崗剪輯”影片剪輯的時(shí)間軸案例實(shí)現(xiàn)2. 制作隱形按鈕按鈕和文本制作案例實(shí)現(xiàn)3.添加ActionScript腳本function fenggang(e:MouseEvent):vo

9、idgotoAndStop(fenggang);function gostart(e:MouseEvent):voidgotoAndStop(home);/此處繼續(xù)添加其余按鈕對應(yīng)的函數(shù)stop();fenggang_btn.addEventListener(MouseEvent.CLICK, fenggang);goback_btn.addEventListener(MouseEvent.CLICK, gostart);/此處繼續(xù)添加其余按鈕的偵聽器代碼案例拓展 制作以縮略圖方式展示圖片的交互動(dòng)畫，當(dāng)鼠標(biāo)經(jīng)過縮略圖的時(shí)候，底部出現(xiàn)不同顏色的橫條拉伸動(dòng)畫，當(dāng)鼠標(biāo)移開縮略圖，橫條收縮。任務(wù)2 影

10、片剪輯的控制案例效果 影片剪輯的控制方法； 通過按鈕控制實(shí)現(xiàn)影片剪輯的播放、暫停、上下左右的位置移動(dòng)。案例分析本案例的實(shí)現(xiàn)思路：首先制作一個(gè)由4張圖片循環(huán)播放的影片剪輯，為該影片剪輯設(shè)計(jì)遮罩效果；制作5個(gè)按鈕分別對應(yīng)上移、下移、左移、右移、播放控制功能；在腳本中對每一個(gè)按鈕添加偵聽器，負(fù)責(zé)偵聽鼠標(biāo)的單擊事件，為不同按鈕的單擊事件編寫函數(shù)，實(shí)現(xiàn)對影片剪輯的響應(yīng)控制。相關(guān)知識(shí)1. 影片剪輯的影片剪輯的理解理解 影片剪輯就是一個(gè)迷你型的Flash影片，它擁有自己的時(shí)間軸和舞臺(tái)，放在主影片里，就好像電視上的“畫中畫”效果，大畫面是主影片，小畫面是影片剪輯，相互獨(dú)立播放各自的節(jié)目。 影片剪輯還可以包含其

11、他的影片剪輯，稱為嵌套剪輯。相關(guān)知識(shí)2. 影片影片剪輯的實(shí)例名剪輯的實(shí)例名 實(shí)例名稱是影片剪輯在舞臺(tái)上的唯一標(biāo)識(shí)，使用ActionScript腳本控制影片剪輯之前，必須先為每一個(gè)放在舞臺(tái)上的影片剪輯命名，即實(shí)例名稱。另外，如果影片剪輯只是單純用于做動(dòng)畫，不涉及ActionScript對它的控制，就可以忽略實(shí)例名稱。相關(guān)知識(shí)3. 影片剪輯的屬性影片剪輯的屬性 影片剪輯的一些屬性可以通過屬性面板、信息面板等進(jìn)行設(shè)置，但通過這種方式設(shè)置的屬性必須在影片播放前完成，且在影片播放過程中不可改變。影片剪輯還有一些屬性是可以用ActionScript讀取甚至修改的。 案例實(shí)現(xiàn)1. 制作圖片展示影片剪輯元件。

12、pictures影片剪輯的時(shí)間軸案例實(shí)現(xiàn)2. 制作按鈕元件。stop按鈕彈起stop按鈕指針經(jīng)過stop按鈕的時(shí)間軸案例實(shí)現(xiàn)3. 制作主影片。主影片的時(shí)間軸案例拓展 制作光譜的控制動(dòng)畫?？梢酝ㄟ^左側(cè)兩個(gè)按鈕控制光譜的透明度，中間按鈕控制光譜的播放和暫停，右側(cè)兩個(gè)按鈕控制光譜的放大與縮小。任務(wù)3 滑桿控制物體的制作案例效果 滑桿控制人物行走速度的方法 滑片向下拖動(dòng)，人物的行走速度加快 滑片向上移動(dòng)，人物的行走速度減慢，直至為0案例分析本案例的實(shí)現(xiàn)思路：將人物、滑片制作成影片剪輯，在滑片影片剪輯實(shí)例上添加2個(gè)偵聽器，分別偵聽鼠標(biāo)在滑片上按下和松開的動(dòng)作。當(dāng)鼠標(biāo)按下事件發(fā)生時(shí)，調(diào)用對應(yīng)函數(shù)控制滑片只

13、能在垂直方向上下移動(dòng)一定的距離范圍；當(dāng)鼠標(biāo)釋放事件發(fā)生時(shí)，調(diào)用對應(yīng)函數(shù)控制滑片停止移動(dòng)。在主時(shí)間軸上添加偵聽器，用于偵聽ENTER_FRAME事件，當(dāng)進(jìn)入幀事件發(fā)生時(shí)，調(diào)用相應(yīng)函數(shù)根據(jù)滑片實(shí)例當(dāng)前的位置決定人物影片剪輯實(shí)例的移動(dòng)速度，并修改速度文本框的數(shù)值。相關(guān)知識(shí)1. 幀事件幀事件 幀事件（eventFrame）是指當(dāng)播放頭進(jìn)入到新幀的時(shí)候發(fā)生的事件。如果播放頭不移動(dòng)或者只有一幀，將會(huì)繼續(xù)以幀頻調(diào)度該事件。屬性屬性說明說明bubbles判斷事件是否為冒泡事件，默認(rèn)值為falsecancelable判斷默認(rèn)行為是否被取消，默認(rèn)值為false，表示沒有被取消currentTarget當(dāng)前正在使用

14、某個(gè)事件偵聽器處理Event對象的對象target具有為enterFrame事件注冊偵聽器的任何DisplayObject實(shí)例相關(guān)知識(shí)2. 鼠標(biāo)鼠標(biāo)拖動(dòng)技術(shù)拖動(dòng)技術(shù) 在ActionScript 3.0中，影片剪輯元件可以直接調(diào)用startDrag()函數(shù)實(shí)現(xiàn)鼠標(biāo)拖動(dòng)效果，調(diào)用stopDrag()函數(shù)停止鼠標(biāo)拖動(dòng)。相關(guān)知識(shí)3.動(dòng)態(tài)改變文本內(nèi)容與樣式動(dòng)態(tài)改變文本內(nèi)容與樣式 從Flash Professional CS5開始，增加了新文本引擎文本布局框架 (TLF)。TLF 支持更為豐富的文本布局功能和對文本屬性的精細(xì)控制，與以前的傳統(tǒng)文本相比，TLF對文本的控制功能更為強(qiáng)大。如果想要在FLA文件中使用TLF文本，需要在發(fā)布FLA文件時(shí)指定使用 Action