Russell Chun

When creating a project with multiple interactive hotspots, it’s a chore to manually create unique event listeners for each button or movie clip on the stage. You can save time and effort by dynamically adding the event listeners to all the hotspots at once. Use a for…in loop to cycle through the children of a parent object. With each pass of the loop, you can add an event listener to that child. For example, imagine that you are creating an interactive map with 50 individual hotspots. You have 50 movie clips placed inside another movie clip of the map, called map_mc. Consider the following AS3 code:

for (var hotspot:Object in map_mc){
    trace(hotspot)
}

The terms in red are variables that you make up. The variable hotspot is called the iterator because it will represent the child objects within map_mc as the loop iterates through the parent. When this code runs, each of the 50 movie clips inside of map_mc will be traced (displayed in the Output window). You can reference each child of map_mc and add an event listener like so:

for (var hotspot:Object in map_mc){
    map_mc[hotspot].addEventListener(MouseEvent.CLICK, clickhotspot)
}

Notice how the iterator hotspot is used with the square brackets to refer to each of the children in map_mc. The result: Each movie clip in map_mc will listen for a mouse click and execute the function called clickhotspot.

How do you have the function clickhotspot differentiate between different hotspots? Afterall, you don’t want the SAME thing happening with all of the hotspots. You can refer to the target of the mouse event (the object on which you clicked the mouse button) with the term target or its instance name with target.name. Consider the following function:

function clickhotspot(myevent:MouseEvent):void {
    trace(myevent.target.name)

}

When this function is executed (whenever someone clicks on one of the hotspots in map_mc), the instance name of that particular hotspot is displayed in the Output window. The term myevent is a variable that you make up that refers to the event.

Now, it’s a matter of matching up the hotspot instance name with a database, such as an array, to display the correct content. There are multiple approaches to take here, depending on your goal. Naming conventions are critical: You can name each of the hotspots in map_mc consistently such as landmark0, landmark1, landmark2, landmark3, etc. The task is to strip out the first part of the name “landmark”, and be left with 0, 1, 2, 3, etc. to be used as an array index. (Note: you cannot begin an instance name with a number)

function clickhotspot(myevent:MouseEvent):void {
    var thename:String=myevent.target.name
    var theindex:String=thename.substring(8,thename.length)

}

In this example, the instance name is put in a variable called thename. Then, the command substring() cuts out the first 7 letters (preserving the 8th letter to the last letter) and puts the result in another variable called theindex. Now theindex can refer to an array that stores the information about all the 50 hotspots. For example:

var myrestaurants: Array = new Array()
myrestaurants[0]="Cancun Grill"
myrestaurants[1]="Sushi King"
myrestaurants[2]="Falafel Heaven"
myrestaurants[3]="Golden Feast"
myrestaurants[4]="Burgers and More"

When you click on the hotspot whose instance name is landmark2, you can match it up with myrestaurants[2], which is “Falafel Heaven”.

Download a sample FLA file.