Advanced Flash Components

Integrating 2D Carousel With Components: Description Pane

Updated: Dec 10, 2007 Views: 1069

Description: This tutorial will show you how integrate the 2D Carousel with Description Pane so that the Description Pane shows the selected item's description from the XML document.

Components Used in this Tutorial: 2D Carousel AS3.0 and Description Pane AS3.0

The Completed Project:

Complete Code:

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

stage.scaleMode = StageScaleMode.NO_SCALE;

myDescrPane.setOwner({owner:myCarousel, align:DescriptionPanePosition.BOTTOM_CENTER, width:1});
myDescrPane.visibility = "AUTOHIDE";
myDescrPane.offset = {x:0, y:75};
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:18, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};
import fl.transitions.*;
import fl.transitions.easing.*;
myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

function loadComplete(event:Event){
    myCarousel.addGenericItemEventListener(MouseEvent.CLICK, CarouselSelect);
    myDescrPane.content = myCarousel.getSelectedItem().description;
    myDescrPane.show();

}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, loadComplete);

function CarouselSelect(event:MouseEvent){
    myDescrPane.content = myCarousel.getSelectedItem().description;
    myDescrPane.show();
}

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.

Setting up The Description Pane

After you have the Description Pane component installed, drag an instance of it onto the stage from the components panel (Window > Components). Make sure that you give your description pane an instance name of myDescrPane.

Plan for ActionScript

We will use a little ActionScript to connect the Description Pane to the Carousel and format the Description Pane.

First, we want to use ActionScript to add the Description Pane as a child of the Carousel, set it's position offset, format the text, and set the transition
Next, we want to add an event listener for when a item is clicked after the component's XML has loaded.
We want this event listener to call a function that will load the clicked item's description into the Description Pane and starts a transition to occur on the Description Pane.
Lastly, we also want the initial items description to load into the Description Pane.

Formating the Description Pane

import com.afcomponents.descriptionpane.DescriptionPanePosition;

// Sets the Description Pane as a child of the Carousel
myDescrPane.setOwner({owner:myCarousel, align:DescriptionPanePosition.BOTTOM_CENTER, width:1});
//Changes the position of the Description Pane relative to the position you set it on the carousel above
myDescrPane.offset = {x:0, y:75};
//Formats the Description Pane's text
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:18, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};
//Adds a transition to the Description Pane on Show and Hide
import fl.transitions.*;
import fl.transitions.easing.*;
myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

Add Item Click Event Listener

Event listeners for items in the Carousel can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our click event listener.

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

function loadComplete(event:Event){
myCarousel.addGenericItemEventListener(MouseEvent.CLICK, CarouselSelect);
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, loadComplete);

Item Click Function

Next, we add the function that our click event listener calls, which updates the Description Pane's text to our target's description in the XML document. We also want to activate the Description Pane's transition so use the show method:

function CarouselSelect(event:MouseEvent){
myDescrPane.content = myCarousel.getSelectedItem().description;
myDescrPane.show();
}

Loading the Initial Item Description

Lastly, we want to update our XML load complete function so that the initial item's description gets loaded into our Description Pane.

function loadComplete(event:Event){
myCarousel.addGenericItemEventListener(MouseEvent.CLICK, CarouselSelect);
myDescrPane.content = myCarousel.getSelectedItem().description;
}
myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, loadComplete);

Component Info

Carousel (AS 3.0)

Knowledge Base

Forum