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
