Integrating Flow List with Components: Tool Tip
Updated: Jan 10, 2008
Views: 1413
Description: This tutorial will show you how integrate the Flow List with the Tooltip Component so that the Tooltip shows an Flow List item's description from the xml document as they are rolled over.
Complete Code:
import flash.events.MouseEvent;
import com.afcomponents.flowlist.FlowListEvent;
myTooltip.autoShow = false;
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OVER, showTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OUT, hideTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_CLICK, hideTooltip);
//Shows the Tooltip
function showTooltip(event:FlowListEvent){
myTooltip.show();
myTooltip.content = event.item.description;
}
//Hides the Tooltip
function hideTooltip(event:FlowListEvent){
myTooltip.hide();
}
import com.afcomponents.flowlist.FlowListEvent;
myTooltip.autoShow = false;
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OVER, showTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OUT, hideTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_CLICK, hideTooltip);
//Shows the Tooltip
function showTooltip(event:FlowListEvent){
myTooltip.show();
myTooltip.content = event.item.description;
}
//Hides the Tooltip
function hideTooltip(event:FlowListEvent){
myTooltip.hide();
}
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.
Setting up Tooltip
After you have the Tooltip component installed, drag an instance of the Tooltip onto the stage from the components panel (Window > Components). Make sure that you give your Tooltip an instance name of myTooltip.
Plan for ActionScript
Now, we just need to write a little ActionScript to connect the Tooltip to the items in the Flow List. We will add the ActionScript in the frame in actions layer in the time.
- First, we need to add event listeners to the Flow List to know when the user rolls the mouse over and off an item in the Flow List.
- The roll over event listener will call a function that shows and updates the text in the Tooltip.
- The roll out event listener calls a function that hides the Tooltip.
- Lastly, we need to set the initial state of the Tooltip to hidden.
Event listeners for items in the Flow List 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 add our content.
import flash.events.MouseEvent;
import com.afcomponents.flowlist.FlowListEvent;
myTooltip.autoShow = false;
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OVER, showTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OUT, hideTooltip);
import com.afcomponents.flowlist.FlowListEvent;
myTooltip.autoShow = false;
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OVER, showTooltip);
myFlow.addEventListener(FlowListEvent.ITEM_ON_ROLL_OUT, hideTooltip);
Roll Over Function
Next, we add the function that roll over event listener calls, which shows our Tooltip and updates the text to our target’s description in the XML document:
//Shows the Tooltip
function showTooltip(event:FlowListEvent){
myTooltip.show();
myTooltip.content = event.item.description;
}
function showTooltip(event:FlowListEvent){
myTooltip.show();
myTooltip.content = event.item.description;
}
Roll Out Function
Now, we just need to write the function that our roll out event listener calls, which hides our Tooltip.
//Hides the Tooltip
function hideTooltip(event:FlowListEvent){
myTooltip.hide();
}
function hideTooltip(event:FlowListEvent){
myTooltip.hide();
}
Hide the Tooltip Initially
Lastly we just need to set a property of the Tooltip so that it hides initially:
myTooltip.autoShow = false;
Other Tutorials
