Advanced Flash Components

Working with Events in 3d Flow list: Adding Text Decription

Updated: Mar 26, 2008 Views: 2747

Description: This tutorial will show you how to add a mouse click event to call a function that loads the description from the XML document for the new selected item into a dynamic text field.

Complete Code:

import flash.events.MouseEvent;
import com.afcomponents.events.item.ItemMouseEvent;
import com.afcomponents.events.FlowList3DEvent;

// Handle item click
function itemClick(event:ItemMouseEvent) {
    txtDescr.text = event.item.description;
}

// Wait for items to load from XML and then add MouseEvent.CLICK to each item
// NOTE: Before this, items do not exist
function contentLoad (event:Event) {
    for (var i:Number = 0; i<=myFlow.length-1; i++) {
        myFlow.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowList3DEvent.CONTENT_LOAD_START, contentLoad);

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 3d Flow list component using XML. Also make sure that you give your 3d Flow list has an instance name of myFlow.

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.

Understanding the Plan for ActionScript

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 3d Flow list have to be added after the component begins to load content, we first want to add an event listener for when content starts to load in the 3d Flow list.
Inside this function that is called when content starts to load, we need to add our click event listener to our items in 3d Flow list so we create a for loop to add this to all our items.
We also want to show our initial items text description so we include this in our function that is called on content load start
Next, we need our description to be updated for the item as they are clicked.

Event Listener for 3d Flow list Content Load Start

As discussed in our plan our first step is to wait for the component to start loading content and then calling a function that will add our mouse event listener for click. We also want to load our initial selected item's description into our text field.

function contentLoad (event:Event) {
    for (var i:Number = 0; i<=myFlow.length-1; i++) {
        myFlow.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    txtDescr.text = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowList3DEvent.CONTENT_LOAD_START, contentLoad);

Function that Loads Events Target's Description on Click

Now we have created the event listener that calls our itemClick function, so we need to create this function and have it load the target of click's description from the xml.

// Handle item click
function itemClick(event:ItemMouseEvent) {
txtDescr.text = event.item.description;
}

AFComponents.com