# Zoom easing on mouse click

**URL:** <https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639>\
**Category:** flash\
**Created:** [September 18, 2002, 2:09pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639 "2002-09-18T14:09:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbrumm](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@mbrumm](https://forum.kirupa.com/u/mbrumm)\
**Post date:** [September 18, 2002, 2:09pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/1 "2002-09-18T14:09:21Z")

</div>

How would i go about modifying the “Easing on Mouse Click” tutorial to incorporate an easing zoom effect along with the position easing?

For example, the MC starts at x=0, y=0, and scale =100%.  
Click anywhere on screen and the MC goes to that position and scales to 200%.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 2:31pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/2 "2002-09-18T14:31:03Z")

</div>

Create an mc. Put these actions on it:

[COLOR=blue]onClipEvent (load) {  
\_x = 0;  
\_y = 0;  
amount = 5;  
}  
onClipEvent (mouseDown) {  
new\_x = \_root.\_xmouse;  
new\_y = \_root.\_ymouse;  
\_xscale = 200;  
\_yscale = 200;  
}  
onClipEvent (enterFrame) {  
\_x += (new\_x-\_x)/amount;  
\_y += (new\_y-\_y)/amount;  
}  
[/COLOR]

It only scales to 200% once, else it will keep getting bigger.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 3:02pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/3 "2002-09-18T15:02:31Z")

</div>

Thanks Flex for your help, but that’s not quite what I’m looking for. I think my explanation was too vague, so let me give it another go around.

Is there a way to have the MC scale with inertia similar to how the position changes (enterFrame equation)?

onClipEvent (load) {  
\_x = 0;  
\_y = 0;  
amount = 5;  
scaler = 100;  
}  
onClipEvent (mouseDown) {  
new\_x = \_root.\_xmouse;  
new\_y = \_root.\_ymouse;  
scaler = 200;  
}  
onClipEvent (enterFrame) {  
\_x += (new\_x-\_x)/amount;  
\_y += (new\_y-\_y)/amount;  
\_xscale (scale from 100 to 200); //some sort of equation here?  
\_yscale (scale from 100 to 200);  
}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 3:10pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/4 "2002-09-18T15:10:12Z")

</div>

Try

[COLOR=blue]onClipEvent (load) {  
\_x = 0;  
\_y = 0;  
amount = 5;  
count = 0;  
}  
onClipEvent (mouseDown) {  
new\_x = \_root.\_xmouse;  
new\_y = \_root.\_ymouse;  
new\_xscale = 5;  
new\_yscale = 5;  
}  
onClipEvent (enterFrame) {  
\_x += (new\_x-\_x)/amount;  
\_y += (new\_y-\_y)/amount;  
if (count\<=“20”) {  
\_xscale += new\_xscale;  
\_yscale += new\_yscale;  
count++;  
}  
}[/COLOR]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 3:57pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/5 "2002-09-18T15:57:33Z")

</div>

thanks, i think that’ll work

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 9:34pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/6 "2002-09-18T21:34:21Z")

</div>

That won’t give the inertia effect, I’m afraid. In fact you use the exact same formula for the scale and the distance… It’s the basis of easing, all you have to do is apply it here. I let you look for the answer, if you can’t find it, post back.

pom 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 9:39pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/7 "2002-09-18T21:39:56Z")

</div>

The mouse mc follows, with inertia, and the x and y scale gradually - that’s what he said he wanted - I’m not sure what inertia you’re talking about pom. Maybe I misunderstood something.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 9:51pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/8 "2002-09-18T21:51:15Z")

</div>

Exactly, the size increases gradually:

```auto
_xscale += new_xscale;

```

No inertia in there.

Just to refresh mbrumm’s memory, the basics of inertia:

presentProperty=presentProperty+(finalProperty-presentProperty)/factor

Works the same for everything…

pom 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 9:56pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/9 "2002-09-18T21:56:54Z")

</div>

I was just thinking “gradual” effect. But, technically, that’s not inertia.

I suppose if he applied the same principle to the x and y scale, as the movement - that would be correct.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 10:23pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/10 "2002-09-18T22:23:59Z")

</div>

Exactly 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 10:32pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/11 "2002-09-18T22:32:56Z")

</div>

Well - in this case I was too quick to code and should have read his question more carefully. So I take it I don’t win the car?..

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 18, 2002, 11:29pm UTC](https://forum.kirupa.com/t/zoom-easing-on-mouse-click/5639/12 "2002-09-18T23:29:08Z")

</div>

😛