Introduction

The way Action Script deals with events on buttons and movie clips is totally different than the old one we used to do with Action Script 2, but generally it is more professional and saves time and effort if you understood it well.

The new Action Script 3 is showing a new trend on the Action Script language by moving to the Object oriented programming concept. However, I wanted in this article to show for Flash designer how the new AS3 deal with movie clips and button events since it is one of the AS basics that any Flash designer or animation must be aware of it.

Requirements:

Adobe Flash CS3 professional

• Try
• Buy

Sample files.zip

To complete this tutorial, you will need basic knowledge of using Adobe Flash CS3 Professional.

Adding Event Listener:

The new method does not allow you to add action to movie clip or button, so all our action will be on the timeline frame. This way is better since it unify the location of the code.

In this part, we will start by adding the Event Listener. The Event listener mean as you can see from the words that it will listen to the mouse action such as mouse release, mouse roll-over or mouse roll-out. When this event happens, it executes the function that includes what you need to object to do when clicked.

However, we will understand how it works more from the following example:

1. Open a new Action Script 3 file.
2. Create a rectangle and convert it to a button.
3. Select the button and name it act_btn from the instance field in the properties panel.
4. Create a new layer and name it Action Script, and press F9 to open the Action Script panel.
5. Make sure you are in the expert mode where you can write you code manual.
6. Write the following code in the Action Script panel:
   act_btn.addEventListener (MouseEvent.CLICK, onClick);
   1. The first part of the code (act_btn.addEventListener) listens to the event that will be applied to act_btn symbol.
   2. MouseEvent.CLICK shows that the event is when the user clicks the mouse button.
   3. onClick is the name of the function that will include what will happened when the user click the button.

The Handler Function

Here, we will see how to write the function that will include the action hat will happen when the user clicks on the button as following:

Write the following code after the Listener code:

function onClick ( event:MouseEvent):void

{

event.target.y -= 5;

event.target.rotation += 45;

}

1. In this code we created the function that will have the event inside it and name it onClick.
2. ( event:MouseEvent) means that the function will listen to the click event on the instance act_btn.
3. The void value means that the function does not return any value.

event.target.y -= 5;

event.target.rotation += 45;

1. This part shows that the targeted instance will move on the stage by -5 and rotate by +45 degrees.

Adding Multi Events to a button:

You can add more than one event to a button by duplicating the above steps. For example if you like the button to do an action when roll over, another action when roll out and a third action when clicked, add the following code:

act_btn.addEventListener (MouseEvent.CLICK, onClick);

act_btn.addEventListener(MouseEvent.ROLL_OVER, mcOver);

act_btn.addEventListener(MouseEvent.ROLL_OUT, mcOut);

function mcOut( event:MouseEvent):void

{

event.target.alpha = 1;

}

function mcOver( event:MouseEvent):void

{

event.target.alpha = 0.5;

}

function onClick( event:MouseEvent):void

{

event.target.y -= 5;

event.target.rotation += 45;

}

In this code, the button will turn to alpha 0.5 when the mouse roll over it, return to alpha 1 when the mouse roll out, and move and rotate when clicked.

Adding action to a movie clip:

To add an action to a movie clip, you will need to follow the above steps, but you will need to tell Flash that to deal with this movie clip instance as if it were a button and shows a hand curser when the mouse goes over it. This will be done by adding the

following code at the end of the above code:

Act_btn_Mode = true;

Where to go from here

The differences between the old AS2 and the new AS3 are huge, but it really deserves to learn, it will give you more capabilities and more flexibility. If you are a designer that seeks a better performance to your work and more capabilities, then AS3 will give you what you need and more.