1

Computer Animationwith 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

Chapter 22

Interactivity

Computer Animationwith Flash CS3 & ActionScript 3.0

3

Interactivity

• Event basics

• Mouse events

• Keyboard events

4

Event Basics (1)

• To add an event to an event target:

eventTarget.addEventListener(type:String, listener:Function);

E.g.:

var ball:mvBall = new mvBall();

ball.addEventListener(MouseEvent.MOUSE_CLICK,

onClickEvent);

function onClickEvent(e:MouseEvent):void{

trace(“ball is hit”);

}

• Note: addEventListener is from EventDispatcher which DisplayObject inherits from.

5

Event Basics (2)

• To remove the event from an event target:eventTarget.removeEventListener( type:String, listener:Function);

E.g.:var ball:mvBall = new mvBall();ball.addEventListener(MouseEvent.MOUSE_CLICK,

onClickEvent);function onClickEvent(e:MouseEvent):void{

trace(“ball is hit”);}ball.removeEventListener(MouseEvent.MOUSE_CLICK,

onClickEvent);

Note: The types and the listeners function MUST be the same.

6

Mouse events (1)

• Mouse-Input events

– Device: mouse, trackball, a laptop touchpad, a laptop pointing stick, and a stylus.

– Event Class: MouseEvent.

• MouseEvents class

– MOUSE_DOWN - ROLL_OVER– MOUSE_UP - ROLL_OUT– MOUSE_CLICK - MOUSE_OUT– DOUBLE_CLICK - MOUSE_MOVE– MOUSE_OVER - MOUSE_WHEEL

7

Mouse events (2)

• MOUSE_DOWN: Happened when pressing left mouse button down

• MOUSE_UP : Happened when pressing release mouse button

• MOUSE_CLICK: Happened after pressing mouse down and release.

• DOUBLE_CLICK: Happened after double click

• ROLL_OVER: Happened only ONCE when rolling mouse over a target

• ROLL_OUT: Happened only ONCE when rolling mouse over a target

• MOUSE_MOVE: Happened every time whenever moving mouse over a target

• MOUSE_OVER: Similar to ROLL_OVER.

• MOUSE_OUT: Similar to ROLL_OUT.

• MOUSE_WHEEL: Happened when scrolling mouse wheel up or down over a target.

8

Keyboard Events (1)

• Event class: KeyboardEvent.

• KeyboardEvent class:

– KEY_DOWN: Happened when pressing a key down.– KEY_UP: Happened when releasing up a key.

• E.g.:

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage);

function keyDownOnStage(e:KeyboardEvent):void{trace(“Any key is hit”);

}Note: Because some keys are short-cut in Flash Pro CS3,

please run SWF file in Flash players and try to type keys again.

9

Keyboard Events (2)

• To specify a key, using keyCode from KeyboardEvent. E.g.:

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage);

function keyDownOnStage(ke:KeyboardEvent):void{if(ke.keyCode == 32){

trace(“Spacebar key is hit”);}

}

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().

10

Keyboard Events (3)

To set Key Code:

1. Using KeyboardEvent class.

• altKey: Boolean• ctrlKey: Boolean• shiftKey: Boolean

2. Using Keyboard class.

• capsLock: Boolean• numLock: Boolean• BACKSPACE• CONTROL• F1 -> F15• RIGHT, LEFT, UP,

DOWN etc.

3. Setting them manually:

Some keys like 1...9 or a ... Z don’t have defined key codes.

So we have to set them by ourselves.

final var KEY_1:uint = 49;

final var KEY_A:uint = 65;

final var KEY_a:uint = 97;

Note: if you don’t know which number is a key, please use trace(e.keyCode);

11

Keyboard Events (4)

Example:

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownOnStage);

function keyDownOnStage(e:KeyboardEvent):void{

trace(e.keyCode); // To see key code

if(e.keyCode == Keyboard.LEFT){ trace("Left");

}if(e.keyCode == Keyboard.RIGHT){

trace("Right");}

}