A Simple Start: Part 2May 4th , 2008

The previous tutorial taught you how to make a ball move around on screen with simple interaction. Now we're going to make the movement a bit more complicated and I am going to show you how you can use variables in ActionScript.

Here's what we're going to try to do. What we want is when the user presses a key, it accelerates the ball in that direction. Therefore, we will not just add to the x and y values, but instead add to the x and y SPEEDS.

Here's what we're going to do in this tutorial:
Install Flash Player

Here's the plan:
We'll need two variables: "vx" and "vy", which will represent the x and y speeds of the ball.
When the user presses the arrow keys. We will not change the x and y values directly, but instead change vx and vy accordingly.
Then, after all the key press tests, we will tell the ball to move with vx and vy.

Start up your flash file from the previous tutorial, but now use this code in the frame, instead of the old code.

Code:
  1. vx = 0;
  2. vy = 0;
  3. ball.onEnterFrame = function() {
  4. 	if (Key.isDown(Key.UP)) {
  5. 		vy -= .2;
  6. 	}
  7. 	if (Key.isDown(Key.DOWN)) {
  8. 		vy += .2;
  9. 	}
  10. 	if (Key.isDown(Key.RIGHT)) {
  11. 		vx += .2;
  12. 	}
  13. 	if (Key.isDown(Key.LEFT)) {
  14. 		vx -= .2;
  15. 	}
  16. 	ball._x += vx;
  17. 	ball._y += vy;
  18. }


Take a look. First we set vx and vy, our variables, to zero, so the ball is not moving anywhere to start.
Then, same as before, we define the onEnterFrame function for the ball. In that function we do the tests. But inside the tests, instead of increasing or decreasing the ball's x and y, we increase/decrease the speeds (notice that we only change the speed by .2. This is because the speed will go up much too fast if we increase it by a bigger value). After we do the tests, we actually move the ball.

Now, as you press the arrow keys, the ball accelerates, rather than staying at a constant speed. Look at what we have now:

But wait!! Now we don't slow down at all. We only speed up!

Now we're going to have to use a constant, FRICTION (constants' names normally are all in upper case, so they can be easily told apart from variables). That way, when the ball is not accelerating, it will decelerate. A constant is a number that is defined in the beginning of your code, and then will never change.

Now look at the code:
Code:
  1. FRICTION = .97;
  2. vx = 0;
  3. vy = 0;
  4. ball.onEnterFrame = function() {
  5. 	if (Key.isDown(Key.UP)) {
  6. 		vy -= .2;
  7. 	}
  8. 	if (Key.isDown(Key.DOWN)) {
  9. 		vy += .2;
  10. 	}
  11. 	if (Key.isDown(Key.RIGHT)) {
  12. 		vx += .2;
  13. 	}
  14. 	if (Key.isDown(Key.LEFT)) {
  15. 		vx -= .2;
  16. 	}
  17. 	ball._x += vx;
  18. 	ball._y += vy;
  19. 	vx *= FRICTION;
  20. 	vy *= FRICTION;
  21. }

See what we changed? Now every frame, after we move the ball, we multiply vx and vy by .95, which slowly brings it closer to zero. You can change the value of FRICTION to suit you needs. The closer it is to one, the longer it will take to stop.

Now look at our final product:

Search