Integrating FlowList with Components: Description Pane
Updated: Jan 7, 2008
Views: 912
Description: This tutorial will show you how to use our Description Pane component in conjunction with the Flow List Component so that the Description Pane shows and loads the description from the XML on when on Selected Item.
Complete Code:
import flash.events.MouseEvent;
import com.afcomponents.flowlist.FlowListEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
//On Load Complete get First Item and its description
function loadComplete(event:Event){
myFlow.addEventListener(MouseEvent.CLICK, itemSelect);
myDescrPane.content = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, loadComplete);
//Gets Selected Item Description from XML
function itemSelect(event:MouseEvent){
myDescrPane.content = myFlow.getSelectedItem().description;
}
import com.afcomponents.flowlist.FlowListEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
//On Load Complete get First Item and its description
function loadComplete(event:Event){
myFlow.addEventListener(MouseEvent.CLICK, itemSelect);
myDescrPane.content = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, loadComplete);
//Gets Selected Item Description from XML
function itemSelect(event:MouseEvent){
myDescrPane.content = myFlow.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 Flow List component using XML. Also make sure that you give your Flow List an instance name of myFlow.
Please make sure that you have added your target URL's into the data tag in your XML document for all your items.
Before you proceed, please make sure you have also install the Description Pane component which is included with purchase of the Scroll Panel.
Part I - Place Description Pane on the Stage
The next step is to add an instance of the Description Pane to the stage using the components panel (Window > Components) and give it an instance name of myDescrPane.
Part II - Adding the Description Pane on Initial Load
One option that you can do with the Flow List is have the Description Panel load the description of the selected item. Add the following ActionScript to your flash movie in an actions layer:
import com.afcomponents.flowlist.FlowListEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
//On Load Complete get First Item and its description
function loadComplete(event:Event){
myFlow.addEventListener(MouseEvent.CLICK, itemSelect);
myDescrPane.content = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, loadComplete);
import com.afcomponents.descriptionpane.DescriptionPanePosition;
//On Load Complete get First Item and its description
function loadComplete(event:Event){
myFlow.addEventListener(MouseEvent.CLICK, itemSelect);
myDescrPane.content = myFlow.getSelectedItem().description;
}
myFlow.addEventListener(FlowListEvent.ITEM_LOAD_COMPLETE, loadComplete);
Part III - Update Description Pane when Next Item Is Clicked
Here you will need to add event listener for a mouse click event. Then a method following it will update the Description pane with new description.
import flash.events.MouseEvent;
//Gets Selected Item Description from XML
function itemSelect(event:MouseEvent){
myDescrPane.content = myFlow.getSelectedItem().description;
}
//Gets Selected Item Description from XML
function itemSelect(event:MouseEvent){
myDescrPane.content = myFlow.getSelectedItem().description;
}
Other Tutorials
