sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Event Listeners

When working in Flash the key board is just as important as the mouse. However, many web sites over look keyboard intractability. If you want your site to stand out, use keyboard controls. If you test the code below you will see that whenever you press a key Flash tells you a key has been press. Thats great, but what if you want to know when a specific key is pressed.

This sample of code will detect when a key is pressed then if that key was the space bar, it will output that you pressed the space bar.

function hearKey(yourEvent:KeyboardEvent):void{

if (yourEvent.keyCode==32){
trace("you pressed the space bar");
};

};
stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

Moving Objects (Arrow Keys)

Ok, so are you ready to do something useful with keyboards events. Let us start with a basic element that any flash game needs, the ability to move an object around the stage.

In this Flash CS3 Tutorial I will teach you how to move a Movie Clip around the stage. In future Flash Tutorials, I will teach you how to detect if an object has hit another object but for now lets just work on getting control of an object.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

In this file you will find three layer. The actions layer which will as always contain the code or ActionScript you are going to use. The balloon layer which in this case has an instance of a hot air balloon name balloon_mc. and he last layer, background which contains a nice sky scene for the balloon to travel in. Some of he work has once again been done for you. The instance of the balloon is properly named balloon_mc. If you try this project on your own remember that all objects must be named in the properties panel for ActionScript to be able to use them. Please add the example code to the first key frame in the actions panel.

function hearKey(yourEvent:KeyboardEvent):void{

if (yourEvent.keyCode==Keyboard.RIGHT){
trace("ballon is moving");
};

};
stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

First we need to create a function to listen for the key strokes. Listeners need to be applied to an object, but this time the object is the stage. So, we will use stage.addEventListener. We have already covered this code so lets continue to the fun stuff. Please add the new code inside the function you just created, see example. If you test your movie at this point you will see the out panel say the balloon is moving when you press the right arrow key. We use the trace feature to test that the function and if statement is working properly.

Now, we need to actually make the balloon move. We are going to do this by telling balloon_mc to move 5 pixels to the right. In ActionScript 3.0 that looks like balloon_mx.x += 5. That means add 5 pixels to the current x position. Please remove the trace tag and add the code in the example. Press control-enter to test the movie. If your code is correct the balloon will move to the right when the right arrow key is pressed.

function hearKey(yourEvent:KeyboardEvent):void{

if (yourEvent.keyCode==Keyboard.RIGHT){
balloon_mc.x+=5
};

};
stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

We are almost done, all that needs to be done is to add an if statement for the other three arrow keys. Remember that in Flash the stage is made up of x and y coordinates. To move an object you will either add or subtract from it current position. That means to go left you will subtract 5 not add. Look closely at the finished code and you will see how the math works. Look closely at the up and down keys, the math it opposite of what you would first think. That is because in Flash 0 is not the center it is the top left corner to Flash 10 is farther towards the bottom of the stage then 5. Therefore, adding makes the object go down.

function hearKey(yourEvent:KeyboardEvent):void{

if (yourEvent.keyCode==Keyboard.RIGHT){
balloon_mc.x+=5
};

if (yourEvent.keyCode==Keyboard.LEFT){
balloon_mc.x-=5
};
if (yourEvent.keyCode==Keyboard.UP){
balloon_mc.y-=5
};
if (yourEvent.keyCode==Keyboard.DOWN){
balloon_mc.y+=5
};

};
stage.addEventListener(KeyboardEvent.KEY_DOWN, hearKey);

Press Control-Enter and test your movie.

Download Tutorials


Warning: include(/includes/footer.php): failed to open stream: No such file or directory in /home/gfrench/public_html/flash_CS4_Tutorial_Objects.php on line 133

Warning: include(): Failed opening '/includes/footer.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/gfrench/public_html/flash_CS4_Tutorial_Objects.php on line 133