Welcome to the blog for Spitshine Design

Here you can find tips, tricks, tools and tutorials as well as other musings from Mike Stickney, Web Designer and Online Marketer.

Flash Tutorial: Character Movement with Arrow Keys

Level: This is a basic ActionsScript tutorial. As this is not an animation tutorial, a basic knowledge of the Flash user environment is assumed

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this Flash tutorial, I will show you how to move a game character using the arrow keys, and have the character face in the direction that he is moving.

Demo:

This movie requires Flash Player 8

Let’s get started!

Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file.

Save the file, and give it the appropriate name. I will call this “charMove_tut1″. Feel free to make the document dimensions (“Modify > Document or “command-J”) whatever you like, but I chose to use a size of 400 x 300 pixels.

The first thing we want to do is create a game character with 4 seperate states: left profile, right profile, front profile and back profile. Because this is not an illustration / animation tutorial, I will not be going through how to illustrate your character. Feel free to illustrate your own character, and convert each profile into it’s own symbol. For those beginners who do not want to illustrate their own character at this time, feel free to download the below .swf files (or jump to the source at the bottom of this page):

Front Profile: Download (right click on link and select “Save Link As”)

This movie requires Flash Player 8

Left Profile: Download

This movie requires Flash Player 8

Right Profile: Download

This movie requires Flash Player 8

Back Profile: Download

This movie requires Flash Player 8

—- ads by google —-

To import these files, open your Flash file, select “File > Import > Import to Library”, browse to where you saved the above files, select the files and click the “Import to Library” button. You should now see the 4 profiles as symbols in your Flash document Library (Window > Library (cmd-L)).

Once you have your character profiles ready (either by using mine or creating your own), we will need to place them in a movie clip symbol in order to control the movement. On frame 1 of our main movie timeline, select “Insert > New Symbol” (cmd-F8). This will bring up the “Create New Symbol” dialog box (Fig. 1). In the “Name” field, give your symbol an appropriate name (I chose “mc_character”, select the “Movie Clip” radial, and hit OK. This will automatically put you in the symbol editing mode for your new symbol. In your new symbol, create 2 new layers. Name the top layer “actions”, the second layer “labels” and the bottom layer “character”.

Extend your timeline to 20 frames. Select keyframe 5 for all 3 layers (you can shift click or click and drag), and insert a new keyframe (Insert > Timeline > Keyframe or F6). Do the same thing at frame 10 and 15. Click on keyframe 1 of our “labels” layer, and in the Properties window (Window > Properties > Properties or cmd-F3), give this frame a label of “right” (Fig. 2).

On frame 5, do the same thing, giving it a lable of “left”, frame 10 label “up”, frame 20 label “down”. Your timeline should now look similar to Fig. 3.

Note: Technically, we can make this movie clip only 4 frames, with frames 1-4 labeled the same as above. However, For the purposes of this tutorial, I felt it better to extend the frames in order to better illustrate the frame labels.

On frame 1 of your “character” layer, drag your right profile symbol to the stage and align it to the center. Tip: You can center align your symbols to the stage by using the Align palette (Window > Align or cmd-K (Fig. 4). Be sure the “To Stage” button is selected (it will be a darker shade of grey when selected) to align your sybols to the stage, deselecting this button allows you to align multiple symbols to each other.

On frame 5 of your “character” layer, drag your left profile symbol to the stage and align it to the center. In case you haven’t figured it out, do the same thing at frame 10 with the back profile symbol and frame 15 with the front profile symbol.

The last step is to add the ActionScript to our movie clip symbol. On the “actions” layer, click on frame 1, and add the following code to the Action panel (WIndow > Actions or alt-F9):

stop();

This simply stops our movie from playing through, since we only want it to change based on what key is pressed. Do the same thing at frame 5, 10, and 15 of our “actions” layer.

Our movie clip is now complete, so it’s time to add the ActionScript that will control our movement and the profile of our character.

Return to your main timeline. Drag your “mc_character” symbol from the library onto your stage. WIth your character selected, add the following code to the Actions panel:

onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(“right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}

}

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (”). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

That’s it! Go ahead and test your movie. What you shoud see is when you click on the arrow keys, your character not only moves in that direction, but faces that direction as well (up being backwards, down being forwards).

Now, let me try and explain the code:

onClipEvent(enterFrame){

On ClipEvent refers to the movie clip which this code is added to, the “enterFrame” is saying everytime our movie enters this frame of our main timeline, peform the actions between the curly brackets.

if(Key.isDown(Key.RIGHT)){

when the right arrow key is pressed, perform the actions within the curly brackets.

this._x += 5;

this. refers to the movie clip that this code is attached to. _x refers to the x position of this movie clip. If the right arrow is pressed, move the moviclip 5 pixels to the right (Tip: for faster movement, increase this number, for slower movement, decrease this number).

this.gotoAndStop(“right”);
}

Go to our frame labeled “right” in our movie clip symbol and stop on that frame. (Tip: Frame labels are case sensitive).

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

This code is doing the same as above, but saying if the left arrow is pressed, move the clip 5 pixels to the left and go to our frame labeled “left”.

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

This is doing the same as above, but saying if the up arrow is pressed, move the clip 5 pixels up (_y represents the y position of your clip) and go to our frame labeled “up”.

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}
}

