CISC 110 Day 6

1. CISC 110Day 6 Introduction to Events

2. Outline • Event-Driven Programming • Event Classes Hierarchy • Event Class • Mouse Events • Keyboard Events • Registering Event Listeners • Writing Event Handlers • Buttons with Nested Symbols

3. Event-Driven Programming Simple Programming: Program runs Event-Driven GUI Loop: Wait for Input Event 3

4. GUI Event Loop When an event occurs, the Graphical User Interface (GUI) loop is interrupted and the appropriate event handler is called. Mouse Click GUI Mouse Click Handler Loop Wait for Event Key Press Key Press Handler 4

5. Event-Driven Programming Three Parts: • Write a loop that waits for events to occur and then calls the functions that will handle the events (event-handlers). Flash does this part for you. • Write the event-handler functions that take the appropriate action when an event occurs • Bind the event-handler to the event, so the correct function is called when the event occurs.

6. Event Dispatcher If a listener is registered for an event, the event dispatcher calls the specified event handler and sends it an event object as a parameter with information about the event. Event Dispatcher Event Object Event Object Event Object Event Handler Event Handler Event Handler

7. A Few Event Classes Event Class: Base class for the creation of event objects MouseEvent: Generated by a mouse or trackball KeyboardEvent: Generated by user pressing a key TextEvent: Generated when user types in a text field Event Class MouseEvent Class KeyboardEvent Class TextEvent Class

8. Event Handlers Example event-handler function that moves a MovieClip named box lower on the stage when the user clicks a button: function moveDown(evt: MouseEvent):void { box.y = box.y + 20; }

9. Registering a Listener Bind an event-handler to the event of a user clicking the mouse on a button called moveDownBtn, so the moveDown function is called when that event occurs: moveDownBtn.addEventListener (MouseEvent.MOUSE_UP, moveDown); Object that will now listen Event Type in Function that will be called for a mouse click MouseEvent class when button is clicked

10. Event ClassSome Properties and Event Types Properties target:target object of the event type:type of event dispatched Event Types COMPLETE: “complete” event object ENTER_FRAME:“enterFrame” event object

11. MouseEvent ClassSome Event Types CLICK: “click” event object DOUBLE_CLICK:“doubleClick” event object MOUSE_DOWN:“mouseDown” event object MOUSE_UP: “mouseUp” event object MOUSE_OVER: “mouseOver” event object MOUSE_WHEEL: “mouseWheel” event object

12. KeyboardEvent ClassSome Properties & Event Types Properties charCode:character code of key pressed keyCode: key code value of key pressed ctrlKey: true if ctrl key is pressed, false if not Event Types KEY_DOWN:“keyDown” event object KEY_UP:“keyUp” event object

13. Event Properties Example function buttonHandler(evt: MouseEvent):void { if(evt.target == moveDownBtn) { box.y = box.y + 20; } else if (evt.target == moveUpBtn) { box.y = box.y - 20; } else if (evt.target == moveRightBtn) { box.x = box.x + 20; } }

14. Event Properties Example moveDownBtn.addEventListener (MouseEvent.MOUSE_UP, buttonHandler); moveUpBtn.addEventListener (MouseEvent.MOUSE_UP, buttonHandler); moveRightBtn.addEventListener (MouseEvent.MOUSE_UP, buttonHandler);

15. Buttons Two Steps to Create Buttons: • Create the appearance of the button, including what it looks like when the mouse rolls over it and clicks it, and define its active area that responds to a mouse click (can use Flash menus and panels or ActionScript) • Define what action it performs in response to a mouse click (using ActionScript) 15

16. Button Symbol Timelines Buttons are symbols that have Timelines with four frames: Up State: default state Over State: button’s appearance when mouse rolls over it Down State: button’s appearance when mouse is clicked Hit State: button’s active area that responds to the mouse 16