00:00
00:00

## As: Elasticity

8,185 Views | 21 Replies

As: Elasticity 2005-07-02 17:02:36

Elasticity is by far the effect I love the most in flash. It’s a fun effect you can use to add more to your flash projects. In this tutorial, you’ll learn how to make something like this : http://img283.imageshack.us/my.php?image=elasticity6gp.swf. To fully understand this tutorial, you need to know how to use variables and movie clip properties (_x and _y).

Getting started
The recommended frame rate for this effect is 30 FPS. The movie size doesn’t matter, as long as the movie clip has room to move.

First of all, draw what’s going to be your ball. Convert it to a movie clip and place it on the frame where you want it to go when it’s going to be elastic.

Initialization
Let’s create the variables we’re going to need for this script to work. Put this script in the movie clip’s actions :

xTarget=_x
yTarget=_y
//these variables are where the movie clip is going to go, the center
xSpeed=0
ySpeed=0
//those are the speed variables
Mode=1
//there’ll be two modes : 1, be an elastic, 2, follow the mouse
Speed=10
//the speed the movie clip will gain when going to the target
Stop=1.2
//the number that’ll divide the speed variables
}

You can play with the Speed and Stop variables. If you change Speed to a lower number, the movie clip will gain speed faster. If you change Stop to a higher number, the movie clip will slow down faster and will be less elastic.

Mode 1
We’ll now make it so the movie clip will move towards the target. Paste this script in the movie clip’s actions :

onClipEvent(enterFrame){
if(Mode==1){
_x+=xSpeed
_y+=ySpeed
//add the speed variables to the _x and _y properties
xSpeed+=(xTarget-_x)/Speed
//xTarget-_x will determine the distance between the x target and the _x position of the movie clip
//this distance will then be divided by the Speed variable and the result will be added to xSpeed
ySpeed+=(yTarget-_y)/Speed
//same but for ySpeed
xSpeed/=Stop
ySpeed/=Stop
//these two lines will make it so the x and y speeds will be divided by Stop, otherwise the movie clip will just bounce around without stopping
}
}

Mode 2
Now, if you test your script, you should see that the movie clip stays in place but doesn’t do much. We’ll now script Mode 2 so the movie clip can be moved around with the mouse. Add this script in the onClipEvent(enterFrame) handler (if you don’t know how, the final script will be given at the end of the tutorial) :

if(Mode==2){
_x=_root._xmouse
_y=_root._ymouse
//set the movie clip’s position to the mouse’s position
xSpeed=0
ySpeed=0
//by setting the speed variables to 0, the movie clip will correctly move from your mouse when the mouse button is up
}

And finally, add this script, which just changes the mode when you click and release the mouse button :

onClipEvent(mouseDown){
Mode=2
}
onClipEvent(mouseUp){
Mode=1
}

The final script
If your script doesn’t work, use this one :

xTarget=_x
yTarget=_y
xSpeed=0
ySpeed=0
Mode=1
Speed=10
Stop=1.2
}
onClipEvent(enterFrame){
if(Mode==1){
_x+=xSpeed
_y+=ySpeed
xSpeed+=(xTarget-_x)/Speed
ySpeed+=(yTarget-_y)/Speed
xSpeed/=Stop
ySpeed/=Stop
}
if(Mode==2){
_x=_root._xmouse
_y=_root._ymouse
xSpeed=0
ySpeed=0
}
}
onClipEvent(mouseDown){
Mode=2
}
onClipEvent(mouseUp){
Mode=1
}

Now that your script works (it should), you can play with it. Change the Speed and Stop variables to see the effects.

If you have any questions or comments, post them here. Thanks for reading.

ey

Response to As: Elasticity 2005-07-02 17:08:09

very handy , I really don't use it enough anymore, a trail effect on elasticity is always a nice addition (wink);)(wink)

Response to As: Elasticity 2005-07-02 17:10:25

