Adding User Interactionsactionscript 3.0

Common event-handling tasks

• Writing code to respond to events

• Stopping code from responding to events

• Working with event objects

• Working with event flow:– Identifying event flow information

– Stopping event flow

– Preventing default behavior

• Dispatching events from your classes

• Creating a custom event type

function mouseDownHandler0(event:MouseEvent):void {gotoAndStop(2);

}

contact.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler0);

Introduction to handling events

Events are occurrences of any kind in your SWF file that are of interest to you as a programmer. For example, most SWF files support user interaction of some sort -- whether it's something as simple as responding to a mouse click or something more complex, such as accepting and processing data entered into a form.

Any such user interaction with your SWF file is considered an event. Events can also occur without any direct user interaction, such as when data has finished loading from a server or when an attached camera has become active.

In ActionScript 3.0, each event is represented by an event object, which is an instance of the Event Class or one of its subclasses. An event object stores information about a specific event and contains methods that facilitate manipulation of the event object.

Introduction to handling events

1. Flash Player (FP) detects an event (mouse click).2. FP Creates an event object (an instance of the MouseEvent class) to represent that particular mouse click event. 3. FP dispatches it, which means that the event object is passed to the object that is the target of the event. 4. An object that serves as the destination for a dispatched event object is called an event target. For example, when an attached camera becomes active, FP dispatches an event object directly to the event target, which in this case is the object that represents the camera. If the event target is on the display list, however, the event object is passed down through the display list hierarchy until it reaches the event target. 5. In most cases, the event object then "bubbles" back up the display list hierarchy along the same route. This traversal of the display list hierarchy is called the event flow. 6. Event listeners "listen" for event objects in your code. Event listeners are the functions or methods that you write to respond to specific events. To ensure that your program responds to events, you must add event listeners either to the event target or to any display list object that is part of an event object's event flow.

Event listeners

Event listeners, which are also called event handlers, are functions that FP executes in response to specific events. Adding an event listener is a two-step process:

1. First, you create a function or class method for FP to execute in response to the event. This is sometimes called the listener function or the event handler function.

2. Second, you use the addEventListener() method to register your listener function with the target of the event or any display list object that lies along the appropriate event flow.

Any time you write event listener code, it follows this basic structure:

function eventResponse(eventObject:EventType):void{ // Actions performed in response to the event go here.}eventTarget.addEventListener(EventClass.EVENT_NAME, eventResponse);

Event objects

Event objects represent actual events by storing information about specific events in a set of properties. Event objects contain a set of methods that allow you to manipulate event objects and affect the behavior of the event-handling system.Event objects facilitate access to these properties and methods through FP API, which defines an Event Class that serves as the base class for all event objects. The Event Class defines a fundamental set of properties and methods that are common to all event objects.

event:MouseEvent Events associated with a mouse click need to include additional information about the location of the click event and whether any keys were pressed during the click event. You can pass such additional information to event listeners by extending the Event class, which is what the MouseEvent class.

*The properties of the Event class carries basic information about an event, such as the event's type or whether the event's default behavior can be canceled. For many events, such as the events represented by the Event class constants, this basic information is sufficient.

Event Dispatcher

Event handling in ActionScript 3.0 depends heavily on the EventDispatcher class. EventDispatcher’s basic concept is:

any class that can dispatch events either extends the EventDispatcher class or implements the IEventDispatcher interface.

An ActionScript 3.0 interface is a data type used to define a set of methods that can be implemented by a class. In each class listing for these classes in the ActionScript Language Reference, there is a list of events that the class can dispatch.

Where is EventDispatcher?

You may have noticed that code snippets do not explicitly reference EventDispatcher. In fact, it's rare that you would ever use EventDispatcher directly in your code. EventDispatcher, in ActionScript 3.0, is actually a base class*, which other classes extend in order to be able to have access to addEventListener and other EventDispatcher methods.

* Base Classes are pre-built (or non-custom -- ones you do not have to write) classes included in Flash.

//function eventListener (eventObject:EventType) { function mouseDownHandler0(event:MouseEvent):void {

gotoAndStop(2);}//eventTarget.addEventListener(EventClass.EVENT_NAME, eventListener); contact. addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler0);

Event Targeting

All events start off in Flash with the process of event targeting. In this process, FP determines which object is the target of the event (button). For every mouse event, the event references one object which is the object of highest arrangement capable of receiving the event (the order on the display list that has a listener attached).Event targets can either be on the display list or off the display list. If the event target is on the display list, FP dispatches the event object into the display list, and the event object travels through the display list to the event target. Event targets are most likely instance names of symbols from the stage or library.

eventTarget.addEventListener(EventClass.EVENT_NAME, eventListener);

