Advanced Flash Components

Working with Events in 3d Carousel: Adding Text Decription

Updated: Feb 19, 2008 Views: 738

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.*;
import com.afcomponents.events.CarouselEvent;

// 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<=myCarousel.length-1; i++) {
        myCarousel.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    txtDescr.text = myCarousel.getItemAt(0).description;
}
myCarousel.addEventListener(CarouselEvent.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 Carousel component using XML. Also make sure that you give your 3d Carousel has an instance name of myCarousel.

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 Carousel have to be added after the component initializes, we first want to add an event listener for when content starts to load in the 3d Carousel.
Inside this function that is called when content starts to load, we need to add our click event listener to our items in 3d Carousel 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.

Event Listener for 3d Carousel Initialization

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.item.*;
import com.afcomponents.events.CarouselEvent;

function contentLoad (event:Event) {
    for (var i:Number = 0; i<=myCarousel.length-1; i++) {
        myCarousel.addItemEventListener (i, MouseEvent.CLICK, itemClick);
    }
    txtDescr.text = myCarousel.getItemAt(0).description;
}
myCarousel.addEventListener(CarouselEvent.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