In this tutorial I will lead you through coding a dynamic and easy adjustable movement code. When the coding is done you will have a code that you can use for many applications where you have to move a movieClip around your stages. And this only with adjusting 4 movieClip names.

Let’s start:

First of we are going to define the variables that we need. We will give them a Boolean as declaration. We got 4 basic directions, these will be also our variables: left, right, up and down.

The code should look like this:

var moveLeft:Boolean = false;
var moveRight:Boolean = false;
var moveUp:Boolean = false;
var moveDown:Boolean = false;

When where done with declaring the variables, we will add 3 eventlisteners;
1. One to look for a keydown
2. One to look for a keyup
3. And the last one to activate the function that actually moves your movieClip

It should look like this:

stage.addEventListener(KeyboardEvent.KEY_UP, reportKeyUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
stage.addEventListener(Event.ENTER_FRAME, EnterFrame);

After this we will write the functions that should be executed when the eventlistener is triggered.

1. This function will be triggered when there is a keyup and it will also set for witch key it has to listen. The code should look like this:
   
   function reportKeyUp(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = false;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = false;
}
if (event.keyCode == Keyboard.UP) {
moveUp = false;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown = false;
}
}
   
   
   
2. This function will be triggered when there is a keydown and it will also set for witch key it has to listen.
   
   The code should look like this:
   
   function reportKeyDown(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = true;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = true;
}
if (event.keyCode == Keyboard.UP) {
moveUp = true;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown= true;
}
}
   
   
   
3. In the last function we will describe what there has to happen when the Boolean is true/ what witch key has to do.
   
   It should look like this:
   
   function EnterFrame(event:Event):void {
if (moveLeft) {
mc.x += 5;
}
if (moveRight) {
mc.x -=5;
}
if (moveUp) {
mc.y -=5;
}
if (moveDown) {
mc.y +=5;
}
}
   

(mc stands for the instance name of your movieClip and the 5 stands for the pixels that the movieClip has to move in the direction that you wish)

Now your code is done. The code will accept multiple keydowns.
Expl.: You can go up and left at the same time.

Here is all the code you just wrote:

//Defining the variables
var moveLeft:Boolean = false;
var moveRight:Boolean = false;
var moveUp:Boolean = false;
var moveDown:Boolean = false;

//Adding Event listeners
stage.addEventListener(KeyboardEvent.KEY_UP, reportKeyUp);
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
stage.addEventListener(Event.ENTER_FRAME, EnterFrame);
//Key Up Function
function reportKeyUp(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = false;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = false;
}
if (event.keyCode == Keyboard.UP) {
moveUp = false;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown = false;
}
}
//KeyDown function
function reportKeyDown(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.LEFT) {
moveLeft = true;
}
if (event.keyCode == Keyboard.RIGHT) {
moveRight = true;
}
if (event.keyCode == Keyboard.UP) {
moveUp = true;
}
if (event.keyCode == Keyboard.DOWN) {
moveDown= true;
}
}

//Enter Frame Function (this happens over and over repeatedly)
function EnterFrame(event:Event):void {
if (moveLeft) {
ijsBergen.x += 5;
}
if (moveRight) {
ijsBergen.x -=5;
}
if (moveUp) {
robot.y -=5;
}
if (moveDown) {
robot.y +=5;
}
}

I hope your enjoyed the tutorial and see you soon guys!

Download PDF

discuss this topic to forum