Car Acceleration Tutorial

In this flash actionscript 3.0 tutorial you will see how to make a car move more realistic then just moving back and forth, we will add some acceleration and de acceleration functionality so the car start up slow and increases in speed until it ends at a max speed, then when we want to stop it also need to slow down before it stops.

And it all should be looking like this.

First you may prepare some graphics for you stage, I guess you can do better then I did, I just made a fast one here. One simple tip I will tell you is to add a drop shadow to your object, so it looks like its standing on some kind of ground.

Now the only thing we need on the stage is some kind of car, just draw something or put in one if you have one. Convert it to a movie clip and give it the instance name "car".

Now we are ready for the actionscript part, so open up your actionscript panel and type in the code below.

First we need some variables to control some stuff, like telling us which key is pressed, the speed of the car, friction and acc..

view plain?

1. var rightKeyDown:Boolean;
2. var leftKeyDown:Boolean;
3. var keyPressed:int;
4. var speed = 0.5;
5. var cs = 0;
6. var friction = 0.96;

  var rightKeyDown:Boolean;   var leftKeyDown:Boolean;   var keyPressed:int;   var speed = 0.5;   var cs = 0;   var friction = 0.96; 

Usually I always put an init function, we could just type it outside any function, but it all looks more structured with a init function for all the code that should be run at program start.

First the function makes sure to tell flash that no keys is down.

Then we add to eventlisteners, one for the key down, and one for key up, to call a function no matter what key is hit.

view plain?

1. startMe();
2. function startMe():void {
3. leftKeyDown = false;
4. rightKeyDown = false;
5. stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
6. stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
7. }

startMe(); function startMe():void {  leftKeyDown = false;  rightKeyDown = false;  stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);  stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey); } 

This next function "filters" what key is down, if its the left or right, then add some function if its the one or other.

view plain?

1. function pressKey(event:KeyboardEvent):void {
2. keyPressed = event.keyCode;
3. if (keyPressed == Keyboard.LEFT) {
4. leftKeyDown = true;
5. }
6. if (keyPressed == Keyboard.RIGHT) {
7. rightKeyDown = true;
8. }
9. car.addEventListener(Event.ENTER_FRAME, driveCar);
10. }

function pressKey(event:KeyboardEvent):void {  keyPressed = event.keyCode;  if (keyPressed == Keyboard.LEFT) {   leftKeyDown = true;  }  if (keyPressed == Keyboard.RIGHT) {   rightKeyDown = true;  }  car.addEventListener(Event.ENTER_FRAME, driveCar); } 

And here is the function that has the most important code, it actually makes the car move, when the right key is down.

function driveCar(event:Event):void { if (leftKeyDown) { cs -= speed; } if (rightKeyDown) { cs += speed; } car.x += cs; cs *= friction; }

As you may have noticed in the startMe function we also added an eventlistner to listen to when the key is UP again, that is no key is down, so we can stop the car again.

view plain?

1. function releaseKey(event:KeyboardEvent):void {
2. var key_:int = event.keyCode;
3. if (key_ == Keyboard.LEFT) {
4. leftKeyDown = false;
5. }
6. if (key_ == Keyboard.RIGHT) {
7. rightKeyDown = false;
8. }
9. }

function releaseKey(event:KeyboardEvent):void {  var key_:int = event.keyCode;  if (key_ == Keyboard.LEFT) {   leftKeyDown = false;  }  if (key_ == Keyboard.RIGHT) {   rightKeyDown = false;  } } 

And that''s it, if you had any problem with the code, you may download the source code below, and test the car function through there.

Download button