Zoom in part of an image?

1

Hi

How do i zoom in to a part of an image??
At the moment i have this


var zoomIn:Boolean;
zoomIn = false;
function zoomThis(mc) {
	if(zoomIn == false) {
		zoomTween = TweenLite.to(mc, 0.8, {_xscale: 200, _yscale: 200, ease:Back.easeOut});
		zoomIn = true;
	} else {
		zoomTween = TweenLite.to(mc, 0.8, {_xscale: 100, _yscale: 100, ease:Back.easeOut});
		zoomIn = false;
	}
}

which just zooms in and out from the center point. But i want to zoom in depending on the place an user clicks.

Any tips,

2

listerner.onMousePress = function(){
remY = ymouse
remX = xmouse
}

tween(MC, _x, presentx,remX,2,true)
tween(MC, _y, presenty,remY,2,true)

I guess you would have to calculate the centre of the image, then corrilate that to ensure the MX zoomed, and shifted so the point you clicked was the centre.

Didn’t I just ask the same question you just did?

3

hmm, a bit closer


var zoomIn:Boolean;
zoomIn = false;
var orgX:Number = 18;
var orgY:Number = 18;
function centerAndZoom(mc) {
	if(zoomIn == false) {
		zoomX = mc._xmouse*-1;
		zoomY = mc._ymouse*-1;
		zoomTween = TweenLite.to(mc, 0.8, {_x:zoomX,_y:zoomY,_xscale: 300, _yscale: 300,ease:linear, overwrite:false});
		zoomIn = true;
	} else {
		zoomTween = TweenLite.to(mc, 0.8, {_x:orgX,_y:orgY,_xscale: 100, _yscale: 100, ease:linear});
		zoomIn = false;
	}
}

holder_mc.image_mc.onRelease = function() {
	centerAndZoom(this);
}

But now it doesn’t look at the boundaries???

4

@randomagain, oops didn’t see your answer

Didn’t I just ask the same question you just did?

hmm, must check that

5

[quote=keitai;2344968]hmm, a bit closer

But now it doesn’t look at the boundaries???[/quote]

you mean close in thoery or it got near but was a bit off centre

What boundaries?

6

Keitai -

Try this code using the Tween class:

import mx.transitions.Tween;
import mx.transitions.easing.Regular;
var percentZoom = 300;
pic_mc.onRelease = function  () {
    var zoomx:Tween = new Tween(pic_mc,"_xscale",Regular.easeOut,100,percentZoom,1,true);
    var zoomy:Tween = new Tween(pic_mc,"_yscale",Regular.easeOut,100,percentZoom,1,true);
    var panx:Tween = new Tween(pic_mc,"_x",Regular.easeOut,pic_mc._x,pic_mc._x - pic_mc._xmouse * percentZoom/100,1,true);
    var pany:Tween = new Tween(pic_mc,"_y",Regular.easeOut,pic_mc._y,pic_mc._y - pic_mc._ymouse * percentZoom/100,1,true);
}

Is that about what you’re looking for?

7

@DaRicardo, going to try yours (i am too slow today)
[edit] tried your suggestion daRicardo, but i am already at that point.

@randomAgain, with boundaries i mean, if you click in the lower left corner some part of the image is off stage.
[edit] it might be better described as pan limits??

http://www.bldd.nl/kirupa.html

8

I think what you need to do is multiply the panning distance by the scale factor (when you zoom in, you actually need to move more _x and _y to zoom in on the right spot.)

zoomTween = TweenLite.to(mc, 0.8, {_x:zoomX,_y:zoomY,_xscale: 300, _yscale: 300,ease:linear, overwrite:false});

becomes

zoomTween = TweenLite.to(mc, 0.8, {_x:(zoomX*3),_y:(zoomY*3),_xscale: 300, _yscale: 300,ease:linear, overwrite:false});
9

daricardo, tx almost i changed it and now it almost works.

Just when you click near the edges it shows an offset. I think i need to recalculate the _x and _y a bit more when you are near the edges. Gonna check your panning/scaling suggestion