Advanced Flash Components

Using the Tooltip AS3.0 Component with the Scroll Panel Component

Updated: Oct 19, 2007 Views: 3420

Description: This tutorial will show you how link up the Tooltip Component to show descriptions as users roll over the images in the Scroll Panel Component.

Part I - The Completed Project

Code used in this tutorial:

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

//adds Roll Over and Roll Out Event Listeners
function loadComplete(event:Event){
    myScroll.addGenericItemEventListener(MouseEvent.ROLL_OVER, TooltipShow);
    myScroll.addGenericItemEventListener(MouseEvent.ROLL_OUT, TooltipHide);
}
myScroll.addEventListener(ScrollPanelEvent.ITEM_LOAD_COMPLETE, loadComplete);

//Shows and sets content of Tooltip
function TooltipShow(event:MouseEvent){
    myTooltip.show();
    myTooltip.content = event.target.description;
}

//Hides Tooltip
function TooltipHide(event:MouseEvent){
    myTooltip.hide();
}

//Set properties of Tooltip
myTooltip.autoShow = false;
myTooltip.contentStyle = {autoSize: true, scaleContent: false};

Part II - Installing Everything and Linking to XML

This tutorial uses both the Scroll Panel and Tooltip. Make you have them both purchased and installed.

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.

Also make you have an instance of the Tooltip on the stage and have given it the instance name of myTooltip.

Part III - ActionScript for to Link Tooltip with Scroll Panel

To show and hide Tooltip and load the description from the Scroll Panel XML doc add the following ActionScript to an actions layer in flash:

AFComponents.com