1. Code
  2. ActionScript

Easy, Fluid Keyboard Movement in AS3 With the Input Class


There are a lot of games out there with jerky, unrealistic movements and that can do only one thing to your product: make it unappealing to the audience. But smooth movement is not hard to achieve - let's get to work!

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Set Up the Environment

This is a straight forward tutorial, so the setting up will also be straight forward.

Create a New ActionScript 3.0 Flash Project. The stage size and color don't matter, just use what you are confortable with.

I use FlashDevelop for coding, but also this could be done in any AS editor, like Flash Pro (or any text editor, maybe Notepad ;) ). So, create a Class file, make sure your code looks pretty much like mine; see below. I called mine "Movement". (If you're using Flash Pro, check out this guide to creating a class.)

After you're done, make sure your Class is linked to the Flash project as the Main Class.

Step 2: Create the Square and Variables

So after you've linked the Movement Class to your document, define the variables as I did below

This is pretty much all that we'll do for creating the object. You can use your own object but for this simple movement tutorial I used this simple square.

Step 3: Introducing the Class

Hi guys, this is the Class; Class these are the guys I told you about - be nice to them! :)

So what is this class about, you may wonder. Basically it does your key handling job for you. It adds a listener to ENTER_FRAME events - with low priority - and a key listener which fills some private Dictionaries. Also it uses another Class for key codes. You can take a look inside and see for yourself how is working.

Note: The Class does not belong to me. It was created by Matthew Bush, who ported Box2D to Flash.

Step 4: Importing the Classes

So now that you are familiar with the Class, we are going to import it in our Movement Class and initialize it.

Step 5: Handling the Key Inputs

I use an ENTER_FRAME-based loop for detecting the key inputs; below is the refresh() method which is the handler function for this event.

Step 6: Explaining the Calculations - Handling the Velocity

This is pretty straight forward. Detect whether any of the keys are pressed, then act accordingly.

I use the ternary operator a lot: value = condition ? true : false;
This is basically an if-statement that's been condensed to a single line.

For every key detection, I use this method: if the value is bigger than _max then set it equal to _max; otherwise, increment or decrement that particular value as appropriate. This way, it's kept within certain bounds. Simple, right?

Below you can study the conditions:

If you're unfamiliar with the ternary operator, grab a piece of paper and a pen and write out a few of them in if...else format; it's a great exercise to get to grips with that's going on.

Keep in mind I manipulate the dx and dy variables, and only set the actual x and y values at the end. This helps us make the motion fluid; it's not jerking around as we alter their values directly throughout the function..

Go on, test it! See how nicely it's moving?

Step 7: Handling Boundary Collisions

Okay. Everything is right, moving fluidly - but OUT of the stage! Below I added the collision detection conditions.

It's looking for boundaries in a more precise fashion, by checking whether the edges of the square hit the boundaries (before this, it was just checking the center of the square against the boundaries).

Great. Now we need to add the code to make the square bounce off the boundaries. What I do for that is multiply by -1 the axis value dx or dy. But that is not enough! If the speed is quite fast, then the square will get through the margins or just go nuts. So before we multiply we need to set the x or y of the object to be the same as the boundary that it meets.

So if x object.x = 0; and then multiply the dx by -1.

Test it now! Bouncy right? :)

To make it even better, go on experimenting with different values - like instead of multiplying by -1, try -0.7 and see the results.


So you met the Class, got to know how to work with it, and made a nice fluid movement in just a few minutes. I think this counts as a great time!

Please leave your comments below and any other questions, I will gladly answer.

But if you encounter any problem please check twice your code, compare it with the source file and then if you can't make it work, feel free to post a question.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.