Moving objects in flash using vectors

There are many tutorials out there teaching you how to move objects in flash using Actionscript. They are all pretty good and use the same technique. That technique is to add/subtract some value every iteration (frame) to X and Y coordinates of the object, depending on the arrow key you pressed. That gives the illusion of object moving.

var speed:Number = 4;
object_mc.onEnterFrame = function() {
	if (Key.isDown(Key.RIGHT)) {
		this._x = this._x+speed;
	} else if (Key.isDown(Key.LEFT)) {
		this._x = this._x-speed;
	}
	if (Key.isDown(Key.UP)) {
		this._y = this._y-speed;
	} else if (Key.isDown(Key.DOWN)) {
		this._y = this._y+speed;
	}
};

While this is a simple solution, there is an even simpler and more powerful solution. Name of that solution is vectors.

What is a vector?

Simply put, vector is a line indicating direction and length of the movement. We assign vector to some object so we know where to and how much to move that object.
As you can see vector tells us where this ball is going to and at what speed. If we think of iteration, vector tells us where in the next iteration this ball is going to be. Every vector has a starting and an end point. They can be anywhere on your screen, but for our example we fix the starting point at the center of the ball and we put that ball, and the starting point, in the center of a local coordinate system (0,0).

We write vectors as v=<x,y> (we say that vector has a x – component and the y – component) so the vector on the picture would be v=<7,6>. This means that the object has to move 7 units on the X axis, and 6 units on the Y axis to get where the vector is pointing. See how simple it is.
You can also add, subtract or multiply two or more vectors, but for the simplicity of this tutorial we have only one vector.

Why is a vector better than the example at the beguining?

The example at the beginning adds speed of 4 to X or/and Y axis if we press an (up, down, left, right) arrow. If we press two arrows at the same time, for example up and right, we move up 4 units, and right 4 units. So we end up (up & right vector) farther than the ball could actually move. Try it in some older games, moving to 45° angles is much faster than moving front or sides. You can see this directly in the picture, the 'up & right' vector is longer than the 'up' or 'right' one. Note that, with this solution, we can move at right angles or 45° sides ONLY.

Vector solves this problem. If we say that the ball moves 4 units, it is her speed for one iteration. And if we go to the sides we should distribute this speed to X and Y axis. This is where normalization of the vector comes in play. Normalizing vector means that vector keeps his direction, but its length is default 1 unit or whatever we specify. Fortunately flash does that for us so you just need to specify how long do you need the vector and presto, you have it. We are going to use normalize(length) flash method to normalize vector to some desired length, 4 units in our previous example normalize(4).

Now all you have to do is add vector x – component to X axis of the object, and y – component to Y axis. And your object moves at the same speed whatever direction you need it to go. We are no longer constrained to sides or right angles.

Let's walk you through an example. We want to place a ball in the middle of the screen and make a vector that is tracing your mouse (red vector).We are also going to normalize that vector so you can see normalization in play (green vector). When you click on the screen the ball moves according to that vector. Of course we will normalize it further to some smaller value so the ball doesn’t rocket off screen before you can see it.

Let's look at the code.

// init variables and attach ball object on screen
onLoad = function() {
	ballDepth = 100;
	ballObject = attachMovie("ball", " ball_mc", ballDepth, 
                         {_x:Stage.width/2, _y:Stage.height/2})
	ballObject.action = "idle";
}

First let's set some variables we will use later. Function onLoad runs only once at the start of the movie. Depth 'ballDepth' at which we will display the ball, 'ballObject' with the ball attached. And finally we set the ball idly sitting in the middle of the screen. But not for long.

