Advanced Flash Components

Working with Events in 2D Carousel: Adding a Text Description

Updated: Dec 4, 2007 Views: 804

Description: This tutorial will show you how to add and use a mouse roll over and mouse click event to call a function that loads the description from the XML document for the event target item into a text field. We also want to add a mouse roll out function that will return the description to the selected item since it will change on roll over of item.

Components Used in this Tutorial: 2D Carousel AS3.0. Also used: Dynamic Text Field in flash.

The Completed Project:

Complete Code

import com.afcomponents.events.CarouselEvent;
import flash.events.MouseEvent;

function onCarouselInit(event:Event){
       myCarousel.addGenericItemEventListener(MouseEvent.CLICK, loadItemDescription);
    myCarousel.addGenericItemEventListener(MouseEvent.ROLL_OVER, loadItemDescription);
    myCarousel.addGenericItemEventListener(MouseEvent.ROLL_OUT, loadSelectedtemDescription);

    txtDescr.text = myCarousel.getSelectedItem().description;
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onCarouselInit);

function loadItemDescription(event:MouseEvent){
    txtDescr.text = event.target.description;
}

function loadSelectedtemDescription(event:MouseEvent){
    txtDescr.text = myCarousel.getSelectedItem().description;
}

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 Carousel component using XML. Also make sure that you give your Carousel 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 Carousel 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 roll over, roll out, and click.
Also we need our text description to show when our Carousel initializes, so we will included a line in our function that is called on initialization that adds our initial description
Next, we need our description to be updated for the item as we click or roll over it.
Lastly, we need our description to update to the selected items description as we roll out of an item and no item is targeted.

Event Listener for 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 com.afcomponents.events.CarouselEvent;
import flash.events.MouseEvent;

function onCarouselInit(event:Event){
    myCarousel.addGenericItemEventListener(MouseEvent.CLICK, loadItemDescription);
    myCarousel.addGenericItemEventListener(MouseEvent.ROLL_OVER, loadItemDescription);
    myCarousel.addGenericItemEventListener(MouseEvent.ROLL_OUT, loadSelectedtemDescription);

    txtDescr.text = myCarousel.getSelectedItem().description;
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onCarouselInit);

Function that Loads Events Target's Description (Roll Over and Click)

As you may notice in the above initialize function where we added the mouse event listeners, we call the same function for mouse roll over and click. This is because they both essentially do the same thing and load the description for the item that the mouse targets so we can just write one function for both.

function loadItemDescription(event:MouseEvent){
txtDescr.text = event.target.description;
}

Function that Loads Carousel Selected Item's Description

Lastly, we need to write the function that our mouse event listener that we added during component initialization above calls. This function is different from the mouse roll over and click because it loads the description of the selected item when component is selected instead of the targeted component.

function loadSelectedtemDescription(event:MouseEvent){
txtDescr.text = myCarousel.getSelectedItem().description;
}

Component Info

Carousel (AS 3.0)

Knowledge Base

Forum