Once you have created all the city icons and placed them on stage and given them instance names then put them in an array. This is just to make things easier to manage.
cityIcons.push(state_tx), cityIcons.push(state_ca) etc
Now we need to add the code to get the balloon to show. You mentioned animating it as well. Place your animation of a balloon growing in the cityTag_mc underneath your textfields. Give it an instance name for example balloon_mc.
Now we need to add the listeners. We will loop over our array so we only have to write it once.
//instead of manually adding to listeners to every city icon movielip we can now
//just loop over all the items in the array
for (var i:int = 0; i < cityIcons.length;i++)
{
var mcCity:MovieClip = cityIcons[i] as MovieClip;
myCity.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver)
myCity.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut)
}
function onMouseOut(e:MouseEvent):void
{
cityTag_mc.visible = false;
//TODO any animating of balloon, maybe you could have
//different labels so instead of changing visible change alpha when your tweening
}
function onMouseOver(e:MouseEvent):void
{
//move balloon to where the city icon is
//e.target refers to the object you have added the listener to
cityTag_mc.x = e.target.x; // move the balloons position to the city's position
cityTag_mc.x = e.target.y;
//you may want to add an offset so its not directly overthe top
cityTag_mc.visible = true;
switch(e.target)
{
//testing which city instance icon we rolled over
case:state_tx
cityTag_mc.title_txt.text ="Texas";
cityTag_mc.balloon_mc.play(); //don't worry about this for now
//do remaining stuff
break;
case:state_ca
//same as above
}
}
You can place an instance of the balloon called cityTag_mc already on stage and set visible to false, or you can create and remove as needed. This is just a guide don't take it as 100% as this is just off the top of my head.