項目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)單擊按鈕跳轉到對應的幀。相關知識1. 使用使用ActionScript 3.0

2、實現(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, playMovie);相關知識3.函數(shù)函數(shù) 使用ActionSc

3、ript編寫程序時，常常需要將某些相對獨立的功能封裝起來，提供給程序在需要的時候調(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ù)沒有參數(shù)，直接寫好函數(shù)名，然后加上小括號，保持小括號里為空。相關知識4. 添加

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

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

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

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

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

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

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

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

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

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

14、某個事件偵聽器處理Event對象的對象target具有為enterFrame事件注冊偵聽器的任何DisplayObject實例相關知識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文件時指定使用 Action