Events are one of the most important and fundamental concepts in Actionscript. You cannot create an interactive Flash program without using events.

You can think of events as an occurance in your program that can trigger a response. If you want your program to react to something, like a mouse click, the completion of a file loading, or the completion of a video clip, you will need to use an event.

In actionscript, there are built-in events and custom events. We will be primarily using built-in events. Built-in events include commonly occuring events such as mouse interaction, keyboard interaction, the completion of loading a file, and entering a new frame in the actionscript movie.

In order to respond to events in Actionscript, we use event listeners. An event listener is a function that gets executed when an event occurs. When an event occurs, Actionscript creates an event object that holds information about that specific event. The event objects we will be using are: Event, MouseEvent, and KeyboardEvent.

These objects hold information about the event that was triggered. The events are then passed to the event listener function that you defined (that is, the code that eill be executed in when the event happens). You can then use this object in your listener function to get information about the event. For example, you could determine the location of the mouse if you were listening for a mouse click.

Every event has an event target, which is the object that the event pertains to. So, for example, if we were to create an event listener for a button that would respond to a mouse click, the button object would be our event target.

The syntax for events is the following (bold is what you'd fill in for your specific case):

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

eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse);

More information about events in Actionscript 3.0:

• Event Handler Tutorials @ Adobe
• ActionScript 3.0 event handling model @ Adobe

The following program shows you how to use an event listener to respond to a mouse click. This code is placed on the first frame of an Actionscript movie, with a MovieClip with an instance name of "box" located on the first frame.

function clickHandler(evt:MouseEvent):void {
	box.x = box.x + 5;
}

box.addEventListener(MouseEvent.CLICK, clickHandler);

[ Click on the box to move it five pixels to the right ]

The following program shows you how to use the stopPropagation() function to force Flash to stop all subsequent actions that would be taken for a given event. The following code is placed on the first frame of a movie, with a MovieClip with an instance name of box on the maintime line. The box movieClip has two frames, one which is a black box, one which is green. Note: try taking the "evt.stopPropagation();" line out and see what happens. Add a trace command to see when the clickHandler is being called.

function clickHandler(evt:MouseEvent):void {
	evt.stopPropagation();
	
	if (evt.target.currentFrame == 1) evt.target.gotoAndStop(2);
	else evt.target.gotoAndStop(1);
}

stage.addEventListener(MouseEvent.CLICK, clickHandler, true);
box.addEventListener(MouseEvent.CLICK, clickHandler, true);

[ Click on the box to alternate what frame of the MovieClip is being displayed ]

The following program shows you how to use an event listener to respond to a mouse over. This code is placed on the first frame of an Actionscript movie, with a MovieClip with an instance name of "box" located on the first frame.

function mouseOverHandler(evt:MouseEvent):void {
	box.alpha = box.alpha - 0.10;
}

box.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

[ Mouse over the box to subtract 10% from its alpha value ]

The following program shows you how to use an event listener to respond to the arrow keys. This code is placed on the first frame of an Actionscript movie, with a MovieClip with an instance name of "box" located on the first frame.

function keyDownHandler(event:KeyboardEvent):void {
	if (event.keyCode == Keyboard.RIGHT) box.x = box.x + 5;	
	else if (event.keyCode == Keyboard.LEFT) box.x = box.x - 5;
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

[ Click on the movie, and then press the left and right arrow keys to move the box ]

The following program shows you how to use an event listener to call a function every frame the movie is executed. This creates a loop for as long as the program is running. One common application of using an ENTER_FRAME event is for creating animations. This code is placed on the first frame of an Actionscript movie, with a MovieClip with an instance name of "box" located on the first frame.

function clickHandler(evt:MouseEvent):void {
	box.x = 20;
}
function enterFrameHandler(evt:Event):void {
	box.x = box.x + 1;
}

restart.addEventListener(MouseEvent.CLICK, clickHandler);
addEventListener(Event.ENTER_FRAME, enterFrameHandler);

[ Click on the button to reset the box, which every frame is being repositioned one pixel to the right ]

The following program shows you how to use an event listener to respond to a keyboard event, and then the hitTestObject() function to respond when the two boxes on the screen touch. The box being moved consists of two frames, one called "nothit" where the box is black, and one called "hit" where its green.

function keyDownHandler(event:KeyboardEvent):void {
	if (event.keyCode == Keyboard.RIGHT) box.x = box.x + 5;	
	else if (event.keyCode == Keyboard.LEFT) box.x = box.x - 5;
	
	if (box.hitTestObject(obstacle)) box.gotoAndStop("hit");
	else box.gotoAndStop("nothit");
	
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

[ Click on the movie and then use the left and right arrow keys to move the box back and forth. When the boxes hit each other, it should react. ]