Be a Supporter!

As: Elasticity

  • 7,468 Views
  • 21 Replies
New Topic Respond to this Topic
Joelasticot
Joelasticot
  • Member since: Feb. 14, 2003
  • Offline.
Forum Stats
Supporter
Level 46
Game Developer
As: Elasticity 2005-07-02 17:02:36 Reply

As: Main
http://www.newgrounds.com/bbs/topic.php?id=229808&page=9999

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 :

onClipEvent(load){
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 :

onClipEvent(load){
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.

Finally, two links about elasticity in flash :

http://www.bit-101.com/tutorials/elasticity.html
http://www.kirupa.com/developer/actionscript/spring.htm

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


ey

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to As: Elasticity 2005-07-02 17:08:09 Reply

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

Joelasticot
Joelasticot
  • Member since: Feb. 14, 2003
  • Offline.
Forum Stats
Supporter
Level 46
Game Developer
Response to As: Elasticity 2005-07-02 17:10:25 Reply

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


ey

BBS Signature
BleeBlap
BleeBlap
  • Member since: Mar. 8, 2005
  • Offline.
Forum Stats
Member
Level 24
Blank Slate
Response to As: Elasticity 2005-07-02 17:10:35 Reply

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.

Joelasticot
Joelasticot
  • Member since: Feb. 14, 2003
  • Offline.
Forum Stats
Supporter
Level 46
Game Developer
Response to As: Elasticity 2005-07-02 17:15:07 Reply

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

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to As: Elasticity 2005-07-02 17:18:35 Reply

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

this comes kinda close

JackSmack
JackSmack
  • Member since: Nov. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Game Developer
Response to As: Elasticity 2005-09-03 11:28:04 Reply

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

onClipEvent (load) {
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!

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Elasticity 2005-09-03 11:47:34 Reply

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

JackSmack
JackSmack
  • Member since: Nov. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Game Developer
Response to As: Elasticity 2005-09-03 12:00:16 Reply

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

onClipEvent(load){
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!

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Elasticity 2005-09-03 13:13:36 Reply

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
}

JackSmack
JackSmack
  • Member since: Nov. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Game Developer
Response to As: Elasticity 2005-09-03 14:16:59 Reply

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!

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Elasticity 2005-09-03 15:11:11 Reply

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.

JackSmack
JackSmack
  • Member since: Nov. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Game Developer
Response to As: Elasticity 2005-09-04 08:19:12 Reply

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!

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Elasticity 2005-09-04 08:21:45 Reply

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

JackSmack
JackSmack
  • Member since: Nov. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Game Developer
Response to As: Elasticity 2005-09-04 08:41:03 Reply

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!

BBS Signature
CUCKA-DUDE
CUCKA-DUDE
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Elasticity 2005-10-04 16:32:20 Reply

Dude, Awesome!

What's the code for that?

T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Elasticity 2005-10-04 16:38:59 Reply

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

CUCKA-DUDE
CUCKA-DUDE
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Elasticity 2005-10-04 16:45:22 Reply

Yes! It's that code that you used on your Menu Buttons!

What Is the code, My I ask?

CUCKA-DUDE
CUCKA-DUDE
  • Member since: Jul. 8, 2005
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Elasticity 2005-10-04 17:14:36 Reply

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

Xyresic
Xyresic
  • Member since: Dec. 15, 2006
  • Offline.
Forum Stats
Member
Level 19
Musician
Response to As: Elasticity 2008-02-29 20:50:05 Reply

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

Theomylad
Theomylad
  • Member since: Jul. 14, 2007
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to As: Elasticity 2008-10-25 19:25:05 Reply

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!

universal-fear
universal-fear
  • Member since: Nov. 1, 2008
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to As: Elasticity 2008-11-08 18:53:28 Reply

cool, when i get flash ill check that out


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