1. Events (Listeners/Handlers: Mouse, keyboard, timer) Flash ActionScript 3.0 Introduction to Thomas Lövgren, Flash developer thomas.lovgren@humlab.umu.se

2. Event and common tasks Why events? And why is it so important? Why events? And why is it so important? The answer is simple: We can’t have an interactive application without detecting user inputs! We need events for many different tasks, here’s a few examples: We need events for many different tasks, here’s a few examples: Buttons: Press, release, rollOver, rollOut etc Buttons: Press, release, rollOver, rollOut etc Keyboard: Keypress, keyRelease etc Keyboard: Keypress, keyRelease etc TextInput: Change, TextInput, Enter TextInput: Change, TextInput, Enter Timer: Start and stop timer events Timer: Start and stop timer events Loading data (Event complete) Loading data (Event complete) Animations (Frame Event) Animations (Frame Event)

3. Event handling For Event Handling in AS3, there are tree important steps we want to identify: For Event Handling in AS3, there are tree important steps we want to identify: 1. The event source: Which object is the event is going to happen to? For instance, which button will be clicked etc 1. The event source: Which object is the event is going to happen to? For instance, which button will be clicked etc 2. The event: What’s going to happen, the thing that we want to respond to? 2. The event: What’s going to happen, the thing that we want to respond to? 3. The response: What step(s) should be performed when the event happens?

4. EventDispatcher The EventDispatcher class is the base class for all classes that dispatch events The EventDispatcher class is the base class for all classes that dispatch events Event Dispatchers are objects that dispatch events to objects that are registered as listeners Event Dispatchers are objects that dispatch events to objects that are registered as listeners An event system consists of 3 main entities: Event Dispatchers, Listeners, and Event Objects An event system consists of 3 main entities: Event Dispatchers, Listeners, and Event Objects EventDispatcher class methods EventDispatcher class methods addEventListener(); addEventListener(); removeEventListener(); removeEventListener(); dispatchEvent(); dispatchEvent(); hasEventListener(); hasEventListener(); willTrigger(); willTrigger();

5. Event Objects Let's recall that when an event happens, Flash will create an object that will be sent to the registered function Let's recall that when an event happens, Flash will create an object that will be sent to the registered function This object contains at least the following information: This object contains at least the following information: Type : A string indicating the type of event Type : A string indicating the type of event Target : The instance that sent the event (i.e. a reference to it) Since target refers to an object you then can also extract information about the target, e.g. its label (if it has one) Target : The instance that sent the event (i.e. a reference to it) Since target refers to an object you then can also extract information about the target, e.g. its label (if it has one)  To get this working properly we need to set up our Listener and Handler/Function…

6. Event Listener and Handler For each event (user action or something else), we need to register a an event listener and an event handler/function For each event (user action or something else), we need to register a an event listener and an event handler/function Let’s look at the basic syntax of this: Let’s look at the basic syntax of this: //add eventlistener to object, specify the event, call the function eventTarget.addEventListener(EventClass.EVENT_NAME, eventHandler); //the event handler/function function eventHandler(eventObject:EventType){ //actions performed in response to the event go here }

7. MouseEvent The MouseEvent class is useful for activities like: Mouse clicks, mouse navigation, drag and drop, roll over/roll out, drawing by mouse etc The MouseEvent class is useful for activities like: Mouse clicks, mouse navigation, drag and drop, roll over/roll out, drawing by mouse etc In this example we use an event called CLICK for detection of a mouse click In this example we use an event called CLICK for detection of a mouse click //add eventlistener to object, specify the event, call the function my_button.addEventListener(MouseEvent.CLICK, clickHandler); //handler/function that proceeds the action function clickHandler(event:MouseEvent){ trace(”Button click: Testing Listener and Handler!”); } Note! The argument in the handler/function contains information about the event Note! The argument in the handler/function contains information about the event

8. Event Listener Parameters The addEventListener() method can have 5 parameters, the first two are compulsory: The addEventListener() method can have 5 parameters, the first two are compulsory: //params: eventName, function, capturePhase, priority, useWeakReference eventTarget.addEventListener(EventClass.EVENT_NAME, eventHandler, false, 0, true); eventName: EventClass and Name of event ( compulsory) eventName: EventClass and Name of event ( compulsory) function: Function/event handler call ( compulsory) function: Function/event handler call ( compulsory) useCapture (boolean): When this parameter is set to true, we'll listen to the event in the capture phase. By default this parameter is set to false useCapture (boolean): When this parameter is set to true, we'll listen to the event in the capture phase. By default this parameter is set to false priority (int): This is to make sure that a certain event listener has a higher priority than a different event listener priority (int): This is to make sure that a certain event listener has a higher priority than a different event listener useWeakReference (boolean): When this parameter is set to true it will create a weak link between the object and event listener. A weak reference is not counted by the Garbage Collector (reference will be removed next GC sweep). Recommended that we use true useWeakReference (boolean): When this parameter is set to true it will create a weak link between the object and event listener. A weak reference is not counted by the Garbage Collector (reference will be removed next GC sweep). Recommended that we use true

