Actionscript 3 - Session 6 Interactivity


Published on

Actionscript 3 - Session 6 Interactivity
Taught by Oum Saokosal, Head of Information Technology, National Polytechnic Institute of Cambodia

Published in: Education, Travel
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Actionscript 3 - Session 6 Interactivity

  1. 1. Computer Animation with Flash CS3 & ActionScript 3.0 National Polytechnic Institute of Cambodia Bachelor of IT, Year III, Semester 1 2007-2008 by Oum Saokosal, Head of IT Department
  2. 2. Chapter 22 Interactivity Computer Animation with Flash CS3 & ActionScript 3.0
  3. 3. Interactivity <ul><li>Event basics </li></ul><ul><li>Mouse events </li></ul><ul><li>Keyboard events </li></ul>
  4. 4. Event Basics (1) <ul><li>To add an event to an event target: </li></ul><ul><ul><li>eventTarget . addEventListener (type:String, listener:Function); </li></ul></ul><ul><li>E.g.: </li></ul><ul><ul><li>var ball:mvBall = new mvBall(); </li></ul></ul><ul><ul><li>ball.addEventListener(MouseEvent.MOUSE_CLICK, </li></ul></ul><ul><ul><li>onClickEvent); </li></ul></ul><ul><ul><li>function onClickEvent(e:MouseEvent):void{ </li></ul></ul><ul><ul><li>trace(“ball is hit”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Note: addEventListener is from EventDispatcher which DisplayObject inherits from. </li></ul>
  5. 5. Event Basics (2) <ul><li>To remove the event from an event target: eventTarget . removeEventListener ( type:String, listener:Function); </li></ul><ul><li>E.g.: </li></ul><ul><ul><li>var ball:mvBall = new mvBall(); </li></ul></ul><ul><ul><li>ball.addEventListener( MouseEvent.MOUSE_CLICK , </li></ul></ul><ul><ul><li>onClickEvent ); </li></ul></ul><ul><ul><li>function onClickEvent(e:MouseEvent):void{ </li></ul></ul><ul><ul><li>trace(“ball is hit”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>ball. removeEventListener ( MouseEvent.MOUSE_CLICK , </li></ul></ul><ul><ul><li>onClickEvent ); </li></ul></ul><ul><li>Note: The types and the listeners function MUST be the same. </li></ul>
  6. 6. Mouse events (1) <ul><li>Mouse-Input events </li></ul><ul><ul><li>Device: mouse, trackball, a laptop touchpad, a laptop pointing stick, and a stylus. </li></ul></ul><ul><ul><li>Event Class: MouseEvent . </li></ul></ul><ul><li>MouseEvents class </li></ul><ul><ul><li>MOUSE_DOWN - ROLL_OVER </li></ul></ul><ul><ul><li>MOUSE_UP - ROLL_OUT </li></ul></ul><ul><ul><li>MOUSE_CLICK - MOUSE_OUT </li></ul></ul><ul><ul><li>DOUBLE_CLICK - MOUSE_MOVE </li></ul></ul><ul><ul><li>MOUSE_OVER - MOUSE_WHEEL </li></ul></ul>
  7. 7. Mouse events (2) <ul><li>MOUSE_DOWN: Happened when pressing left mouse button down </li></ul><ul><li>MOUSE_UP : Happened when pressing release mouse button </li></ul><ul><li>MOUSE_CLICK: Happened after pressing mouse down and release. </li></ul><ul><li>DOUBLE_CLICK: Happened after double click </li></ul><ul><li>ROLL_OVER: Happened only ONCE when rolling mouse over a target </li></ul><ul><li>ROLL_OUT: Happened only ONCE when rolling mouse over a target </li></ul><ul><li>MOUSE_MOVE: Happened every time whenever moving mouse over a target </li></ul><ul><li>MOUSE_OVER: Similar to ROLL_OVER. </li></ul><ul><li>MOUSE_OUT: Similar to ROLL_OUT. </li></ul><ul><li>MOUSE_WHEEL: Happened when scrolling mouse wheel up or down over a target. </li></ul>
  8. 8. Keyboard Events (1) <ul><li>Event class: KeyboardEvent . </li></ul><ul><li>KeyboardEvent class: </li></ul><ul><ul><li>KEY_DOWN: Happened when pressing a key down. </li></ul></ul><ul><ul><li>KEY_UP: Happened when releasing up a key. </li></ul></ul><ul><li>E.g.: </li></ul><ul><ul><li>stage.addEventListener( KeyboardEvent.KEY_DOWN , keyDownOnStage); </li></ul></ul><ul><ul><li>function keyDownOnStage( e:KeyboardEvent ):void{ </li></ul></ul><ul><ul><li>trace(“Any key is hit”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Note: Because some keys are short-cut in Flash Pro CS3, please run SWF file in Flash players and try to type keys again. </li></ul>
  9. 9. Keyboard Events (2) <ul><li>To specify a key, using keyCode from KeyboardEvent . E.g.: </li></ul><ul><ul><li>stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage); </li></ul></ul><ul><ul><li>function keyDownOnStage( ke:KeyboardEvent ):void{ </li></ul></ul><ul><ul><li>if( ke.keyCode == 32){ </li></ul></ul><ul><ul><li> trace(“Spacebar key is hit”); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Note: trace() can use only in Flash Professional, not in Flash Players. So some key like Enter, Escape etc. shouldn’t be tested with trace() . </li></ul>
  10. 10. Keyboard Events (3) <ul><li>To set Key Code: </li></ul><ul><li>Using KeyboardEvent class. </li></ul><ul><ul><li>altKey: Boolean </li></ul></ul><ul><ul><li>ctrlKey: Boolean </li></ul></ul><ul><ul><li>shiftKey: Boolean </li></ul></ul><ul><li>Using Keyboard class. </li></ul><ul><ul><li>capsLock: Boolean </li></ul></ul><ul><ul><li>numLock: Boolean </li></ul></ul><ul><ul><li>BACKSPACE </li></ul></ul><ul><ul><li>CONTROL </li></ul></ul><ul><ul><li>F1 -> F15 </li></ul></ul><ul><ul><li>RIGHT, LEFT, UP, DOWN etc. </li></ul></ul><ul><li>Setting them manually: </li></ul><ul><li>Some keys like 1...9 or a ... Z don’t have defined key codes. </li></ul><ul><li>So we have to set them by ourselves. </li></ul><ul><li>final var KEY_1:uint = 49; </li></ul><ul><li>final var KEY_A:uint = 65; </li></ul><ul><li>final var KEY_a:uint = 97; </li></ul><ul><li>Note: if you don’t know which number is a key, please use trace(e.keyCode); </li></ul>
  11. 11. Keyboard Events (4) <ul><li>Example: </li></ul><ul><ul><li>stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage); </li></ul></ul><ul><ul><li>function keyDownOnStage(e:KeyboardEvent):void{ </li></ul></ul><ul><ul><li>trace(e.keyCode); // To see key code </li></ul></ul><ul><ul><li>if(e.keyCode == Keyboard.LEFT){ </li></ul></ul><ul><ul><li> trace(&quot;Left&quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>if(e.keyCode == Keyboard.RIGHT){ </li></ul></ul><ul><ul><li> trace(&quot;Right&quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul>