In this tutorial, you will learn how to create an interactive Map using Flash. Just follow the steps given below.

1. Open a new Flash Document. Set the stage to 675 px X 675 px and frame rate to 30fps.

    

2. Draw (or) trace the Map. In this tutorial we have used the India map.

    

3. Name the layer as India Map and lock the layer.

    

4. Create a new layer Called Buttons.

5. Create a Small Circle using Oval tool. Select the circle and convert it to Button by pressing F8.

    

    

6. Go back to the main time line.

7. Drag the Button Symbol on to the stage and place at the respective cities where you need to insert a pop up image.

    

8. Click the Button and give the instance name for each Button respectively.

    

    

9. Similarly give instances for the entire set of Button like Tajmahal_btn, TeaEstate_btn, Beach_btn, Palace_btn and andamaan_btn.

10.Lock all the layers and create a new layer name it as Marker.

11. Click Insert–>New Symbol, Name the symbol as My Marker and Choose Movie clip as its behavior.

12. Create a symbol as shown below:

    

This is used as an indicator to depict places that have been mapped.

13. The tip of the arrow must be placed exactly above the Registration Point.

    

14. Name the layer as Marker and insert a KeyFrame on the 6^th frame.

15. Insert another layer and name it as Cities.

16. Press F6 six times so that 6 KeyFrames are included.

17. Click on the first frame open the Actions panel and assign stop action.

    

18. Click the each frame and insert images to each Frame.

    

19. Name the instances for each frame.

20. Drag the movie clip My Marker and place it below the stage.

    

21. Lock all the layers including Marker.

22. Go back to the main time line.

23. Create a new layer and name it actions.

24. Open the Actions panel and assign the following actions shown below�.

    

import mx.transitions.Tween;

import mx.transitions.easing.*;

var cities:Array = [”Tajmahal”, “Palace”, “andamaan”, “Beach”,”TeaEstate”]

function mover (targetX, targetY){

currentX = marker_mc._x;

currentY = marker_mc._y;

var xTween:Tween = new Tween(marker_mc, “_x”, Strong.easeOut, currentX, targetX, .5, true);

var yTween:Tween = new Tween(marker_mc, “_y”, Back.easeOut, currentY, targetY, 1.5, true);

}

for (var i = 0; i