This is doing the same as above, but saying if the down arrow is pressed, move the clip 5 pixels down and to go our frame labeled “down”.

Thanks for reading, and I hope you found this tutorial useful. Source files are below, with commented code. As always, comments or questions are welcome. Check back soon for more expaned tutorials based on the idea of character movement.

Source Files (Flash 8): Flash Tutorial: Character Movement with Arrow Keys

Share and Enjoy:
  • LinkedIn
  • Twitter
  • Facebook
  • DZone
  • Digg
  • del.icio.us
  • Slashdot
  • Mixx
  • Google Bookmarks
  • Technorati
  • Internetmedia
  • Scoopeo
  • StumbleUpon
  • Add to favorites
  • FriendFeed
  • Propeller
  • Reddit

Tags: , , , , , ,

90 Responses to “Flash Tutorial: Character Movement with Arrow Keys”

omfg on April 13th, 2008 at 10:38 am said:

:razz:

^lol noob^ no seriously thats good dude

nioce on April 13th, 2008 at 6:17 pm said:

:twisted:

mr. palmer's class student on April 14th, 2008 at 4:36 pm said:

it keeps saying doublequote error on lines 14 and 19, 5 errors actionscript

Mike on April 14th, 2008 at 5:53 pm said:

Hi Mr. Palmer’s class student,

Not sure why you would be getting an error like that… Be sure you are using quotes (“) instead of double apostrophe (‘). Also, you can always check the source file (link at the bottom of the tutorial) and see if that works without error.

I would love to help you out, but I will need more information. If you can possibly post your code here or email me the file you are having trouble with (contact@spitshine-design.com), and I will try and trouble shoot it for you.

- Mike

Ash on April 14th, 2008 at 8:06 pm said:

Wow it works! Thank you x

Ash on April 14th, 2008 at 8:08 pm said:

Btw I got the same error with the quotes, you are meant to use ” which is above the number 2, instead of two double apostrophe ‘ ‘

Mike on April 14th, 2008 at 8:14 pm said:

Hi Ash,

Glad to see you got it working! You are right, you should be using quotes, not double apostrophes… I see that my comment looked a little confusing so I’ve updated.

Thanks for reading.

- Mike

manoj on April 15th, 2008 at 6:36 am said:

:roll:
Yes it works..

Nay-ger (as mr. palmer would say) on April 17th, 2008 at 4:28 pm said:

