Using the Description Pane with the Loop AS3.0 Component
Updated: Nov 5, 2007
Views: 3739
Description: This tutorial will show you how to use our Description Pane component in conjunction with the Loop AS3.0 component so that the Description Pane shows and loads the description from the XML on roll over of a object in the Loop and hides on roll out.
Code used in this tutorial:
iimport flash.events.MouseEvent;
import com.afcomponents.loop.LoopEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
// Set Loop as Description Pane owner
myDescrPane.setOwner({owner:myLoop, align:DescriptionPanePosition.BOTTOM_CENTER, width:0.5});
// Add generic ROLL_OVER event to each Loop item after XML_LOAD_COMPLETE
function onLoopItemOver(event:MouseEvent) {
// Update Description Pane
myDescrPane.content = String(event.target.description);
}
function onLoopXMLLoaded(event:LoopEvent) {
myLoop.addGenericItemEventListener(MouseEvent.ROLL_OVER, onLoopItemOver);
}
myLoop.addEventListener(LoopEvent.XML_LOAD_COMPLETE, onLoopXMLLoaded);
import com.afcomponents.loop.LoopEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
// Set Loop as Description Pane owner
myDescrPane.setOwner({owner:myLoop, align:DescriptionPanePosition.BOTTOM_CENTER, width:0.5});
// Add generic ROLL_OVER event to each Loop item after XML_LOAD_COMPLETE
function onLoopItemOver(event:MouseEvent) {
// Update Description Pane
myDescrPane.content = String(event.target.description);
}
function onLoopXMLLoaded(event:LoopEvent) {
myLoop.addGenericItemEventListener(MouseEvent.ROLL_OVER, onLoopItemOver);
}
myLoop.addEventListener(LoopEvent.XML_LOAD_COMPLETE, onLoopXMLLoaded);
Part II - Adding Descriptions in the XML and Loading the XML
To proceed you need to have created an XML file and linked your Loop 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 Loop component on the stage has an instance name of myLoop.
Before you proceed, please make sure you have also install the Description Pane component which is included with purchase of the Loop component.
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 - Adding the Description Pane on Rollover
One option of how to use the Description Pane with the Load 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.loop.LoopEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
// Set Loop as Description Pane owner
myDescrPane.setOwner({owner:myLoop, align:DescriptionPanePosition.BOTTOM_CENTER, width:0.5});
// Add generic ROLL_OVER event to each Loop item after XML_LOAD_COMPLETE
function onLoopItemOver(event:MouseEvent) {
// Update Description Pane
myDescrPane.content = String(event.target.description);
}
function onLoopXMLLoaded(event:LoopEvent) {
myLoop.addGenericItemEventListener(MouseEvent.ROLL_OVER, onLoopItemOver);
}
myLoop.addEventListener(LoopEvent.XML_LOAD_COMPLETE, onLoopXMLLoaded);
import com.afcomponents.loop.LoopEvent;
import com.afcomponents.descriptionpane.DescriptionPanePosition;
// Set Loop as Description Pane owner
myDescrPane.setOwner({owner:myLoop, align:DescriptionPanePosition.BOTTOM_CENTER, width:0.5});
// Add generic ROLL_OVER event to each Loop item after XML_LOAD_COMPLETE
function onLoopItemOver(event:MouseEvent) {
// Update Description Pane
myDescrPane.content = String(event.target.description);
}
function onLoopXMLLoaded(event:LoopEvent) {
myLoop.addGenericItemEventListener(MouseEvent.ROLL_OVER, onLoopItemOver);
}
myLoop.addEventListener(LoopEvent.XML_LOAD_COMPLETE, onLoopXMLLoaded);
