13 Replies Latest reply on May 4, 2011 9:00 AM by nshores

    How do you create an interactive floor plan in flash using AS2?

    nshores

      I am attempting to make an interactive floor plan.  I am sure that I have done it wrong, I am new to flash.  So far I have outlined the rooms that I want to make "hot spots", turned them into buttons. Then I selected all the buttons and turned it into a movie clip called "mcbtns".  I then turned it into a movie clip again, named it "mcbtninside"; this is where I house all of my buttons which have instance names "btn1" thru "btn11".

       

      The images that corrospond with the rooms of floor plan are housed in a movie clip named "mcPhotos".  On the timeline the photos are place at 10 frame increments, and the Action Script time line above them has frame names "img1" thru "img11", which corrospond with the photos every 10 frames.  Frame 1 on the AS line has the code stop();

       

      Now back to Scene 1...

       

      Scene 1 frame 1 on the Action Script line I have in the following script:

       

      mcPhotos._visible = false;

      this.mcbtns.onRollOver = function() {

           mcPhotos._visible = true;

      };

      this.mcbtns.onRollOut = function() {

           mcPhotos._visible = false;

      };

      stop();

       

      In frame 1 on the Action Script line within "mcbtninside" I have the following script:

       

      var frameNum:Number;

       

      function photoChange(){

           _root.photos.gotoAndPlay("img" + frameNum);

      }

      btn1.onRollOver = function(){

           frameNum = 1;

           photoChange():

      }

      btn2.onRollOver = function(){

           frameNum = 2;

           photoChange():

      }

       

      The code continues thru btn11.

       

      So I am sure that I have gone wrong in many places.  If someone could lead me in the right direction I would greatly appreciate it.

        • 1. Re: How do you create an interactive floor plan in flash using AS2?
          Ned Murphy Adobe Community Professional & MVP

          If you are sure you have done something wrong, it helps if you describe what isn't working that makes you conclude that.  From what I was able to gather from the story, and the code you show.... if all of the buttons are inside mcbtns, but you have assigned mouse interactive code to mcbtns, then that code on mcbtns will block any ability to interact with the buttons inside.

          • 2. Re: How do you create an interactive floor plan in flash using AS2?
            nshores Level 1

            Unfortunately I was not sure what I did wrong.  I have been trying to piece together different instruction in order to create this map.  I started using Flash two weeks ago.  Where should I apply mouse interactive code in order to create the appropriate roll over effect?  Did I at least structure the movie clips correctly?

            • 3. Re: How do you create an interactive floor plan in flash using AS2?
              Ned Murphy Adobe Community Professional & MVP

              There are all kinds of ways to design things with Flash, so it's hard to say if you are correctly structuring things.  You haven't explained how it is supposed to work, nor what about it is not working, so whatever an appropriate rollover effect might be remains an unknown.

              • 4. Re: How do you create an interactive floor plan in flash using AS2?
                nshores Level 1

                My intention was to create a floor plan where one can move their mouse over an area of the plan and see an image that corrosponds with that particular area of the room.  When I test it and move the mouse over a room nothing happens. I can see the floor plan and the cursor that indicates that there are clickable areas. Also, before I put the stop(); in the actions time line at frame 1 above the images time line, the images ran through once then stopped. But that had nothing to do with the buttons I created. 

                 

                I suspect that there is a less convoluted way of accomplishing this. Perhaps by just manipulating the Up and Over states of the button.   I just want to be able to stream line creating this floor plan because I have many more to do.

                 

                Thank you for taking the time to walk me through this.

                 

                nshores

                • 5. Re: How do you create an interactive floor plan in flash using AS2?
                  Ned Murphy Adobe Community Professional & MVP

                  Take all the interactive code off the mcbtns movieclip, and even get rid of that clip if it serves no other purpose than to collect all the rooms.  Assign the code to make the photos appear / disappear to all of the rooms... (what's shown below assumes mcbtns went away and the rooms are on the same timeline as the photos mc)

                   

                  btn1.onRollOver = function(){

                       frameNum = 1;

                       photoChange():

                       mcPhotos._visible = true;

                  }

                  btn2.onRollOver = function(){

                       frameNum = 2;

                       photoChange():

                       mcPhotos._visible = true;

                  }

                   

                  btn1.onRollOut = btn2.onRollOut = function(){

                       mcPhotos._visible = false;

                  }

                   

                  If you keep the mcbtns movieclip, then your button code would have to use a _parent reference to target the mcPhotos... _parent,mcPhotos.visible = etc... actually, I'm not sure where things lie in that aspect, so hopefully you can figure out the correct targeting

                  • 6. Re: How do you create an interactive floor plan in flash using AS2?
                    nshores Level 1

                    I followed your instruction and got rid of mcbtns and mcbtnsinside.  I double clicked to get inside mcPhotos created a new layer labled it buttons and pasted the buttons in that layer.  I hope that is what you meant by "rooms are on the same timeline as the photos mc".  I went back to scene 1 and put in the code you suggested in frame 1 of the AS layer.  I did change one thing.

                     

                    Instead of :

                     

                    btn1.onRollOut = btn2.onRollOut = function(){

                         mcPhotos._visible = false;

                    }

                     

                    I did:

                     

                    btn1.onRollOut = function(){

                         mcPhotos._visible = false:

                    }

                     

                    I repeated this code for all 11 buttons.

                     

                    I tested it and nothing happened.  No rollover, no pictures.

                    Should I have put the code in frame 1 of the AS layer within mcPhotos? Not scene 1?

                    • 7. Re: How do you create an interactive floor plan in flash using AS2?
                      Ned Murphy Adobe Community Professional & MVP

                      As far as coding the buttons go, if they all do the same thing, you can code it like I did, or you can code them all separately.  The way I did it saves you some effort if you need to change something.

                       

                      If you moved the buttons inside mcPhotos, no, that is not what I meant.  With mcPhotos invisible, you wouldn't be able to use anything because there would be nothing to use.

                       

                      Whatever timeline you have the mcPhotos movieclip in is the same timeline where the buttons should be.

                      • 8. Re: How do you create an interactive floor plan in flash using AS2?
                        nshores Level 1

                        Okay so I moved the buttons back to scene 1 and placed them in a layer named buttons under the photos layer.  Unfortunately my map still doesn't work. No rollover and no images.  I am sorry to keep bothering you.

                         

                        Is there code that I am missing?

                        • 9. Re: How do you create an interactive floor plan in flash using AS2?
                          Ned Murphy Adobe Community Professional & MVP

                          There could be a number of things you are missing, so it's hard for me to say.  HAve you assigned instance names to your buttons and to your movieclips?

                           

                          Try using the following code for just one button....

                           

                          btn1.onRollOver = function(){

                               trace("btn works");

                          }

                           

                          If you don't get a trace in the output, there is something wrong with the way you have arranged things.  The buttons need to be present where that code executes, and they need to have the instance names assigned to them via the porperties panel.

                          • 10. Re: How do you create an interactive floor plan in flash using AS2?
                            nshores Level 1

                            Right before I read your latest post I realized that the movie clip that contains my photos didn't have an instance name.  I can't thank you enough for your help, it has been invaluable!

                             

                            Thank you, thank you, thank you!!!!!

                            • 12. Re: How do you create an interactive floor plan in flash using AS2?
                              nshores Level 1

                              One last thing, if you don't mind.

                               

                              My rollovers work, however, when I rollover any spot on my floor plan, it plays all my images, not just the one that is associated with the particular area of the floor plan. Any ideas how to fix this?

                              • 13. Re: How do you create an interactive floor plan in flash using AS2?
                                nshores Level 1

                                Never mind. I figured it out instead of gotoAndStop I had gotoAndPlay

                                 

                                var frameNum:Number;
                                    function photoChange(){
                                    _root.mcPhotos.gotoAndStop("img" + frameNum);
                                }