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

Level: This is an intermediate lesson, that focuses on the ActionScript involved. It is assumed the user has basic Flash knowledge that includes creating symbols, creating motion tweens and creating frame lables.

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 demonstrate and explain the ActionScript involved to play a movie clip a certain number of times, and then stop playing. This tutorial focuse on the AS, so some basic Flash animation knowledge is assumed.

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 “clipDemo_tut1.fla”. Feel free to make the document dimensions whatever you like (“Modify > Document or “command-J”), but I chose to use a size of 400 x 200 pixels. Create 3 layers and label the top one “actions” the second one “counter” and the bottom one “ball”.

The first thing we need to do is create a simple animation. For this tutorial, I simply created a circle that will move horizontally across the stage. I will assume the reader of this tutorial has some knowledge of creating a movie clip in Flash, so I will just walk through this quickly without much detailed instuction.

First, on the “ball” layer, draw a circle on the stage, and position against the left side. Select the cirlce and choose “Modify > Convert to Symbol” (F8), give the symbol a name (I will use “mc_ball”) and choose the Movie Clip radial. Double click on the new symbol (either on the stage or in the Library), to bring you into editing mode. Click on the circle again to select it, and again choose “Modify > Convert to Symbol” (F8), give your symbol a new name (I will use “img_ball”), and this time select the “Graphic” radial. Going back to your movie clip, add some frames to your timeline, however many you want, it doesn’t matter, I will make mine 35 frames long. Add a new keyframe to the layer with your circle. On the last frame of your movie, move the circle off to the right side of your stage. Select any frame between 1 and 35 and select “Insert > Timeline > Create Motion Tween”. You should now have a simple animation of the ball sliding across your stage.

This is the animation we will use for this demonstration. Now it’s time to focus in on the purpose of this article, which is the ActionScript involved to make this movieclip play a certain number of times (3), and then stop.

In our “mc_ball” movie clip, add 2 layers to the timeline label the top one “actions” and the second one “labels”, and add a keyframe to the last frame of each layer. On frame 1 of the “labels” layer, in your property window, give this a frame label of “begin”, and on the last frame, give it a label of “end”. On the last frame of he “actions” layer, insert the following code in the actions panel (Windows > Actions or alt-F9):

_root.counter += 1;

if (_root.counter >= 3) {
_root.mc_ball.stop();
}

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

Don’t worry, I will explain the code later. For now, let’s continue with the tutorial.

Return to the main timeline (scene 1). Click on the cirlce movie clip on the stage and in the properties window, give this an instance name of “mc_ball”.

Still in our main timeline, on frame 1 of the “actions” layer, add the following code:

var counter = 0

stop();

Technically, we are now done with our movie. Go ahead and test it out… you should see the circle travel across the stage 3 times, and then stop (stop being a blank stage). However, let’s add some additional ActionScript to better demonstrate what the code is doing. The following instructions are optional and are used simply to better illustrate what is happening.

First thing we want to do is tell us how many times the movie clip played, so for that I will add a simple counter in the lower corner. In scene 1, on the “counter” layer that we created earlier, let’s just put a text box in the lower corner and type the word “counter”. Next to this text, with the “text tool”, draw a small text box, and in the properties manual, set the text type to “Dynamic” and in the “Var” field, type “counter”. Let’s also give it an instance name of “counter” (Fig. 1).

Now, if we test our movie again, you should see a display of the number of times the animation has played in the bottom corner of the stage. The last thing we want to do is place a “replay” button on the so we can see the demonstration again.

Let’s add a new layer to our timeline and call it “Replay”. Below the “counter” text on the stage, let’s draw a text box and type the words “Demonstrate Again”. Note: be sure to change the “Text type” in our properties window back to “static”. Click on the text, select “Modify > Convert to Symbol” (F8), and give this a name of “mc_reset” and be sure to select the “movie clip” radial. With our new symbol selected, let’s give this an instance name of “mc_reset”, and add the following code to the Actions Panel:

on (release) {
_root.counter -= 3;
_root.mc_ball.gotoAndPlay(“begin”);
this.gotoAndPlay(“begin”);
}

Now, double click on the mc_reset symbol to bring us into the symbol editing mode and add 2 new layers, one named “actions” and one named “labels”. Let’s also add a new frame to all three layers. In the “actions” layer, add the following code to the Actions Panel on both frames:

stop();

Now, in the “labels” layer, let’s label frame 1 “begin” and frame 2 end”. Lastly, let’s delete the content from frame 1 of our text layer so that we only see the “demonstrate again” on the seconcd frame.

Still with me? Don’t worry, we are almost done…

Go to your “mc_ball” symbol, and on the last frame in the “actions” layer in the Actions Panel, add the code in blue below to the existing code (the code in green is what was added previously:

_root.counter += 1;

if (_root.counter >= 3) {
_root.mc_ball.stop();
_root.mc_reset.gotoAndStop(“end”);
}

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

Return to the main stage and test your movie. What you should now see is the counter increase by one each time the circle crosses the stage, and when it hits 3, it should stop, and the “demonstrate again” text should appear. When you click on this text, the counter should return to zero and the ball should travel across the screen again.

And that’s all, we are now done! What? You want to know what this code does? Ok… let me try to explain it:

Actions Scene 1, Frame 1:

var counter = 0

This adds a varialbe called “counter” with a value of “0″.

Actions mc_ball, Final Frame:

_root.counter += 1;

this says to add 1 to our variable called counter which we declared in scene 1

if (_root.counter >= 3) {
_root.mc_ball.stop();
_root.mc_reset.gotoAndStop(“end”)
}

If the counter variable is greater than or equal to 3 (the number of times we want our clip to play), perform the actions between the curly brackets. The actions between the curly brackes are telling the “mc_ball” movie clip to stop playing, and it’s also telling the “mc_reset” clip (our Demonstrate Again button…) to go to the frame labeled “end”.

else {
_root.mc_ball.gotoAndPlay(“begin”);
}

If the counter variable is NOT greater than or equall to zero (the requirements we asked for in the “if” statement above), perform the actions between the curly brackets. The actions between the curly brackets are telling our “mc_ball” movie clip to go back to the begining and play again.

Hopefully that helps explain things, and I’ve tried to comment the source file for everyone to make sure it’s clear. As always, I hope you found this tutorial helpful, and if you have any questions or comments please leave them below!

Source Files (Flash 8): Flash Button Tutorial: Source File