Haha yeah, well if this one gets some attention I might add some fun stuff you can include in your elasticity script.

ey

Response to As: Elasticity 2005-07-02 17:10:35

I had always assumed that sort of effect was based on some crazy ass calculus physics function, but that is obviously a lot better way to do it. This is one of the AS tutorials that will definatly affect my future projects. Thanks.

Response to As: Elasticity 2005-07-02 17:15:07

I also thought (when I was a n00b) that gravity and elasticity were the ultimate things to script in flash, but actually it's not that hard.

Also, if anyone wants an easing script, you can also use this script, but change the part where it says :

xSpeed+=(xTarget-_x)/Speed
ySpeed+=(yTarget-_y)/Speed

to :

xSpeed=(xTarget-_x)/Speed
ySpeed=(yTarget-_y)/Speed

ey

Response to As: Elasticity 2005-07-02 17:18:35

tween equations are fun, I'll make a tutorial about that someday ;)

this comes kinda close

Response to As: Elasticity 2005-09-03 11:28:04

Ok.. I'm trying to get an elastic scale going but my code isn't working... I'm sure I'm doing something stupid like not telling it to scale or something...

xTarget = this._xscale;
yTarget = this._yscale;
xSpeed = 0;
ySpeed = 0;
Mode = 1;
Speed = 10;
Stop = 1.2;
xm= _root._xmouse;
xy= _root._ymouse;
}
onClipEvent (enterFrame) {
if (Mode == 1) {
this._xscale += xSpeed;
this._yscale += ySpeed;
xSpeed += (xTarget-_xscale)/Speed;
ySpeed += (yTarget-_yscale)/Speed;
xSpeed /= Stop;
ySpeed /= Stop;
}
if (Mode == 2) {
_xscale = 200;
_yscale = 200;
xSpeed = 0;
ySpeed = 0;
}

if(this.hitTest(xm,ym, true)) {
Mode = 2;
}
if (this.hitTest(xm,ym,false)) {
Mode = 1;
}
}

Help please... because I am stupid but I want to learn.

Visit JackSmack.com and submit your Flash Games!

Response to As: Elasticity 2005-09-03 11:47:34

Must be your hitTests that are failing, i just swapped the hitTest checks for on(press) and on(release) and the elasticity initiates fine.

Response to As: Elasticity 2005-09-03 12:00:16

ok I got this far but I can't figure out how to get it to ease to the max and min scales... without stopping for a second.

http://media.putfile.com/scaletest

xTarget=_xscale
yTarget=_yscale
xSpeed=0
ySpeed=0
Mode=1
Speed=10
Stop=1.2
}
onClipEvent(enterFrame){
if(Mode==1 and _xscale > 30){
_xscale+=xSpeed
_yscale+=ySpeed
xSpeed+=(xTarget-_xscale)/Speed
ySpeed+=(yTarget-_yscale)/Speed
xSpeed/=Stop
ySpeed/=Stop
}

if (this._xscale < 41){
this._xscale = 41;
this._yscale = 41;
}

if(Mode==2 and _xscale <200){
_xscale += xSpeed
_yscale += ySpeed
xSpeed+=(xTarget+_xscale)/Speed
ySpeed+=(yTarget+_yscale)/Speed
xSpeed/=Stop
ySpeed/=Stop
}
}
onClipEvent(mouseDown){
Mode=2
}
onClipEvent(mouseUp){
Mode=1
}

Visit JackSmack.com and submit your Flash Games!

Response to As: Elasticity 2005-09-03 13:13:36

wasnt entirely sure what you wanted but this gives a shorter pause than evaluating whether _xscale > 200 after evaluating whether it <200.

The pause is barely noticable.

