In order to create an interactive Flash application, we need to learn something about events. An event is something that just happens in the application. There are many different types of events, such as mouse clicks, mouse move and mouse out. In this tutorial, you’ll learn how to respond to such events.

Note: You should already be familiar with the basics of ActionScript

Handling mouse clicks

To create a movie clip that responds to mouse clicks, follow these steps.

1. Draw a rectangle and convert it into a movie clip (press F8).

2. Give the rectangle an instance name of ”myRectangle”.

3. Create a new layer called ”actions”.

4. Type the following code in the actions panel (press F9 if you can’t see the panel)

function rectangleClicked(evt:Event):void {
        myRectangle.alpha = 0.2;
}

Explanation: The function parameter is an event type. We call it ”evt” in our function. We’ll cover the Event type a little later. For now, just remember that you need to give an event handler an event parameter. Once the user clicks the button, the rectangle’s alpha is going to change.

5. So how do we know when the rectangle is clicked? For this , we use the ”addEventListener” method. Type the following.

myRectangle.addEventListener(MouseEvent.CLICK, rectangleClicked);

Explanation: The ”addEventListener” adds a listener to the rectangle. The first parameter describes which event we are listening. We use ”MouseEvent.CLICK”, because we want to know when the user clicks the rectangle. The second parameter defines which function we call, when the user clicks the rectangle.

6. Test your movie!

Handling mouse hovers

If you want the object to respond on a mouse hover, you only need to change some parts of the code. Here is the code for mouse hover.

function rectangleOver(evt:Event):void {
        myRectangle.alpha = 0.5;
}
 
myRectangle.addEventListener(MouseEvent.MOUSE_OVER, rectangleOver);

Explanation: This time we want to listen for a “MOUSE_OVER” event. We added another event listener to the rectangle for this.

Handling mouse out

If you want the object to react when you move your mouse out of the rectangle, you apply the following code (don’t delete the old functions).

function rectangleOut(evt:Event):void {
        myRectangle.alpha = 1;
}
 
myRectangle.addEventListener(MouseEvent.MOUSE_OUT, rectangleOut);

Now we have an interactive rectangle! You could use this in your website for example as a button. Remember, you can change the shape of the rectangle anyway you want to give it a nice look.

Final code:

function rectangleClicked(evt:Event):void {
        myRectangle.alpha = 0.2;
}
 
myRectangle.addEventListener(MouseEvent.CLICK, rectangleClicked);
 
function rectangleOver(evt:Event):void {
        myRectangle.alpha = 0.5;
}
 
myRectangle.addEventListener(MouseEvent.MOUSE_OVER, rectangleOver);
 
function rectangleOut(evt:Event):void {
        myRectangle.alpha = 1;
}
 
myRectangle.addEventListener(MouseEvent.MOUSE_OUT, rectangleOut);

The Event type

You already know that when defining a function that responds to an event, you need an Event parameter for that function. Let me give you an example about this mysterious “Event” parameter. Type the following in the actions panel (we are still using the same rectangle “myRectangle”).

myRectangle.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:Event):void {
    trace("Type of event: " + event.type); 
    trace("The event occured on: " + event.target.name); 
}

Now test your movie. You should see the following when you click the rectangle.

As we can see, the event parameter tells us something about the occured event. Most importantly, it tells us what object caused the event. This comes very handy later on, when we use the same event handler for multiple objects. With the event parameter, we know which object caused the event.

Related tutorials:

1. ActionScript 3 Keyboard Events
2. Rotating Mouse Trail with ActionScript 3
3. Random Boxes Text Effect with ActionScript 3
4. Introduction to ActionScript 3
5. ActionScript 3 Timer Class