Full Range Movement

[h1]Full Range Movement[/h1]

Okay, so we've seen my basic movement (up, down, left, and right), and my hitTest tutorial, so I'm going to cover two things at once! Full range movement (360° turns), and how to stop the 'unit' from passing the borders, without hitTest!

Need to know:

What a variable is
What _x and _y is

Notes

Know what keycodes are, if you don't look at my Basic Movement Tutorial
I use Flash 8, but Flash 2004 is just as good (no changes really)
FPS 30 is my favorite
Use flash size 400x400, it's nice and even
CTRL+ALT+G will open the grid settings, I like a 10x10 grid, on always snap, and grid color one shade darker or lighter then the background

Okay, now that that's covered, let's start!

Getting Set Up
Open a new Flash Document.
Go into properties, and choose:
Flash MX 2004 & Flash 8:

Once you have the Properties open, make it look like this:
MX 2004:

Flash 8:

*Note- Color is #FFFFFF, or solid white*

Drawing and making the MovieClip
Good, now we're all set up to make our MovieClip! Let's start by drawing a 20x20 circle, with a line in it to show which direction he's moving:

Make sure he's selected when you're done, so we can convert him into a MovieClip.
Once you're done and the circle with a line is still selected, Press F8, which is the shortcut for Covert to Symbol, or you can go into Modify>Convert to Symbol...
Next, make the Convert to Symbol box look like mine:
MX 2004 & Flash 8:

Just remember to make the registration the center square, the registration is where the movieclip's center point will be, the center box is directly in the center of your select object, upper left is the top left corner of the selected object, etc.

Adding the actionscript
Okay, we've got our MovieClip, and he's selected, so he looks like this:

Well, if you remember from the hitTest tutorial, we gave the MovieClip an instance name, so it can be tracked through actionscripts, but this time, I'm going to make it so it stops at a certin _x and _y, rather then hit a box, no no instance name this time!
Here's the easy part, copy the action!

Code:

onClipEvent (load) {
xs = 0;
ys = 0;
s = 5;
_rotation = 0;
}
onClipEvent (enterFrame) {
if (Key.isDown(65)) {
_rotation -= 5;
}
if (Key.isDown(68)) {
_rotation += 5;
}
if (Key.isDown(83)) {
_x -= s*Math.sin((_rotation*Math.PI)/180);
_y += s*Math.cos((_rotation*Math.PI)/180);
}
if (Key.isDown(87)) {
_x += s*Math.sin((_rotation*Math.PI)/180);
_y -= 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;
}
}

Okay, now that you've copied that into the MovieClip, test it out! Use A, S, W, and D keys to move around! I know the walls are a little coppy, but it's all good for now. Time to explain it step by step:
Let's start with the simple part:

Code:

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

Waht this says, is when the MovieClip loads, it sets three variables, and modifys one property. The variabls, xs(_x speed) and ys(_y speed), are set to 0, and s (speed) is set to 5. And the property _rotation refers to the MovieClip's rotation, which is set to 0.
Now, I'll take this bit by bit:

Code:

onClipEvent (enterFrame) {

When the MovieClip enters the frame, or is in the frame in general.

Code:

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

This one says If the Key (65) wich is the key code for A, is pressed, then it takes the current rotation of the MovieClip (_rotation), subtracts it by 5, and stores that value into _rotation (that's what the -= does). Basicly, Takes 5 away from the current rotation (moving it left).

Code:

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

Okay, now we have to make the MovieClip rotate the other way, the key code 68, is d, so this one makes the MovieClip's _rotation+=5, making it turn to the right!

Code:

if (Key.isDown(83)) {
_x -= s*Math.sin((_rotation*Math.PI)/180);
_y += s*Math.cos((_rotation*Math.PI)/180);
}

Now here's the important one! This says If the key 83(w) is pressed, then it does the formula. This formula was given to my by a friend, and it basicly makes the perfect, 360°, movement. It takes our variable s, and multiplies it by the sine (Math.sin) of it's _rotation, times pi(MAth.PI), then divided by 180. Confused? No? Good. Yes? Still good, you just need to copy it. There's just one IMPORTANT thing, use cosine (Math.cos) for the _y, or else it won't even work.

Code:

if (Key.isDown(87)) {
_x += s*Math.sin((_rotation*Math.PI)/180);
_y -= s*Math.cos((_rotation*Math.PI)/180);
}

And we have to use that code again so S works (backwads), basicly just reverse the signs!

Okay, this time, it's the walls:

Code:

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

Basicly, I set up a square, 10 pixels in from each side. The movie's dimentions are 400x400, so I had to offset that by 10. You should be able to understand that, but here's a quick over view, if the _x is >= than 10(left side), it pushes the Movieclip back tot he right by s(speed), so it doesn't really move! When you're done, this should be the final product, created with Flash 8:

*NOTE* This requires Flash Player 8 to view! Click here to download Once there, click on 'Get Flash Player'.

<a href="http://www.graphicaddicts.net/ssj/Full%20Range%20Movement.swf" target="_blank">http://www.graphicaddicts.net/ssj/Full%20Range%20Movement.swf</a>

Well, that's My Full Range (360°) Movement Tutorial!

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

Click the link below to download the Flash file for this tutorial.
Full Range Movement FLA

Graphic Addicts Forums