ActionScript 3.0 Event Listeners and Handlers

In this tutorial, we will introduce event listeners and event handlers for Flash^R and ActionScript 3.0. You will use this code if you want to run a function when an event occurs. For example, a button can work as a link in your Flash site. When you click on the button, that is a mouse event. Therefore, to make the button work with ActionScript, we would need to write code that will listen for the mouse event and then take the visitor to the next page.

But, this code can be used for other reason besides button links. In this tutorial, we will draw a star in the center of the stage. Then we will write ActionScript that will listen for a mouse click and rotate the star on the stage.

Start a new Flash document for ActionScript 3.0.
For the PolyStar tool (found under the Rectangle tool), set the Fill to yellow and the Stroke to null. In the Properties Inspector, click on the Options button to open the Tool Settings dialog box. Set the Style drop-down list to Star. Then, click and drag to draw a star in the center of the stage.
With the Selection tool, right-click on the star. Choose Convert to Symbol from the menu. Name the symbol "mcStar" and set the Type to Movie Clip.

You should now have a movie clip named mcStar in the Library Panel and the star that we drew on the stage is now an instance of that movie clip in the Library.
We need to give the instance a unique name in order to write code that will rotate this instance. Select the star on the stage and in the Properties Inspector, give the star an instance name of "star1_mc".

Now we are ready to write the code that will rotate the star 20 degrees each time that the star is clicked. As in previous tutorials, we will add the ActionScript code to Frame 1 on the Actions layer. Add a new layer to the Timeline and rename it "Actions". You should be on Frame 1 when you open the Actions Panel (Window – Actions).

We need to create an event listener to listen for the mouse click and an event handler to rotate the star movie clip. Let's take a look at the code.

star1_mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void
{ star1_mc.rotation += 20; }

The Event Listener

star1_mc.addEventListener(MouseEvent.CLICK, onClick);

The first line of code will create an event listener for the mouse click and the star1_mc object.

We will first identify the movie clip object to which we will be applying the listener.

star1_mc
Add a period after the name of the object and add the event listener. The parentheses are empty now but we will be adding more information. Finish the line of code with a semicolon.

star1_mc.addEventListener();
We want to listen for the CLICK mouse event. Let's put that information inside the parentheses.

star1_mc.addEventListener(MouseEvent.CLICK);
Finally we will put the name of the function to be called when the event occurs. Add a comma and a space and then add the name of the function which we will call "onClick".

star1_mc.addEventListener(MouseEvent.CLICK, onClick);

The Event Handler

star1_mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void
{ star1_mc.rotation += 20; }

These two lines of code will create the function or event handler that will rotate the star.

Start with the function keyword and add the name that we gave to the function. Remember that we called the function "onClick". As before, we will be adding information inside the parentheses.

function onClick()
Now we will tie the function to the MouseEvent.

function onClick(event:MouseEvent)
Event handlers do not return any data. So, let's add a colon and "void" after the ending parenthesis.

function onClick(event:MouseEvent):void

Now we are ready to add the details of the function. We want to rotate the star1_mc object 20 degrees. We will place these instructions inside curly brackets.

function onClick(event:MouseEvent):void
{ star1_mc.rotation += 20; }

Test your movie. When you click on the star it should rotate.