Flashvalley - Flash tutorials - simple sprite control with the keyboard

HOME > Flash Tutorials > Simple Sprite Control With The Keyboard

Simple sprite control with the keyboard

If you want to create a game you will probably reach the point where you need to animate a little sprite on the screen, the following tutorial is very simple, I will show you how you can control a sprite using the arrow keys. I will show you 2 different methods to do it. The sprite will be able to move in 8 directions and will flip horizontally according to the direction. Both movies below have a frame rate of 30fps, the second movie seems to run faster because we use the setInterval method with updateAfterEvent to smoothen the animation. The first Movie use onEnterFrame and although it is a bit slower it is less cpu intensive. If you want to speed up the animation for the first movie you will have to raise the frame rate, this is not necessary when you use setInterval with updateAfterEvent, if we had a 1fps movie it will be exactly as fast, it is just dependant on the interval value you define in the method.

Method 1	Method 2

I am not going to go through the drawing of the sprite since it is just a matter of taste :) let's go directly to the code.

spriteDirection = 0;

this.onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
setDirection(0);
_root.sprite._x += 3;
}
if (Key.isDown(Key.LEFT)) {
setDirection(1);
_root.sprite._x -= 3;
}
if (Key.isDown(Key.DOWN)) {
_root.sprite._y += 3;
}
if (Key.isDown(Key.UP)) {
_root.sprite._y -= 3;
}
};

function setDirection(param){
if(param==0){
sprite._xscale = 100
} else {
sprite._xscale = -100
}
}

Method 1

You will notice that the code is very simple.

We are using onEnterFrame to check at regular interval which key is pressed.

Then we use the property isDown of the Key object to check when a key is pressed.

When we detect that a key is pressed we check if it is the right arrow, the left arrow, the top arrow or the bottom arrow by checking the 4 respective properties RIGHT, LEFT, TOP, BOTTOM of the key object.

if we detect that the right key or the left key is pressed we turn the sprite in the correct direction by calling the setDirection function. depending on the value (0 for right and 1 for left) we set the _xscale property for the sprite to -100 or 100.

Method 2

Two changes here:

1. We are calling the main function checking when a key is pressed inside the setInterval method instead of onEnterFrame.

2. For each cycle we call updateAfterEvent to be sure the screen is refreshed faster than the frame rate would normally allows it.

Using setInterval will be more cpu intensive but if you need just 1 or 2 intervals running at the same time it is a good choice since you can create very smooth animations.

Also when you use onEnterFrame make sure to use delete onEnterFrame when it is not needed anymore, it will free some ram and will make your computer and the Flash player happier :)

spriteDirection = 0;

setInterval(function () {
if (Key.isDown(Key.RIGHT)) {
setDirection(0);
_root.sprite._x += 3;
}
if (Key.isDown(Key.LEFT)) {
setDirection(1);
_root.sprite._x -= 3;
}
if (Key.isDown(Key.DOWN)) {
_root.sprite._y += 3;
}
if (Key.isDown(Key.UP)) {
_root.sprite._y -= 3;
}
updateAfterEvent();
}, 10);

function setDirection(param){
if(param==0){
sprite._xscale = 100
} else {
sprite._xscale = -100
}
}

Good luck :)

flashvalley.com

download source files

If you think this page is providing useful information, don't hesitate to leave a comment.

[ 13 comments ]

HOME > Flash Tutorials > Simple Sprite Control With The Keyboard