9. KeyboardEvent The KeyboardEvent class is useful for activities like: Keyboard navigation, keyPress, tabbing etc The KeyboardEvent class is useful for activities like: Keyboard navigation, keyPress, tabbing etc In this example we use the an event called KEY_DOWN for detection of a keyPress In this example we use the an event called KEY_DOWN for detection of a keyPress //add eventlistener to object, specify the event, call the function stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler); //handler/function that proceeds the action function keyDownHandler(event:KeyboardEvent){ trace("You just pressed a key!"); trace("You just pressed a key!");}

10. Common Events Some of the most common events for Mouse and Keyboard (with a migration guide between AS2 and AS3): Some of the most common events for Mouse and Keyboard (with a migration guide between AS2 and AS3):

11. removeEventListener It’s a good idea to remove listeners that we know will no longer be needed. This could easily be done by the removeEventListener method It’s a good idea to remove listeners that we know will no longer be needed. This could easily be done by the removeEventListener method The removeEventListener method requires two parameters: The event and the function specified when the listener was created The removeEventListener method requires two parameters: The event and the function specified when the listener was created For example like this: For example like this: //remove the listener from button my_button.removeEventListener(MouseEvent.CLICK, clickHandler);

12. Event Arguments (Multiple Events, One Listener Function) Every handler function has one argument: The event argument. This argument contains data about the event and the event dispatcher Every handler function has one argument: The event argument. This argument contains data about the event and the event dispatcher The most common event arguments are: type, target & currentTarget The most common event arguments are: type, target & currentTarget In this example we can use event.type to catch the mouse events In this example we can use event.type to catch the mouse events //add listener to stage for mouse event stage.addEventListener(MouseEvent.MOUSE_DOWN, handler); stage.addEventListener(MouseEvent.MOUSE_UP, handler); //event function/handler function handler(event:MouseEvent){ if(event.type == "mouseDown"){ if(event.type == "mouseDown"){ trace("Down"); trace("Down"); }else{ }else{ trace("Up"); trace("Up"); }}

13. TextEvent Let’s look at an example were we use the TextEvent class for detecting typing in a text field: entry_txt is an input text field, and output_txt is a dynamic text field Let’s look at an example were we use the TextEvent class for detecting typing in a text field: entry_txt is an input text field, and output_txt is a dynamic text field //add listerner to the input textfield entry_txt.addEventListener(TextEvent.TEXT_INPUT, updateOutput); //function that picks out the pressed keys function updateOutput(event:TextEvent):void{ var pressedKey:String = event.text; var pressedKey:String = event.text; output_txt.text = "You typed: " + pressedKey; output_txt.text = "You typed: " + pressedKey;}

14. MouseEvent (Random number) This example generates a random number between 0-100 on every mouse click, the numbers will appear in a dynamic text field This example generates a random number between 0-100 on every mouse click, the numbers will appear in a dynamic text field //add eventlistener to object, specify the event, call the function rnd_button.addEventListener(MouseEvent.MOUSE_DOWN, randomNumber); //handler/function that proceeds the action function randomNumber(event:MouseEvent){ rnd = Math.random() * 100; //generate a random number between 0-100 random_txt.text = String(rnd); //cast number to string, output }

15. Timer Event The Timer class is very useful if we want to fire an event within an interval (with a specific delay) The Timer class is very useful if we want to fire an event within an interval (with a specific delay) The Timer Object can have two parameters (delay, repeatCount) The Timer Object can have two parameters (delay, repeatCount) delay is compulsory The start method starts the timer (there’s also a stop method) The start method starts the timer (there’s also a stop method) //example of using the timer, delay and repeatCount var timer:Timer = new Timer(1000, 5); //1000 miliseconds = 1 sec //add listener and call the onTimer function/handler timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); //start timer function onTimer(event:TimerEvent):void{ //function/handler trace(”Timer ticking!”); //output }

16. Frame Event The Frame event is very useful for all kinds of animations, it’s basically a frame loop - the event occurs at the rate of the frame rate The Frame event is very useful for all kinds of animations, it’s basically a frame loop - the event occurs at the rate of the frame rate Let’s say out movie has a frame rate of 30 fps, then the event will be called 30 times a second Let’s say out movie has a frame rate of 30 fps, then the event will be called 30 times a second //add the listener to the movieClip, event class, function call my_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler); //function/handler that animates a movieClip function enterFrameHandler(event:Event){ my_mc.x += 5; //move the clip 5 pixels right every enterframe my_mc.x += 5; //move the clip 5 pixels right every enterframe} Note! More of this in the Animation/Motion lecture… Note! More of this in the Animation/Motion lecture…