Advanced Flash Components

Add Mouse Events to Items in Loop AS3.0 Component

Updated: Nov 5, 2007 Views: 2774

Description: This tutorial will show you how to use ActionScript to add mouse events to the items in the Loop AS3.0 component, and you will also build a text field to test the events you create.

Part I - The Completed Project

Code used in this tutorial:

import flash.events.MouseEvent;
import com.afcomponents.loop.LoopEvent;

function onLoopItemEvent(event:MouseEvent) {
        txtDescr.text = "Image "+event.target.id+" - "+event.type;
}

function onLoopXMLLoaded(event:LoopEvent) {

    // Add ROLL_OVER event to each Loop item with addGenericItemEventListener
    myLoop.addGenericItemEventListener(MouseEvent.ROLL_OVER, onLoopItemEvent);

    // Add CLICK event to each Loop item with addGenericItemEventListener
    myLoop.addGenericItemEventListener(MouseEvent.CLICK, onLoopItemEvent);

    // Add ROLL_OUT event to each Loop item with addGenericItemEventListener
    myLoop.addGenericItemEventListener(MouseEvent.ROLL_OUT, onLoopItemEvent);
}
myLoop.addEventListener(LoopEvent.XML_LOAD_COMPLETE, onLoopXMLLoaded);

Part II - Loading images through XML in Loop Component

To proceed, you need to have created an XML file and linked your Loop on the stage in flash to the XML File. If you have not, please see the loading images through XML tutorial.
Also make sure the Loop component on the stage has an instance name of myLoop.

Part III - Create a Dynamic Text Field to test Events

The next step is to add a text field to the stage using the text tool in the tools panel (Window > Tool) and with the text field selected give it an instance name of txtDescr and change text field type from Static Text to Dynamic Text.

Part IV - Adding the Mouse Events through ActionScript to the Loop

Next, you will create Roll Over, Roll Out, and Click mouse events for the items in the Loop and use your dynamic text field to test the events by displaying a simple message that confirms the events. To do this, add the following ActionScript to your flash movie in an actions layer:

AFComponents.com