if (this._xscale < 41){
this._xscale = 41;
this._yscale = 41;
}
if(Mode==2 and _xscale >200){
Mode = 1;
}else if(Mode==2 and _xscale <200){
_xscale += xSpeed
_yscale += ySpeed
xSpeed+=(xTarget+_xscale)/Speed
ySpeed+=(yTarget+_yscale)/Speed
xSpeed/=Stop
ySpeed/=Stop
}

Response to As: Elasticity 2005-09-03 14:16:59

At 9/3/05 01:13 PM, T-H wrote: wasnt entirely sure what you wanted...

I'm wanting to do something like this website's job posting. where I have buttons that scale when you roll over them and have elastic properties... go to the job page here...

http://high-voltage.com/

If you can help me make this kinda thing I would love you.

Visit JackSmack.com and submit your Flash Games!

Response to As: Elasticity 2005-09-03 15:11:11

http://img330.images..ge=elasticity0va.swf

Well Jack its not amazing but its fairly close to that website's. If you want the fla just ask. It's easily adjustable to add more buttons in.

Response to As: Elasticity 2005-09-04 08:19:12

At 9/3/05 03:11 PM, T-H wrote: http://img330.images..ge=elasticity0va.swf

Well Jack its not amazing but its fairly close to that website's. If you want the fla just ask. It's easily adjustable to add more buttons in.

I tinkered with the code alot and got a good night sleep and figured it out... I didn't use your version T-H. I made this from scratch. To solve the hit test problem I made buttons inside the scaling clip and gave them rollover and out actions.

http://img312.images..age=scaletest5io.swf

I think this is pretty cool but if you screw with it to much it overlaps just a LITTLE TINY bit. I don't think that is a major problem.

what do you guys think?

Visit JackSmack.com and submit your Flash Games!

Response to As: Elasticity 2005-09-04 08:21:45

Its good, sucks that you had to do the whole thing from scratch though.

Response to As: Elasticity 2005-09-04 08:41:03

At 9/4/05 08:21 AM, T-H wrote: Its good, sucks that you had to do the whole thing from scratch though.

No doing the whole thing from scratch was great I learned alot. this thread helped me out a great deal with this.

here is a link to the test with sound

http://img42.imagesh..age=scaletest6wt.swf

Visit JackSmack.com and submit your Flash Games!

Response to As: Elasticity 2005-10-04 16:32:20

Dude, Awesome!

What's the code for that?

Response to As: Elasticity 2005-10-04 16:38:59

Just realised I used edited bits and pieces from this tut for the menu buttons in this , Thanks : )

Response to As: Elasticity 2005-10-04 16:45:22

What Is the code, My I ask?

Response to As: Elasticity 2005-10-04 17:14:36

C'mon, dude gimme da code for the Button elasticity that only moves when you go over it.

Response to As: Elasticity 2008-02-29 20:50:05

another wierd alteration to this code could be

replace:

`` xSpeed += (xTarget-_x)/Speed; ySpeed += (yTarget-_y)/Speed;``

with.

`` xSpeed -= (xTarget-_x)/Speed; ySpeed-= (yTarget-_y)/Speed;``

and then add thisat the bottom:

``````onClipEvent (enterFrame) {
if (this._y>400) {
this._y = 0;
}
if (this._y<0) {
this._y = 400;
}
if (this._x>550) {
this._x = 0;
}
if (this._x<0) {
this._x = 550;
}
}``````

see for yourself.
maybe a bullettime or trail effect would make look better?

bork bork bork

Response to As: Elasticity 2008-10-25 19:25:05

Im trying to get this to work in my project just so it can be dragged around when click on, but not jump to the mouse whenever you click somewhere so you can still click other things. Is there a way to mod this code like that?

Otherwise it creates a cool effect, and would be an awesome addition to this menu im making.

Zelda is like high-fructose-corn-syrup-based cookies with extra MSG preserverative, it never goes bad!

Response to As: Elasticity 2008-11-08 18:53:28

cool, when i get flash ill check that out

i am the fear that resides within, fear me, embrace me, give me power