Event flow (propagation)

The event flow describes how an event object moves through the display list. The display list is organized in a hierarchy that can be described as a tree. At the top of the display list hierarchy is the Stage, which is a special display object container that serves as the root of the display list. The Stage is represented by the flash.display.Stage class and can only be accessed through a display object. Every display object has a property named stage that refers to the Stage for that application.

When FP dispatches an event object, that event object makes a roundtrip journey from the Stage to the target node. The DOM Events Specification defines the target node as the node representing the event target. In other words, the target node is the display list object where the event occurred.

Event flow

For example, if a user clicks on a display list object named child1, Flash Player will dispatch an event object using child1 as the target node. The event flow is conceptually divided into three parts.

The first part is called the capture phase; this phase comprises all of the nodes from the Stage to the parent of the target node that are on the display list.

The second part is called the target phase, which consists solely of the target node.

The third part is called the bubbling phase. The bubbling phase comprises the nodes encountered on the return trip from the parent of the target node back to the Stage.

In this example, the capture phase comprises Stage and Parent Node during the initial downward journey. The target phase comprises the time spent at Child1 Node. The bubbling phase comprises Parent Node and Stage as they are encountered during the upward journey back to the root node.

Event Flow

The event flow contributes to a more powerful event-handling system than was previously available. In previous versions of ActionScript, the event flow does not exist, which means that event listeners can be added only to the object that generates the event. In ActionScript 3.0, you can add event listeners not only to a target node, but also to any node along the event flow. What does this mean?

Event Flow Considerations

The ability to add event listeners along the event flow is useful when a user interface component comprises more than one object.

For example, a button object often contains a text object that serves as the button's label. Without the ability to add a listener to the event flow, you would have to add a listener to both the button object and the text object to ensure that you receive notification about click events that occur anywhere on the button. The existence of the event flow, however, allows you to place a single event listener on the button object that handles click events that occur either on the text object or on the areas of the button object that are not obscured by the text object.

Not every event object participates in all three phases of the event flow. Some types of events, such as the enterFrame and init event types, are dispatched directly to the target node and participate in neither the capture phase nor the bubbling phase. Other events may target objects that are not on the display list, such as events dispatched to an instance of the Socket class. These event objects will flow directly to the target object, without participating in the capture and bubbling phases.

Adding event listeners

addEventListener() method is the workhorse of the IEventDispatcher interface. You use it to register your listener functions.The two required parameters are type and listener:1. The type parameter to specify the type of event: (MouseEvent.MOUSE_CLICK in the example below):2. The listener parameter to specify the listener function that will execute when the event occurs. The listener parameter can be a reference to either a function or a class method. A class method is a function inside a Class (.as) doc (mouseDownClicked in the example below is a method of the MouseEvent class):

The name of the event is defined by the constant associated with the event class. In our case CLICK is one of the events associated with the MouseEvent class, the events defined for the MouseEvent class are CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_WHEEL, ROLL_OUT, ROLL_OVER.

