交互動畫 最后介紹一下交互動畫,這也許是大家讀這本書的主要原因。如果不使用交互運(yùn)動,那么只使用補(bǔ)間動畫不就行了。在前面一章簡單地提到過,用戶交互動畫基于用戶事件,總的來說可以歸結(jié)為鼠標(biāo)事件和鍵盤事件,下面就來學(xué)習(xí)不同的用戶事件及其處理函數(shù)。 鼠標(biāo)事件
最后介紹一下交互動畫,這也許是大家讀這本書的主要原因。如果不使用交互運(yùn)動,那么只使用補(bǔ)間動畫不就行了。在前面一章簡單地提到過,用戶交互動畫基于用戶事件,總的來說可以歸結(jié)為鼠標(biāo)事件和鍵盤事件,下面就來學(xué)習(xí)不同的用戶事件及其處理函數(shù)。 鼠標(biāo)事件 AS 3 中鼠標(biāo)事件發(fā)生了顯著的變化。在 AS 2 中,影片剪輯會自動添加鼠標(biāo)偵聽器?,F(xiàn)在,要手動地為對象添加偵聽器。在 AS 3 中鼠標(biāo)指針經(jīng)過顯示對象時(shí)才能觸發(fā)鼠標(biāo)事件。在 AS 2 中,無論鼠標(biāo)指針在哪里,只要執(zhí)行 mouseDown 或 mouseMove 就會觸發(fā)所有的影片剪輯。而現(xiàn)在, mouseUp 和 mouseDown 事件與 AS 2 中的 onPress 和 onRelase 等同。鼠標(biāo)事件的名稱是定義好的字符串,像我們之前所提到的,最好使用 MouseEvent 類的屬性,以避免輸入錯(cuò)誤,下面是 MouseEvent 類中所有可用的鼠標(biāo)事件屬性: CLICK DOUBLE_CLICK MOUSE_DOWN MOUSE_MOVE MOUSE_OUT MOUSE_OVER MOUSE_UP MOUSE_WHEEL ROLL_OUT ROLL_OVER 創(chuàng)建下面這個(gè)類,來測試一下,這個(gè)類會輸出發(fā)生在 Sprite 影片上的鼠標(biāo)事件名稱。 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); } } } 請注意,每個(gè)事件類型都使用了同一個(gè)處理函數(shù),輸出所觸發(fā)的事件類型的名稱。 鼠標(biāo)位置 除了鼠標(biāo)事件外,對于文檔類還有兩個(gè)非常重要屬性用于表示鼠標(biāo)當(dāng)前的位置:mouseX 和 mouseY。請注意,影片剪輯的位置,返回的值是鼠標(biāo)的位置與影片剪輯的注冊點(diǎn)的相對位置。例如,有一個(gè)名為 sprite 的 Sprite 影片,在舞臺的 100,100 位置,而鼠標(biāo)的位置在 150,250,你會得到如下結(jié)果: mouseX 為 150 mousey 為 250 sprite.mouseX 為 50 sprite.mouseY 為 150 請注意鼠標(biāo)位置與影片位置的相對關(guān)系。 鍵盤事件 鍵盤事件已被 AS 3 劃分到另一個(gè)區(qū)域中。例如,在 AS 2 中,影片剪輯會自動偵聽鍵盤事件,但只在某種情況下才接收這些事件。所以,最好增加一個(gè)專門用來做偵聽器的影片剪輯,有時(shí),影片剪輯接收了多個(gè)事件但被看作是一個(gè)鍵盤事件,這樣就不對了。在 AS 2 的組成框架中,很大部一部分都是為鍵盤交互服務(wù)的,比如 Flash Player 體系中的:tab(table)管理,焦點(diǎn)(focus)管理及在文本框中對于 Enter 鍵與 Table 鍵的處理等?,F(xiàn)在好了,鍵盤事件的名稱與鼠標(biāo)事件的相似,都是定義好的字符串,也可為 KeyboardEvent 類的屬性。只有兩種: KEY_DOWN KEY_UP 我們可以在一個(gè)特殊的對象上偵聽鍵盤事件,就像上面那個(gè)鼠標(biāo)偵聽的例子一樣。為了實(shí)現(xiàn)這個(gè)功能,我們需要設(shè)置對象的焦點(diǎn),以便能夠捕獲這些事件,可以這樣寫: stage.focus = sprite; 在很多情況下,偵聽鍵盤事件是否有焦點(diǎn)很有意義,實(shí)現(xiàn)它只需直接對舞臺進(jìn)行鍵盤偵聽。下面看一個(gè)示例: 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); } } } 鍵碼 通常人們并不關(guān)心一個(gè)鍵是否被按下,而是關(guān)心按下的是什么鍵。使用鍵盤事件處理有幾種方法可以讀取輸入的信息。前面說到,一個(gè)事件處理程序可以由一個(gè)事件對象來觸發(fā),該對象包括觸發(fā)這個(gè)事件的數(shù)據(jù)。在鍵盤事件中有兩個(gè)相關(guān)的屬性,事件所涉及的鍵:字符碼(charCode)和鍵碼(keyCode)。 字符碼指按下的鍵所表示的真正字符。例如,用戶按下”a”鍵,字符碼就是”a”,如果用戶同時(shí)又按著 shift 鍵,這樣字符碼就是”A”。 鍵碼指按鍵所代表的數(shù)值。如果用戶按下”a”鍵,它所對應(yīng)的鍵碼為 65,無論是否按著其它鍵。如果先按下Shift鍵后按下“a”鍵,那么會獲得兩個(gè)鍵盤事件,先是Shift(鍵碼 16)后是 a(鍵碼 65)。 Flash.ui.Keyboard 類同樣也有一些屬性是針對非字母鍵的,我們不需要把它們背下來。例如: Keyboard.SHIFT 等于16,當(dāng) 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; } } } } 當(dāng)我們在 Flash 編輯環(huán)境下測試影片時(shí),IDE會攔截用于控制 IDE 自身的鍵。Tab 鍵和所有功能鍵以及作為快捷菜單項(xiàng)的鍵,在測試影片時(shí)不會接收到。不過,我們可以在菜單中選擇“控制” -> “禁用快捷鍵”,來解除限制。這樣一來,測試的影片就像在瀏覽器中工作一樣了。 |
|