Well, it took you 4 pages, but now you can finally open up Flash. Happy?

Okay, so now we're going to get to the fun stuff. The first thing you should do, once you have Flash open, is to create a new Movie Clip. I named it "Guy". Next, you want to draw a representation of your main character, or avatar, or PC. You don't have to be elaborate at this step. After you draw this wonderful piece of art, make another Movie Clip, and drag an instance of this into it. Then, give it's instance a name, like "guy_mc", and drag an instance of the second movie out onto the stage. I find nesting things in this way can make the overall code easier, but you may come up with your own system.

[ Our Guy ]

So now you have the stage, with a Movie Clip which contains another Movie Clip, named "guy_mc", which has our Guy's Graphic. In case you were wondering, in my image the head and body are on different layers to make animation easier.

Alright, next, go to the stage, and double click on the Movie Clip there. You can name the original layer something like "Graphic" if you like. Select the "guy_mc" clip, and type this code in the ActionScript Panel:

onClipEvent (load) {

walkSpeed = 5;

}

It is almost always a good idea to place some type of "constant" variable at the start of your code, so that id you decide you want to make a change, it only involves changing one number. What we've just done is tell the program that walkSpeed is equal to 5, nothing new there. This number will represent the number of pixels that our guy will move whenever he walks. For now, lets keep this number at 5, and move on.

Here's the next code:

onClipEvent (enterFrame) {

 

if (Key.isDown(Key.UP)) {

_y-= walkSpeed;

}

 

}

If you test the movie at this point, and press the up arrow, your guy will move up. Wow. Let me explain some of this code so far, for the n00bs. This simply states that every time the MovieClip enters this Frame, it will check to see if the "UP" key is being pressed, and if it is, will move the "guy_mc" MovieClip up by the number of pixels indicated in the first bit of code. Make sense?

	Note
In Flash (and in fact most programming languages) Y increases the further down you go on the screen, and X increases the further right you go. [ Example of X,Y Grid ] This means that by decreasing the value of Y, you move up, increasing Y moves you down.

With that said, we'll make the Guy move down now, by adding the appropriate code, until your whole thing looks like this:

onClipEvent (load) {

walkSpeed = 5;

}

 

onClipEvent (enterFrame) {

 

if (Key.isDown(Key.UP)) {

_y-= walkSpeed;

}

 

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

_x+= walkSpeed;

}

if (Key.isDown(key.LEFT)) {

_x-= walkSpeed;

}

if (Key.isDown(key.DOWN)) {

_y+= walkSpeed;

}

 

 

}

When you test out the program, you can move your guy in 8 directions, but he's always facing the same way. We'll remedy this with a simple "_rotatation" command. "_rotation = x" simply tells Flash to rotate our MC by X Degrees. The finished segment of code should read:

onClipEvent (enterFrame) {

 

if (Key.isDown(Key.UP)) {

_rotation = 0;

_y-= walkSpeed;

}

 

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

_rotation = 90;

_x+= walkSpeed;

}

if (Key.isDown(key.LEFT)) {

_rotation = 270;

_x-= walkSpeed;

}

if (Key.isDown(key.DOWN)) {

_rotation = 180;

_y+= walkSpeed;

}

 

 

}

If you test it now, you'll see Mr Guy moving around, and facing the way he's moving - but he's such a stiff walker. You can easily add some code to make him swagger a bit in his walk. From the stage, double-click on the first MC, and then from inside that, Double-click on the inner-MC to open up the MC you created first. I named this one "Guy".

	Note
The reason I nested the MCs like this, is to allow for quick modifications to the "Guy" MC, without having to re-do any code in the other MC. This comes in handy later, and is a good habit to pick up.   [ make sure you have your MCs nested - the animation graphic inside the MC with all the code ]

Now, my Guy is simply a box on one layer, and a circle on an other. To make my animation of him walking, I just make a quick Motion Tween on the Head layer, and then have it move left and right a couple of frames. Nothing too long, or complicated or it will obviously appear to be a loop.

[ very simple 'head bouncing' animation ]

Your next step is to go back to our Movement MC, and modify the code a bit. First, in the "onClipEvent (load)" function, place the "stop();" command. This will tell our Guy not to start bobbing as soon as the Movie is loaded. Next, inside every "if (Key.isDown()) {" blocks, insert the "play();" command. As you can probably guess, this will make him animate whenever a key is pressed. If you try it out now, you'll see that Guy is stationary until you press one of the arrow keys, after which he starts bobbing, or whatever - non stop. To get him to calm down, after taking away his caffeine, we need to make an If statement that simply says: "If none of the arrow keys are pressed, then stop the clip." It looks something like this:

if (!Key.isDown(key.UP) & !Key.isDown(key.DOWN) & !Key.isDown(key.LEFT) & !Key.isDown(key.RIGHT)) {

stop();

}

Place this snippet just before the very last } in the "onClipEvent (EnterFrame)" block.

	Note
In case you were wondering, the "!" doesn't mean to get all excited - when dealing with comparisons, like If/Then statements in most languages, "!" means: "NOT". So, the statement above basically says: "IF This Key is NOT Down". Make sense?

So there you have it! Hopefully at this stage you have a working movie, with a guy who can walk around, and looks lively when he does it. If you have any problems at this step, recheck all your code, and/or download the source file for what we've done so far to compare. Please make sure you are able to get your own code to work properly before moving on - don't just download the source, and then keep going...

Download FLA

Well, this concludes Page 04 of this tutorial. I think this is a good place to stop temporarily... the rest of this will be coming soon - no later than a week or two. In the meantime, enjoy this, play with it, and feel free to send me any comments or suggestions you may have. I can be found easily on the forum.

Onwards to the next page!