Sliding Effect

[h1]Sliding Effect[/h1]

Okay, here's how you make a 'sliding' effect, where the 'dot' or unit slows to a stop, and speeds up to a top speed. It's very easy, and all it requires is a few lines of code, and, of corse, my favorit little 20x20 dot ^_^, but with Full Range Movement

Okay, let's get the basics done again:

Open Flash
Go into properties and make it look like this:
Make the 20x20 circle like this:
Press F8 to convert it to a MovieClip
Make the Convert Box look like this:

Okay, now we've got a 400x400 Movie, frame rate of 30, background of solid white, and a MovieClip. Now we've got to add these actions to the MovieClip:

Code:

onClipEvent (load) {
xs = 0;
ys = 0;
s = 0;
_rotation = 0;
}
onClipEvent (enterFrame) {
_x += xs;
_y -= ys;
if (Key.isDown(65)) {
_rotation -= 5;
}
if (Key.isDown(68)) {
_rotation += 5;
}
if (Key.isDown(87)) {
s += 0.5;
xs = s*Math.sin((_rotation*Math.PI)/180);
ys = s*Math.cos((_rotation*Math.PI)/180);
}
if (_x<=10) {
_x += s;
}
if (_x>=390) {
_x -= s;
}
if (_y>=390) {
_y -= s;
}
if (_y<=10) {
_y += s;
}
if (s>0 && Key.isDown(87) != true) {
s -= 0.5;
xs = s*Math.sin((_rotation*Math.PI)/180);
ys = s*Math.cos((_rotation*Math.PI)/180);
}
if (s<0) {
s = 0;
}
if (s>5) {
s = 5;
}
}

Okay, nice and long, like normal, so let's take it bit by bit!

Code:

onClipEvent (load) {
xs = 0;
ys = 0;
s = 0;
_rotation = 0;
}

Same as the Full Range Movement Tutorial, set's a few variables xs = the _x speed; ys = _y speed; s = speed; _rotation = the MovieClip's rotation.

Code:

onClipEvent (enterFrame) {
_x += xs;
_y -= ys;

Now here's a little different code, if you notice, I made it so it always is moveing, that is, the _x and _y location is always getting modified, so when you let go of the key, it will 'slide'.

Code:

if (Key.isDown(65)) {
_rotation -= 5;
}
if (Key.isDown(68)) {
_rotation += 5;
}

Rotates the MovieClip according to the 'A' (65) and 'D'(68) keys.

Code:

if (Key.isDown(87)) {
s += 0.5;
xs = s*Math.sin((_rotation*Math.PI)/180);
ys = s*Math.cos((_rotation*Math.PI)/180);
}

When you press the 'W' key, it moves the MovieClip according to the direction it's facing, and increases 's', giving a speed up effect.

Code:

if (_x<=10) {
_x += s;
}
if (_x>=390) {
_x -= s;
}
if (_y>=390) {
_y -= s;
}
if (_y<=10) {
_y += s;
}

The borders, same as my Full Range Movement Tutorial.

Code:

if (s>0 && Key.isDown(87) != true) {
s -= 0.5;
xs = s*Math.sin((_rotation*Math.PI)/180);
ys = s*Math.cos((_rotation*Math.PI)/180);
}

Here's the main part of the sliding effect, it's the script that makes it slow down to a stop, or slide. It makes sure that the 'w' key ISN'T down, and that 's' is greater then 0, then it takes 0.5 away form 's', and chages the 'xs' and 'ys' variables accordingly.

Code:

if (s<0) {
s = 0;
}
if (s>5) {
s = 5;
}
}

And finally, we have the two if statements that say:
"If 's' is less then 0"
"'s' equals 0" which keeps s at 0 if it goes under

"If 's' is greater then 5"
"'s' equals 5" 's' will stay at 5 as a maximum speed, to keep it form going too fast.

Well, that's it, here's the final product:
Use W, A, D keys to move around.

<a href="http://www.graphicaddicts.net/ssj/sliding%20effect.swf" target="_blank">http://www.graphicaddicts.net/ssj/sliding%20effect.swf</a>

If you like this tutorial, please Click Here to register.

Click the link below to download the Flash file for this tutorial.
Sliding Effect FLA

Graphic Addicts Forums