Working With Flow List Events: Text Description
Updated: Apr 22, 2008
Views: 2998
Description: This tutorial will show you how to add mouse click event to call a function that loads the description from the XML document for the event target item into a dynamic text field.
Complete Code:
var eventListener = new Object();
eventListener.ITEM_LOAD_COMPLETE = function(evnt){
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_LOAD_COMPLETE", eventListener);
eventListener.ITEM_ON_PRESS = function(evnt){
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_SELECTED", eventListener);
//rOLL over event
eventListener.ITEM_ON_ROLL_OVER = function(evnt){
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_ON_ROLL_OVER", eventListener);
eventListener.ITEM_LOAD_COMPLETE = function(evnt){
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_LOAD_COMPLETE", eventListener);
eventListener.ITEM_ON_PRESS = function(evnt){
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_SELECTED", eventListener);
//rOLL over event
eventListener.ITEM_ON_ROLL_OVER = function(evnt){
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_ON_ROLL_OVER", eventListener);
Set-Up and Add Content Using through XML
Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Flow List component using XML. Also make sure that you give your Flow List an instance name of myFlow.
Please make sure that you have added your target URL's into the data tag in your XML document for all your items.
Creating a Dynamic Text Field
These tutorial also requires that you create a dynamic text field that we can load the description from the XML into. Add a new text field on the stage and in the properties panel (Window > Properties > Properties) select dynamic text from the drop down and give it an instance name of txtDescr.
Plan for Action Script
Before we begin with code, it is important to understand the few things that we want to accomplish with ActionScript.
- Since mouse event listeners for the items in Flow List have to be added after the component initializes, we first want to add an event listener for when the component initializes that calls a function that adds the mouse event listeners for click.
- Next, we need our description to be updated for the item as we click.
As discussed in our plan our first step is to wait for the component to load first item and then calling a function that will add our mouse event listeners for for initial item load. We also want to load our initial selected item's description into our text field.
var eventListener = new Object();
eventListener.ITEM_LOAD_COMPLETE = function(evnt){
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_LOAD_COMPLETE", eventListener);
eventListener.ITEM_LOAD_COMPLETE = function(evnt){
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_LOAD_COMPLETE", eventListener);
Load Selected Item Text Description
This event listener is needed to update the text description when a new item is clicked.
eventListener.ITEM_ON_PRESS = function(evnt){
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_SELECTED", eventListener);
trace(myFlow.getSelectedItem().description);
textDesc.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener("ITEM_SELECTED", eventListener);
