Attaching graphics dynamically

On this page, we'll look at recreating the Oahu map sample once more, this time attaching each of the dots dynamically. We'll start with a blank map and an array in our program (the same one we used in the last example, groupinfo) that holds information about each dot: the place name associated with it, which picture in the slider it is associated with (as before) and now, information about where on the map the dot should be placed.

If you're unfamiliar with the attachMovie method which allows dynamic attachment of movieclips to a Flash movie while it is running, read this page. We'll be using that method to attach the dot (control) movieclips in our map application.

Here is our new array structure:

var groupinfo:Array = [
   {placename:"Sunset Beach", myphoto:slider_mc.pic0, xloc:___, yloc:___},
   {placename:"Kailua",       myphoto:slider_mc.pic1, xloc:___, yloc:___},
   etc
   ];  
  

xloc and yloc are values that we'll need to supply for each dot. You can get them for each dot manually by clicking the dot on the map, looking in the Properties panel to see its x and y location, adding 5 to each of those values (because our dot has a center registration point and the Properties panel always reports the x and y location of the upper left corner of something), saving those values in the array, and then deleting the dot from the stage. Alternately, you could run a trace on the x and y location of each dot and paste the content from the output panel into your array. Either way, you want to end up with a movie that has no dots on stage, and x/y location information for each one in the array.

Linkage Id

There's one more thing we have to do to make the dot movieclips attachable at runtime: give the dot movieclip a linkage Id. To do that, right-click on the dot in the library, check "Export for Actionscript" and make sure "dot" (without quotes) appears in the Identifier box. This is also where you can assign a class name that will be associated with your movieclip, if you have one. We'll get to that on a later page.

Ok, with your groupinfo array filled in and your movieclip having a linkage id, you're ready to add the code to attach the dot. It should be done when the movie first starts up, so we'll put it in the init routine. There, we'll attach the movieclip, use the xloc and yloc properties in our array to position it, and assign the myphoto and placename properties that we used in the previous example. Here is the array and the init routine with the creation of the movieclip and assignment of properties:

  var groupinfo:Array = [
   {placename:"Sunset Beach", myphoto:slider_mc.pic0, xloc:178, yloc:85},
   {placename:"Kailua",       myphoto:slider_mc.pic1, xloc:347, yloc:245},
   {placename:"Hanauma Bay",  myphoto:slider_mc.pic2, xloc:367, yloc:318},
   {placename:"Waikiki",      myphoto:slider_mc.pic3, xloc:282, yloc:306},
   {placename:"Pearl Harbor", myphoto:slider_mc.pic4, xloc:217, yloc:273}
   ];

function init() {	
   var ctrl:MovieClip;      // reference to attached movieclip
   for (var i:Number=0; i < groupinfo.length; i++) {
      ctrl = this.attachMovie("dot", "p"+i, i, {
         _x:groupinfo[i].xloc,
         _y:groupinfo[i].yloc,
         placename:groupinfo[i].placename,
         myphoto:groupinfo[i].myphoto
       });

      // assign handler functions to each event property of the control
      ctrl.onRollOver = doRollOver;
      ctrl.onRollOut = doRollOut;
      ctrl.onRelease = doClick;   
   }
}
  

Within the init function, we first create a variable to use as a reference to the newly created control (so we can use that same reference to assign properties to it). Then we use attachMovie to attach the dot movieclip, and let the initObject do the work for us. By assigning values to _x and _y, we position the clip where we want it. We also assign placename and myphoto properties, as we did previously, but now they are done as part of the movieclip creation. Finally, handler functions are assigned to each of the clip's event properties (the ones that we care about, that is) as before, but using variable ctrl to refer to the clip, instead of this["p"+i] as before.

Get the as and fla files via the link at right if you want to see them, then go on to Easing Slider 4 page to see how to use createTextField and css styling to add the button captions dynamically.