Panning an image

[antelopeb]

Total newbie, so I apologize if I'm a dumb-a and I just missed this subject somewhere else...

 

I'm trying to build something that can zoom in and pan on a large image. When I zoom in and then try to pan around it re-centers the movie-clip on the mouse location. How can I get it to pan based on the mouse coordinates without re-centering?? Any help is appreciated.

 

Here's my code for the pan:

 

MainMap.addEventListener(MouseEvent.MOUSE_DOWN,

beginDrag);

 

function beginDrag(e:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);

stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);

}

 

function endDrag(e:MouseEvent):void {

stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveMC);

stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);

}

 

function moveMC(e:MouseEvent):void {

 

TweenLite.to(MainMap,.5,{x:mouseX,y:mouseY});

e.updateAfterEvent();

}

[ukla]

Your question is difficult to answer without actually seeing the full code.

 

There are many ways to skin this cat. It all depends on how you are setting up the panning movie clip. Post code and we will see if we can help.

[antelopeb]

That is the full code for the pan... Really, that's everything (except the line that imports the needed libraries, I guess). No variables, nothing else. MainMap is the movie clip I'm trying to pan, it's an imported .ai file of a map, so I already have a zoom in place using TweenLite and relative values as well as a legend and a detail that you can open and close (only close is functional right now). I'll paste my full code below:

 

import fl.video.VideoEvent;

import fl.controls.Button;

import flash.display.*;

import flash.events.*;

import com.greensock.*;

 

stop();

 

DowntownInstance.visible=false;

DowntownClose.visible=false;

 

LegendClose.addEventListener(MouseEvent.CLICK,LegendCloser);

function LegendCloser(event_object:MouseEvent) {

LegendInstance.visible=false;

LegendClose.visible=false;

}

 

DowntownClose.addEventListener(MouseEvent.CLICK,DowntownCloser);

function DowntownCloser(event_object:MouseEvent) {

DowntownInstance.visible=false;

DowntownClose.visible=false;

}

 

ZoomIn.addEventListener(MouseEvent.CLICK,ZoomInFunction);

function ZoomInFunction(event_object:MouseEvent) {

TweenLite.to(MainMap,1,{scaleX:".35",scaleY:".35"});

}

 

ZoomOut.addEventListener(MouseEvent.CLICK,ZoomOutFunction);

function ZoomOutFunction(event_object:MouseEvent) {

TweenLite.to(MainMap,1,{scaleX:"-.35",scaleY:"-.35"});

}

 

 

//dragging map around functions

MainMap.addEventListener(MouseEvent.MOUSE_DOWN,

beginDrag);

 

function beginDrag(e:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);

stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);

}

 

function endDrag(e:MouseEvent):void {

stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveMC);

stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);

}

 

function moveMC(e:MouseEvent):void {

 

TweenLite.to(MainMap,.5,{x:mouseX,y:mouseY});

e.updateAfterEvent();

}

[ukla]

Post your fla.

 

It is hard to know exactly what is going on just by that code snippet. When zoooming AND panning you need to carefully consider scale and registration points. Also want to have some sort of clamping function that prevents the map from beeing dragged past certain x/y coords.

[ukla]

Let's start simple. Attached is how I do a "drag pan" with tweening.

 

You can see how it would become complicated to add zoom functionality to that. You would have to calculate width/height based on scaleX/scaleY.

[antelopeb]

You're the man! It actually works when zoomed in as well, and I'm working on getting it to zoom into where the map is located now. You helped me realize a problem, though, in that my map was positioned incorrectly in the movie clip. In other words, it was physically centered rather than having the upper left corner at the little cross. I'm used to being in things like Illustrator and InDesign so I wasn't thinking about coordinates being generated, and since a bunch of the movieclip coordinates were coming back negative it was screwing everything up!! I think I can figure out the rest, though, thanks!

[ukla]

Great!

 

Actually you aren't "wrong" by having the map image centered in the map movie clip. Most of the time I do the same thing whenever I need to zoom. You would only have to modify the code slightly to make it work (map.width * 0.5 ... stuff like that).

 

Glad it worked out for you.

[rikbogusz]

hi ukla, i see this was a few months ago, but in my trying to accomplish this functionality i came across this discussion. for my purpose, i need to have the image centered also, i've tried your suggestion of adding the math to accomodate centering, and it works... mostly. when panning, i can only move about halfway up the movie clip. here's the section of your code,

 

