A Flash Developer Resource Site

Results 1 to 18 of 18

Thread: Zoom+Pan

  1. #1
    Member
    Join Date
    Mar 2003
    Posts
    33

    Zoom+Pan

    Hey,

    I've read the threads regarding this topic, but i haven't found any that explains how to zoom and pan within a 'frame' on mouse over, there's always a button or slider to zoom and you always have to click and drag to pan.

    Does any one know any tutorials covering this?


    ...move mouse over left part of picture and it zooms in and pans left, move mouse over righ part and it zooms and pans towards right, etc...

    found this: http://www.flashkit.com/board/showth...light=pan+zoom ericlins example is similiar to what i want but i also want zoom!

    Thanks guys!

  2. #2
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    If this is close to what you're looking for....

    http://www.krazydad.com/bestiary/map_mover.swf

    http://www.krazydad.com/bestiary/map_mover.zip

    (It's a map scroller that uses mouse over for pan & zoom, and has annotated zoom positions).

    ...I can modify it to work within a frame (using a mask).

    - Jim

  3. #3
    Junior Member
    Join Date
    Feb 2005
    Location
    UK
    Posts
    11
    Hi Jbum,

    Is there anychance you could link to the fla file again as the link shown above is not working.

    This script is perfect for what we want to do with our local community website and I would love to be able to look through the fla and see how it works.

    I would happily post credits to yourself as the creator if we use it.

    Ragrds

    Drakash

  4. #4

    please

    i second that!
    pretty please!

    Jess

  5. #5
    Junior Member
    Join Date
    Jul 2006
    Posts
    2
    here you have the source: http://sterics.f2o.org/map_mover.fla

    also, I want to ask for help: I need this same effect but without pan.

    I have a map with different landmarks, when you pass the mouse over the landmarks the map should zoom in keeping the landmark in the center (obviously on mouse out it should zoom out).

    Any suggestions would be very much apreciated! Thanks!

  6. #6
    Martian Mike
    Join Date
    Sep 2006
    Location
    Southeast Florida
    Posts
    3
    Now to add a caviat!

    I am trying to make a pan/zoom thing with the following: I'd like to take a map of my county in a box, and allow you to pan around the map, BUT when the mouse goes over an object or a word, I'd like a description / picture to pop up on the left of the map. I don't care how the user pans around - I guess up-down/right-left arrows are the best, but when the mouse goes over or clicks on a road name, I'd like to have a little description box pop up outside of the map.

    Any tutorials? Does everyone hate me for asking this? I don't think Zoom would be too necessary.

  7. #7
    Martian Mike
    Join Date
    Sep 2006
    Location
    Southeast Florida
    Posts
    3
    I'm responding to myself..

    Basically, I want to be able to do this: http://justinsimoni.com/projects/lafayette/map.html but not even that elaborate. Just pan the map around, zoom in and out maybe, and when the mouse goes over a road label, I can display information about the road on the right.

  8. #8
    Junior Member
    Join Date
    Mar 2007
    Posts
    4
    try this inside of a button

    on (press) {
    speed = 95;
    movie._x -= speed;
    }


    ***Subsitute 'movie' for the Instance name of the object that needs to move.

  9. #9
    Martian Mike
    Join Date
    Sep 2006
    Location
    Southeast Florida
    Posts
    3
    Thanks! I'll give that a try! I appreciate the help, and I'll let you know how it turns out.

  10. #10
    Junior Member
    Join Date
    Mar 2007
    Posts
    4
    try this inside of a button

    on (press) {
    speed = 95;
    movie._x -= speed;
    }

    Also note that by changing the "-" to a "+" will change direction that it moves the object. And by using a movie._Y would produce up and down movment.

    That's all kinda common sense info.. but didn't want to leave you hanging if you didn't know.

    Let me know how it works.

    -alloy.

  11. #11
    Junior Member
    Join Date
    Jan 2001
    Posts
    25
    Does anyone know how to convert this code to use a mouse click and centers map at zoomed level? [SAME ZIP FILE AS ABOVE].

    _______________

    // size of stage
    SW = Stage.width;
    SH = Stage.height;

    // size of large map
    MW = map_mc._width;
    MH = map_mc._height;

    // Movement speed
    SPEED = .2;

    // Points of Interest
    // x,y radius, name
    poi = [{x:971,y:54,r:60,n:"Grace Cathedral"},
    {x:461,y:502,r:80,n:"Moscone Center"},
    {x:311,y:384,r:64,n:"Union Square"},
    {x:665,y:146,r:64,n:"World Trade Center"},
    {x:428,y:148,r:64,n:"Transamerica Bldg"}
    ];

    // Zoom-in Amount
    zoomAmt = 100; // additional zoom
    feedback_txt.autoSize = true;

    // This function keeps the target centered on zero,zero on submap_mc.
    // This is done so that when we zoom, the zoom stays centered around
    // the target
    //
    map_mc.submap_mc.onEnterFrame = function()
    {
    mapx = MW*_root._xmouse/SW;
    mapy = MH*_root._ymouse/SH;
    this.tx = 0 - mapx;
    this.ty = 0 - mapy;
    // _root.feedback_txt.text = mapx + ", " + mapy;
    this._x += (this.tx-this._x)*SPEED;
    this._y += (this.ty-this._y)*SPEED;
    // for 'exact' positioning, use this instead
    // this._x = this.tx;
    // this._y = this.ty;
    }

    // This keeps the map centered under the mouse
    // and scales it based on proximity to Moscone center
    map_mc.onEnterFrame = function()
    {
    this._x = _root._xmouse;
    this._y = _root._ymouse;

    var dx = zoomX - mapx;
    var dy = zoomY - mapy;

    // find a nearby point of interest
    var p = -1;
    var dist;
    for (var i = 0; i < poi.length; ++i)
    {
    var dx = poi[i].x - mapx;
    var dy = poi[i].y - mapy;
    dist = Math.sqrt(dx*dx+dy*dy);
    if (dist < poi[i].r) {
    p = i;
    break;
    }
    }
    if (p != -1) // did we get one? zoom in & show the name
    {
    var zoom = 100+zoomAmt-zoomAmt*dist/poi[p].r;
    this._xscale = this._yscale = zoom;
    feedback_txt.text = poi[p].n;
    }
    else { // otherwise, don't zoom in
    this._xscale = this._yscale = 100;
    feedback_txt.text = "";
    // uncomment the following line to see the coordinates
    feedback_txt.text = Math.floor(mapx) + ", " + Math.floor(mapy);
    }
    };

  12. #12
    Junior Member
    Join Date
    Aug 2009
    Posts
    8
    i only need to add pan controls to my map using actionscript 3.0 does any one can help me with that thnx

  13. #13
    Member
    Join Date
    Oct 2003
    Location
    nek vermont
    Posts
    49
    I have a file that uses pan and zoom but it is in AS 2. you may be able to interpret it. File is too large to attach but I'm happy to send you the AS or if you need the file I can send it privately.

  14. #14
    Junior Member
    Join Date
    Aug 2009
    Posts
    8
    Yes please send it to me on morkus_2@hotmail.com

  15. #15
    Junior Member
    Join Date
    Sep 2009
    Location
    Canada
    Posts
    15

    Need the help on the same Pan and Zoom on a map....

    Can you please help me too...??
    Edit by admin: no contact info permitted on the forum, thank you

  16. #16
    Junior Member
    Join Date
    Sep 2009
    Location
    Canada
    Posts
    15
    Last edited by tarunar; 10-03-2009 at 07:26 PM.

  17. #17
    Junior Member
    Join Date
    Sep 2009
    Location
    Canada
    Posts
    15

    :)

    Mary, you simply rock. Many thanks, it was a great help having your post

  18. #18
    Junior Member
    Join Date
    Aug 2001
    Posts
    1
    Hi Mary, tarunar, morkus_2.

    i would like to have a copy of the file too.
    I had tha same project 4 years ago but it was AS1 and in flash 6. I would like to update it to AS2.

    Thank you.


    Edit by admin: no contact info permitted on the forum, thank you

    Reagards

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