5 Replies Latest reply on Oct 11, 2011 6:53 PM by Ned Murphy

    Making Interactive Map?


      Hi Everyone,


      For a project I am thinking about making an interactive map of the cemetery on my college campus. I would like the map to function like this map here: http://www.hamilton.edu/virtualtour/index.cfm I'll start by making the map in Illustrator but from there I'm not really sure where to go because I am new to Flash. I would like the name of the item the mouse is over to be displayed and then when clicked on a box comes up with additional information. If the item the mouse is over can change color that would be nice too. Panning and zooming would also be great if they are not incredibly hard. Are there any tutorials for these sorts of things?


      Thanks in advance,


        • 1. Re: Making Interactive Map?
          Ned Murphy Adobe Community Professional & MVP

          I recommend you start small.  Resolve your design functionality before you go creating the whole shebang that it involves.  Have a file with just one item with which you interact.


          How you code it will be dependent on which version of actionscript you use.  One way to approach the design is to have 2 movieclips that you make visible/invisible depending on the rollover versus the click, and these movieclips will have the data for the item dynamically written to them. 


          So you need to have some form of data storage for the information to be shown for each item... arrays usually work well, though you can keep it to one array by storing objects in the array.. one of the object properties being the rollover info and the other being the click info.

          1 person found this helpful
          • 2. Re: Making Interactive Map?
            nickr917 Level 1

            Good point starting small. Could you point me to a source that explains how to do the movieclip and array stuff? I think I found a tutorial for the rollover.

            • 3. Re: Making Interactive Map?
              Ned Murphy Adobe Community Professional & MVP

              The movieclip and array stuff is fairly basic so it might be hard to find tutorials.  If you want to try to find a tutorial you should search Google using terms like "AS3 Array tutorial".  What I recommend is that you become familar with these classes by looking thru the Flash Help documentation under their class sections.  Look for the properties and methods and events that support them to become familiar with what they involve.


              To control the visibility of a movieclip, it has a visible property... so setting movieclipName.visible = true; makes it appear and setting it false makes it disappear.


              If you were to place a textfield inside the movieclip, then you can target the textfield to assign text to it using...


                  movieclipName.textFieldName.text = "some text";



              As far as arrays go, if you haven't any familiarity with them, an array is essentially a set of data elements, each of which is targetable by an index number (0 thru length-1).  There are a number of ways to assign data to them, but possibly in your case you might want to do it manually one by one using an object...


              var yourArray:Array = new Array();


              yourArray.push( {shortText: "some short blurb 0", longText: "some long blurb 0"} );

              yourArray.push( {shortText: "some short blurb 1", longText: "some long blurb 1"} );


              meanwhile, you need some way to be able to assocaite each item (movieclip) with which you wish to interact with it's array data, so that can be done by assigning the index number of its data as a property of them item (movieclips allow you to do this dynamically)


              item0.indexNum = 0;

              item1.indexNum = 1;


              So then, when you rollover an item you can acquire that indexNum property and use it to get the data and plant it in the rollover movieclip's textfield...


              item0.addEventListener(MouseEvent.ROLL_OVER, rolloverItem);

              item1.addEventListener(MouseEvent.ROLL_OVER, rolloverItem);



              function rolloverItem(evt:MouseEvent):void {

                   movieclipName.text = yourArray[evt.currentTarget.indexNum];

                   movieclipName.visible = true;



              item0.addEventListener(MouseEvent.ROLL_OUT, rolloutItem);

              item1.addEventListener(MouseEvent.ROLL_OUT, rolloutItem);


              function rolloverItem(evt:MouseEvent):void {

                   movieclipName.text = "";

                   movieclipName.visible = false;


              • 4. Re: Making Interactive Map?
                nickr917 Level 1

                Awesome, I'll give it a try and see how it goes. Thank you.

                • 5. Re: Making Interactive Map?
                  Ned Murphy Adobe Community Professional & MVP

                  One adjustment...


                  function rolloverItem(evt:MouseEvent):void {

                       movieclipName.text = yourArray[evt.currentTarget.indexNum].shortText;

                       movieclipName.visible = true;



                  added shortText so that I am targeting that element of the object

                  1 person found this helpful