Using the Description Pane with the Scroll Panel Component
Updated: Oct 19, 2007
Views: 2593
Description: This tutorial will show you how to use our Description Pane component in conjunction with the Scroll Panel Component so that the Description Pane shows and loads the description from the XML on roll over of a object in the Scroll Panel and hides on roll out.
Code used in this tutorial:
import flash.events.MouseEvent;
import com.afcomponents.events.ScrollPanelEvent;
// Handle Scroll Panel initialize and add Event Listeners for Roll Over and Out
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OVER, DescrPaneShow);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OUT, DescrPaneHide);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
//Shows and Loads content into Description Pane
function DescrPaneShow(event:MouseEvent){
myDescrPane.show();
myDescrPane.content = event.target.description;
}
//Hides Description Pane
function DescrPaneHide(event:MouseEvent){
myDescrPane.hide();
}
//Turns initial state of Description Pane to Hidden
myDescrPane.visibility = "off";
import com.afcomponents.events.ScrollPanelEvent;
// Handle Scroll Panel initialize and add Event Listeners for Roll Over and Out
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OVER, DescrPaneShow);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OUT, DescrPaneHide);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
//Shows and Loads content into Description Pane
function DescrPaneShow(event:MouseEvent){
myDescrPane.show();
myDescrPane.content = event.target.description;
}
//Hides Description Pane
function DescrPaneHide(event:MouseEvent){
myDescrPane.hide();
}
//Turns initial state of Description Pane to Hidden
myDescrPane.visibility = "off";
Part II - Adding Descriptions in the XML and Loading the XML
To proceed you need to have created an XML file and linked your Scroll Panel on the stage in flash to the XML File. If you have not, please see the loading images through XML tutorial.
Also make sure the Scroll Panel has an instance name of myScroll.
Before you proceed, please make sure you have also install the Description Pane component which is included with purchase of the Scroll Panel.
Part III - 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 IV (a) - Adding the Description Pane on Click
One option that you can do with the Scroll Panel 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.events.ScrollPanelEvent;
// Handle Scroll Panel initialize
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
// Handle Scroll Panel initialize
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
Part IV (b) - Adding the Description Pane on Rollover
Another option is load the description of images in the Description Pane when a user rolls over the different items. To do this, add the following ActionScript to your flash movie in an actions layer:
import flash.events.MouseEvent;
import com.afcomponents.events.ScrollPanelEvent;
// Handle Scroll Panel initialize and add Event Listeners for Roll Over and Out
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OVER, DescrPaneShow);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OUT, DescrPaneHide);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
//Shows and Loads content into Description Pane
function DescrPaneShow(event:MouseEvent){
myDescrPane.show();
myDescrPane.content = event.target.description;
}
//Hides Description Pane
function DescrPaneHide(event:MouseEvent){
myDescrPane.hide();
}
//Turns initial state of Description Pane to Hidden
myDescrPane.visibility = "off";
import com.afcomponents.events.ScrollPanelEvent;
// Handle Scroll Panel initialize and add Event Listeners for Roll Over and Out
function scrollFirstItemLoad(event:ScrollPanelEvent):void {
myScroll.removeEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OVER, DescrPaneShow);
myScroll.addGenericItemEventListener(MouseEvent.ROLL_OUT, DescrPaneHide);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, scrollFirstItemLoad);
// Handle Scroll Panel item selected
function scrollItemSelected(event:ScrollPanelEvent):void {
myDescrPane.content = myScroll.getSelectedItem().description;
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_SELECTED, scrollItemSelected);
//Shows and Loads content into Description Pane
function DescrPaneShow(event:MouseEvent){
myDescrPane.show();
myDescrPane.content = event.target.description;
}
//Hides Description Pane
function DescrPaneHide(event:MouseEvent){
myDescrPane.hide();
}
//Turns initial state of Description Pane to Hidden
myDescrPane.visibility = "off";