// we draw vectors or move ball every screen
onEnterFrame = function() {
	clear();	// clear the screen
	
	// set the ball flying
	if(Key.isDown(1) && ballObject.action == "idle") {
		ballObject.action = "move";
	}

Then every frame (iteration) we do the following. Function onEnterFrame runs once every frame, and you can set how many frames per second there are, I use 30 fps. Clear the screen, which contains vectors drawn in the previous frame so we can draw new ones for this frame. Check if the user clicked on the screen (Key 1 is the left mouse button) and if the ball is idle (isn't already moving). If that’s true, we change the state of the ball so it can start moving.

    // if we didn't click draw necesarry vectors
    if(ballObject.action == "idle"){
        // vector from ball to cursor
        vector2target = 
        new Point(_root._xmouse-ballObject._x,_root._ymouse-ballObject._y);
        drawLine("red", ballObject._x, ballObject._y, 
                  vector2target.x, vector2target.y);
        
        // normalize previous vector on fixed 50 units long
        vector2target.normalize(50);
        drawLine("green", ballObject._x, ballObject._y, 
                  vector2target.x, vector2target.y);
        
        // normalize to 5 units for moving the ball
        vector2target.normalize(5);
    }

If the ball is idly standing, we create vectors and draw them. Vector is defined by Flash class Point and has an x & y component, as we said before. That is Point(x-comp, y-comp). We have to subtract position of the ball from the mouse position since it is sitting in the middle of the screen. That way we get exact distance of the mouse from the ball. First we draw the vector from ball to your mouse cursor (red color). Then we normalize it to 50 units long, so you can see normalization in real time when we draw it (green color). That vector will always be 50 units long. And finally we normalize the vector to some small value so the ball doesn't rocket off the screen if you click on the screen. This final vector is used for moving the ball when you click on screen, so we don't need to draw it. The first two drawn vectors are just for show so you can see how the vector works.

	//if we clicked, move the ball in the direction of the vector
	else if(ballObject.action == "move") {
		ballObject._x += vector2target.x;
		ballObject._y += vector2target.y;
		
		// reset the ball once we are out of bounds
		if(ballObject._x < 0 || ballObject._x > Stage.width 
                   || ballObject._y < 0 || ballObject._y > Stage.height) {
			ballObject.action = "idle";
			ballObject._x = Stage.width/2;
			ballObject._y = Stage.height/2;
		}
	}
}

If the ball is in the moving state (move), we just add x and y component of the vector to x and y position of the ball, and the ball moves every iteration according to the direction and length (speed) of the vector. If the ball exits the screen we reset it to the middle of the screen and set it idly sitting there.

Full code is here:

import flash.geom.Point;

// init variables and attach ball object on screen
onLoad = function() {
	ballDepth = 100;
	ballObject = attachMovie("ball", " ball_mc", ballDepth, 
                         {_x:Stage.width/2, _y:Stage.height/2})
	ballObject.action = "idle";
}

// we draw vectors or move ball every screen
onEnterFrame = function() {
	clear();	// clear the screen
	
	// set the ball flying
	if(Key.isDown(1) && ballObject.action == "idle") {
		ballObject.action = "move";
	}
	
	// if we didn't click draw necesarry vectors
	if(ballObject.action == "idle"){
		// vector from ball to cursor
		vector2target = 
                new Point(_root._xmouse-ballObject._x,_root._ymouse-ballObject._y);
		drawLine("red", ballObject._x, ballObject._y, 
                          vector2target.x, vector2target.y);
		
		// normalize previous vector on fixed 50 units long
		vector2target.normalize(50);
		drawLine("green", ballObject._x, ballObject._y, 
                          vector2target.x, vector2target.y);
		
		// normalize to 5 units for moving the ball
		vector2target.normalize(5);
	} 
	//if we clicked move the ball in the direction of the vector
	else if(ballObject.action == "move") {
		ballObject._x += vector2target.x;
		ballObject._y += vector2target.y;
		
		// reset the ball once we are out of bounds
		if(ballObject._x < 0 || ballObject._x > Stage.width 
                   || ballObject._y < 0 || ballObject._y > Stage.height) {
			ballObject.action = "idle";
			ballObject._x = Stage.width/2;
			ballObject._y = Stage.height/2;
		}
	}
}

// function for drawing lines, vectors
// specify color, start point, end point
drawLine = function(sColor, sX, sY, nX, nY){
	switch(sColor){
		case "red":
			color = 0xFF0000;
			break;
		case "blue":
			color = 0x0000FF;
			break;
		case "green":
			color = 0x00FF00;
			break;
		default:
			color = 0x000000;
			break;
	}
	lineStyle(2,color,100);
	moveTo(sX, sY);
	lineTo(sX + nX, sY + nY);
}

Don't worry about the function 'drawLine' it is just used to draw the vectors in different colors on screen. We used it when we needed to draw those two vectors.