After setting up the basic outline of the platformer in Part 1, we will create a scrolling effect for the background in this tutorial which will be controlled by the arrow keys.

Keyboard Controls

One of the most useful things to be able to do with AS3 is to use the keyboard to control the game. It requires a bit of code, but once you learn to do it you will have a very important building block for any game.

Start out by adding the following code to the Actions panel on frame 1 of the timeline:

Both of these lines add event listeners to the stage. The first one will run the “keyDownHandler” function every time any keyboard key is pressed. And the second one will run the “keyUpHandler” function every time you release one of those keys.

One problem… those functions don’t exist yet. So let’s add them underneath the listeners:

Right now we only have the shell of each function — they don’t contain the actual code we need to run yet. If you’re still new to event listeners, make special note of the parameter of the function: (e:KeyboardEvent). The letter e doesn’t really mean anything beyond just being an abbreviation of “event” (you could use any word or letter in that spot as long as you use that same word throughout your program). However, we are assigning it to hold all of the information of the KeyboardEvent which triggered this function, so we can use e to figure out which key was pressed.

Time to add the real code of the functions. Don’t be intimidated… it looks like a lot but really it is just repeating itself.

This code will trace to the output panel whenever you press or release the up, down, left, or right arrow keys. Run your program and try pressing and releasing each of the arrow keys.

Each function is made up of 4 repetitions of this basic code-block: if(e.keyCode == Keyboard.LEFT)

This accesses the information stored in our local variable e, and checks what its keyCode is. Each key on your keyboard has a different keyCode assigned to it. The arrow keys’ keyCodes are simply their direction in capital letters, but most keys use a number assigned to them instead (just google “AS3 Keycodes” and you can easily find a chart of them all).

Right now the only thing that happens is a trace statement. How do we change this into scrolling the background? Before we can change the code in these functions we will need to add a few more lines at the top of our code file:

You will no longer see a trace statement when you press the arrow keys, nor will you see any other visual indication that your game is working. But behind the scenes, your program now knows which keys are being pressed, which is essential to making our game.

Scrolling the Background

Before we can make the background scroll, we need to give it an instance name. Click on the background you had drawn from Part 1 and name it background. Now we can refer to the background MovieClip object through our code.

Back in the Actions panel add another Event Listener, one that creates the main game loop. If you’ve gone through the Pong tutorials this should look familiar:

Slow me down if I’m going too fast, but I’m assuming you all know how this code works.

This will run 30 times every second, giving a pretty smooth animation to anything we update inside the function. It’s finally time to make our game do something visual! Inside the loop function, update the position of the background depending on which key-Pressed variables are true:

Test your game and marvel at the magical effect! Or just test mine below: (click on the game to select it, then use the arrow keys to “move the player” around the background)

That’s as far as we are going in this tutorial part. Right now it obviously looks like fake movement, because the player is completely static. In the next tutorial we are going to program the most significant part of the game: making the player react to the background in a realistic way. If you want to be notified as new tutorials are posted, make sure to subscribe.

I’ve already committed to adding an extra tutorial about enemy AI at the end of the series just because someone requested it in the comments. Honestly, if you have any requests of something you would like to learn to add to the game, just ask! Leave a comment below, or drop me an email at AS3GameTuts@gmail.com.

Yeah, you’ve pretty much got it right, at least for this method of making a sidescroller (there are a bunch of different possible ways). I’ll answer this fully in the next tutorial, but basically what I did in my old game was to nest multiple layers of movieclip objects inside the scrolling background. So for example inside the “background” object there is a movieclip named something like “collide” which contains all of the objects for the player to check for collisions with. And inside that object you can put any type of object you want, such as a platform.

Happy New Year! Sorry for the long wait, I had a busy December and decided to hold off from writing during the holidays. The tutorial is pretty close to completion… If I have time in the next couple days I’ll try to post it by the end of tomorrow. Otherwise I’ll be sure to get it done by the end of the week :-)

Just letting you know it is a great tutorial and it seems to work all right, but… in reall games the background doesn’t move like you depict. The character walks and they make something called a vCam to follow the character wherever it goes but to keep the char in the center of the screen…

Theres a problem i cant seem to fix… the first big chunk of code that you give (where you say dont be intimidated, looks like alot but its just repeating) gives me an error: it says you duplicated the function, but i copied and pasted it so idk if changing the funcion name will do anything unexpected for me.

hello guys im new here and i have created an as3 game side-scroller but i’m stock w/ just jumping and hopping around my game without an attack.. can you add Mr.Ben Reynolds an sword attack here in your tutorials?

Variable definitions can be anywhere in the code. I usually put them up at the top, just to stay organized. As for eventListeners, it depends, but for the most part just put them in somewhere where they will be called once, usually near the beginning of where your code begins to execute.

tutorial is much appreciated, and I am planning to move from game-maker to flash. This tutorial series is not only helping me in this endeavor, but also helping me build a flash platformer that I’ve wanted to make for some time now.
Unfortunately, I seem to be having a problem with variables:
it says that the .x and .y of the background is undefined, and because of this, it doesn’t do anything. Any ideas of how to fix this? (I’m using AS3 from the latest version of flash)
Thanks! -Swyrl

Thanks for the tutorials, pretty simple to follow. I am getting an error when I complete the coding on this page and run the test movie. The error is:
“Access of undefined property background”, in each of the lines that contain a background.x, background.y or xScrollSpeed or yScrollSpeed. Any help?? I am a n00b. Thx.

Hey, Thanks for posting these tutorials, I’ve learned a lot about basic programming. I’m having a problem with the scrolling background though. The variables all work fine and the background scrolls when I press the respective key, but the background won’t stop scrolling when I release the key, so my character just floats continuously off the background into space. I feel like I might’ve misnamed one of the key events, but I’m not quite sure how to fix it. Thanks!

This is waaaay late, but in case nobody replied to you, you have two keyUpHandler functions and two keyDownHandler functions, which is causing confusion for the compiler. you don’t need to do a “press” and “release” function, because if the key is pressed, it will equal true, otherwise its false, meaning the key’s not pressed.

So I assign the keys to A,D,W,S instead of LEFT,RIGHT,UP,DOWN
and when testing the game, the A(left) key would work normally… but only ONCE and then it won’t work at all, while the others would work perfectly… when i go back to AS3 and change it to the LEFT key instead of A it works perfectly like the others

I decided that I wanted to change the direction buttons from the arrow keys to the WASD buttons but when I swap out “Keyboard.RIGHT” for the keycode for “D”, for example, when I play the game after I have pressed either A or D the other stops working. Please help!

If I wanted to do a scrolling screen up and down instead of side to side & have it react to the mouse instead of the keyboard controls what would that code look like? (I’m new to AS3 not sure how much the mouse event & keyboard event handlers differ when it comes to the scrolling of the background) Thanks so much for your tutorials !!!

To anyone having errors related to Undefined things, the fix is relatively simple.

Draw your background, select all of it and convert it to a symbol. Name it “background” without the quotation marks. Click the newly created symbol and hit the properties tab on the right. Where it says type “background” without the quotation marks. Test your game and it should work out!

To anyone having trouble with Undefined errors, the fix is relatively simple.
Convert your background to a symbol, name it “background”. Click it, and hit the properties tab on the right. Where you see , type in “background” no quotes. Your game should work now.

I followed all the steps, but the result is zero: if I try to move the arrow does not move anything at all (sorry for my english but I’m Italian). even if I try with the tutorial for the game Pong I can not do anything. I am a beginner and this is the only site in the world that explains how to make Flash Professional games