Flash Tutorial: Character Movement with Arrow Keys
This entry was posted on Saturday, April 12th, 2008 at 2:14 am and is filed under ActionScript tutorials, Flash, Flash Tutorial, Tutorials, Web Design.
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
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:
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”)
Left Profile: Download
Right Profile: Download
Back Profile: Download
—- 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
Tags: ActionsScript Tutorial, arrow keys, character movement, design tutorial, flash design; Movie Clip, flash development, Flash Tutorial
Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over
Flash Tutorial: Dynamic Buttons
:lol::lol::lol::lol:
Hi Mike, it didn’t go smoothly but with the comments other users left I worked it out, Thanks for posting
i cant do it… when i go on convert to symbol, go on movieclip, name it and press enter the properties doesnt come up 
i cant do it!!!!!!!
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?
it very nice in short script big work.:lol:
nice
