項目3-交互動畫的制作

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

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

3、Movie); 相關知識 3.函數(shù)函數(shù) 使用ActionScript編寫程序時，常常需要將某些 相對獨立的功能封裝起來，提供給程序在需要的 時候調(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ù)名后的小括號里填入?yún)?shù)；第二種情況，調(diào)用的 函數(shù)沒有

4、參數(shù)，直接寫好函數(shù)名，然后加上小括號，保持 小括號里為空。 相關知識 4. 添加事件添加事件 在ActionScript中事件的處理分為偵聽和響 應兩個步驟。偵聽的任務交給addEventListener() 方法，由它負責偵聽特定對象的特定事件，響應 的任務交給“事件處理器”函數(shù)，由它對事件的 發(fā)生做出響應。 function jump (e:MouseEvent):void /時間軸跳轉(zhuǎn)代碼 btn1.addEventListener(MouseEvent.CLICK, jump); 相關知識 5.常用時間軸控制命令常用時間軸控制命令 gotoAndPlay(場景,幀) 作用：跳轉(zhuǎn)并播放。

5、跳轉(zhuǎn)到指定場景的指定幀，并從該幀 開始播放，如果沒有指定場景，則將跳轉(zhuǎn)到當前場景的指 定幀。 gotoAndStop(場景,幀) 作用：跳轉(zhuǎn)并停止播放。跳轉(zhuǎn)到指定場中的指定幀，并從 該幀停止播放，如果沒有指定場景，則將跳轉(zhuǎn)到當前場景 的指定幀。 play() 作用：指定影片繼續(xù)播放。當某個影片在某一幀停止了， 想接著繼續(xù)播放，則可用play()語句實現(xiàn)。 stop() 作用：停止當前影片的播放。 立健亭 立健亭價格 立健亭批發(fā) 相關知識 5.常用時間軸控制命令常用時間軸控制命令 nextFrame() 作用：將播放頭轉(zhuǎn)到下一幀并停止，如果當前幀是最后一 幀，則播放頭不移動。 prevFrame

6、() 作用：將播放頭轉(zhuǎn)到前一幀并停止，如果當前幀是第1幀 ，則播放頭不移動。 nextScene() 作用：跳至下一場景并停止。 prevScene() 作用：跳至前一場景并停止。 相關知識 5.條件語句條件語句 （1）if語句語句 if語句是對條件表達式（如ab）進行判斷，根 據(jù)判斷結(jié)果執(zhí)行不同的程序分支。if語句有3種不同 的形式。 if(條件表達式) /語句 if(條件表達式) /語句 else /語句 if(條件表達式) /語句 else if(條件表達式) /語句 else /語句 相關知識 5.條件語句條件語句 （2）switch語句語句 switch語句是對變量（如字符串變量s或

7、整數(shù)變量i） 進行判斷，根據(jù)變量的不同取值執(zhí)行不同的程序分支。 switch(變量) case 值1: /語句1 break; case值2: /語句2 break; case值N: /語句N break; default: /語句N+1 相關知識 6.隱形按鈕的制作隱形按鈕的制作 隱形按鈕是指該按鈕在動畫中是隱蔽的、透明的， 表面上看到的是按鈕所覆蓋的下方圖像，但當鼠標經(jīng) 過或點擊按鈕時，依然可以有按鈕的狀態(tài)變化和功能。 方法一（沒有按鈕的狀態(tài)變化）： 1. 新建按鈕元件，進入按鈕元件編輯區(qū)； 2. “彈起”、“指針經(jīng)過”、“按下”三幀均為空幀； 3. “點擊”幀插入關鍵幀，繪制出響應區(qū)域。

8、 方法二（有按鈕的狀態(tài)變化）： 1. 新建按鈕元件，進入按鈕元件編輯區(qū)； 2. “彈起”幀為空幀； 3. “指針經(jīng)過”、“按下”這兩幀中分別插入關鍵幀，制作這兩個狀 態(tài)下的圖形或影片剪輯； 4. “點擊”幀為空幀。 相關知識 7.動態(tài)按鈕的制作動態(tài)按鈕的制作 制作縮放的動態(tài)按鈕制作縮放的動態(tài)按鈕 第一步：制作按鈕拉伸的形狀補間動畫； 第二步：制作隱形按鈕； 第三步：添加腳本控制。 相關知識 7.動態(tài)按鈕的制作動態(tài)按鈕的制作 制作透明度變化的動態(tài)按鈕制作透明度變化的動態(tài)按鈕 第一步：制作按鈕底圖； 第二步：制作半透明方塊漸變動畫； 第三步：制作隱形按鈕； 第四步：添加腳本控制。 案例實現(xiàn) 1.制

9、作隱形按鈕中“指針經(jīng)過”狀態(tài)所需的影片剪輯。 時間軸“背景”圖層 鳳崗鎮(zhèn)圖形繪制 “鳳崗剪輯”影片剪輯的時間軸 案例實現(xiàn) 制作隱形按鈕 按鈕和文本制作 案例實現(xiàn) 3.添加ActionScript腳本 function fenggang(e:MouseEvent):void gotoAndStop(fenggang); function gostart(e:MouseEvent):void gotoAndStop(home); /此處繼續(xù)添加其余按鈕對應的函數(shù) stop(); fenggang_btn.addEventListener(MouseEvent.CLICK, fenggang); g