i keep getting
**Error** Scene=Scene 1, layer=Layer 4, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent(enterFrame){

**Error** Scene=Scene 1, layer=actions, frame=1:Line 1: Clip events are permitted only for movie clip instances
onClipEvent(enterFrame){

Total ActionScript Errors: 2 Reported Errors: 2

:lol: :lol::lol::lol::lol:

Mike on April 17th, 2008 at 4:51 pm said:

Hi Nay-ger,

Not sure exactly what the problem is, but it sounds like you added the code either to an image symbol, or to the main timeline actions…

On the main timeline stage (scene 1), be sure you are only selecting the character movie clip symbol (clicking only once, you will see a blue bounding box around the object). Then, paste the onClipEvent etc. code in the Actions Panel.

Another issue may be that you didn’t save your character as a “Movie Clip” symbol. Be sure that it is indeed a movie clip (there will be a little blue square icon next to the symbol name in the symbol Library).

If you still have a problem, try downloading the source file (link at the end of the tutorial) and let me know if that works for you.

Hope this helps, thanks for reading!

- Mike

ela on April 22nd, 2008 at 3:51 pm said:

wat do u mean by main timeframe??

Mike on April 22nd, 2008 at 4:24 pm said:

Hi ela,

“Main timeframe” is actually “main timeline”, and refers to the MAIN stage (“scene 1″ by default). What this means is, you should not be in symbol editing mode. To know where you are, there should be a little “breadcrumb” trail under your timeline (refer to Fig. 3 above) that might look similar to this:

“Scene 1 > mc_symbol > img_symbol” (with little icons instead of the > symbols)

In this case, “scene 1″ would be your main timeline (or main stage). To return to your “main timeline”, you would click on “Scene 1″.

Hope that helps clear things up for you.

Thanks for reading.

- Mike

Pradeep on April 24th, 2008 at 6:19 am said:

:lol:
it worked after i changed the 2 apostaphe to double quotes
its cool!!!
thanks

Komal on April 26th, 2008 at 6:57 am said:

Hey!

I am facing a problem with running the code.
I have modified the left,right,top and bottom images as movieclip symbols and my mc_character is a movieclip symbol too.

While running, everytime I hit a different arrowkey, the image appears in the center of the screen instead of rotating from the previous position.

Is this problem arising because I have saved all profiles(left,right,top and bottom) as movieclip symbols instead of graphics?

Any help will really be appreciated.

Regds
Komal

Mike on April 26th, 2008 at 3:32 pm said:

Hi Komal,

Hmmm… not sure what the problem would be…

It should be fine to save each profile as a movieclip, but then all 4 movieclips would still need to be in one movieclip. The arrow keys would be moving the one movieclip that contains all your profiles. Does that make sense?

If you can send me the file (contact@spitshine-design.com), or paste the as code here I could probably better help trouble shoot it for you. And of course you can download the source file (bottom of this tutorial), which might better help explain things.

Thanks for reading, and let me know if you still have trouble.

- Mike

Dave on April 26th, 2008 at 5:32 pm said:

:smile: Hi Mike, it didn’t go smoothly but with the comments other users left I worked it out, Thanks for posting

Dave.

Nannafish on May 5th, 2008 at 1:20 pm said:

:sad: i cant do it… when i go on convert to symbol, go on movieclip, name it and press enter the properties doesnt come up :sad: also i know why its not working coz im a noob :mad: i cant do it!!!!!!!

Mike on May 5th, 2008 at 1:48 pm said:

Hi Nananfish,

The properties window won’t come up automatically… You need to click on the symbol (on the stage) and choose “Window > Properties > Properties” and a palette with a “Properties” tab should show up (most likely underneath you flash stage.

Hope this helps.

- Mike

Jesse on May 8th, 2008 at 8:37 am said:

1087: Syntax error: extra characters found after end of program. onClipEvent(enterFrame){

Whats the problem?

Mike on May 8th, 2008 at 2:48 pm said:

Hi Jesse,

Not sure what the problem is… I would need to see what your code looks like. Can you post your onClipEvent code here and I’ll see if I can figure out the problem.

Thanks for reading.

- Mike

ash on May 9th, 2008 at 1:20 am said:

hey
every thing works fine exept when i press any arrow key it wont change animation i have folowed your guildlines and still therers a problem plz help

Mike on May 9th, 2008 at 1:24 pm said:

Hi Ash,

Not sure where your problem is without seeing it. If you can either paste the code you are using here, or send me the .fla file (contact@spitshine-design.com) I would be happy to try and troubleshoot it for you.

Dan on May 10th, 2008 at 10:22 pm said:

Thanks, one of the better beginner movement tutorials I’ve seen. :smile:

dam on May 11th, 2008 at 1:22 am said:

thx..it work

Okami on May 12th, 2008 at 1:40 pm said:

i has a prob.

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Syntax error.
this.gotoAndStop(”right”);

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 9: Syntax error.
this.gotoAndStop(”left”);

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 14: Syntax error.
this.gotoAndStop(”up”);

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 19: Syntax error.
this.gotoAndStop(”down”);

Total ActionScript Errors: 4 Reported Errors: 4

no idea what to do, cuz i’m also a noob

Mike on May 12th, 2008 at 1:55 pm said:

Hi Okami,

Sorry that it isn’t working for you. Not sure, but you may be having the same problem as some other readers in that when you copy/paste the code from the Web page, it uses what are known as smart quotes instead of regular double quotes. In your code, where ever you have quotes (“), make sure you are using regular double quotes (just delete and retype). Hopefully this helps.

If you are still having problems, just let me know and I will try to help you solve the problem.

Thanks for reading.

- Mike

Chris on May 12th, 2008 at 10:37 pm said:

:mrgreen: awesome tutorial, but there’s an error with the down key, it won’t go down (even on your demo…) do you know how to fix it?

(i’m a noob :P )

Mike on May 13th, 2008 at 12:32 pm said:

Hi Chris,

Thanks for the props, but I’m not seeing a problem in my demo… If you can post the code here, I can take a look and see if I can find the problem. Not for nothing, but are you sure your keyboard is working?

Thanks for reading.
- Mike

Okami on May 14th, 2008 at 11:48 am said:

k it woks now thnx :mrgreen:

Okami on May 14th, 2008 at 11:59 am said:

hey i has another question. I wanted to put some epic music in there too…how do i do that?

Mike on May 14th, 2008 at 12:41 pm said:

Hi Okami,

Adding music is outside the scope of this tutorial, but to get you started, you would simply import your sound file (the same way we imported our characters from this tutorial), and then add the sound file to a keyframe.

Tip: it’s a good idea to add your sound file to it’s own movie clip. The sound file movie clip needs to have the same number of keyframes for the sound to play (you’ll see a blue squiggly line on the timeline to indicate sound). Then, simply add your movieclip to the main timeline and you’re all set.

I hope this at least helps, but I’ll try to do a thorough tutorial on adding sound in the near future.

Thanks for reading!
- Mike

Rog'er on May 19th, 2008 at 2:58 pm said:

Hi Mike – I’ve followed these instructions but the “stop();” command doesn’t seem to work! The ninja just spins around (well, looks in each direction) repeatedly

Mike on May 19th, 2008 at 3:18 pm said:

Hi Rog’er,

Hmmm.. not sure what the problem is… My first guess is to tell you to make sure you are adding the stop(); action to the frame and not the character image. (you will see a little “a” in the keyframe).

Hope that helps.

-Mike

Roger on May 19th, 2008 at 3:57 pm said:

It works perfectly… I had the same problem with the quotes, but just changing them it works Ok.

Another problem that can be going on, is that the code is in the frame and not in the movie clip.

Thanks:razz:

Gandy on May 19th, 2008 at 4:17 pm said:

it doesn’t work. i’ve put in the action script, and done it all right, but it just does the right profile, it moves, but doesn’t change which profile, so it’s just pointing right. everything else is fine.

marc951 on May 20th, 2008 at 11:38 am said:

this happens to me

**Error** Scene=Scene 1, layer=action, frame=1:Line 8: Syntax error.

Total ActionScript Errors: 2 Reported Errors: 2

Mike on May 20th, 2008 at 12:48 pm said:

Hi Marc,

Not sure, but you may be having the same problem with the quotes. See the “Update” in the tutorial below the first block of code above.

If you still have a problem, let me know and I’ll try to trouble shoot it with you.

- Mike

jack on May 20th, 2008 at 5:55 pm said:

hello Mike u tutorial is very helpful for me thank you :mrgreen: :mrgreen: if u r free can u create a as3 tutorial? anyway thank you

Oboe Passion on May 21st, 2008 at 7:36 am said:

Thank you so much!!!!!!!!
It is really hard to find a good beginners tutorial:roll:
I have just learnt HTML coding (how to make a website) and am looking to learn how to make games to go on my website:grin: This is a great tutorial with no action script errors *thank god* and just perfect a noob like me looking to learn the fundamentals.
Again Thankyou so much :mrgreen:

mansoor on May 24th, 2008 at 11:28 am said:

:wink: it very nice in short script big work.:lol:

ivan on May 26th, 2008 at 3:03 pm said:

:grin: nice

trent on May 29th, 2008 at 12:13 am said:

I did this same code to a character I made, one that walks, and he runs in place whenever i don’t press the arrow key, but when I do, the running stops and he just moves as a still picture. What should I do?
here’s the code i used to get him to go left and right (For a sidescrolling game):
onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(“right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}
}

is there any way to get him to not walk when I don’t press the arrow key as in an idle position, and make him move and have the walking animation when I do press the arrow key?

trent on May 29th, 2008 at 12:35 am said:

oh, and also, when I make him jump, using this code:
if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);

how do I make him come back down? im such a noob…

Mike on May 29th, 2008 at 12:49 pm said:

Hi Trent,

There are a couple different ways to do what you are asking here, but I think the easiest way in relation to this tutorial is to add in “else” statement to your arguments. For example, to move right, you have it correct:

if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(”right”);
}

But for it to idle, you would add the else statement directly after:

else {
this.gotoAndStop(“idle”);
}

Obviously, you would add a new keyframe labled “idle”, with the state that you want the character to be in. You would then add the same else statement after the code for the left movement. This should give you what your looking for.

The jumping is a little bit trickier… You can similarly do in “else” statement, but you would also need to set your _y back to it’s originating point. (+=5). However, since when you hold the up key, it continually goes higher, when you release, it will only go back the 5 pixels. I’ll have to look into this more and try to give you a better explanation/solution, but hopefully this gets you started.

Thanks for reading,
Mike

Aditya Jalihal on May 29th, 2008 at 8:33 pm said:

awesome:grin::cool::grin::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool::cool:

Toby on May 31st, 2008 at 4:00 pm said:

hi. I was just wondering… i’ve made a wall, to stop this dude from gonig through it. of course, he just goes straight through it. What is the code to stop him doing this? i heard it was sumin like

on(rollOver”what you called him”){

“watyoucalledhim” movespeed=0
}

but that doesn’t work :(

Mike on May 31st, 2008 at 5:18 pm said:

Hi Toby,

Hmmm, the code example you’re asking about is not really right at all. First, onRollOver is a mouse action, and we aren’t controlling the character with a mouse, so that wouldn’t work. Second, we aren’t setting the movement with a “movespeed” variable, so setting that to “0″ would not work either.

What you would want to use here is a “.hitTest”… when I have some time I’ll try to give you a full explanation (coincidentally I’m working on a tutorial now that touches on hitTest). Check back in the next day or so and I should have something for you.

Thanks for reading!

- Mike

rayraytea on June 1st, 2008 at 5:03 pm said:

Hi Mike, thanks for the tutorial. Very nicely written.

andrew on June 4th, 2008 at 11:21 am said:

Great tutorial

Templates247.com: Flash Tutorials » Blog Archive » Flash Tutorial: Character Movement with Arrow Keys on June 4th, 2008 at 3:45 pm said:

[...] Read the Tutorial: Flash Tutorial: Character Movement with Arrow Keys [...]

Qaboomba on June 7th, 2008 at 11:57 am said:

Man, this is like the best tut ever seen.. Everything is well explain and man. I wish all tuts were like this. Cuz i’m kinda noob, and here everything is shown were it is.. man it rox!

Duane A. Clay on June 12th, 2008 at 1:37 am said:

Wow,

Excellent tutorial… looking forward to the others.

Goodjob,
-Duane A. Clay

Lukas on June 17th, 2008 at 6:29 pm said:

Hey Mike.
Your tutorial is the best, and everything is working for me.
I just want to know something.
Instead of moving images with my keyboard,
i tried moving animations.
I figured all of that out, and now i have this.
When you start the animation, you see my character standing (animation). When you press Left, you see my character walking (animation) to the left. But when you release the Left button, the animation keeps on playing, but it just stays on the same spot.
Is there a way to switch back to the standing animation, when you release the Left-button?
I’m kinda new to action-script :oops:

Mike on June 17th, 2008 at 7:19 pm said:

Hi Lukas,

Your question is similar to another question above, where I tried to explain it briefly:

There are a couple different ways to do what you are asking here, but I think the easiest way in relation to this tutorial is to add in “else” statement to your arguments. For example, to move left, you would use

if(Key.isDown(Key.LEFT)){
this._x += 5;
this.gotoAndStop(“left”);
}

But for it to idle (i.e. stop animating), you would add the else statement directly after:

else {
this.gotoAndStop(”idle”);
}

Obviously, you would add a new keyframe labled “idle”, with the state that you want the character to be in when you are not moving. You would then add the same else statement after the code for the right movement. This should give you what your looking for.

Since I’ve been getting several questions on this, I hope to add a new tutorial that explains this more fully, but until then, hopefully this helps you out.

Thanks for reading,
Mike

lolsex on June 18th, 2008 at 11:38 am said:

wow u guys all suck no offense but y would u make a tut on the easiest thing to do ever and on im not joking

Mike on June 18th, 2008 at 12:19 pm said:

lolsex,

We make tutorials for all levels. For many, this was not the easiest thing to do in the world. Everyone has to start somewhere. Maybe you have more experience, so this is easy for you, but at some point even you had to learn how to do that. Just because you did not find this tutorial helpful, there is no reason to bash it, it’s writer, or more importantly insult it’s readers.

- Mike

Miniman on June 20th, 2008 at 2:35 am said:

I’m new at Flash until I come upon this tutorial but I am having one problem when I try to move it left, up, or down, the animation doesn’t switch the images I fixed the code and everything so it works but the images just won’t switch. Please Help me :sad: :cry:

Mike on June 20th, 2008 at 1:13 pm said:

Hi Miniman,

Sorry you’re having trouble with this tutorial. Not sure what the problem is. Are you getting any kind of errors in the output window? (the output window should automatically come up when you test the movie from Flash if there are errors).

My first thought is you may be having the problems with quotes vs. smartquotes that some others were having. Check the “Update” paragraph under the first block of code above. Otherwise, you can try sending me your .fla file to contact@spitshine-design.com and I can try troubleshooting it for you.

- Mike

Joaquin on June 21st, 2008 at 10:33 pm said:

Awesome tutorial! Thank You

Miniman on June 22nd, 2008 at 8:14 pm said:

The thing is my dad is a website designer and he cannot figure it out. I will send u the flash file asap.

Mike on June 22nd, 2008 at 10:14 pm said:

Hi Miniman,

The problem you are having here is that you need to take what you have on Scene 1 in your sample file and place it in it’s own movie clip. Then, the ActionScript you have in frame 1 of your actions layer of your sample file needs to be attached to the mc you created (click on the mc, then open the actions panel and add the script, do not attach AS to a keyframe).

I emailed you the file with the corrections. If you open the symbol “smiley” you should see what I did. Also, to make the smiley smaller, after you place the symbol to the stage, you can simply change the height and width in the Transform pallette.

Hope this helps you out, but if you are still having problems, let me know.

Also, you can always find the source files at the end of my tutorials to help you along with the tutorials.

Thanks for reading,
Mike

rudydbooty on July 2nd, 2008 at 9:26 pm said:

lol pretty neat!!:shock::shock:

granadaza on July 16th, 2008 at 5:24 pm said:

este tutorial es simple e incluso explica a que se refieren los script de “enterframe” “this ” gracias

Anthony on July 24th, 2008 at 11:53 pm said:

Thanks for the tut mike. I’ve been working with PS for a while now and wanted to move on to flash and give it a try. I’ve been reading alot lately in hopes to get my website flash enabled or at least have some nifty flash buttons on it.

wooo on July 29th, 2008 at 12:03 am said:

:mrgreen: thanks so much

Vix on August 21st, 2008 at 12:17 am said:

Hmm.. I followed the guide correctly but My character isnt changing direction. Its moving but not changing the view

Mike on August 22nd, 2008 at 1:32 pm said:

Hi Vix,

Sorry you are having problems with this. If you can send me the file (contact@spitshine-design.com), I can try and take a look and see if I can’t find what might be wrong.

Thanks for reading!
- Mike

Lelouch on August 29th, 2008 at 7:58 am said:

Great Tutorial!

BUt i was wondering, i didnt want to use your character so i tried applying the tutorial to a animation of sprites walking. But, when I preveiw the flash, i cant get the character to stand still when no arrows are pressed, and move (while the sprite is moving his feet) accros the screen. D i need to change the actionscript to do this?

Mike on September 7th, 2008 at 1:49 pm said:

Hi Lelouch,

I actually have gotten a few questions on how to do what your looking for. It’s something I’ve been trying to find time to do for a second tutorial for this. Unfortunately, I have been EXTREMELY busy… working full-time, new freelance projects, and to top it all off, I’m moving into a new apartment…. just haven’t found the time to sit and do some new tutorials in about 2 months! Things are starting to settle down now that summers over, so hope to have something up in the coming weeks.

Sorry for the delay, and thanks for reading!
- Mike

serge on September 7th, 2008 at 8:12 pm said:

i just started learning actionscript today and i’m trying to do a char in 2d that walks left and right and jumps up and down.

i did same as tutorial except only put in left and right frames, and took out the 3rd line for the up and down movement script…except now the symbol is stuck facing to the right and won’t turn when it moves to the left, any suggestions?

J - Dawg on September 8th, 2008 at 9:21 pm said:

I played around with your code, I’m trying to have it excactly like yours, but when the arrows key moves the animation plays… this is what I got, but my problem is for some reason it doesn’t show the animation… Thanks!

code:
onClipEvent(enterFrame){

if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(RightRun);
}else{
stop();
this.gotoAndStop(Right);

}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“LeftRun”);
}else{
stop();
this.gotoAndStop(“Left”);

}

