Advanced Flash Components

Integrating Stack With Components: Description Pane

Updated: Jan 15, 2008 Views: 985

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

Components Used in this Tutorial: Stack AS3.0 and Description Pane AS3.0

The Completed Project:

Complete Code:

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

import fl.transitions.*;
import fl.transitions.easing.*;

myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

// Sets the Description Pane as a child of the Stack
myDescrPane.setOwner({owner:myStack, align:DescriptionPanePosition.BOTTOM_CENTER, width:1.5});

//Changes the position of the Description Pane relative to the position you set it on the Stack above
myDescrPane.offset = {x:0, y:75};

//Formats the Description Pane's text
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:12, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};

// 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);
    }
    myDescrPane.content = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentLoad);

// Handle item click
function itemClick(event:MouseEvent) {
    myDescrPane.content = event.target.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 Stack component using XML . Also make sure that you give your Stack an instance name of myStack.

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 Stack and format the Description Pane.

First, we want to use ActionScript to add the Description Pane as a child of the Stack, 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 our Description Pane's default text to be our selected item, so also wait for the components xml to load and then our Description Pane to initially selected Stack item's decription.
Lastly, when an item is clicked we want to update our dDescription Pane's text to this item's description.

Formating the Description Pane

First, we just need to add the Description Pane as a child of our stack and then format the transition, position, and text that appears in the Description Pane.

import com.afcomponents.descriptionpane.DescriptionPanePosition;
import fl.transitions.*;
import fl.transitions.easing.*;

myDescrPane.transition = {type:AFC_Blur, direction:Transition.IN, duration:1, easing:Strong.easeOut, startPoint:2};

// Sets the Description Pane as a child of the Stack
myDescrPane.setOwner({owner:myStack, align:DescriptionPanePosition.BOTTOM_CENTER, width:1.5});

//Changes the position of the Description Pane relative to the position you set it on the Stack above
myDescrPane.offset = {x:0, y:75};

//Formats the Description Pane's text
myDescrPane.contentStyle = {align:"center", font:"Arial", color:0xFFFFFF, size:12, embed:false, isHTML:false, verticalPadding:10, horizontalPadding:10, autoSize:true};

Add Item Click Event Listener

Event listeners for items in the Stack 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 loop through our items and add our click event listener to them.

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

// 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);
    }
    //Where we set the Description Pane to Initial Item's Description
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentLoad);

Loading Initial Item's Description into Description Pane

To load our initial item description, we need to also wait until the stack has initialized and content exist so we add this inside the same function that we used above.

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

// 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);
    }
    myDescrPane.content = myStack.getSelectedItem().description;
}
myStack.addEventListener(StackEvent.CONTENT_LOAD_START, contentLoad);

Update Description Pane's Text on Item Click

Every time a new item is select we want our Description Pane's text to switch to this items. We do this by having our mouse click event listeners that we added above call a function that updates our Description Pane to our new selected items description.

// Handle item click
function itemClick(event:MouseEvent) {
myDescrPane.content = event.target.description;
}

Component Info

Stack (AS 3.0)

Knowledge Base

Forum