Key Movement

In this Tutorial we are going to learn how to move an object with the arrow keys. I used AS3: Movement with Keys tutorial, and adapted slightly. Do check out these tutorials though. Basically this Blog is a collection of all these Tutorials, and then I re-explain the code as best I can, so that we learn together.

Firstly lets make another square and turn it into an MC (Movie Clip). Name this "square" and give it the same instance name. Firstly let's create another EventListener. We will use this one to check what key is being pressed. So we put:

stage.addEventListener(KeyboardEvent.KEY_DOWN ,checkKey);

As we know this will create an action however it is slightly different to our button Listeners. we put stage. at the beginning to show it isn't referring to an object, it's referring to the stage, everything we put our actions and drawings into. So aslong as the stage is there (which it always will be), we have this EventListener. Now we have a KeyboardEvent which means something happening to do with the keyboard. What we are using is KEY_DOWN which means any key being pressed. And now when a key is pressed we start a new Function called checkKey.

Now we'll start our function called "checkKey". So our first line will be:

function checkKey(event:KeyboardEvent):void {

The only difference with this function is that the event is a KeyboardEvent, not a MouseEvent. Now we carry on our function:

if (event.keyCode == 39) {
right = true;
}

Right, this is an if statement. Basically when you have an if, if the contents in the bracket after an if is true then you carry on the code in the middle part. Remember how after one of these { everything between an open and closed one in a Function would be what he function does. It's the same for the if statement. However the if statement is only done if what is in the brackets is true. It's important to understand this.

Now in our bracket we have event.keyCode == 39. This means that if the event (ours is a keyboard event) keyCode (every key has its own keyCode, which is a number) is equal to 39 (which is the keyCode or number for the right arrow key) then the if statement is true. That may seem a little confusing. Basically, every key has its own special number (you can find some for letters and numbers here) and if the right arrow key was being pressed then its keyCode would be 39. Now we have == in between the keyCode and the number. This is to check if one side is equal to another. However you only use one = when you are stating what something is, for example stating a variable which I will come across now.

Now we have:

right = true;

right is a variable. Basically a variable is something that can be changed and checked. It is essential you understand variables because they are used in nearly every Actionscript code you'll see. Variables are either Booleans, true or false, a number, or a word. You can then check the variables with an if statement. So we have stated that "right", the name of our variable (can have any name) is true. Later on you'll see an if statement asking whether right is true or false, and if it's true then it move the square to the right. Understand?

Now we have an if statement for the left, down and up keys:

if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}

The left keys unique number is 37, and we make a new variable called left true. The exact same changes with the down and up keys. We also have to close off our function with another }. Now the code for this function should be:

function checkKey(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right = true;
}
if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}
}

However we have gone ahead of ourselves here. We've started changing our variables, but we haven't created them in the first place. Obviously they all start as false because no keys are pressed at the beginning. So to state our variables we put var (short for variable), the name of the variable (up, down left, right), a colon and then the type of variable (ours is a Boolean), and then what it is. Well, all of ours are false. So for the "right" variable we'd put:

var right:Boolean = false;

And then we'd have to do the same for the others:

var left:Boolean = false;
var up:Boolean = false;
var down:Boolean = false;

Excellent. Now, the only problem is when we press the right key "right" will be true however when we release the right key it will stay true. We need to make it so when you release the right key "right" will be false. So we have to make a new EventListener for when we release a key:

stage.addEventListener(KeyboardEvent.KEY_UP, keyUps);

Similar to our other EventListener except the event is KEY_UP and our new function is called keyUps. Now we'll start the function:

