Main Content

You are here:

Arrow-Key Movement

Welcome once again to Foundation Flash's tutorials. In this tutorial, you will learn how to move objects with the arrow keys.

And, in in the process you will also learn about:

So, I had better get started. Here is a link to what we will make:

As you can see, you can move the thing around with the arrow keys. The first step to this tutorial is creating the Movie Clip that we will be moving around. I drew this little fellow:

My little figure

So, once you've drawn your thing, you can put it inside a Movie Clip. I assume you remember how to do that, but just in case you've forgotten, you have to select it all and press F8 to convert it to a symbol. Then choose Movie Clip, and call it ball, or circle, or something. You can make a little animation inside your Movie Clip if you want, like I did, but you don't have to.

Once you have done that, make sure you are on the main timeline, and select your Movie Clip. Then press F9 to open up your actions panel. then type this:

onClipEvent (enterFrame) {

What you've done is told Flash when to do whatever you are going to do, using a clip event. There are lots of clip events, but this is the most common. It is the enter frame event, which does something whenever you enter the frame, or, whenever you are in that frame. As there is only one frame in your movie, you will always be doing this, 30 times a second, as that is your frame rate. Well, I haven't told you to change your frame rate to that, but I am now, so do it. Well, that is clip events in a nutshell, so we will move onto the next part. Type this:

onClipEvent (enterFrame) {
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
}

So, when you enter that frame, or rather, 30 times a second, Flash will check: if the up key is down and if it is, it will do what is inside those curly brackets, which I will go into in a moment. What we have just used is an if statement, which means that Flash will check something, or, more literally, ask if something is happening, and perform an action. The structure of an if statement is:

if (this happens) { do this }

Pretty simple really. So what we have asked is:

if (a key is down(that is, the up key)){ do this }

Easy. Now I will explain what is inside those curly brackets. To understand this, you must understand Flash co-ordinates. If you take maths you should know about x and y axis. As in, x is left and right, and y is up and down. This is the same in Flash. Something's x position is its position on the x axis, and its y position is its postion on the y axis. The higher something is on the stage, the lower its y position, and the further right something is on the stage, the higher its x position. Well, that is Flash co-ordinates, so how does it fit into what is inside the curly brackets?

Well, what you have told Flash is, if the up key is being pressed, then its y position will be decreased by 5 whenever you enter a frame, or 30 times a second. It says this._y because it is referring to its own y postion. But you don't say "y", you say "_y".

So we can make it go up, and now we have to make it go the 3 other directions. Start by copying and pasting that line 3 times:

onClipEvent (enterFrame) {
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
}

then alter it so that it says:

onClipEvent (enterFrame) {
        if (Key.isDown(Key.UP)) {
                this._y -= 5;
        }
        if (Key.isDown(Key.DOWN)) {
                this._y += 5;
        }
        if (Key.isDown(Key.RIGHT)) {
                this._x += 5;
        }
        if (Key.isDown(Key.LEFT)) {
                this._x -= 5;
        }
}

You should be able to figure out how the co-ordinates relate to the button presses. That's it, thank you for reading this. Please join me for my next tutorial, in which we will explore instance names, variables and dynamic textboxes, and begin to make a number matching game.

Thank you again, good bye,

Leon.

Comments