Qondio
Front
Intel
IntelMart
Shares
My Qondio
Account
Gordon French > Intel > Flash CS3 Tutorial on Keyboard Controls

qondio.com/eBKH PRINT EMAIL

Flash CS3 Tutorial on Keyboard Controls

So, here is your Flash CS3 Tutorial on how to make an object move using the Arrow Keys. All code is in ActionScript 3.0.

Balloon

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. Well then you need to know the key codes. I have included a list of these codes at frenchsquared.com


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);

Make an Object Move (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. You will need the source files for this tutorial. Source Files

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.

Congratulations,
You now have a a Flash CS3 Movie with Interactive Arrow Keys.

External Links

Flash Tutorials | This Flash Tutorial in Full. | Flash tutorial on Squidoo

Images


Contributed by Gordon French on April 24, 2008, at 5:06 PM UTC.

PLEASE VISIT THE CONTRIBUTOR'S WEBSITE
FrenchSquared
Website dedicated to Flash Tutorials
FrenchSquared.com

Reactions

No reactions yet.

Rate This Intel

Please login or sign up to rate this intel.

Comments

Please login or sign up to add a comment.

Share

Copyright Notice

The copyright for this content entitled "Flash CS3 Tutorial on Keyboard Controls" has been specified by the contributor as:

All Rights Reserved

This content may not be copied, distributed or adapted by anyone under any circumstances.

Login Here with
Any Email Address
Any Password
No account? Sign up.

Intel Contributor
This intel was contributed by Gordon French


Gordon French

Qondio Archive
May, 2012
123456
78910111213
14151617181920
21222324252627
28293031


2008
January, February, March, April, May, June, July, August, September, October, November, December
2009
January, February, March, April, May, June, July, August, September, October, November, December
2010
January, February, March, April, May, June, July, August, September, October, November, December
2011
January, February, March, April, May, June, July, August, September, October, November, December
2012
January, February, March, April, May

Sign Up
Not a member yet? Qondio is a powerful network for making it online. If you have a website to promote, we can help. Sign up and get in on the action.

About Qondio
Welcome to Qondio! Discover the awesome power this network can deliver by going to our About page. Or you could skip straight to the Sign Up form.

ABOUT
SUCCESS GUIDE
FEATURES
FAQ
ADVERTISE
CONTACT
USAGE POLICY
PRIVACY POLICY


TWITTER
FACEBOOK