function keyUps(event:KeyboardEvent):void {

I'm you understand this by now. Now the part in between those { is:

if (event.keyCode == 39) {
right = false;
}
if (event.keyCode == 37) {
left = false;
}
if (event.keyCode == 40) {
down = false;
}
if (event.keyCode == 38) {
up = false;
}

Remember this function is only used when all keys have been released. Therefore we shall make it that all variables to move directions will be false if that key was pressed. Now that we've sorted all the keyboard presses, we shall create the function that will move the square. To start with we add a new EventListener:

stage.addEventListener(Event.ENTER_FRAME, movement);

Now you probably don't recognize this EventListener. What it does is make the function happen all the time. So it isn't done when a key or mouse is pressed or released, it happens all the time. The code will keep being run in Flash over and over. Therefore as it isn't an event for anything, we just put Event. ENTER_FRAME is when it keeps being run over and over. Now the function is movement. Let's create this function:

function movement(Event):void {
if (right == true) {

Now in this it is checking if right is true. We know it will only be true when the right key is pressed. So when it is true everything in the if statement will happen. This is our important part:

square.x+=speed;

We have called upon "square" and we are making its x go up by speed. Basically everything in Flash has an x and y position corresponding with the stage. With this we are increasing its x position. When you have += it means go up by what is after it. Now that can either be a number or a variable. We now have a variable called "speed". We do the rest of this for the other keys:

if (left == true) {
square.x-=speed;
}
if (down == true) {
square.y+=speed;
}
if (up == true) {
square.y-=speed;
}

Now when "left" is true the squares x goes down by speed. With the up and down key the y axis is affected, rather than the x axis. Now all we have to do is create our variable "speed":

var speed:Number = 5;

We have Number because it shows the variable is a number. That number is 5. So when the right key is pressed the squares x is going to go up by 5. We make this a variable so it can easily be changed. If you had a racing game then as you accelerate the speed would go up, so it will be useful in games. Now we have finished our whole code! It should look like:

var speed:Number = 5;
var right:Boolean = false;
var left:Boolean = false;
var up:Boolean = false;
var down:Boolean = false;

stage.addEventListener(KeyboardEvent.KEY_UP, keyUps);
stage.addEventListener(KeyboardEvent.KEY_DOWN ,checkKey);
stage.addEventListener(Event.ENTER_FRAME, movement);

function keyUps(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right=false;
}
if (event.keyCode == 38) {
up=false;
}
if (event.keyCode == 37) {
left=false;
}
if (event.keyCode == 40) {
down=false;
}
}
function checkKey(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right = true;
}
if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}
}

function movement(Event):void {
if (right == true) {
square.x+=speed;
}
if (left == true) {
square.x-=speed;
}
if (down == true) {
square.y+=speed;
}
if (up == true) {
square.y-=speed;
}
}

Now if you test that the square should move up, down left and right depending on what key you press! That's the end of this post, keep coming back for more!

-souled

Buttons

In this tutorial we are going to create a simple button to change the frame and then Drag and Drop amother button. I have used this Tutorial from FlashAndMath and have adapted it slightly. Every tutorial I come across and learn from will be listed in this blog, so that we progress together.

Firstly, set our FPS (frames per second) to 30, and draw a circle. Now convert that circle to a Button, and name it "circle". Now give it the Instance name of circle. The instance name is used in AS to make it do actions. It is basically its own unique name so that Flash knows what to do with it. Now let's do our first bit of AS!

In AS 2.0 to make a button do something would have put the code onto the button. However you cannot put code on anything except the main timeline (Key frames) in AS 3.0. So now we have to add an EventListener. This is basically used to state what we are going to do. I'll explain it better once you've seen it.


So with our circle with the Instance name of "circle" ready to be used as a button, we add this code into the frame:

circle.addEventListener(MouseEvent.MOUSE_DOWN, Moveframe);

Alright, basically we are using the circle as our button, so we put circle. at the beginning. This is telling Flash to do our actions on the circle. Our addEventListener is being used to say we are starting an action here. The action is within the brackets.