if(Key.isDown(Key.UP)){
this._y -= 5;
}

if(Key.isDown(Key.DOWN)){
this._y += 5;

}

}

Antoan on September 9th, 2008 at 2:36 pm said:

I made a code like this one, but it’s gotoAndPlay instead of gotoAndStop and it freezes at the first frame :cry:

Antoan on September 9th, 2008 at 2:38 pm said:

To: J – Dawg
You should make it this.gotoAndStop(“RightRun”), not this.gotoAndStop(RightRun) (the “” are mssing in yours)

J - Dawg on September 15th, 2008 at 7:53 pm said:

Antoan,
Thanks for helping! It’s weird like the left arrow key only works if the right one doesn’t have “”… I don’t know whats wrong. Hope someone can help :) .

Toranos on October 5th, 2008 at 12:35 pm said:

To add animation, you will need to change a bit. For example, You will need to have a default pose, Which is usually posing forward, then four more poses, each, inside that frame, will have a movieclip, with your animation.

Then this code in the main movieclip, your character..
onClipEvent (load) {
speed = 10;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
this._y -= speed;
this.gotoAndStop(2);
}
if (Key.isDown(Key.DOWN)) {
this._y += speed;
this.gotoAndStop(3);
}
if (Key.isDown(Key.RIGHT)) {
this._x += speed;
this.gotoAndStop(4);
}
if (Key.isDown(Key.LEFT)) {
this._x -= speed;
this.gotoAndStop(5);
}
}

Of course, you can change the speed.
Hope you understood.

majida on October 16th, 2008 at 12:58 pm said:

hi
how can i stop him from getting out of the screen while playing?
thanks

flywheelfly on November 22nd, 2008 at 6:05 am said:

This works GREAT! Just what I was looking for. Thanks.

ilike2photoshop on November 26th, 2008 at 5:56 pm said:

This is great, thanks.

oz on December 6th, 2008 at 12:09 pm said:

ha…….. pretty cool tutz!! this whole site is jammed packed with awesome tutz and they tell you what and how sources are used… even an idiot like me can understand it lol :roll: now if I can keep my mind set on just one thing lol

anD on January 8th, 2009 at 6:49 am said:

Cool tut. Thanks for the article.:smile:

Andi on February 13th, 2009 at 12:28 pm said:

In this code
onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(”right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(”left”);
}

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(”up”);
}

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(”down”);
}

}
you can see it says this.gotoAndStop(“down”) well it might not work for you because he has named hes frames to down left right.

so to fix this just replace up with like this.gotoAndStop(5);
then that should work just thought i point this out for noobs

Mike on February 13th, 2009 at 7:44 pm said:

Hey Andi,

Yes, you are right, if you are having trouble, you can reference the frame number rather than naming the frame. However it is my recommendation to do this only as a trouble shooting measure. It is better practice to use frame labels. While it might be a little tougher to remember what you labeled things, and there is more risk of mistyping, using frame labels makes for a more flexible .fla. If you wanted to go in and add frames to the timeline, or move the frame at all, using labels alllows you to do this without having to go back and change the code.

Of course it really all comes down to personal preference, but that’s my two cents.

- Mike

Silent Noise on February 21st, 2009 at 9:49 am said:

Hi

That’s awesome man!
nice tutorial but…

The character is moving and all but the animation wont change even in the file i downloaded…

i use Adobe flash CS4
and this is the code in the downloaded file:

// when the clip enters the frame, perform the code between the curly brackets
onClipEvent(enterFrame){

// if the right arrow key is pressed, perform the code between the curly brackets
if(Key.isDown(Key.RIGHT)){
// move this clip 5 pixels to the right
this._x += 5;
// go to and stop on the frame labeled “right”
this.gotoAndStop(“right”);
}

// the the left arrow key is pressed, perform the code between the curly brackets
if(Key.isDown(Key.LEFT)){
// move this clip 5 pixels to the left
this._x -= 5;
// go to and stop on the frame labeled “left”
this.gotoAndStop(“left”);
}

// if the up arrow is pressed, perform the code between the curly brackets
if(Key.isDown(Key.UP)){
// move this clip 5 pixels up
this._y -= 5;
// go to and stop on the frame labeled “up”
this.gotoAndStop(“up”);
}

// if the down arrow is pressed, perfrom the code between the curly brackets
if(Key.isDown(Key.DOWN)){
// move this clip 5 pixels down
this._y += 5;
// go to and stop on the frame labeled “down”
this.gotoAndStop(“down”);
}

// closes the on clip event code
}

And this is the code in my file:

onClipEvent(enterFrame){
if(Key.isDown(Key.RIGHT)){
this._x += 5;
this.gotoAndStop(“right”);
}

if(Key.isDown(Key.LEFT)){
this._x -= 5;
this.gotoAndStop(“left”);
}

if(Key.isDown(Key.UP)){
this._y -= 5;
this.gotoAndStop(“up”);
}

if(Key.isDown(Key.DOWN)){
this._y += 5;
this.gotoAndStop(“down”);
}

}

Silent Noise on February 21st, 2009 at 9:53 am said:

and the movie clip is in four files (in my file)
but in the other one it’s just one layer and one movieclip:neutral:

Silent Noise on February 21st, 2009 at 10:08 am said:

ok i came to figure out i was working the whole thing in the scene not in a new symbol :p my bad.

it works perfectly now:mrgreen:

obb on June 12th, 2009 at 7:10 pm said:

how do you add movie two it. e.g. so it could jump

blue lady on July 8th, 2009 at 3:48 am said:

great! keep going.. :grin:

very helpful.. :razz:

pligg.com on July 11th, 2009 at 3:53 am said:

Flash Tutorial: Character Movement with Arrow Keys…

In this Flash tutorial, I will show you how to move a game character using the arrow keys, and have the character face in the direction that he is moving….

Xen on September 9th, 2009 at 3:27 pm said:

“To add animation, you will need to change a bit. For example, You will need to have a default pose, Which is usually posing forward, then four more poses, each, inside that frame, will have a movieclip, with your animation.”

I don’t understand sorry, where do the default poses actually go? My sprite is working fine, apart from stopping it animating when in a stationary postition. Have followed both sets of instructions, but neither have worked. I put in an “idle” keyframe and the else statement and it worked in one direction, but then stopped the animation completely. When I put the else statement after all 4 directions, my sprite no longer walked, just slid. All I need is a push towards how to stop animating the sprite when the keys are not pressed.
Great tut by the way, best one on the web!

Mike on January 16th, 2010 at 6:15 pm said:

Due to overwhelming response to this tutorial, comments for this post are closed. If you are having problems, please refer to other users comments above, as the issue may already have been addressed.

Thanks for reading,
Mike