6 Replies Latest reply on Apr 13, 2010 10:17 AM by dpitts

    Interactive FlashMap HELP


      #1 need:

      i have imported an Illustrator CS3 file into Flash CS3. I "think" when i created the Flash file, i chose and ActionScript 3.0 Flash file.

      I imported this Illustrator file into Flash and preserved the layers.

      This is a map that I have imported.

      So layers are named things like "railroads", "highways", "parks", "universities", etc....I then can select everything on the railroad layer and create a symbol of it - and I created a movie clip and named it "mcRailroads".

      Then I created a text item on the stage, clicked it, made it a symbol and made it a movie clip and named it "btnRailroads".

      When the flash file runs (swf embed in a web page), I want the map to show basic layers by default, then i want buttons (which i can make) on the side to show and hide layers (which would actually be movie clips). so when you clicked the "btnRailroads" it would show the "mcRailroads" movie clip....make it visible - by default i want it hidden.

      I would then repeat this with several other layers/movie clips and buttons.

      I just don't know the ActionScript to make things be hidden when the movie loads, show them by clicking a button and then hide them when you clock the button again...

      Ideally, i want someone to click each button to SHOW the contents of that movie clip, then click the button again to hide the contents.

      ALSO - #2 need

      ...i want a ZOOM IN and a ZOOM OUT button that will zoom the entire canvas - and pan if possible. I can make the buttons (btnZoomOut, btnZoomin, btnPanRight, btnPanLeft, btnPanUp, btnPanDown) - but I don't know (again) the scripting language to make the buttons act that way.

      Thanks a million....

        • 1. Re: Interactive FlashMap HELP
          Ned Murphy Adobe Community Professional & MVP

          #1 You start by setting the visible property of all the movieclips to false, as in... mcRailroads.visible = false; etc...


          Then in your button event handler function you simply toggle the visibility to be what it is not using an exclamation mark...


          btnRailroads.addEventListener(MouseEvent.CLICK, toggleRailroads);


          function toggleRailroads(evt:MouseEvent):void {

               mcRailroads.visible = !mcRailroads.visible;



          #2 To zoom you basically change the scaleX and scaleY properties.  To pan you change the x and y properties.  To do them gradually you need to introduce an ENTER_FRAME event listener and event handler.  Below is one approach for coding the zoom in. It is possible this could be refined when you get all of the code in place.  Once you understand it you should be able to do similar things for the other controls you want.


          var zoomInOut:int;  // will be 1 for zoom in and -1 for zoom out


          zoomInBtn.addEventListener(MouseEvent.MOUSE_DOWN, startZoomIn);

          zoomInBtn.addEventListener(MouseEvent.MOUSE_UP, stopZoomIn);


          function startZoomIn(evt:MouseEvent):void {

               zoomInOut = 1;

               stage.addEventListener(Event.ENTER_FRAME, zoom);



          function zoom(evt:MouseEvent):void { // shared by both zoom buttons

               map.scaleX += zoomInOut*0.05;

               map.scaleY += zoomInOut*0.05;



          function stopZoomIn(evt:MouseEvent):void {

               stage.removeEventListener(Event.ENTER_FRAME, zoom);



          Just be aware that anything I offered may need to be adjusted slightly since it is likely that the "map" which you zoom will likely be a movieclip containing the other movieclips that you make visible/invisible.

          • 2. Re: Interactive FlashMap HELP
            dpitts Level 1



            I added the code for the button and the movie clip (mcRailroads) and tested to movie....WORKS PERFECT.  thanks, I will do that to all other movie clips and corresponding buttons.


            The Zoom part....you said something about a movie clip that contains all other movie clips....


            I thought there was a way to make the entire stage zoom in and out, no matter what is on the stage...but if you are saying to do what I want, I need to make a movie clip that contains all the layers of my map (all other movie clips) then the zoom function zooms and pans that one "mother" movie clip?


            IS that what you are saying is the only way to do it?  right now I have all layers as seperate movie clips and I wanted the entire stage to zoom and pan according to what button the user clicked, etc...

            • 3. Re: Interactive FlashMap HELP
              Ned Murphy Adobe Community Professional & MVP

              You could keep them separate but you might have issues trying to manage scaling/panning them all simultaneously... they would all need to have their x/y axes in the same exact location--and for I I did for "map" you would have to do for each part.  The easiest route is to have them inside a containing movielcip and scale/pan that.  You cannot scale/pan the stage.

              • 4. Re: Interactive FlashMap HELP
                dpitts Level 1

                Ok...sounds easy enough - select all of the little movie clips, hit F8 to Make a Symbol and make it one movie clip called "mcEntireMap"

                so then, what does the code look like to make that one Movie Clip zoom in and put and Pan?


                I have buttons made:   btnZoomIn, btnZoomOut, btnPanRight, btnPanLeft, btnPanUp, btnPanDown


                I also would love for the movie clip "mcEntireMap" be draggable.....to me it's a pain to click pan buttons when I wish I could also offer the ability to just click and drag the map then click zoom in or zoom out to zoom.?


                How would I do that?

                • 5. Re: Interactive FlashMap HELP
                  Ned Murphy Adobe Community Professional & MVP

                  The code for zooming and panning would be like what I already showed you for the zoom in portion of it.  As far as dragging goes, you need to look into the startgDrag and stopDrag functions.  Chances are the help documents will have examples for that, but if not, you should be able to find a tutorial or example using Google.

                  • 6. Re: Interactive FlashMap HELP
                    dpitts Level 1



                    I added the code for the zoom in, in the first frame with my other actions.  I created the button.  I gave it an instance name of zoomInBtn


                    When i publish it, it throws errors:


                    Scene 1, Layer 'ACTIONS', Frame 1, Line 77     1120: Access of undefined property map.      map.scaleX +=zoomInOut*0.05