Now in the first part of our bracket I put (MouseEvent.MOUSE_DOWN, This is telling us when to perform the action. Anything after MouseEvent. is a mouse action. This can be clicking, rolling over, many things. What we are using is MOUSE_DOWN This means, putting the mouse left click down.

The second part of our button Moveframe is the Function that is going to be done. This part is split off from the part before through the comma. Also, you should know that the Function can have any name, it doesn't have to be "Moveframe".

Now for that Function:

function Moveframe(evt:MouseEvent):void {
nextFrame();
}

To start any Function we have to put function and then the functions name. In this example I have called the function "Moveframe". Therefore we have function Moveframe( Now in those brackets it has evt:MouseEvent This is to show that the function is connected to a mouse event.

Now we have a { This is very important and you will come across this in all Actionscripts you see. It is basically opening the function, so everything within that { will be done in the function. Every { has to be closed off by a } As you can see the last line is a } so it shows everything within those are the actions of the function.

Now our simple action that is going to make the frame go forward once. nextFrame(); makes Flash move the frame up by 1. So if we were on frame 2 and we used that we would go to frame 3. However it would stop at frame 3, if we wanted to make it play we have to change it to gotoAndPlay(3); which I will come across later.

Now that we have our code set up we need to see it in action. Add another Key Frame so that there are now 2 key frames. On the second frame delete the button and draw anything you like. If we tested that however the button and your drawing would keep flashing. That is because we haven't stopped the timeline. So on our first frame after all our other code add:

stop();

This will stop the timeline when you put it on a frame. Now if we test it when you click on the button it should take you to our next frame!

Our whole code on the first frame should now be:

circle.addEventListener(MouseEvent.MOUSE_DOWN, Moveframe);

function Moveframe(evt:MouseEvent):void {
nextFrame();
}

stop();


Now we shall make a square draggable in the second frame. On our second frame delete your picture and draw a square. Now convert it to a Movie Clip (not button) and call it "square" and give it the Instance name "square". Our new code will now go on the second Key Frame. Now we have the same code as before, because we are clicking down on the square, except we change nextFrame(); to:

square.startDrag();

Also on the first line change circle. to square. This is because our new button is called "square" and we want to be able to click on the square. We also change our functions name because we cannot have functions with the same name. So I have decided to call it "drag". Now our entire code on the second frame should be:

square.addEventListener(MouseEvent.MOUSE_DOWN, drag);

function drag(evt:MouseEvent):void {
square.startDrag();
}

Now when you test that you can't stop dragging it. That's because we need to setup another function so that when they let go of the mouse click it will stop dragging. So we put:

square.addEventListener(MouseEvent.MOUSE_UP, Updrag);

function Updrag(evt:MouseEvent):void {
square.stopDrag();
}

So what's changed? Well we now have a new MouseEvent called MOUSE_UP This is when we release the mouse click. Our new function is called Updrag so we changed all of the function names. Now our main bit of code square.stopDrag(); This will just stop the drag of the square. So we use that function when we release the mouse. Now our whole code for the second frame should be:

square.addEventListener(MouseEvent.MOUSE_DOWN, drag);

function drag(evt:MouseEvent):void {
square.startDrag();
}

square.addEventListener(MouseEvent.MOUSE_UP, Updrag);

function Updrag(evt:MouseEvent):void {
square.stopDrag();
}

Now if we test that the square should drag and drop. However the dragging isn't very smooth. There is a more advanced way to make it smoother covered in the tutorial however if you were to start dragging it, it would always have the middle of it following your mouse, rather than where you picked it up from.

That's all from this post, keep checking for regular updates!

-souled

Welcome

Hello, and welcome to the Learning AS 3.0 Blog. In case you didn't know, AS is short for Actionscript, however I will refer to it as AS. Together we will learn AS 3.0 and end up creating lots of exciting applications and games! I have never used AS 3.0 before but I do have experience with AS 2.0.

To start of we will need to buy a copy of Flash CS3. You can download the trial from Adobe (link will take you to the download page). You must have Flash CS3 to use AS 3.0, so download a 30-day trial if you don't have it.

Now that we've got Flash CS3 up make sure you become familiar with how to use it. Just mess about with it for a few hours, or look for some Tutorials on Google. Now we are ready to start!

Soon I will create the first Tutorial, something basic but important. Keep coming back as this shall be updated alot.

-souled