function setXPosition(value:Number):Boolean
{
var min:Number = activearea_mc.width * 0.5 - bigmap_mc.width * 0.5;
var max:Number = 0;

if (value < min)
{
	value = min;
}
else if ( value > max )
{
	value = max;
}

if (value != bigmap_mc.x)
{
	TweenMax.to(bigmap_mc,1,{x:value,ease:Expo.easeOut});
	return true;
}
return false;
}


function setYPosition(value:Number):Boolean
{
var min:Number = activearea_mc.height * 0.5 - bigmap_mc.height * 0.5;
var max:Number = 0;

if (value < min)
{
	value = min;
}
else if ( value > max )
{
	value = max;
}

if (value != bigmap_mc.y)
{
	TweenMax.to(bigmap_mc,1,{y:value,ease:Expo.easeOut});
	return true;
}
return false;
}

 

can you tell what i might need to change? thanks for sharing

[ukla]

You'll have to refresh my memory. Are you trying to scale an image (or map) up and then pan that image?

[rikbogusz]

hey thanks for replying to such an old discussion. i have buttons that will scale the movieclip up or down, so yes, and that's why i've tried centering. the only real problem is the math stops the movieclip roughly two thirds of the way from the top and from the left edge of the image. here's the full code

//////////////////////// VARIABLES;

var dragging:Boolean = false;
var dragOffsetX:Number;
var dragOffsetY:Number;

////////////////////////////////////////////

function killMapdrag():void
{
bigmap_mc.removeEventListener(MouseEvent.MOUSE_DOWN, mapmousedown);
activearea_mc.removeEventListener(Event.MOUSE_LEAVE, mapmouseleave);
}

function initThis():void
{
bigmap_mc.addEventListener(MouseEvent.MOUSE_DOWN, mapmousedown);
activearea_mc.addEventListener(Event.MOUSE_LEAVE, mapmouseleave);
}


function startDragging():void
{
dragOffsetX = bigmap_mc.x - mouseX;
dragOffsetY = bigmap_mc.y - mouseY;
bigmap_mc.addEventListener( MouseEvent.MOUSE_MOVE, MOUSE_MOVE, false, 30 );
dragging = true;
}


function stopDragging():void
{
bigmap_mc.removeEventListener(MouseEvent.MOUSE_MOVE, MOUSE_MOVE);
dragging = false;
}


function mapmousedown(e:MouseEvent):void
{
startDragging();
bigmap_mc.addEventListener(MouseEvent.MOUSE_UP, MOUSE_UP, false, 30 );
}

function MOUSE_UP(e:MouseEvent):void
{
stopDragging();
bigmap_mc.removeEventListener(MouseEvent.MOUSE_UP, MOUSE_UP);
}

function MOUSE_MOVE(e:MouseEvent):void
{
if (setXPosition(mouseX + dragOffsetX))
{
	e.updateAfterEvent();
}
if (setYPosition(mouseY + dragOffsetY))
{
	e.updateAfterEvent();
}
}

function mapmouseleave(e:Event):void
{
if (dragging)
{
	bigmap_mc.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
}

}

function setXPosition(value:Number):Boolean
{
var min:Number = activearea_mc.width * 0.5 - bigmap_mc.width * 0.5;
var max:Number = 0;

if (value < min)
{
	value = min;
}
else if ( value > max )
{
	value = max;
}

if (value != bigmap_mc.x)
{
	TweenMax.to(bigmap_mc,1,{x:value,ease:Expo.easeOut});
	return true;
}
return false;
}


function setYPosition(value:Number):Boolean
{
var min:Number = activearea_mc.height * 0.5 - bigmap_mc.height * 0.5;
var max:Number = 0;

if (value < min)
{
	value = min;
}
else if ( value > max )
{
	value = max;
}

if (value != bigmap_mc.y)
{
	TweenMax.to(bigmap_mc,1,{y:value,ease:Expo.easeOut});
	return true;
}
return false;
}

initThis();

 

 

the image for the map is 5300x3960 and the active area movie clip is 1484x1080. can you tell what i need to change to enable the drag to the left and top

[ukla]

Ill get something to you in a bit ... have a client pitch at 11am.

[rikbogusz]

thanks tons, i pm'd my emails to ya this mornin.