Dragging Zooming Locking an MC in AS1

[Leozack]

Being adventurous I've got (all built in AS1) a masked area that you can view an image in. I'm trying to make it so you can zoom it in and drag it around, within the masked area, but the dragging locks it so that you can't drag it to the point where it leaves the edge of the masked area - if you follow. So when you're zoomed in, the iamge is never allowed to be dragged off so far that it's not filling the masked area. I've tried all sorts of code and the following code seemed to work well

// imageMC = the clip being scaled/repositioned/dragged
limitLeft = 0-Math.round(imageMC._width-maskWidth);
limitUp = 0-Math.round(imageMC._height-maskHeight);
limitRight = 0;
limitDown = 0;
imageMC.startDrag(false,limitLeft,limitUp,limitRight,limitDown);

But since the border size around the image is adjustable (it could be 2, it could be 20) and that eats into the area used to show the image (eg image is offset by imgBorderSize and shrunk by imgBorderSize*2) I tried to factor that into the formulas because once I turned the borders up the above formulas wasn't working right anymore

// imageMC = the clip being scaled/repositioned/dragged
limitLeft = 0-Math.round(imageMC._width-maskWidth)-(imgBorderSize*2);
limitUp = 0-Math.round(imageMC._height-maskHeight)-(imgBorderSize*2);
limitRight = 0;
limitDown = 0;
imageMC.startDrag(false,limitLeft,limitUp,limitRight,limitDown);

I also tried to make it so when you zoom in, it zoomed in on the center of the area you can see through the mask, not on the top left - so repositioning is occuring alongside the scaling for the zoom to try and acheive that. Nothing clever, just :

// ZoomCalc range = 0-100;
// imageMC = the clip being scaled/repositioned/dragged
imageMC._xscale = 100+(2*ZoomCalc); // 100% - 300%
imageMC._yscale = 100+(2*ZoomCalc);
imageMC._x = Math.floor((maskWidth/2)-(imageMC._width/2));
imageMC._y = Math.floor((maskHeight/2)-(imageMC._height/2));

When it zooms out however it'd be nice if it didn't snap back to center via the above code, eg if yu're zoomed into bottom left it would stay viewing bottom left as it zoomed out - yeah?

If anyone has ANY input to this I'd greatfuly welcome it :/ If I manage to get it working then I have to figure out what my layer above all these layers with clickable buttons don't work as soon as I implemented the dragging of the image layer Is there no way to have buttons on something that is being dragged? ((

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[Leozack]

OK just to show you how easy it ended up being :
This code lets you scroll imgHolderMC around while keeping it in the confines of imgWidth & imgHeight, the original size when at 100% zoom (assuming regpoint of both the imgHolderMC and mask applied to it and area to confine it to are at 0,0)

imgHolderMC.useHandCursor = false;
imgHolderMC.onPress = function() {
	limitLeft = 0-Math.round(imgHolderMC._width-imgWidth);
	limitUp = 0-Math.round(imgHolderMC._height-imgHeight);
	limitRight = 0;
	limitDown = 0;
	imgHolderMC.startDrag(false,limitLeft,limitUp,limitRight,limitDown);
}
imgHolderMC.onRelease = imgHolderMC.onReleaseOutside = function() {
	imgHolderMC.stopDrag();
}

and assuming you have a ZoomSlider mc made with a ZoomSliderBase mc and ZoomSliderHandle mc, and ZoomSliderTop & ZoomSliderBottom variables for the range of slider movement - then this will zoom the image based on the center, and when zooming out it will zoom out based where you're looking at yet stop the image moving away from the edge of your viewing area so it doesn't escape.

ZoomSlider.onPress = function() {
	startDrag(ZoomSlider, false, ZoomSlider._x , ZoomSliderTop , ZoomSlider._x, ZoomSliderBottom);
	ZoomBase.onEnterFrame = function() {
		// Calculate zoom %
		ZoomCalc = Math.round(100-(((ZoomSlider._y-ZoomSliderTop)/(ZoomSliderBottom-ZoomSliderTop))*100));
		// For upsidedown remove 100- at the front
		beforeWidth = imgHolderMC._width;
		beforeHeight = imgHolderMC._height;
		imgHolderMC._xscale = 100+(2*ZoomCalc);  // 100% - 300%
		imgHolderMC._yscale = 100+(2*ZoomCalc);
		afterWidth = imgHolderMC._width;
		afterHeight = imgHolderMC._height;
		offsetW = beforeWidth - afterWidth;
		offsetH = beforeHeight - afterHeight;
		imgHolderMC._x = imgHolderMC._x + offsetW/2;
		imgHolderMC._y = imgHolderMC._y + offsetH/2;
		
		// After correcting for zoom, make sure when we zoom out we don't let the image
		// leave the side of the viewing area !
		
		limitLeft = Math.round(imgWidth-imgHolderMC._width);
		limitUp = Math.round(imgHeight-imgHolderMC._height);
		limitRight = 0;
		limitDown = 0;
		
		if (imgHolderMC._x < limitLeft) { imgHolderMC._x = limitLeft; }
		if (imgHolderMC._x > limitRight) { imgHolderMC._x = limitRight; }
		if (imgHolderMC._y < limitUp) { imgHolderMC._y = limitUp; }
		if (imgHolderMC._y > limitDown) { imgHolderMC._y = limitDown; }
	}
}
ZoomSlider.onRelease = ZoomSlider.onReleaseOutside = function() {
	stopDrag();
	delete zoomBase.OnEnterFrame;
}

There ... thank me for the days and hours I just saved you, whoever you are you mysterious person reading this post much later!

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[Leozack]

I've now found a problem with using this lot - and that is - if the image is a different ratio to the original/frame. So what if it's a thin or fat image? Obviously you're going to have gaps on 2 sides when zoomed out, but you wouldn't want the image to drag further than the edge of the frame. And when you zoom in/out you'd want to keep things working right. I've managed to make it work for either thin or fat but not both - argh!

I figured all I really need is the mutli-format-code that solves this problem :

(All anchor handle points are in the top left)
Screen area of X * Y
Frame of A * B
Image of W * H
How do you enlarge/shrink the image so that it stays inside the frame (though of course when zoomed it goes past it but you can't see that bit) but so that it doesn't leave the side of the frame either (too far the other way, leaving a gap between the image edge and the frame).

Zooming & panning ... there must be so many code modules to do exactly this in so much software already written! There must be a formula D:

_________________________________
Leozack

MakeUniverse($infinity,1,42);