function mouseDownClicked(event:MouseEvent):void {}contact.addEventListener(MouseEvent.MOUSE_CLICK, mouseDownClicked

Recap• Event: Something that happens to an object that the object can tell

other objects about. • Event object: An (instance) object that contains information about a

particular event's occurrence, which is sent to all listeners when an event is dispatched.

• Dispatcher: To notify event listeners that an event has occurred.• Event target: The object that actually dispatches an event. For

example, if the user clicks a button that is inside a movieclip that is in turn inside the Stage, all those objects dispatch events, but the event target is the one where the event actually happened--in this case, the clicked button.

• Event flow: When events happen to an object on the display list (an object on the stage or in the library), all the objects that contain the object are notified of the event and notify their event listeners in turn. This process starts with the Stage and proceeds through the display list to the actual object where the event occurred, and then proceeds back to the Stage again. This process is known as the event flow.

• Listener: An object or function that has registered itself with an object, to indicate that it should be notified when a specific event takes place.

Default Behaviors

Some events include a behavior that normally happens along with the event, known as the default behavior. For example, when a user types text in a text field, a text input event is raised. The default behavior for that event is to actually display the character that was typed into the text field. You can override that default behavior (if for some reason you don't want the typed character to be displayed).

FunctionsRemember: Event Listeners are essentially functionsThere are two ways to define a function in ActionScript 3.0: you can use a function statement or a function expression.1. As a general rule, use a function statement. Function statements are less verbose, and they provide a more consistent experience between strict mode and standard mode than function expressions.2. Function expressions declare a function is to use an assignment statement with a function expression, which is also sometimes called a function literal or an anonymous function. Function statements are the preferred technique for defining functions in strict mode.

1. A function statement begins with the function keyword, then2. The function name, then3. The parameters, enclosed in parentheses, then 4. The function body--that is, the ActionScript code to be executed when the

function is invoked, enclosed in curly brace

function eventListener(eventObject:EventType) {// Actions performed in response to the event go here.

}

eventTarget.addEventListener(EventClass.EVENT_NAME, eventListener);

Functions are Reusable

One function applied to two different buttons…

m1.addEventListener(Event.ENTER_FRAME,spin);

m2.addEventListener(Event.ENTER_FRAME,spin);

function spin(event:Event):void {

event.currentTarget.rotation = 5;

}

Assigning a data type

You need to assign data types whenever you define a variable, whether you declare a variable using the var keyword, create a function argument, set function return type, or define a variable to use within a for or for..in loop. To assign a data type, you use post-colon syntax, which means you follow the variable name with a colon and then the data type:

There are many possibilities for data types, ranging from the native data types such as Number, String, Boolean, or built-in classes that are included in Flash or custom classes that you or other developers have written. The most common types of data types you might need to specify are the built-in data types such as Number, String, Boolean, Array, or Object, which are shown in the following code examples.

var my_mc:MovieClip;

Assigning specific datatypes

Specify its type using the var keyword and post-colon syntax, as shown in the following example:

//Datayping Mouse Eventsfunction mouseDownHandler0(event:MouseEvent):void {// Strict typing of variable or objectvar myNum:Number = 7;var birthday:Date = new Date();// Strict typing of parametersfunction welcome(firstName:String, age:Number) {}

You can declare the data type of objects based on built-in classes (Button, Date, and so on) as well as classes and interfaces that you create. In the following example, if you have a file named Student.as in which you define the Student class, you can specify that objects you create are of type Student:

var myStudent:Student = new Student();

Non-specific datatypesIf you do not explicitly define an item as holding either a number, a string, or another data type, at runtime FP will try to determine the data type of an item when it is assigned. If you assign a value to a variable, as shown in the following example, FP evaluates at runtime the element on the right side of the operator and determines that it is of the Number data type:

var x = 3;

Because x was not declared using strict data typing, the compiler cannot determine the type; to the compiler, the variable x can have a value of any type. (See Assigning a data type.) A later assignment might change the type of x; for example, the statement x = "hello" changes the type of x to String.

ActionScript always converts primitive data types (such as Boolean, Number, String, null, or undefined) automatically when an expression requires the conversion and the variables aren't strictly typed.

Writing the Code

function clickHandler(event:MouseEvent):void {

The function is called clickHandler (you can give it any name). The event object it will receive for processing when something happens is associated with event. In more technical terms event is a parameter that you can use as a variable in subsequent code.

MouseEvent is the type of the event variable and we should declare this.

:void means that the function will not return any information.

Writing the Code

The code is the set of instructions to executed and are called methods. Properties are how the object is displayed.This information goes inside the curly braces. { }

Examples of Methods:

navigateToURL

gotoAndPlay

Examples of Properties:

Box.alpha = .5

Box.x = 200

Box.y = 300

This will display an object with 50% transparency, 200 pixels from the top edge of the stage and 300 from the left of the stage

Writing the Code

//function eventListener(eventObject:EventType) {function mouseDownHandler0(event:MouseEvent):void {

gotoAndStop(2);

}//eventTarget.addEventListener(EventClass.EVENT_NAME, eventListener);contact.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler0);

Diagram 1

Diagram 2

TermsDOM (Document Object Model): ActionScript’s event architecture is based on the W3C Document Object Model (DOM) Level 3 Events Specification, available at http://www.w3.org/TR/DOM-Level-3-Events.API (Application Programming Interface): The Flash Player API is a set of classes and functions that expose the capabilities of Flash Player to the ActionScript language. This functionality is the bridge between the ActionScript core language and the rest of the platform. It is the source of much of the power available to Flash applications and is a very important complement to the core language.AVM (ActionScript Virtual Machine): ActionScript is executed by the ActionScript Virtual Machine (AVM) built into the Flash Player. AVM1, the virtual machine used to execute legacy ActionScript code, powers Flash Player today and makes possible a wide range of interactive media and rich Internet applications. The new AVM2 virtual machine is available in Flash Player 9, and will be the primary virtual machine for ActionScript execution going forward. The older AVM1 will continue to be supported by Flash Player for backwards compatibility with existing and legacy content.Dot Syntax: As in other foreign languages, you must learn the rules of grammar to put words together. Dot syntax is the convention that ActionScript uses to put objects, properties, and methods together into statements. You connect objects, properties, and methods with dots (periods) to describe a particular object or process.Array: a group of elements of a specific data type is known as an array, one of the simplest data structures.