Flash AS 教程:交互動畫
2020-07-17 13:19:33
供稿：網友
交互動畫
最后介紹一下交互動畫，這也許是大家讀這本書的主要原因。如果不使用交互運動，那么只使用補間動畫不就行了。在前面一章簡單地提到過，用戶交互動畫基于用戶事件，總的來說可以歸結為鼠標事件和鍵盤事件，下面就來學習不同的用戶事件及其處理函數。
鼠標事件
AS 3 中鼠標事件發生了顯著的變化。在 AS 2 中，影片剪輯會自動添加鼠標偵聽器。現在，要手動地為對象添加偵聽器。在 AS 3 中鼠標指針經過顯示對象時才能觸發鼠標事件。在 AS 2 中，無論鼠標指針在哪里，只要執行 mouseDown 或 mouseMove 就會觸發所有的影片剪輯。而現在， mouseUp 和 mouseDown 事件與 AS 2 中的 onPress 和 onRelase 等同。鼠標事件的名稱是定義好的字符串，像我們之前所提到的，最好使用 MouseEvent 類的屬性，以避免輸入錯誤，下面是 MouseEvent 類中所有可用的鼠標事件屬性：
CLICK
DOUBLE_CLICK
MOUSE_DOWN
MOUSE_MOVE
MOUSE_OUT
MOUSE_OVER
MOUSE_UP
MOUSE_WHEEL
ROLL_OUT
ROLL_OVER
創建下面這個類，來測試一下，這個類會輸出發生在 Sprite 影片上的鼠標事件名稱。
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
public class MouseEvents extends Sprite {
public function MouseEvents() {
init();
}
private function init():void {
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.graphics.beginFill(0xff0000);
sprite.graphics.drawCircle(0, 0, 50);
sprite.graphics.endFill();
sprite.x = stage.stageWidth / 2;
sprite.y = stage.stageHeight / 2;
sprite.addEventListener(MouseEvent.CLICK, onMouseEvent);
sprite.addEventListener(MouseEvent.DOUBLE_CLICK,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_DOWN,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_MOVE,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_OUT,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_OVER,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_UP,onMouseEvent);
sprite.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseEvent);
sprite.addEventListener(MouseEvent.ROLL_OUT,onMouseEvent);
sprite.addEventListener(MouseEvent.ROLL_OVER,onMouseEvent);
}
public function onMouseEvent(event:MouseEvent):void {
trace(event.type);
}
}
}
請注意，每個事件類型都使用了同一個處理函數，輸出所觸發的事件類型的名稱。
鼠標位置
除了鼠標事件外，對于文檔類還有兩個非常重要屬性用于表示鼠標當前的位置：mouseX 和 mouseY。請注意，影片剪輯的位置，返回的值是鼠標的位置與影片剪輯的注冊點的相對位置。例如，有一個名為 sprite 的 Sprite 影片，在舞臺的 100,100 位置，而鼠標的位置在 150,250，你會得到如下結果：
mouseX 為 150
mousey 為 250
sprite.mouseX 為 50
sprite.mouseY 為 150
請注意鼠標位置與影片位置的相對關系。
鍵盤事件
鍵盤事件已被 AS 3 劃分到另一個區域中。例如，在 AS 2 中，影片剪輯會自動偵聽鍵盤事件，但只在某種情況下才接收這些事件。所以，最好增加一個專門用來做偵聽器的影片剪輯，有時，影片剪輯接收了多個事件但被看作是一個鍵盤事件，這樣就不對了。在 AS 2 的組成框架中，很大部一部分都是為鍵盤交互服務的，比如 Flash Player 體系中的：tab(table)管理，焦點(focus)管理及在文本框中對于 Enter 鍵與 Table 鍵的處理等。現在好了，鍵盤事件的名稱與鼠標事件的相似，都是定義好的字符串，也可為 KeyboardEvent 類的屬性。只有兩種：
KEY_DOWN
KEY_UP
我們可以在一個特殊的對象上偵聽鍵盤事件，就像上面那個鼠標偵聽的例子一樣。為了實現這個功能，我們需要設置對象的焦點，以便能夠捕獲這些事件，可以這樣寫：
stage.focus = sprite;
在很多情況下，偵聽鍵盤事件是否有焦點很有意義，實現它只需直接對舞臺進行鍵盤偵聽。下面看一個示例：
package {
import flash.display.Sprite;
import flash.events.KeyboardEvent;
public class KeyboardEvents extends Sprite {
public function KeyboardEvents() {
init();
}
private function init():void {
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyboardEvent);
stage.addEventListener(KeyboardEvent.KEY_UP,onKeyboardEvent);
}
public function onKeyboardEvent(event:KeyboardEvent):void {
trace(event.type);
}
}
}
鍵碼
通常人們并不關心一個鍵是否被按下，而是關心按下的是什么鍵。使用鍵盤事件處理有幾種方法可以讀取輸入的信息。前面說到，一個事件處理程序可以由一個事件對象來觸發，該對象包括觸發這個事件的數據。在鍵盤事件中有兩個相關的屬性，事件所涉及的鍵：字符碼(charCode)和鍵碼(keyCode)。
字符碼指按下的鍵所表示的真正字符。例如，用戶按下”a”鍵，字符碼就是”a”，如果用戶同時又按著 shift 鍵，這樣字符碼就是”A”。
鍵碼指按鍵所代表的數值。如果用戶按下”a”鍵，它所對應的鍵碼為 65，無論是否按著其它鍵。如果先按下Shift鍵后按下“a”鍵，那么會獲得兩個鍵盤事件，先是Shift(鍵碼 16)后是 a(鍵碼 65)。 Flash.ui.Keyboard 類同樣也有一些屬性是針對非字母鍵的，我們不需要把它們背下來。例如： Keyboard.SHIFT 等于16，當 Shift 鍵按下后，可以測試其是否等于 Keyboard.SHIFT。請本章的最后一段代碼：
package {
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class KeyCodes extends Sprite {
private var ball:Sprite;
public function KeyCodes() {
init();
}
private function init():void {
ball = new Sprite();
addChild(ball);
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0, 0, 40);
ball.graphics.endFill();
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight / 2;
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyboardEvent);
}
public function onKeyboardEvent(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.UP :
ball.y -= 10;
break;
case Keyboard.DOWN :
ball.y = 10;
break;
case Keyboard.LEFT :
ball.x -= 10;
break;
case Keyboard.RIGHT :
ball.x = 10;
break;
default :
break;
}
}
}
}
當我們在 Flash 編輯環境下測試影片時，IDE會攔截用于控制 IDE 自身的鍵。Tab 鍵和所有功能鍵以及作為快捷菜單項的鍵，在測試影片時不會接收到。不過，我們可以在菜單中選擇“控制” -> “禁用快捷鍵”，來解除限制。這樣一來，測試的影片就像在瀏覽器中工作一樣了。
