A Flash Developer Resource Site

Results 1 to 11 of 11

Thread: Contrain draggable/Zoomable map

  1. #1
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7

    Contrain draggable/Zoomable map

    trouble constraining draggable map
    How to constrain draggable map w/o startdrag
    i am tring to create a draggable map with dynamic zoom and drag and I want to be able to keep the map from crossing a zoom margin mc no matter how big the map gets. Here is the code i'm using some of which i got from another post:

    // This is the code on my zoom in button

    on (release) {
    targetScale = int(ThePic._xscale + ThePic._xscale * .5);
    this.onEnterFrame = scaleMap;
    call(roadKiller());
    call(locationKiller());
    call (PosControl());
    }

    // on main timeline
    // this zooms/scales the map

    function scaleMap() {
    var s = (targetScale - ThePic._xscale) * .3;
    if (Math.abs(s) < 1) {
    ThePic._xscale = targetScale;
    ThePic._yscale = targetScale;
    this.onEnterFrame = null;
    } else {
    ThePic._xscale += s;
    ThePic._yscale += s;
    }
    }

    // Turn Roads on and off

    function roadKiller()
    {
    if (targetScale >= 60)
    {
    setProperty("_root.ThePic.roads", _visible, "1");
    }
    else
    {
    setProperty("_root.ThePic.roads", _visible, "0");
    } // end if
    } // End of the function

    // Turn Location names on and off

    function locationKiller()
    {
    if (targetScale > 81.25)
    {
    setProperty("_root.ThePic.locations", _visible, "1");
    }
    else
    {
    setProperty("_root.ThePic.locations", _visible, "0");
    } // end if
    } // End of the function

    // On mc "ThePic" timeline

    this.inertia=0.75//Number, 0=no inertia, 1=infinite inertia (imovable)

    this.onPress=function(){
    this.offset={x:this._xmouse, y:this._ymouse}
    this.onEnterFrame=this.followMouseInertia;
    }

    this.onRelease=function(){
    delete this.onEnterFrame;
    }

    this.onReleaseOutside=this.onRelease;

    this.followMouseInertia=function(){
    this._x+=(this._xmouse-this.offset.x)*(1-this.inertia);
    this._y+=(this._ymouse-this.offset.y)*(1-this.inertia);
    }

    // On button inside MC

    //Current constrain AS -- does not work
    on(press){
    //boundaries
    _root.ThePic.bounds={xMin:0, xMax:200, yMin:0, yMax:200};

    _root.ThePic.followMouseInertia=function(){
    //calculate values
    posX=ZoomMargin._x+(this._xmouse-this.offset.x)*(1-this.inertia);
    posY=ZoomMargin._y+(this._ymouse-this.offset.y)*(1-this.inertia);
    //constrain values
    posX=Math.max(Math.min(posX,this.bounds.xMax),this .bounds.xMin)
    posY=Math.max(Math.min(posY,this.bounds.yMax),this .bounds.yMin)
    //move mc
    this._x=posX
    this._y=posY
    }
    }

    The Problem is that i just can't seem to get it to stay within the zoomMargin mc's bounds, and i have tried a few different methods none of which were successful.

    PLEASE HELP!!!!!!!!!!!!

    Thanks in advance guys!

    Here is a link to the map:

    http://dev.emeraldcoast.com/seatown...t/flashMap.html

  2. #2
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7
    Anybody?

  3. #3
    Member
    Join Date
    Jan 2005
    Posts
    36
    u got the map online or fla for the map? sounds similar to me. your link dont work
    Last edited by quadzilla; 01-22-2006 at 03:36 AM.

  4. #4
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7
    sorry. somehow the url got cut off. Here is the full url:

    http://dev.emeraldcoast.com/seatownp.../flashMap.html

    also, i am having trouble with centering the map within the mask on zoom out.

    thanks

  5. #5
    Member
    Join Date
    Jan 2005
    Posts
    36
    i just completed my map. www.regionmap.cghub.co.nz

    are you wanting to constrain the x,y values for panning and dragging based on the zoom factor?

    instead of having the map to be moved/panned anywhere to the point of being off screen and lost.
    ****
    if the _xscale = 100 (default view) you should disable the drag and pan function

    ***
    a link to your fla please for a look please

  6. #6
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7
    Yeah that's pretty much the idea. I have the zoom limited, and i want to have the pan and drag limited to the constraints of a rectangular MC no matter what the scale is.
    I also want it to center in the window when the map is zoomed out. Right now if you drag the map anywhere, you will lose it when you zoom back out.

    This link will download the fla.

    http://dev.emeraldcoast.com/seatownp...flashMap_5.fla

    Thanks

  7. #7
    Member
    Join Date
    Jan 2005
    Posts
    36
    i mucked about. removed everything i didnt need to get it to work.itll give you the idea to work on anyway.

    i dont know what was going on with your map scaling, it was like 3 times the size of the frame, so i transformed it to fit the map frame, which made calculating the scale alot easier from 100% rather than the 40.5% that you had.
    I presume the map was large so you could work on the details inside it, if thats the case, i always make the frame to fit the map, because you can always scale the final project to fit the document.

    Our programming styles are very different, but i hope it helps, its quite simple when you figure it out. youll need to figure out how to implement your inertia thingy and other stuff.

    the fla is in flash8 format.
    if you want 2004mx, i can do

    hopefully its what your after, have fun.

    http://www.regionmap.cghub.co.nz/dev/flashMap_06.swf
    http://www.regionmap.cghub.co.nz/dev/flashMap_06.fla

  8. #8
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7
    Thanks quadzilla,
    that's exactly what i needed it to do. It shouldn't be too much trouble adding the inertia to what you've got here. I am working in 8-ball so no prob there. Thanks a mill.

  9. #9
    Junior Member
    Join Date
    Oct 2003
    Location
    Crestview, Fl
    Posts
    7
    one other thing...If i wanted the map to continuously pan until the button is released how could i implement that?

  10. #10
    Member
    Join Date
    May 2002
    Posts
    42
    Hi quadzilla (or anyone else who might help),

    I've been working on a map for a couple of months now, and I'm having the same problem that stalyun38 had; if I zoom the map and then drag it, it can disappear when it is zoomed back out.

    The only examples that I can find also work this way. Would you mind taking the time to save your example in MX format.

    Thanks a bunch,
    Debbie

  11. #11
    Member
    Join Date
    Jun 2006
    Posts
    60
    Nice map, stalyun38: http://dev.emeraldcoast.com/seatownp.../flashMap.html

    I'm having problems with the drag parameters when I zoom. The drag borders work fine at 100%, but not when I zoom. How did you set the borders correctly?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center