Working with Events in Stack: Adding a Text Description
Updated: Jan 14, 2008
Views: 2450
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.
Components Used in this Tutorial: Stack AS3.0 and a dynamic text field created within flash.
The Complete Project:
Complete Code:
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 Stack component using XML. Also make sure that you give your Stack an instance name of myStack
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.
As discussed in our plan our first step is to wait for the component to initialize and then calling a function that will add our mouse event listeners for roll over, roll out, and click. We also want to load our initial selected item's description into our text field.
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.
The Complete Project:
Complete Code:
import flash.events.MouseEvent;
import com.afcomponents.events.StackEvent;
// Handle item click
function itemClick(event:MouseEvent) {
txtDescr.text = event.target.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<=myStack.length-1; i++) {
myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
txtDescr.text = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentLoad);
import com.afcomponents.events.StackEvent;
// Handle item click
function itemClick(event:MouseEvent) {
txtDescr.text = event.target.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<=myStack.length-1; i++) {
myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
txtDescr.text = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.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 Stack component using XML. Also make sure that you give your Stack an instance name of myStack
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 Stack have to be added after the component initializes, we first want to add an event listener for when content starts to load in the stack.
- Inside this function that is called when content starts to load, we need to add our click event listener to our items in Stack 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 initialization
- Next, we need our description to be updated for the item as they are clicked.
As discussed in our plan our first step is to wait for the component to initialize and then calling a function that will add our mouse event listeners for roll over, roll out, and click. We also want to load our initial selected item's description into our text field.
import flash.events.MouseEvent;
import com.afcomponents.events.StackEvent;
function contentLoad (event:Event) {
for (var i:Number = 0; i<myStack.length; i++) {
myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
txtDescr.text = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentLoad);
import com.afcomponents.events.StackEvent;
function contentLoad (event:Event) {
for (var i:Number = 0; i<myStack.length; i++) {
myStack.addItemEventListener (i, MouseEvent.CLICK, itemClick);
}
txtDescr.text = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.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:MouseEvent) {
txtDescr.text = event.target.description;
}
function itemClick(event:MouseEvent) {
txtDescr.text = event.target.description;
}
Other Tutorials
