Add nested movieclip and set dynamic text AS3

I have a map of the US wit开发者_JS百科h icons over a number of cities (about 12). When the user hovers their mouse over one of these icons a movieclip with two dynamic text fields pop-up over the icon.

Each city's icon movieclip is named after it's home state: state_(abbreviation) ie: state_TX

The pop-up text balloon is named: cityTag_mc Inside that is two dynamic text fields: title_txt & subTitle_txt

The logic is to add the cityTag_mc when the user hovers over state_TX and input that state's title and sub title.

My main hang-up is how to feed text into the fields (and animate the balloon). I don't quite know where to start. I would like to just set the text for each state in the Action Script. Where do I start? What is the best practice?

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.