Advanced Flash Components

AFC Tooltip + GMap

Updated: Jun 1, 2007 Views: 20148

Description: In this tutorial we explain how to use AFC tooltip component with the GMap component to display marker names on roll over event.

Download source files

In this tutorial we are going to use AFC Tooltip component to show marker's name on roll over event. Please note that tooltip component is not included in the source files, you'll have to buy it for this sample to work.

First let's drag GMap component on stage and give it an instance name: "gMap". Second, drag AFC Tooltip component on stage and name it "AFC_Tooltip". Reposition and resize the GMap component as you wish. You can also tweak the tooltip component properties to change it's appearence. Once you done playing with the components let us continue with Action Scripting.

Open up the "Actions" panel. (select the frame on the timeline where you have your components and hit F9 on the keyboard or right click on the frame and select "Actions" from the popup menu) First we need to setup the tooltip:

// hide the tooltip, so it is not visible until user rolls over a marker
AFC_tooltip.hideTooltip();
// enable autoDrag property, so that tooltip will follow the mouse pointer
AFC_tooltip.autoDrag = true;

You can add points manually be calling addPoint() method as described in this tutorial. But we will use built-in GMap KML support, so that it will automatically create points listed in KML file. So we need to create KML layer (1), wait for it to load (2), run through all the points created (3) and setup the tooltip (4) for each point:

// 1. add kml layer
var layer = gMap.addKMLLayer({path:"http://www.afcomponents.com/components/g_map/Olympic_Host_Cities.kml"});
// 2. wait for kml layer to load
layer.addEventListener("KML_READY", this);
// 3. run through all the points created
function KML_READY(evt:Object)
{
  var pnts = evt.target.getGeometryObjects();
  for (var i:Number = 0; i < pnts.length; i++)
  {
    // we need to check only GPoint objects
    if (pnts[i].type == "GPoint")
    {
      // 4. add code that setups tooltip for each point here
    }
  }
}

But how can we setup the tooltip for each point? The main idea is that we need to show tooltip upon roll over event and hide when roll out event fires. To catch these events you add event listeners to created GPoint objects. Add these lines inside if statement:

// catch roll over event
pnts[i].addEventListener("GEOMETRY_ON_ROLL_OVER", showTooltip);
// catch roll out event
pnts[i].addEventListener("GEOMETRY_ON_ROLL_OUT", hideTooltip);

We have specified showToolip and hideTooltip functions that will be invoked when the events occur. In these functions we actually hide and show the AFC Tooltip and set it's content:

// show tootip, set the text to point's name
function showTooltip(evt:Object)
{
  // note that evt.target is the reference to GPoint object we are over now
  // we take point's name and set the tooltip's content
  AFC_tooltip.content = evt.target.name;
  // finally we show the tooltip
  AFC_tooltip.showTooltip();
}

// hide tooltip
function hideTooltip(evt:Object)
{
  AFC_tooltip.hideTooltip();
}

Finally, test the movie.

AFComponents.com