Search Flex Samples

Integrating 3D Flow list With Components: Tooltip

Complete Code:
import com.afcomponents.events.FlowList3DEvent;import flash.events.MouseEvent;myTooltip.autoShow = false;// Wait for items to load from XML and then add MouseEvent.CLICK to each item// NOTE: Before this, items do not existfunction contentLoad (event:Event) { for (var i:Number = 0; i<=myFlow.length-1; i++) { myFlow.addItemEventListener(i,MouseEvent.ROLL_OVER, itemOver); myFlow.addItemEventListener(i,MouseEvent.ROLL_OUT, itemOut); myFlow.selectItemAt(6); }}myFlow.addEventListener(FlowList3DEvent.CONTENT_LOAD_START, contentLoad);// Handle item overfunction itemOver(event:MouseEvent) { myTooltip.content = event.target.description; myTooltip.show();}// Handle item outfunction itemOut(event:MouseEvent) { myTooltip.hide();}Set-Up and Add Content Using through XMLBefore you begin make sure that you have successfully installed the component inspector have been able to load content into the 3D Flow list component using XML. Also make sure that you give your Stack an instance name of myFlow.Setting up TooltipAfter 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 ActionScriptNow, we just need to write a little ActionScript to connect the Tooltip to the items in the 3D 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 3D Flow list to know when the user rolls the mouse over and off an item in the 3D 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. Add Roll Over and Roll Out Event ListenersEvent listeners for items in the 3D Flow listcan 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 loop through the items in our 3D Flow list and add mouse click event listeners to our content.
import com.afcomponents.events.FlowList3DEvent;import flash.events.MouseEvent;myTooltip.autoShow = false;function contentLoad (event:Event) { for (var i:Number = 0; i<=myFlow.length-1; i++) { myFlow.addItemEventListener(i,MouseEvent.ROLL_OVER, itemOver); myFlow.addItemEventListener(i,MouseEvent.ROLL_OUT, itemOut); myFlow.selectItemAt(6); }}myFlow.addEventListener(FlowList3DEvent.CONTENT_LOAD_START, contentLoad);Roll Over FunctionNext, 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:// Handle item over
function itemOver(event:MouseEvent) { myTooltip.content = event.target.description; myTooltip.show();}Roll Out FunctionNow, we just need to write the function that our roll out event listener calls, which hides our Tooltip.
// Handle item outfunction itemOut(event:MouseEvent) { myTooltip.hide();}Hide the Tooltip InitiallyLastly we just need to set a property of the Tooltip so that it hides initially:
myTooltip.autoShow = false;

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples