Best viewed in Firefox

Awesty Productions

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! :D

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • del.icio.us
  • digg
  • Furl
  • MyShare
  • NewsVine
  • Netscape
  • Reddit
  • Simpy
  • Slashdot
  • StumbleUpon
  • Technorati
  • YahooMyWeb

RSS feed | Trackback URI

106 Comments »

2006-09-04 18:55:44

[…] You need to have taken my ‘Moving MovieClips with the ArrowKeys tutorials. Click here veiw it now. […]

Comment by Greg Subscribed to comments via email
2007-06-13 17:48:36

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!

 
 
Comment by lol_i_pop
2006-09-10 20:57:57

good tutorial i spose

 
2006-09-16 19:13:27

[…] You need to have taken my ‘Moving MovieClips with the ArrowKeys tutorial’. Click here veiw it now. […]

 
Comment by Danny
2006-09-16 20:15:19

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

 
Comment by awesty
2006-09-16 23:14:54

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

 
Comment by samir lotfi
2006-09-17 06:32:05

Thank you so much you help me a lot
to learn action
you are great

 
Comment by Johny
2006-09-24 18:17:09

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

 
Comment by awesty
2006-09-24 22:58:55

I don’t really understand the second half of that :?

 
2006-10-15 16:17:24

[…] 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. […]

 
Comment by Alex
2006-10-18 03:50:08

i was wondering how do i make my character face the directions when i move him?

 
Comment by awesty
2006-10-18 17:39:59

You can find that in this tutorial.

 
Comment by Alex
2006-10-19 08:33:49

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

 
Comment by Alex
2006-10-19 08:34:52

sorry nvm did not see that u had link in ur message

 
Comment by m
2006-10-27 07:30:40

what?

 
Comment by awesty
2006-10-27 11:41:43

What what?

 
Comment by H
2006-10-27 12:33:45

what..ahh the simple asking words ;)

 
Comment by R
2006-10-31 11:44:34

What when?

 
Comment by Vikas Mathur
2006-10-31 16:39:31

thanks it working and walking i make a game with this I hide the walls and ask user to exit from this game

 
Comment by you
2006-11-06 14:35:04

…..

 
Comment by andrew
2006-11-07 02:29:47

eh… it dont work

 
Comment by awesty
2006-11-07 10:49:20

Make sure you didn’t miss any steps.

 
2006-11-11 14:36:44

[…] You should have taken my Moving MovieClips with the arrow keys tutorial because I will not be explaining that code. […]

 
Comment by Webber
2006-11-16 13:39:39

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?

Comment by Teller Subscribed to comments via email
2009-06-27 05:34:35

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.

 
 
Comment by Slash
2006-11-16 22:24:06

it doesn’t work for me I tried it like 10 times :(

 
Comment by awesty
2006-11-17 09:32:05

@Webber: http://www.awestyproductions.c.....m-jumping/

@Slash: I’ll need more information if you want me to help you.

 
Comment by Slash
2006-11-18 06:03:58

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

 
Comment by awesty
2006-11-18 09:47:17

um, if you follow the tutorial there is no motion tweening involved.

 
2006-11-27 19:04:42

[…] 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. […]

 
Comment by sam
2006-11-29 07:10:39

where did u learn to understand actionscript…
i mean i read all the comments yet i still dont understand, where to find?

 
Comment by awesty
2006-11-29 07:25:32

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

 
Comment by sam
2006-12-01 14:28:49

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

Comment by Tweaker
2008-12-15 02:44:10

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

 
 
Comment by awesty
2006-12-01 16:22:04

That is completely different and have to many clip events, you only need one.

I have a tutorial for that kind of movement.

 
Comment by RedV
2006-12-02 05:15:38

how do u make the character stop when he gets to the edge?

 
 
Comment by RedV
2006-12-02 11:32:45

haha thanks i didnt think to look at the other tutorials i feel stupid
sorry

 
Comment by alex
2006-12-04 03:48:21

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.

 
Comment by teeno15
2006-12-06 22:05:40

i thght this tutorial was really cool for a newbie like me thnx

 
Comment by RDB2006
2006-12-11 00:17:57

gd luck alex, but it wont be begginer level.

 
Comment by bob
2006-12-12 10:32:25

it doesn’t show anything!

 
Comment by andy
2006-12-15 22:41:30

How do you make it so that, let’s say, your car turns instead of just sliding

 
Comment by awesty
2006-12-16 17:21:14

@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

 
2006-12-17 12:18:50

[…] 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: […]

 
Comment by Vytas
2006-12-18 02:46:29

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

 
Comment by awesty
 
Comment by KIM
2006-12-22 17:50:16

how can i make my char jump if i press up?
thnx awesty

 
 
Comment by tyler
2007-01-16 11:23:13

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

 
Comment by tim
2007-01-22 06:39:31

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?

 
Comment by fy
2007-01-23 13:53:03

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. :)

 
Comment by Crap_Face
2007-01-26 09:54:15

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!

 
Comment by awesty
2007-01-26 11:20:13

@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. >_>

 
Comment by Anonymous2
2007-02-02 12:31:06

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

 
Comment by Jacob Daniels
2007-02-14 00:00:47

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″

 
Comment by Jacob Daniels
2007-02-14 00:16:19

Oh and the code makes Up mean down and Down mean up.

 
Comment by Jacob Daniels
2007-02-14 00:32:26

Oh how I need a dunce cap! I’ve fixed it, just turned out I had a circle not a square

 
Comment by awesty
2007-02-14 16:43:44

