Flashvalley - Flash tutorials - Events in Actionscript 3.0

Mouse Events in Actionscript 3.0 (part 2)

In AS3.0 the correct way to do it is to replicate what we did for the stage object with the difference that this time we are attaching the listener to a movie clip.

function myButtonAction(eventObject:MouseEvent) {
trace("you clicked on the button ");
}
myButton.addEventListener(MouseEvent.CLICK, myButtonAction);

Here we are, we have created an interactive button using AS3.0, you will notice that we are also passing an object to the listener function, that object is going to be very useful in many situation since it contains important information about the event itself, like the local and stage coordinates when the click occured. The current useful properties are type (which contain a string specfying the type of event), localX, localY, stageX, stageY, there is also additional properties like ctrlKey and shiftKey that let you detect if one of those keys is also pressed when the click occurs.

For example you can access the type property of the eventObject using the syntax below:

function myButtonAction(eventObject:MouseEvent) {
trace(eventObject.type); // output " click"
}
myButton.addEventListener(MouseEvent.CLICK, myButtonAction);

Another major difference compared to AS2.0 is that now you can easily nest a set of buttons to create menus and submenus without having to use the hitTest method to detect clicks on nested movie. I have created a little example below that demonstrates the concept.

Click on any item

You can see the code below:

// we hide the submenu items, notice how in AS 3.0 the underscore in front of the visible property is gone
mainItem.subItem1.visible = false;
mainItem.subItem2.visible = false;
mainItem.subItem3.visible = false;

// we attach a mouse over, mouse out and click event to the mainItem button
mainItem.addEventListener(MouseEvent.MOUSE_OVER,showMenu);
mainItem.addEventListener(MouseEvent.MOUSE_OUT,showMenu);
mainItem.addEventListener(MouseEvent.CLICK,buttonClicked);

// here we create a little loop to speed up the process of creating event listener for the submenu buttons nested inside the main button
for(var i=1;i<=3;i++){
mainItem["subItem"+i].addEventListener(MouseEvent.MOUSE_OVER,showSubMenu);
mainItem["subItem"+i].addEventListener(MouseEvent.MOUSE_OUT,showSubMenu);
}

// this function is called when the mouse roll over the main menu item
function showMenu(e:MouseEvent){
// we detect the type of event which is either a mouse over or a mouse out
if(e.type == "mouseOut"){
// if it is a mouse out we hide all the sub menus
e.currentTarget.subItem1.visible = false;
e.currentTarget.subItem2.visible = false;
e.currentTarget.subItem3.visible = false;
}
// if it is a mouse overwe show all the sub menus
if(e.type == "mouseOver"){
e.currentTarget.subItem1.visible = true;
e.currentTarget.subItem2.visible = true;
e.currentTarget.subItem3.visible = true;
}
}

// the currentTarget property above refers to the object that registered the listener
// the target property we use in the last function can refer to the object that registered the listener but also to any of the objects that are registering the event

function showSubMenu(e:MouseEvent){
if(e.type == "mouseOut"){
e.currentTarget.gotoAndStop(1);
}
if(e.type == "mouseOver"){
e.currentTarget.gotoAndStop(2);
}
}

function buttonClicked(e:MouseEvent){
itemClicked.text = e.target.name;
}

There is obviously a lot more to say about the new event handling system in AS3.0 but hopefully this little tutorial will be a good starting point to your exploration.