# Zoom in part of an image?

**URL:** <https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703>\
**Category:** Uncategorized\
**Created:** [June 18, 2008, 2:19pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703 "2008-06-18T14:19:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [June 18, 2008, 2:19pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/1 "2008-06-18T14:19:01Z")

</div>

Hi

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

```auto

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,

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 18, 2008, 2:26pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/2 "2008-06-18T14:26:27Z")

</div>

> 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?

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [June 18, 2008, 3:06pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/3 "2008-06-18T15:06:54Z")

</div>

hmm, a bit closer

```auto

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???

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [June 18, 2008, 3:09pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/4 "2008-06-18T15:09:04Z")

</div>

@randomagain, oops didn’t see your answer

> 

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

hmm, must check that

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 18, 2008, 3:14pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/5 "2008-06-18T15:14:31Z")

</div>

[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?

---

<div class="post-metadata">

**Author:** ![DaRicardo](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@DaRicardo](https://forum.kirupa.com/u/DaRicardo)\
**Post date:** [June 18, 2008, 3:22pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/6 "2008-06-18T15:22:34Z")

</div>

Keitai -

Try this code using the Tween class:

```auto
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?

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [June 18, 2008, 3:26pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/7 "2008-06-18T15:26:26Z")

</div>

@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](http://www.bldd.nl/kirupa.html)

---

<div class="post-metadata">

**Author:** ![DaRicardo](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@DaRicardo](https://forum.kirupa.com/u/DaRicardo)\
**Post date:** [June 18, 2008, 6:29pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/8 "2008-06-18T18:29:16Z")

</div>

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.)

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

```

becomes

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

```

---

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [June 18, 2008, 8:04pm UTC](https://forum.kirupa.com/t/zoom-in-part-of-an-image/263703/9 "2008-06-18T20:04:35Z")

</div>

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