# Mouseover scaling

**URL:** <https://forum.kirupa.com/t/mouseover-scaling/34946>\
**Category:** Uncategorized\
**Created:** [November 8, 2003, 5:12am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946 "2003-11-08T05:12:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kay](https://avatars.discourse-cdn.com/v4/letter/k/ed655f/32.png) [@Kay](https://forum.kirupa.com/u/Kay)\
**Post date:** [November 8, 2003, 5:12am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/1 "2003-11-08T05:12:21Z")

</div>

I’m new to actionscripting I want to make a MC scale when my crsor is over it and go back to normal when it’s not.

onClipEvent (enterFrame) {  
if (\_xscale\<100 ) {\_xscale = \_yscale += 10;  
}  
}

This is all the as i have but i do not know how to make it so the mouseover function is involved

can someone help?

---

<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:** [November 8, 2003, 5:29am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/2 "2003-11-08T05:29:17Z")

</div>

try this  
[AS]  
on(rollOver){  
function shrink(){  
this.\_xscale = this.\_yscale -= 10;  
}  
keepShrinking = setInterval(shrink, 100)//100 is speed in milliseconds  
}  
on(rollOut, DragOut){  
clearInterval(keepShrinking);  
this.\_xscale = this.\_yscale = 100;  
}  
[/AS]

Hope it helps, and I hope I typed that correctly, unfortunately I dont have flash at work so check it please.

Good Luck,  
Shawn

---

<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:** [November 8, 2003, 5:45am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/3 "2003-11-08T05:45:55Z")

</div>

I should have also said i want it to stop at a certain size

---

<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:** [November 8, 2003, 6:33am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/4 "2003-11-08T06:33:06Z")

</div>

this will stop at a particular scale percentage:  
[AS]  
on(rollOver){  
function shrink(){  
if(this.\_xscale\>20){  
//replace the 20 with thesize you want to stop at  
this.\_xscale = this.\_yscale -= 10;  
}  
}  
keepShrinking = setInterval(shrink, 100)//100 is speed in milliseconds  
}  
on(rollOut, DragOut){  
clearInterval(keepShrinking);  
this.\_xscale = this.\_yscale = 100;  
}  
[/AS]

This will stop at a particular width or height:  
[AS]  
on(rollOver){  
function shrink(){  
if(this.\_width\>20 && this.\_height\>20){  
//replace the 20 with thesize you want to stop at  
this.\_xscale = this.\_yscale -= 10;  
}  
}  
keepShrinking = setInterval(shrink, 100)//100 is speed in milliseconds  
}  
on(rollOut, DragOut){  
clearInterval(keepShrinking);  
this.\_xscale = this.\_yscale = 100;  
}  
[/AS]

Isn’t Flash fun,  
Shawn

Sorry for the delay got kicked out for a while

---

<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:** [November 8, 2003, 6:34am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/5 "2003-11-08T06:34:51Z")

</div>

yes, flash is fun 😃

---

<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:** [November 8, 2003, 6:43am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/6 "2003-11-08T06:43:46Z")

</div>

I hope that code works I dont have flash at work or I would make a quick example

---

<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:** [November 8, 2003, 9:50am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/7 "2003-11-08T09:50:29Z")

</div>

:\*(

I do not know much about action scripting… but i do have this

onClipEvent (enterFrame) {  
if (\_xscale\<grow) {  
\_xscale = \_yscale += 5;  
}  
}  
on (rollOver) {  
grow = 100;  
}  
on (rollOut) {  
grow = 70;  
}

the only problem is I can’t get it to ease back to it’s original size once the cursor rolls out

pS paradox thanks for helping out 😉

---

<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:** [November 8, 2003, 10:24am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/8 "2003-11-08T10:24:40Z")

</div>

okay I think I got what you want this time make it shrink on rollover then grow back to original size on rollout. If that is backwards I will make notes next to the lines that need to be changed, makes the changes and it should work.  
[AS]  
onClipEvent(load){ //this is so the function is only defined once  
function growOrShrink(){  
this.\_xscale += gOrS;  
this.\_yscale += gOrS;  
}  
on(rollOver){  
gOrS = -1;//if you want it to shrink faster make the -1 a -3 or -4  
grower = setInterval(growOrShrink,100);  
if(this.\_xscale\<20 || this.\_yscale\<20){//change 20 to something else to make it grow or shrink more  
clearInterval(grower);//might need “” around the name in there  
}  
}  
on(rollOut){  
gOrS = 1;//make a 3 or 4 to grow faster  
grower = setInterval(growOrShrink,100);  
if(this.\_xscale\>=100 || this.\_yscale\>=100){  
clearInterval(grower);//might need “” around the name in there  
}  
}  
[/AS]  
okay that should do what you need to make it work the other way around use this for the rollover/rollout states:  
[AS]  
on(rollOver){  
gOrS = 1;//if you want it to shrink faster make the -1 a -3 or -4  
grower = setInterval(growOrShrink,100);  
if(this.\_xscale\>120 || this.\_yscale\>120){//change 120 to something bigger to make it frow more  
clearInterval(grower);//might need “” around the name in there  
}  
}  
on(rollOut){  
gOrS = -1;//make a 3 or 4 to grow faster  
grower = setInterval(growOrShrink,100);  
if(this.\_xscale\<=100 || this.\_yscale\<=100){  
clearInterval(grower);//might need “” around the name in there  
}  
}  
[/AS]  
if this is still not what you need feel free to email me at [shawn@veuphoria.com](mailto:shawn@veuphoria.com) and I could build you an little example file or maybe look at your .fla and get you going in the right direction.  
I get off work at 6am US eastern time so it will be a few minutes before I can check my personal email.

I hope that’s right this time,  
Shawn

---

<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:** [November 8, 2003, 10:58am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/9 "2003-11-08T10:58:23Z")

</div>

Place this on the timeline in which your movieclip is in:

```auto

MovieClip.prototype.resizeTo = function(to) {
	this.onEnterFrame = function() {
		this._xscale = this._yscale = to-(to-this._xscale)/1.2
		this._xscale > to-1 && this._xscale < to+1 ? delete this.onEnterFrame : null
	};
};
mc.onRollOver = function(){
	this.resizeTo(150);
}
mc.onRollOut = function(){
	this.resizeTo(100)
}

```

Example FLA:

---

<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:** [November 8, 2003, 11:20am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/10 "2003-11-08T11:20:45Z")

</div>

ya that works too,  
Thanks Voetsjoeba

Going to look into prototypes :nerd:

---

<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:** [November 8, 2003, 12:04pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/11 "2003-11-08T12:04:18Z")

</div>

Senocular has showed me an amazing tutorial on OOP and prototypes, constructors and all. It’s besically an entire guide through ActionScript 1.0. It’ll be up on [kirupa.com](http://kirupa.com) in a while, so keep an eye out for it =)

---

<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:** [November 8, 2003, 5:30pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/12 "2003-11-08T17:30:32Z")

</div>

:beam: thank you much para and voet. Both of you are a credit to the kirupa forums =)

---

<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:** [November 8, 2003, 5:31pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/13 "2003-11-08T17:31:53Z")

</div>

You’re welcome, Kay 😉

---

<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:** [November 8, 2003, 5:59pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/14 "2003-11-08T17:59:30Z")

</div>

para what type of work requires you to sit in front of a computer till six am?

---

<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:** [November 8, 2003, 11:07pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/15 "2003-11-08T23:07:54Z")

</div>

I work for the Air Force on 12 hour night shifts making sure people dont nuke something somewhere. But luckily my job is boring, so I get to check out Kirupa and other slightly less cool Forums

Anyway I will be waiting to see that tutorial, and good luck Kay

Have fun flashing,  
Shawn

---

<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:** [November 9, 2003, 5:54pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/16 "2003-11-09T17:54:31Z")

</div>

I modified Voetsjoeba’s great sample file to have several of these scalable buttons in a row. But I now have a stacking order problem – if the buttons are too close together to start out with, the button that is targeted will grow to either cover a button next to it, or be partially hidden by a button next to it.  
My question is , would it be easier in AS to Swap Depths so that every targeted button goes to the top (it’ll still partially cover buttons next to it), or is there a way to make the x of neighbor buttons move aside upon rolling over the target button?

---

<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:** [November 9, 2003, 8:05pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/17 "2003-11-09T20:05:25Z")

</div>

here’s an example, it’s not perfect yet. i’m still trying to get the mc’s back to their original position if you rollover a few off them.

scotty(-:

---

<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:** [November 9, 2003, 9:34pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/18 "2003-11-09T21:34:28Z")

</div>

That’s impressive. I see what you mean about moving back to their original postion, but the AS is far more efficient than motion-tweening would ever be. What does “schaal” mean?

---

<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:** [November 9, 2003, 9:42pm UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/19 "2003-11-09T21:42:03Z")

</div>

it’s Dutch. in this case it means “scale”

scotty

---

<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:** [November 10, 2003, 12:35am UTC](https://forum.kirupa.com/t/mouseover-scaling/34946/20 "2003-11-10T00:35:47Z")

</div>

with movie clips acting as buttons ☹ anyone know a way around this?

[Next page](https://forum.kirupa.com/t/mouseover-scaling/34946.md?page=2)