Add Mouse Events to Items in Loop AS3.0 Component
Updated: Nov 5, 2007
Views: 2547
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.
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);
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:
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);
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);
Other Tutorials