10、oback_btn.addEventListener(MouseEvent.CLICK, gostart); /此處繼續(xù)添加其余按鈕的偵聽器代碼 案例拓展 制作以縮略圖方式展示圖片的交互動畫，當鼠標經(jīng)過縮略 圖的時候，底部出現(xiàn)不同顏色的橫條拉伸動畫，當鼠標移開縮 略圖，橫條收縮。 任務2 影片剪輯的控制 案例效果 影片剪輯的控制方法； 通過按鈕控制實現(xiàn)影片剪輯的播放、暫停、上下 左右的位置移動。 案例分析 本案例的實現(xiàn)思路：首先制作一個由4張圖片 循環(huán)播放的影片剪輯，為該影片剪輯設計遮罩 效果；制作5個按鈕分別對應上移、下移、左 移、右移、播放控制功能；在腳本中對每一個 按鈕添加偵聽器，負責偵

11、聽鼠標的單擊事件， 為不同按鈕的單擊事件編寫函數(shù)，實現(xiàn)對影片 剪輯的響應控制。 相關知識 影片剪輯的理解影片剪輯的理解 影片剪輯就是一個迷你型的Flash影片，它 擁有自己的時間軸和舞臺，放在主影片里， 就好像電視上的“畫中畫”效果，大畫面是 主影片，小畫面是影片剪輯，相互獨立播放 各自的節(jié)目。 影片剪輯還可以包含其他的影 片剪輯，稱為嵌套剪輯。 相關知識 2. 影片剪輯的實例名影片剪輯的實例名 實例名稱是影片剪輯在舞臺上的唯一標識， 使用ActionScript腳本控制影片剪輯之前，必 須先為每一個放在舞臺上的影片剪輯命名， 即實例名稱。另外，如果影片剪輯只是單純 用于做動畫，不涉及Acti

12、onScript對它的控制， 就可以忽略實例名稱。 相關知識 3. 影片剪輯的屬性影片剪輯的屬性 影片剪輯的一些屬性可以通過屬性面板、信 息面板等進行設置，但通過這種方式設置的屬性 必須在影片播放前完成，且在影片播放過程中不 可改變。影片剪輯還有一些屬性是可以用 ActionScript讀取甚至修改的。 案例實現(xiàn) 1. 制作圖片展示影片剪輯元件。 pictures影片剪輯的時間軸 案例實現(xiàn) 2. 制作按鈕元件。 stop按鈕彈起stop按鈕指針經(jīng)過 stop按鈕的時間軸 案例實現(xiàn) 3. 制作主影片。 主影片的時間軸 案例拓展 制作光譜的控制動畫?？梢酝ㄟ^左側(cè)兩個按鈕控制光譜的 透明度，中間按鈕

13、控制光譜的播放和暫停，右側(cè)兩個按鈕控制 光譜的放大與縮小。 任務3 滑桿控制物體的制作 案例效果 滑桿控制人物行走速度的方法 滑片向下拖動，人物的行走速度加快 滑片向上移動，人物的行走速度減慢，直至為0 案例分析 本案例的實現(xiàn)思路：將人物、滑片制作成影片 剪輯，在滑片影片剪輯實例上添加2個偵聽器 ，分別偵聽鼠標在滑片上按下和松開的動作。 當鼠標按下事件發(fā)生時，調(diào)用對應函數(shù)控制滑 片只能在垂直方向上下移動一定的距離范圍； 當鼠標釋放事件發(fā)生時，調(diào)用對應函數(shù)控制滑 片停止移動。在主時間軸上添加偵聽器，用于 偵聽ENTER_FRAME事件，當進入幀事件發(fā)生 時，調(diào)用相應函數(shù)根據(jù)滑片實例當前的位置決

14、定人物影片剪輯實例的移動速度，并修改速度 文本框的數(shù)值。 相關知識 幀事件幀事件 幀事件（eventFrame）是指當播放頭進入到新幀的時 候發(fā)生的事件。如果播放頭不移動或者只有一幀，將 會繼續(xù)以幀頻調(diào)度該事件。 相關知識 2. 鼠標拖動技術鼠標拖動技術 在ActionScript 3.0中，影片剪輯元件可以直 接調(diào)用startDrag()函數(shù)實現(xiàn)鼠標拖動效果，調(diào) 用stopDrag()函數(shù)停止鼠標拖動。 相關知識 3.動態(tài)改變文本內(nèi)容與樣式動態(tài)改變文本內(nèi)容與樣式 從Flash Professional CS5開始，增加了新文 本引擎文本布局框架 (TLF)。TLF 支持更為豐 富的文本布局功能和對文本屬性的精細控制，與 以前的傳統(tǒng)文本相比，TLF對文本的控制功能更 為強大。如果想要在FLA文件中使用TLF文本， 需要在發(fā)布FLA文件時指定使用 ActionScript 3.