Bouncing buttons?

1

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

Many thanks

2

Read this thread, it might help.

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

3

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

4

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

5

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

6

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:

7

thanks mr Thunder

8

or u can just cheat and use tweening :stuck_out_tongue:

-Aditya
:thumb:

9

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 (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!!

10

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.

11

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:

12

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