Tutorial 3 - Make things Move and Interact: Events

We will use again the class example we made in tutorial 2. However this time we will define some events for the 2 movie clips so that they can move and interact with user.

Events definition in AS 3 is completely different from the previous way. There are no more onEnterFrame, onMouseDown, etc. Instead you will have to use the command addEventListener to make an object respond to an event, and then write a function to be carried out when the event is elicited.

Download files for this tutorial

1. Start a new file and name it tut_3.fla. Again in the Document class field of the Properties panel, enter our class name, example.

2. We will use the same class example we made in tutorial 2. Put it in the same folder as tut_3.fla and open it.

3. Following is the modified code:

Line Description
2-3 Import 2 packages of classes for later use: display and events. Note that instead of choosing an individual class for import, I choose to import the whole package i.e. use a * instead of names of classes. This is convenient when we need to import a lot classes of a package.
15

Basically the syntax of addEventListener is as follows:

addEventListener(type:String, listener:Function)

The first parameter, type, defines the type of event. For mc1, the event will be enterFrame. type is actually a String, and the String for event EnterFrame is "enterFrame". In our code, however, I choose to use Event.ENTER_FRAME. It is actually a constant within the class Event with value "enterFrame" which is a String. In other words, the following 2 are the same:

addEventListener(Event.ENTER_FRAME, function)
addEventListener("enterFrame", function)

You may visit the class Event page of LiveDocs for more information. Always remmeber that AS 3 is case-sensitive. Beware of the capital letters!

The second parameter is a function that will be carried out if the event is elicited. In this case the function will be enterFrame_handler() which we will define later. Note there is no ( ) behind the function name when defining this parameter.

These are the 2 most important parameters of addEventListener. There still some more, but I will not talk about them here. You may visit the addEventListener method of the class EventDispatcher for more details.

21

For mc2, I make it respond to a mouse click, i.e. when user click on it, something will be carried out. The syntax is just the same as above, but this time we will use the MouseEvent class. As above, MouseEvent.CLICK is a constant with value "click" which is a String. Therefore the following 2 are the same:

addEventListener(MouseEvent.CLICK, function)
addEventListener("click", function)

The function to be carried out when mouse is clicked is mouseClick_handler() which will be defined soon.

You may visit the class MouseEvent page of LiveDocs for more information.

25-27

Define function enterFrame_handler. This function will be called when the enterFrame event of mc1 is triggered and the x property of mc1 will be changed. Therefore this code renders an animation of mc1 moving to the right.

Several things to note:
- This function is defined to be private i.e. codes outside this package cannot call this function.
- This function must have a parameter of class Event. We can know from this parameter a lot of information e.g. the object eliciting the event, which type of event, etc.
- :void means that this function returns nothing. This can be omitted in our code.
- In previous AS versions, the x-coordinate of an object is represented by the _x property, but now it is represented by x (without _ ).

28-30

Define function mouseClick_handler. This function will be called when mc2 is clicked and a message will be displayed in the output window.

4. Switch back to tut_3.fla and output the swf. You should be able to see:

The red ball is moving to the right. When the yellow rectangle is clicked, a message pop up in the output window.

This ends the tutorial. We have gone through steps for making objects respond to some events and how to define the subsequent actions to be carried out. Event definition is quite different from previous AS versions and I hope this simple tutorial will make it clear to you :)

 

Back to the Tutorial index page