@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.

 
Comment by awscherb
2007-02-20 05:46:12

can you please make a scrolling tutorials?

 
Comment by chad
2007-03-10 16:40:00

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

 
Comment by awesty
2007-04-05 13:08:03

@awscherb: Yes.

@Chad: Yes.

if(this.hitTest(something)){
_root.gotoAndStop(FRAME);
}

 
Comment by KIM Subscribed to comments via email
2007-05-27 22:28:02

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

 
Comment by destructin Subscribed to comments via email
2007-07-23 03:59:01

nice, yeah but i wanted to know how to make the character look like he’s walking. thanks

Comment by destructin Subscribed to comments via email
2007-07-25 05:32:31

never mind, i already know

 
 
Comment by Isaac Subscribed to comments via email
2007-11-19 12:01:36

it wont work theres always a problem with the first line of code

 
Comment by Horhey Subscribed to comments via email
2008-01-08 12:54:28

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

Comment by Kurt Subscribed to comments via email
2008-11-20 23:06:11

Oh cool it’s like climbing up a floor on a slant.

 
 
Comment by james Subscribed to comments via email
2008-03-08 02:40:32

how do you make it so if your character is standing still.. let’s say if you press right he will run right!

 
Comment by Juice Subscribed to comments via email
2008-03-31 05:10:03

Yo, do you have a tut for damaging someone in a turn based battle, like getting shot by something and having your health drained

 
Comment by Taylor Haberle
2008-04-19 06:17:59

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}

 
Comment by rudydbooty
2008-07-16 04:21:26

how do i add.. a friction…?

 
Comment by lucasfth Subscribed to comments via email
2008-08-18 01:25:24

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!

 
Comment by William Subscribed to comments via email
2008-09-18 11:22:17

my script dosnt work i keep getting compiler errors, are you shure its right or am i doing somthing wrong?

Comment by William Subscribed to comments via email
2008-09-18 11:41:57

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.

Comment by you Subscribed to comments via email
2009-02-24 22:11:11

@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

Comment by Unknown Subscribed to comments via email
2010-11-16 20:05:09

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.

 
 
 
 
Comment by flash begginer
2008-10-08 14:32:20

omfg i cant see tutorial
no link WTF!

 
Comment by awestys fan
2008-10-11 12:01:47

@william you have to convert to MC first with F8!

 
Comment by Awesty2
2008-10-11 15:23:55

ehem……..

AWESTY ROCKS HE HAS THE BEST TUTS OMFG I CANT BELIVE HE IS RETIREING DONT GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
PLZ 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!)

 
Comment by Kurt Subscribed to comments via email
2008-11-17 00:49:13

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.

 
Comment by Mark Subscribed to comments via email
2008-11-28 00:56:06

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?

Comment by Kurt Subscribed to comments via email
2008-11-29 13:04:33

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

 
 
Comment by Jon Subscribed to comments via email
2009-03-21 12:33:50

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?

Comment by ka06059 Subscribed to comments via email
2009-03-22 11:29:12

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…

 
 
Comment by ka06059 Subscribed to comments via email
2009-03-22 11:07:37

no tutorial in website are good either… as i copy paste the script always contain error.. yours too. i fade up of this

 
Comment by ka06059 Subscribed to comments via email
2009-03-22 11:25:22

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.

 
Comment by Jon Subscribed to comments via email
2009-03-23 22:13:22

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!

 
2009-05-03 09:09:33

[…] 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 […]

 
Comment by jake Subscribed to comments via email
2009-07-17 05:37:08

theres no tutorial here. . .

 
Comment by Jerimo
2009-12-26 02:59:34

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

 
Comment by noobflasher_06 Subscribed to comments via email
2010-01-30 19:07:08

does anyone know what the code is for the ‘wasd’ keys?

 
Comment by noobflasher_06 Subscribed to comments via email
2010-01-30 19:09:37

i really need to know =I

 
Comment by Khaled gharbi Subscribed to comments via email
2010-03-17 02:04:33

I’m very grateful for these Scripts, it helped me a lot,Thank you!

 
Comment by a Subscribed to comments via email
2010-04-01 01:58:29

how do i make him shoot the direction my character is facing

 
Comment by Jesse Subscribed to comments via email
2010-07-20 13:08:03

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

 
Comment by narikpid Subscribed to comments via email
2010-09-23 03:29:27

damn!!!what a simple code,thats what i was looking for..thanx man!actually i m trying to learn on my own.

 
2010-10-19 07:14:22

[…] This is a AS3 rebuild of AwestyProductions Moving MovieClips with the Arrow Keys […]

 
Comment by nate Subscribed to comments via email
2010-11-18 11:39:53

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

 
Comment by 12markinlove12 Subscribed to comments via email
2010-12-02 07:05:13

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

Comment by Herba Subscribed to comments via email
2010-12-02 07:07:12

Isn’t it better to have else-if statements?

Comment by 12markinlove12 Subscribed to comments via email
2010-12-02 07:08:54

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.

Comment by Herba Subscribed to comments via email
2010-12-02 07:11:30

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

Comment by 12markinlove12 Subscribed to comments via email
2010-12-02 07:15:10

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.

(Comments wont nest below this level)
Comment by Herba Subscribed to comments via email
2010-12-02 07:17:19

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.

 
 
 
 
 
 
Trackback by marker baron
2012-04-24 11:09:19

How to Develop Professional Level Cartoon Drawing Skill…

[…]the time to read or visit the content or sites we have linked to below the[…]…

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> in your comment.