text: Creating an Interactive Map in FlashBy Riyadh Al Balushi (Blue_Chi) | Flash CS3 + 8 | Intermediate
  This tutorial will teach you how to create an interactive map in which a map marker flies over to the city highlighted and shows a small photograph of that city. We will do this by using the Tween Class to control the movement of the marker and create a smooth non-linear animation. We will also use Arrays, Functions, and Loops to create make our code smart and reusable. Check the example below to see in action the effect we will create.
  Photograph Credits: AD209, soylentgreen23, and jonrawlinson
  Starting Off
  You will need to download this zip file to get the images used in this tutorial.
  Create a new ActionScript 1 or 2 Flash movie, set the dimensions to 620x420px, the framerate to 30, and the background colour to its default value as it does not matter. Name the only layer in the timeline Map and import the main image onto the stage and then lock the layer.
  Creating and Deploying Buttons
  Create a new layer and name it Buttons. We will use this layer to create our first button and then duplicate a copy of it on all the city spots we want to highlight. Select the Oval Tool and draw a circle anywhere on the stage. The diameter of the circle I drew is about 25px. While the shape is still selected, press F8, to convert it to a button symbol, name it myButton and make sure that the Registration point is centred. The marker will fly to the registration point of the button, so it is important to have it at the center.
  Our map already has graphical symbols on the city locations, this means that we do not need our button to have any graphical look other than what we already have on the map. We will make our button invisible by configuring its timeline. Double click the circle to edit it, the timeline should change into that of a button, drag the contents of the Up frame to the Hit frame, this will make our button have a hit area, but will not have a graphical look.
  Our button is now ready, go back to the main timeline and place our first button on the star that indicates the location of Muscat on the map. Once there, access the Properties Inspector and name this button muscat_btn.
  We have our first button ready, copy and paste this button and place it over the marks for Sohar, Dubai and Abu Dhabi. You will then have to change the instance name of these places to sohar_btn, dubai_btn, and abu_dabhi_btn.
  Creating the Map Marker
  Make sure the two existing layers are locked, create a new one and name it Marker, import the marker image onto the stage to use as a marker. While the object is selected, press F8 to convert it to a Movie Clip symbol, name it myMarker. We have to manually assign the registration point to the tip of the marker, so that when it moves the tip of the marker is treated as its pivotal point. Double click the object on the stage to edit the marker movie clip, notice where the plus sign + is on the stage and move the marker so that its tip touches this plus sign. When you're done, lock the layer.
  There should be one layer and one frame in the timeline of the marker movie clip. Name this layer Marker, and then add 4 extra frames (press F5 four times) to this layer. Add a new layer to this timeline and name it Cities, add 4 extra keyframes (while this layer is selected, press F6 four times). Your timeline should look like the one in the image below now.
  We will now import the thumbnails for each of the cities. Make sure the Cities layer is selected, now click on the second frame in it and go through Frame>Import>Import to Stage and select the Muscat image. You must position the image to be on top of the marker as illustrated in the image below.
  Click once on Frame 2 of the Cities layer, access the Properties Inspector and assign the name muscat as the Frame Label of Frame 2.
  Now one by one, import each of the city images on a different frame in the Cities layer, position them on the right place on the marker, and then label their frames with the city name (sohar, dubai, and abu_dhabi), the order does not matter as these thumbnails will be called by their frame name and not frame number.
  Finally, add a stop(); action to the first frame of this timeline to stop it from automatically playing. Right-Click Frame 1 of the Cities layer and open up the Actions window, type the following code to do the trick.
  Go now back to the main timeline and assign the instance name marker_mc to the marker movie clip.
  Adding the ActionScript
  The assets of our movie clip are now all set, add a new layer named Actions. Now paste the code below:
  import mx.transitions.easing.*;
  var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
  function mover (targetX, targetY){);
  }
  for (var i = 0; i<cities.length; i++){
  var my_btn = this[cities[i]+"_btn"];
  my_btn.myCity = cities[i];
  my_btn.onRollOver = function() {
  mover( this._x, this._y);
  marker_mc.gotoAndStop(this.myCity);
  }
  }
  Code Explanation
  The first two lines of the code merely import the Tween and Easing classes required for using the Tween effect.
  import mx.transitions.easing.*;
  The second segment (one line) is the Array that contains the names of the cities, the names here have to match the first segment of the button name, which we will generate later. It is also the same names we used as frame labels. You should be aware of the fact that all of these values are case sensitive.
  The third code segment creates a Function that uses the Tween class to move the marker from its current position to the position of the button that calls this function. We created two tween objects to move the object horizontally and vertically.);
  }
  The final code segment uses a loop to cycle through the array of cities, create instance names for the buttons, and then assign a .onRollOver event handler to these buttons to call the mover function and tell the marker go to and stop at the image thumbnail of the city selected.
  var my_btn = this[cities[i]+"_btn"];
  my_btn.myCity = cities[i];
  my_btn.onRollOver = function() {
  mover( this._x, this._y);
  marker_mc.gotoAndStop(this.myCity);
  }
  }
  That should do it. You can test your movie now to see your interactive map in action. You can add extra locations to your map by adding a button named in the format of cityName_btn, and then add a thumbnail to the marker timeline and label it cityName, finally add the city to your cities array.
  This concludes our tutorial. Please feel free to post at the Oman3D Forum if you have any questions.
  - End of Tutorial.