20 Replies Latest reply on Aug 16, 2010 12:04 PM by Ned Murphy

    How to code a drag & pan feature?

    NeilRathberg

      Hello! I'm very much in the process of learning Flash and Actionscript, and I need help with some coding that I can't seem to find help with, no matter where I go.

       

      I'm making a map with Adobe Flash Professional CS5, using Actionscript 1  & 2, and I'm trying to add the ability to drag and pan while zoomed  in.

      For the zooming, I put a button in either corner: a zoom out icon, and a zoom in icon. For the zoom-in icon, I used the code

      on (rollOver){
      setProperty ("BG", _xscale, "200");
      setProperty ("BG", _yscale, "200");
      }

      (BG being the name of the instance used for the background of the map, which is a movie clip.)
      Now, this zooms me in well to one corner, but then i want to be able to drag and pan to be able to see more of the map.

      I've found some good examples, but the code is way over my newbie head, and I can't get any examples of code I find to work, no matter what I've tried.

      What would be the best and easiest way to implement this?

        • 1. Re: How to code a drag & pan feature?
          Karthik R. Level 2

          The simplest way to preform dragging would be by using a scroll bar component. That way you can see the entire map once you have zoomed in on the movie clip. I think there are lot of tutorials for scroll bar components  and they are pretty simple even for a newbie

          • 2. Re: How to code a drag & pan feature?
            NeilRathberg Level 1

            Thank you for your reply! I want to be able to move in all directions, though, not just back and forth. I suppose it could be done with two scrollbars, but I was really looking for a way to just grab the background when you're zoomed in, and drag it to pan around.

            • 3. Re: How to code a drag & pan feature?
              Ned Murphy Adobe Community Professional & MVP

              Did you try assigning a startDrag()/stopDrag()?  That is normally how dragging capability is established.  If you aren't familiar with using it, look up startDrag in the AS2 help documentation.  There should be at least one example there.  It will likely require that you assign/use instance names since the object to drag needs to be targeted.

              • 4. Re: How to code a drag & pan feature?
                NeilRathberg Level 1

                I thought startDrag generally is used for dragging and dropping objects, though? I don't want to be able to drag and move the map itself, just where on the map it's zoomed in on... and I'm not sure how to do that, even with startDrag. Unless it does make the most sense to move the map itself, since I'm just increasing its size with the zoom in button anyways, and then somehow add a code in the zoom out button to return it to its original position? Would that work? I guess I've been approaching this from the wrong angle.

                • 5. Re: How to code a drag & pan feature?
                  Ned Murphy Adobe Community Professional & MVP

                  How would you isolate the section that is zoomed in from the rest of the map?  Isn't it part of the map itself?  Unless you have some intricate setup that allows sections of the map to be targeted separately, what I think you are trying to do is done by making the map larger (zoom) and moving the map around (drag or pan).  Panning just involves changing _x and _y properties of the map.

                  1 person found this helpful
                  • 6. Re: How to code a drag & pan feature?
                    NeilRathberg Level 1

                     

                    Well, I am closer than I was before... for the BG, I now have the code

                     

                    on (press) {

                    startDrag(this,true);

                    }

                     

                    on (releaseOutside) {

                        stopDrag();

                    }

                     

                     

                    It kind of works, but it just snaps the corner of the BG to wherever my mouse is, which isn't exactly the effect I wanted. How do I get it to keep the correct location under the mouse?

                     

                     

                    As well, I haven't been able to figure out how to make the variables work. I was trying to create a variable that would toggle on and off when zooming in or out, so that it isn't possible to drag the map unless zoomed in. How would I do this in Actionscript 2? I couldn’t get an if/then statement to work in the BG code.

                     

                     

                    I did at least figure out how to make the map re-position itself properly when I zoom back out, by coding the zoom out button with:

                     

                    on (rollOver){
                        setProperty ("BG_H", _xscale, "100");
                        setProperty ("BG_H", _yscale, "100");
                        setProperty ("BG_H", _x, "-16.7");
                        setProperty ("BG_H", _y, "1.05");
                    }

                     

                     

                    I'm sorry for being so slow to pick this up; I'm more familiar with the designing side of Flash, and I'm learning Actionscript in a very trial-by-fire manner. Thank you for your patience!

                    • 7. Re: How to code a drag & pan feature?
                      NeilRathberg Level 1

                      Oh, I figured out the first problem... the example I was using had (this,true) for startDrag, when I just wanted (this).

                       

                      So, all that seems to be left is to figure out the variables. As well, I just noticed another problem... I have tooltips on the map that pop-up when you rollOver certain spots, and they don't seem to be accessible while startDrag is enabled... is there a way around this?

                      • 8. Re: How to code a drag & pan feature?
                        NeilRathberg Level 1

                        Here's what I've got so far for the variables, but it's not working.

                         

                        On the timeline of the BG, I have

                         

                        var pan = false;

                         

                         

                        On the BG itself, I have

                         

                        on (press) {
                        if (pan == true) {
                        startDrag(this);
                        }
                                             }

                        on (release, releaseOutside) {
                            stopDrag();
                        }

                         

                         

                        And on the zoom in button, I have

                         

                        on (rollOver){
                            setProperty ("BG_H", _xscale, "200");
                            setProperty ("BG_H", _yscale, "200");
                            pan = true;
                        }

                         

                         

                        At this point, it won't drag at all, so I assume the problem is in the way I tried to toggle the variable in the zoom in button? I've tried it a few different ways, but with no success so far.

                        • 9. Re: How to code a drag & pan feature?
                          Ned Murphy Adobe Community Professional & MVP

                          You seem to be making good progress on your own... honest.  That is not common around here, and it's pretty much how alot of folks come to learn Flash well.... battling on their own to make things work.  I know it's how I've learned whatever it is I know.

                           

                          For the pan variable, you want it to allow moving the map when the zoom is zoomed in, which will do so as you have it.  So you just need to have whatever sets the zoom back to 100% also set the pan value back to false.

                           

                          As far as hovering tooltips while dragging, I don't think that will be possible, though I cannot definitively say.  I am not sure how you have things such that you can drag the map and encounter tooltips simultaneously.

                          1 person found this helpful
                          • 10. Re: How to code a drag & pan feature?
                            NeilRathberg Level 1

                            Hmm... unfortunately, the whole purpose for zooming in is to be able to see the tooltips more clearly. So, I think I've come up with an

                            alternate course of action that could work... although once again, I don't know how to code it, entirely.

                             

                            I've added a hand tool button that appears when you zoom in, and disappears when you zoom out (just by changing its alpha when doing a rollover of zoom in/zoom out). I want to make it a toggle for the startdrag to be able to work on the BG... that way, you can be zoomed in, drag to where you need to be, toggle the button to turn the ability to startDrag off, and look at tooltips. Not the ideal way to do it, but probably the easiest.

                             

                            A few problems arise: I haven't been able to get variables to work, and I have no idea why. It either does nothing, and I can freely drag the map whenever, or it goes the other way, and I can't move the map no matter what (or get tooltips, still).

                             

                            Here's the code I have right now. In the frame for my BG, I have

                             

                            pan = "false";

                             

                            In the drag tool button, I have

                             

                            on (press) {
                                pan = "true";
                            }

                             

                            (I still need to figure out a way to make it togglable with this button, but I thought I'd figure out how to do it at all, first.)

                             

                            And on the BG, I have

                             

                            on (press) {
                                if (pan == "true") {
                                startDrag(this);
                            }
                                }

                             


                            on (release, releaseOutside) {
                                stopDrag();
                            }

                             

                             

                            Currently, with the code as it is, nothing is draggable, and I still can't access my tooltips. What am I doing wrong?

                             

                            As well, I need a way to make my drag button unclickable when its alpha is 0%. Is there a way to do this?

                            • 11. Re: How to code a drag & pan feature?
                              NeilRathberg Level 1

                              Just had a thought... would this be easier to do with two distinct frames of BG_H, which I toggle between with gotos?

                               

                              I'm trying to do that now, but it's bringing up all new problems.

                               

                              So, I tried doing it all within the movieclip BG_H, but it wouldn't do anything, for some reason. Then, I add a second frame to BG_H on the main timeline, and it starts working, but it doesn't move the tooltips/smaller images contained within that clip, just the BG itself.

                               

                              On the drag button, I have

                               

                               

                              on (press) {
                                  BG_H.gotoAndStop (2);
                              }

                               

                              and on the second frame of the BG, I have


                              on (press) {
                                  startDrag (this);
                              }

                               

                              on (release, releaseOutside) {
                                  stopDrag ();
                              }

                               

                              So, is there a way to make everything contained within BG_H to be dragged at the same time? Other than that, it seems a lot closer. I've gotten it to drag and show the tooltips, so it feels like I'm getting close to the correct route.

                              • 12. Re: How to code a drag & pan feature?
                                NeilRathberg Level 1

                                I'm especially confused about this, as if I just drag the movieclip BG_H in the editor, it picks up the whole thing, smaller images + tooltips and all. But for some reason, for this code, it's treating it as just the BG, despite the fact that the BG inside BG_H itself is called BG2. Would startDrag not drag the entire movieclip container, as well?

                                • 13. Re: How to code a drag & pan feature?
                                  Ned Murphy Adobe Community Professional & MVP

                                  I haven't read thru your progress/efforts very well, so forgive me if I'm off the mark.  One way to possibly resolve this is to make the map's background (the map image?) be the object that has the drag code assigned to it, and the startDrag targets the _parent to be dragged.  So you have a movieclip that contains a movieclip of the map image, and your tooltips sitting atop that map background.  So your tooltips should be directly accessible for interaction and the map background will still cause the _parent movieclip to be moved around.

                                   

                                  Try it with a quick example and you should see if this is whatr will work for you.

                                  • 14. Re: How to code a drag & pan feature?
                                    Ned Murphy Adobe Community Professional & MVP

                                    I think you posted this last item while I was offering my response, and I think you are trying to do what I described (again, my reading comprehension is off today).  If so, the key would be to target the _parent for dragging...

                                     

                                    on (press) {
                                        BG_H.gotoAndStop (2);
                                    }

                                     

                                    and on the second frame of the BG, I have


                                    on (press) {
                                        startDrag (this._parent);
                                    }

                                     

                                    on (release, releaseOutside) {
                                        stopDrag ();
                                    }

                                    1 person found this helpful
                                    • 15. Re: How to code a drag & pan feature?
                                      NeilRathberg Level 1

                                      Hmm, nope, I tried adding that, and it still didn't work, it just dragged the background of the map, and not the children on that layer.

                                       

                                      It all seems to be working as I want it to aside from that now, though. I've rendered the drag button unclickable when invisible through the use of a variable (which worked this time, for whatever reason), and made it so that the zoom out button reverts back to frame 1 on BG_H. So, I think if I can make it drag the whole thing, that would be this entire problem solved.

                                      • 16. Re: How to code a drag & pan feature?
                                        Ned Murphy Adobe Community Professional & MVP

                                        I'm kinda lost as to where you currently are, but targeting the _parent should work... maybe you are just another level below such that you need to target: this._parnet._parent

                                         

                                        Another route could be to use _root.BG_H instead (or whatever the name of the containing movieclip is.)

                                        1 person found this helpful
                                        • 17. Re: How to code a drag & pan feature?
                                          NeilRathberg Level 1

                                          Nope, neither of those worked, either...

                                           

                                          I'll try to explain it more clearly... on my root timeline, I have BG_H, which is a movie clip with 2 frames, and the code

                                           

                                          on (press) {
                                              startDrag (this._parent._parent);
                                          }

                                           

                                          on (release, releaseOutside) {
                                              stopDrag ();
                                          }

                                           

                                          on the second frame.

                                           

                                          Inside that movie clip, I have BG2, another movie clip, which is the background again, and then all of my tooltips and other graphics on other layers.

                                           

                                          When I drag BG_H, I expected it to move every graphic located within that movieclip. However, it seems to just be moving BG2.

                                           

                                           

                                          I just tried changing BG2 back to a bitmap, so it was no longer a symbol, and now I can't drag the map at all. Hmm.

                                          • 18. Re: How to code a drag & pan feature?
                                            NeilRathberg Level 1

                                            Oh, okay, I tried to do it the way you had suggested... I think I'd had some problem with similar-looking instance names, but I've fixed it, I think... the only problem is, it goes to the parent for the startDrag, but the stopDrag doesn't do anything... so it picks up the background and never drops it. It won't let me put "this._parent" in the parentheses for the stopDrag, and _root.stopDrag does nothing. And when I try to put a stopDrag directly onto the parent, it just doesn't let me drag at all again.

                                             

                                            Edit: the problem with the instance names is ongoing. I'm not sure how to fix it. I have different things in my library called BG_H and BG H, which are somehow connected... if I get rid of one, it effects the other, and gets rid of the background there, too, often. I'm horrendously confused. I don't know if it's the cause of my problem, or if i can just leave it as is and work around it.

                                             

                                            Would this be easier if I were to send my latest .fla build via sendspace.com?

                                            • 19. Re: How to code a drag & pan feature?
                                              NeilRathberg Level 1

                                              I'm not sure what I just did differently, but I got it working!

                                               

                                              It seems to be doing everything right now... thank you for all of your help, it was really greatly appreciated! I'm sure I may have some follow-up questions, so i may return to this thread... but my main question is solved! Thanks again!

                                              • 20. Re: How to code a drag & pan feature?
                                                Ned Murphy Adobe Community Professional & MVP

                                                You're welcome.  Like it or not, you are doing the right thing (sufferiing to find a solution).  So many people come to these forums and have to be told guided every step of the way to things... it's refreshing to see someone willing to try things without having to be told.

                                                 

                                                If you have new questions, I recommend starting a new posting.  Postings with 0 replies catch attention better, and usually, the folks that regularly help here remember which postings they've been dealing with and will stick it out thru whatever end comes to pass.