Moving Movie Clips with the Arrow Keys Tutorial
August 26th, 2006 by awesty
In this tutorial I will teach you how to move a MovieClip around the stage with the arrow keys using actionscript.
What you need to know:
- Basic flash skills. Like using all the tools and everything.
- It would help if you had knowledge of another programming language like PHP, JavaScript or C++.
I am using Flash 8 for this tutorial, but you can use Flash MX 2004 if you want.
Lets begin!
Thanks for taking the time to view this tutorial!
Filed under Flash Tutorials















[…] You need to have taken my ‘Moving MovieClips with the ArrowKeys tutorials. Click here veiw it now. […]
Hi, used your tutorial, really easy and managed to finish my flash. Reckon you save me about 4hrs of searching. Spent ages lookin for and usin other sites. nice one!
good tutorial i spose
[…] You need to have taken my ‘Moving MovieClips with the ArrowKeys tutorial’. Click here veiw it now. […]
Ye, it was pretty good
the only thing is that its hard to remember
i had to copy and paste on word to use it now
mabey explain in detail the smaller things and
possilbly give examples of other ways to use
bits of that code.
Otherwise it was great:D tnx man
I had the same problem when I was trying to learn.
All you have to remeber is that most of it is if statements like:
if(this happens){
do this;
}
Like if you brain ran on actions script this would be for the hungry code:
if(I am hungry){
eat;
}
And you just keep messing around with the same code until you think you understand it
Thank you so much you help me a lot
to learn action
you are great
is there a place on the web that I can learn action script easily?
BTW the if you do this,do this explanation was cool
thnks
I don’t really understand the second half of that
[…] This tutorial will be a whole lot easier if you have already taken my Moving MovieClips with the arrow keys, Making walls with hitTests and Making a health system tutorials since alot of the script used in those will be used in this tutorial so I won’t go into as much detail with them as I might with the rest of the script. […]
i was wondering how do i make my character face the directions when i move him?
You can find that in this tutorial.
i dont see it in this tutorial also i need my character to have a walking animation in the direction hes facing and so far on the net i cant find one that works thanx
sorry nvm did not see that u had link in ur message
what?
What what?
what..ahh the simple asking words
What when?
thanks it working and walking i make a game with this I hide the walls and ask user to exit from this game
…..
eh… it dont work
Make sure you didn’t miss any steps.
[…] You should have taken my Moving MovieClips with the arrow keys tutorial because I will not be explaining that code. […]
hi! once agian thanks! but theres a problem, im making simple little game that you have to jump on platforms etc ive taken out moving up or down and replaced with jump, i can make it move in the air BUT, i want it to drop to the bottom of the screen wen u go off of the platform! code? or what?
You put this code in:
if”fall”=true
drop_(until_ground)
drop_(until_platform_
or_drop=true=NaN
You need to make a MC called Ground, and place it on the ground. Or replace ground with whatever you named your floor. Do the same with your platforms.
This makes him fall until hitting something, or just fall forever.
it doesn’t work for me I tried it like 10 times
@Webber: http://www.awestyproductions.c.....m-jumping/
@Slash: I’ll need more information if you want me to help you.
i mean, I made a motion tween, and a charcter “man” MC, but the motion tween keeps going on and on (Which is him walking) but I want it to act as if hes only walking when you hit left and right arrow keys, so he isn’t just walking while he is standing still
um, if you follow the tutorial there is no motion tweening involved.
[…] This makes the MC move left and right. I have explained that is a fair few of my tutorials, so I am not going to explain it here. If you want an explanation try this tutorial. […]
where did u learn to understand actionscript…
i mean i read all the comments yet i still dont understand, where to find?
Just tutorials like this one. I can remember taking a tutorial like this and thinking exactly the same thing.
All most of these codes are made up of are if statements and variables.
i = 5;
if(i == 5){
trace(”i is equal to 5″);
}
If you put that on a frame, it would output “i is equal to 5″. Just keep messing around with stuff like that and it will eventually come.
When you take a tutorial, if you just forget about it afterwards you will probably forget it, but if you play around with it you will learn more about it.
Also try pushing F1 for flash help
hey thanks for the advice here are some codes i found…well better, it has a rotation faceing the way you want it to be:
onClipEvent (enterFrame) { if (Key.isDown(Key.DOWN)) { _y -= -10; _rotation = 90; }}
onClipEvent (enterFrame) { if (Key.isDown(Key.LEFT)) { _x -= 10; _rotation = 180; }}
onClipEvent (enterFrame) { if (Key.isDown(Key.RIGHT)) { _x -= -10; _rotation = 0; }}
onClipEvent (enterFrame) { if (Key.isDown(Key.UP)) { _y -= 10; _rotation = -90; }}
it is better to make it all in one “onClipEvent” - it makes it much more organized.
onClipEvent(enterFrame){
if (Key.isDown(Key.UP)) {
this._y -= 5;
this._rotation = 0;
}
if (Key.isDown(Key.DOWN)) {
this._y += masterchief_speed;
this._rotation = 180;
}
if (Key.isDown(Key.RIGHT)) {
this._x += 5;
this._rotation = 90;
}
if (Key.isDown(Key.LEFT)) {
this._x -= 5;
this._rotation = -90;
}
}
That is completely different and have to many clip events, you only need one.
I have a tutorial for that kind of movement.
how do u make the character stop when he gets to the edge?
http://www.awestyproductions.c.....h-hittests
haha thanks i didnt think to look at the other tutorials i feel stupid
sorry
great tutorial, im just instal;lin flash and its been goin for ages and only on 80%
lol im gonna make a fightin game,with yur tutorials i hope its gonna b easy.
i thght this tutorial was really cool for a newbie like me thnx
gd luck alex, but it wont be begginer level.
it doesn’t show anything!
How do you make it so that, let’s say, your car turns instead of just sliding
@Bob: Make sure you have the latest flash player.
@Andy: I might do a tutorial on that, but here is a good one on a friend of mines site.
http://www.graphicaddicts.net/.....832.0.html
[…] That looks longer than it actually is. It is all just repeated though, with a few numbers changed around. The first part you should already know, but if not, you can find an explanation on it in this tutorial. LINK. The part I will be explaining in this tutorial is this part: […]
I want to add borders to the file how d0 i do this . and i want him to bounce off if he gets to it
Try this tutorial.
http://www.awestyproductions.c.....h-hittests
how can i make my char jump if i press up?
thnx awesty
http://www.awestyproductions.c.....m-jumping/
hey awesty i was just wondering if there was a code i could use to make the arrow keys control the camera views of what ever it is focusing at.
for example: on runescape, you can use the left and right arrow keys to move the camera view all around your character and when you press the top arrow key it can go as far as a birds eye view of your character.
so basically i was wondering if you could get me a code that works like that.
thx
hey, for some reason i can’t get my movie clip to stop at any frames. is there some other way to stop playback while at the same time using code from the hit test 2 tutorial?
It would be good if this tutorial code can set the boundary for the slider so that it will not “fall” out of the screen.
GOOD! But one thing. This Tute was sposet’ to be about a health system not a move da arrow keys… It is like the control a ball tute! You Creep Me out. YIKES! I an a male you know!
@tyler: Try googling vcam.
@tim: Try stop();
@fy: Try this page:
http://www.awestyproductions.com/tutorials/
There are tutorials there for that.
@Crap_face: No it wasn’t. Read the title. >_>
Can Someone Please HELP!
I keep getting the same error!
**Error** Symbol=man, layer=Layer 1, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent(enterFrame){
Total ActionScript Errors: 1 Reported Errors: 1
Hey, I’ve learnt this code and it’s pretty easy, great tutorial xD Thanks, but!
I write it down exact and this comes in
“**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent(enterFrame){
Total ActionScript Errors: 1 Reported Errors: 1″
Oh and the code makes Up mean down and Down mean up.
Oh how I need a dunce cap! I’ve fixed it, just turned out I had a circle not a square
@Anonymous2: Your not supposed to put the code on the frame.
@Jacob: It shouldnt matter if you have a circle or a square. The error you posted was because you put the code on a frame, not an MC.
can you please make a scrolling tutorials?
i was wonder if theres a way to make it where if i make my character walk into a wall like in the hittest tut could i make it go to a whole new frame
@awscherb: Yes.
@Chad: Yes.
if(this.hitTest(something)){
_root.gotoAndStop(FRAME);
}
HEEY!! throught the moving with the arrow keys and the gotoAndStop(); thingy i made some thing my self!!!!
i KNOW hot to get different charaters in 1 game i know how to pick’em!!!!
thnx alot
KIM
nice, yeah but i wanted to know how to make the character look like he’s walking. thanks
never mind, i already know
it wont work theres always a problem with the first line of code
I don’t know if he has posted this in a different tut but I edited that so there was a bit of gravity.
onClipEvent (load) {
power = 0.2;
yspeed = 0;
xspeed = 0;
friction = 0.95;
gravity = 0.1
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
xspeed -= power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed += power;
} if (Key.isDown(Key.UP)) {
yspeed -= power;
}
if (Key.isDown(Key.DOWN)) {
yspeed += power;
}
xspeed *= friction;
yspeed += gravity;
_y += yspeed;
_x += xspeed;
}
Oh cool it’s like climbing up a floor on a slant.
how do you make it so if your character is standing still.. let’s say if you press right he will run right!
Yo, do you have a tut for damaging someone in a turn based battle, like getting shot by something and having your health drained
Hello,
I have Adobe CS3, so I assume this is ActionScript 2.0
By the way, for line one, in {enterFRAME} and it was frame 1, would I type in {1}
how do i add.. a friction…?
THANKS A LOT!!!
I kept like 3 months looking for hitTest (if you wanna know, i was desinging an MMORPG, but the hitTests never worked…), until i found this tut… well the ends was frustrating, it didn’t worked, buut then i realized that i hadn’t made the instance name :)… lol… 3 months, just by an instance name…
holy $|-|1T!
my script dosnt work i keep getting compiler errors, are you shure its right or am i doing somthing wrong?
everytime i try to put the script on the movie clip it either says this action cannot be applied to this object or it just attaches to the key.
@william you might be using as3 if that is the case when starting up flash and gives u the option to make a new document make sure you click flash document as2. Hope that helps
Oh my gosh whenever I look for help on the internet I never comment on anything but I feel as if I have to give you a huge THANK YOU for making me realize my stupid mistake
I’ve been getting a syntax error for ages and I couldn’t figure out why.
But your suggestion solved it!!!
I know you will probably never read my reply but THANK YOU SO MUCH FOR THIS SUGGESTION
You stopped me from quitting flash forever.
omfg i cant see tutorial
no link WTF!
@william you have to convert to MC first with F8!
ehem……..
AWESTY ROCKS HE HAS THE BEST TUTS OMFG I CANT BELIVE HE IS RETIREING DONT GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOPLZ DONT GO AWESTY (P.S.can i take over the web for free coz im a good programer now!bbbbbb6285@gmail.com/flash3dd@hotmail.com
plz email me ur pass and stuff and wat web!plzzzzzzz
ill take over when ur away aswell!)
He said he is not looking at these comments anymore and I doubt he is going to give out his website for free ( because he has to pay for it like every year or so. ) and it isn’t as easy as it looks you know.
Hey awesty i know this may seem a little of topic but, ive been looking through the internet for a spesific tutorial ie, when my mc “man” walks onto a mc like “door” for instance i want to move to another scene and ive looked on the internet and i’ve found nothing :(. can you help me?
Add this to the door
( This is will bring you to frame 2 and only if the thing hitting the door has an instance name of man. )
onClipEvent(enterFrame){
if(this.hitTest(_root.man)){
gotoandstop(2);
}
}
Hey, I have CS3. When I try to ad actions it says. “Current selection cannot have actions applied to it. How do I make this move?
yeah.. sure that sucks rite??? why we can’t apply an action to it… the program are just like trying to suppress us of doing a rite thing…
no tutorial in website are good either… as i copy paste the script always contain error.. yours too. i fade up of this
please.. if u post a tutorial, try to make things allll clear.. some of us might encounter problems. i assume your tutorial is not for beginner no start with… so thumbdown.
Oh, soz. I fixed it! All I had to do is change from Action Script 3.0 to Action Script 2.0. Which you do at the startup of Flash. ^_^ Sorry for complaint great tut!
[…] di Hollywood, di quelle che ti fanno sperare per tutto il film in un eccezionale lieto fine. Autumn in New York. In una New York autunnale ed umida, Will è uno chef cinquantenne molto amato dalle donne e senza […]
theres no tutorial here. . .
Would there be a way for you to make the tutorials downloadable since at our house we have 2 computers and 1 of them has flash cs4 pro and the ither the internet so i would need that to learn some action script.
thanks in advance,
Jerimo
does anyone know what the code is for the ‘wasd’ keys?
i really need to know =I
I’m very grateful for these Scripts, it helped me a lot,Thank you!
how do i make him shoot the direction my character is facing
can you tell me how to move a character from a bird’s eye view and have its body rotate and face where it’s moving
damn!!!what a simple code,thats what i was looking for..thanx man!actually i m trying to learn on my own.
[…] This is a AS3 rebuild of AwestyProductions Moving MovieClips with the Arrow Keys […]
i would like to know if anyone here knows where i can find the code for the letters on the keyboard i want to use asdw instead of up,down,left,right,
if(Key.isDown(Key.??) i put A and it didnt work so i was wondering if theres numbers or sumthing
You could do it this way.
First create your player, you don’t have to give it a instance name since all you’re really doing at this time is making your player move.
Now I want you to convert your player to a movieclip setting its registration point to the middle as in future you wish to add a Hit collision this makes your maze game or whatever it is your making simpler, Once you’ve registered it’s registration point to the middle, I’d like you to go into advanced options and click “Export for Actionscript”.
Now, once your player has been created, copy and paste this code into your players actions or as I like to call it, the code tab.
onClipEvent (enterFrame){
if (Key.isDown(Key.LEFT)){
this.gotoAndStop(”LEFT”);
this._x-=5;
}
if (Key.isDown(Key.RIGHT)){
this.gotoAndStop(”RIGHT”);
this._x+=5;
}
if (Key.isDown(Key.UP)){
this.gotoAndStop(”UP”);
this._y+=5;
}
if (Key.isDown(Key.DOWN)){
this.gotoAndStop(”DOWN”);
this._y-=5;
}
}
Basically what this code means is that when you press the down key for example your character will not only go down, but because we have added. “this.gotoAndStop(”DOWN”);” it will also change turn itself around or just switch the player to the down position which is what we’re going to do now.
Now as mentioned above we’re going to add in the last couple of things to this movieclip. Now double click inside of your player and you will enter the movieclip, in here you could make changes if you feel your movieclip isn’t right.
Anyways back to the fun bit, basically i want you to create 3 more new frames and place the code “stop();” in all of them, Once that is done, Click on each frame and give them names of UP, LEFT, RIGHT and DOWN, Note THIS IS IMPORTANT THAT YOU TYPE “LEFT” IN CAPITAL LETTERS IN THESE FRAMES AND PLEASE ONLY DO ONE FRAME AT A TIME WITH A DIFFERENT DIRECTION.
now with your frames set up, Invidually click on a frame, lets say up and click the tool
which looks like a square with registration dots all over it and rotate your player on each frame to the direction of the instance names which were added to those frames if that makes any sense.
After you have added all of the directions to the respective frames then test your movie and have fun.
If you have any questions feel free to send me a comment on my youtube page
www.youtube.com/12markinlove12
Isn’t it better to have else-if statements?
I never used else when only setting up a moveclip with movement, I only use else if im autually going to create a maze game. or a platform game, the }else{ isnt really needed for movement, plus this is the most basic method.
I was talking about else if, not }else{
and it’s good practice. He’s going to get errors if he tries to add framechange/_xscale changes with the x/y translations when a key is pressed
X and Y translations isnt really that difficult its the same as if it was on a 4 point graph
1 Y & + Y = UP
-1 Y & - Y = DOWN
1 X & - X = LEFT
-1 X & + X = RIGHT
which in simple terms is
+y = up
-y = down
-x = left
+x = right.
What? I don’t think you read my post but I was talking about the incorporation of FrameChanging/_xscale alteration. Nobody wants a static picture for a moving character. Eventually he’s going to try and apply that and get errors because it won’t work unless an if-else statement is used.
How to Develop Professional Level Cartoon Drawing Skill…
[…]the time to read or visit the content or sites we have linked to below the[…]…