Working With Flow List Events: Text Description
Updated: Jan 9, 2008
Views: 1275
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:
import com.afcomponents.flowlist.FlowListEvent;
// Get the description of the first item after it loads
function listFirstItemLoadHandler(event:FlowListEvent) {
myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
txtDescr.text = myFlow.getItemNum(myFlow.startItem).description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
// Get the description of the selected item
function listItemReleaseHandler(event:FlowListEvent) {
txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_RELEASE, listItemReleaseHandler);
// Get the description of the first item after it loads
function listFirstItemLoadHandler(event:FlowListEvent) {
myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
txtDescr.text = myFlow.getItemNum(myFlow.startItem).description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
// Get the description of the selected item
function listItemReleaseHandler(event:FlowListEvent) {
txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_RELEASE, listItemReleaseHandler);
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.
import com.afcomponents.flowlist.FlowListEvent;
// Get the description of the first item after it loads
function listFirstItemLoadHandler(event:FlowListEvent) {
myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
txtDescr.text = myFlow.getItemNum(myFlow.startItem).description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
// Get the description of the first item after it loads
function listFirstItemLoadHandler(event:FlowListEvent) {
myFlow.removeEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
txtDescr.text = myFlow.getItemNum(myFlow.startItem).description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, listFirstItemLoadHandler);
Load Selected Item Text Description
This event listener is needed to update the text description when a new item is clicked.
// Get the description of the selected item
function listItemReleaseHandler(event:FlowListEvent) {
txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_RELEASE, listItemReleaseHandler);
function listItemReleaseHandler(event:FlowListEvent) {
txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_ON_RELEASE, listItemReleaseHandler);
Other Tutorials
