# Bouncing buttons?

**URL:** <https://forum.kirupa.com/t/bouncing-buttons/25002>\
**Category:** Uncategorized\
**Created:** [July 8, 2003, 10:28am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002 "2003-07-08T10:28:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![brintonwhite](https://avatars.discourse-cdn.com/v4/letter/b/cdc98d/32.png) [@brintonwhite](https://forum.kirupa.com/u/brintonwhite)\
**Post date:** [July 8, 2003, 10:28am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/1 "2003-07-08T10:28:45Z")

</div>

If you check out the link below, you will see some orange buttons that bounce when the mouse goes over them. I am very keen to do this sort of effect. Does anyone know the actionscript to create such an effect?

[http://www.saraevans.com/sara.html](http://www.saraevans.com/sara.html)

Many thanks

---

<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:** [July 8, 2003, 11:01am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/2 "2003-07-08T11:01:06Z")

</div>

Read this thread, it might help.

[http://www.kirupaforum.com/forums/showthread.php?s=&threadid=27768](http://www.kirupaforum.com/forums/showthread.php?s=&threadid=27768)

---

<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:** [July 8, 2003, 11:31am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/3 "2003-07-08T11:31:25Z")

</div>

Thanks for the reply but it is not the effect that Iam trying to create. I would like a button that seems to bounce outwards like the example i supplied.

Thanks again

---

<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:** [July 8, 2003, 11:50am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/4 "2003-07-08T11:50:55Z")

</div>

Those button has elasticity applied to them to create that bounce outward effect.

---

<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:** [July 8, 2003, 11:59am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/5 "2003-07-08T11:59:07Z")

</div>

I honestly dont know enough about actionscript to change it to create the effect i want (I don’t suppose you know do you)? I would sure appreciate it if you do.

Thank you

---

<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:** [July 8, 2003, 1:25pm UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/6 "2003-07-08T13:25:19Z")

</div>

I can help you with the formula, but I’m at work and have to be home to get it. What everyone says about using elasticity is that the movement found on all the tut’s above are applied upon rollOver/rollOut of the button and instead of adjusting the \_x and \_y, you adjust the \_xscale and the \_yscale. I’ll get it for you, but in the mean time, play around with the formulas that are referenced here, that way you will learn how to do it better. :beam:

---

<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:** [July 8, 2003, 1:27pm UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/7 "2003-07-08T13:27:30Z")

</div>

thanks mr Thunder

---

<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:** [July 8, 2003, 1:27pm UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/8 "2003-07-08T13:27:32Z")

</div>

or u can just cheat and use tweening 😛

-Aditya  
:thumb:

---

<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:** [July 8, 2003, 4:29pm UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/9 "2003-07-08T16:29:44Z")

</div>

Mr. Thunder - that’s funny!!

I was wrong about how I used the actionScripting before. when I looked at the fla, I remembered that I had a problems puting the action on buttons, so I made them movieClips. The example is taken from my header at [Freddythunder.com](http://www.freddythunder.com) (after the intro).  
[AS]  
onClipEvent(load){  
tx=100;  
k=.6;  
damp=.9;  
}  
onClipEvent(enterFrame){  
if(this.hitTest(\_root.\_xmouse, \_root.\_ymouse, true)){  
tx=150;  
ax=(tx-\_xscale)_k;  
vx+=ax;  
vx_=damp;  
\_xscale=\_yscale+=vx;  
} else {  
tx=85;  
ax=(tx-\_xscale)_k;  
vx-=ax;  
vx_=damp;  
\_xscale=\_yscale-=vx;  
}  
}  
[/AS]  
You can apply on(press) actions for movieClips in Flash MX, but if you want a button, you can edit your movieClip, add a layer when you are editing and nest a button in the movieClip itself. Then you can use all the button functions.

You could use tweening, but tweens make for bigger size when AS doesn’t.

I hope that helps!!

---

<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:** [July 8, 2003, 10:11pm UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/10 "2003-07-08T22:11:08Z")

</div>

Thanks for taking the time freddy. It works perfectly on a movie clip. I suppose it would be possible to put an invisible button over the top.

---

<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:** [July 9, 2003, 2:37am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/11 "2003-07-09T02:37:20Z")

</div>

Either that, or do what I wrote earlier about putting that invisible button IN the movieClip itself. I lost my ISP at home for a week (switching service) so I only have ISP at work. If you want, I can make a fla for you so you can see what I mean. Otherwise, I learned that you can put buttons in movieClips here:

If you want buttons like the one on your example site, where nothing changes in the over and down state, you can use:  
[AS]  
on(press){  
//put whatever you want here action-wise  
//like…  
\_root.container.loadMovie(“newMovie.swf”);  
}  
[/AS]  
on(press) works on movieClips in MX. :beam:

---

<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:** [July 9, 2003, 2:40am UTC](https://forum.kirupa.com/t/bouncing-buttons/25002/12 "2003-07-09T02:40:23Z")

</div>

I forgot something, if you want, you can put that code to make it bounce around in a prototype on the first frame and it will apply to all movieClips. I know about .02% of what a prototype is, but in this case, it would save some cutting and pasting.  
[AS]  
MovieClip.prototype.onEnterFrame = function() {  
if (this.\_name != “”) {  
this.tx = 100;  
this.k = .6;  
this.damp = .9;  
if (this.hitTest(\_root.\_xmouse, \_root.\_ymouse, true)) {  
this.tx = 150;  
this.ax = (tx-\_xscale)\*this.k;  
this.vx += this.ax;  
this.vx \*= this.damp;  
this.\_xscale = this.\_yscale += vx;  
} else {  
this.tx = 85;  
this.ax = (this.tx-this.\_xscale)\*this.k;  
this.vx -= this.ax;  
this.vx \*= this.damp;  
this.\_xscale = this.\_yscale -= this.vx;  
}  
}  
};  
[/AS]  
I hope all this helps, I got excited because I got a prototype to work!!
