Character Movement and Animation
In this tutorial, you will learn how to make a character walk across the screen and animate at the same time. With this, you can create multiple characters and then move them around with the simple use of your arrow keys.
The first thing you need to do is create your character. For now, it can be a simple pixel character, like such:
Cute little guy isn't it? I'd say so myself *thumbs up* But now, let's animate this guy in designs. He kind-a looks boring standing there like that... The easiest way to do this is .gif by .gif in photoshop or your favorite designing tool. I'll show you a series of animation.
With this series, you can see my pixel guy walking to the east. Not too hard not too fancy smancy either. This is all about programming, not designing. I'm sure all you designers can come up with some more in depth images but for me for now, I can't *lol*.. The final animations should look something like this when completed.
Anyways. Now, we will want to put these into Flash somehow so we can animate them and use them to their full advantage. So we will simply import them into your library.
Easy enough.. You should have a whole list of animations sitting in your Flash Library now.. Now, open up the Insert Menu and go to -> New Symbol. Create a MovieClip..
Open it up and insert all of your animation files.. But insert them in this sort of way...
- northstanding01
- northwalking01
- northstanding01
- northwalking02
- northstanding01
- southstanding01
- southwalking01
- southstanding01
- southwalking02
- southstanding01
- eaststanding01
- eastwalking01
- eaststanding01
- eastwalking02
- eaststanding01
- weststanding01
- westwalking01
- weststanding01
- westwalking02
- weststanding01
Also, while you are in the moveiclip, open up Frame 1's Actions Menu and add this one line of code.
[AS]stop();[/AS]
That is all you should need. If you wnat to check out what it will somewhat look like, go ahead and open up the COntrol Menu and go to -> Play. It should play through the frames to give you a clue what it will look like in the end.
Now, head back to the main _root canvas in Flash and get ready for the real stuff.
Open up your library if you don't already have it open and go ahead and move your walkingMan onto the canvas. Now we have a walkingMan sitting on the canvas. Easy enough, now give it an instance name. Throughout this tutorial I used the name walkingMarz to interpret my guy. Just change all instances of walkingMarz to the name of your man to get it to function correctly.
Then.. Open up the first frame's action window and copy and paste this here code set.
[AS]
MovieClip.prototype.moveMan = function(moveX, moveY, facing)
{
if(_global.aniMation == 5)
{
_global.animation = 1;
}
else
{
_global.aniMation++;
}
currentFacing = (facing * 5) + _global.aniMation;
this.gotoAndStop(currentFacing);
this._x += moveX;
this._y += moveY;
}
_root.onEnterFrame = function()
{
if(Key.isDown(Key.DOWN))
{
walkingMarz.moveMan(0, 5, 0);
}
if(Key.isDown(Key.UP))
{
walkingMarz.moveMan(0, -5, 1);
}
if(Key.isDown(Key.RIGHT))
{
walkingMarz.moveMan(5, 0, 2);
}
if(Key.isDown(Key.LEFT))
{
walkingMarz.moveMan(-5, 0, 3);
}
}
_root.onLoad = function()
{
_global.aniMation = 1;
}
[/AS]
This is what runs our moving character. It animates him as well. Let's take a look at each prototype and regular function and see how I did it.
First..
[AS]
MovieClip.prototype.moveMan = function(moveX, moveY, facing)
{
walkingAnimations = 5;
if(_global.aniMation == walkingAnimations)
{
_global.animation = 1;
}
else
{
_global.aniMation++;
}
currentFacing = (facing * walkingAnimations) + _global.aniMation;
this.gotoAndStop(currentFacing);
this._x += moveX;
this._y += moveY;
}
[/AS]
I placed the function moveMan in a simple MovieClip.Prototype Function. If you do not understand what a prototype function is, there are plenty of references about it and what it does here at kirupa.com, just do a search around for them.
[AS]
walkingAnimations = 5;
if(_global.aniMation == walkingAnimations)
{
_global.animation = 1;
}
else
{
_global.aniMation++;
}
[/AS]
This basically guides what animation your character currently is on. If each one of your wlaking cycles has more than 5 animations.
standing, walking1, standing, walking2, standing
Say.. it was more..
standing, walking1, walking2, standing, walking3, walking4, standing
Then you would set walkingAnimations equal to that number... 7 in the second case, 5 in the first case. If you wanted to, you could make a fourht argument in the prototype line to carry this number. That way say.. You eastern walk could be 5 animations but your western walk could be 7. The possibilities here are endless
The rest of this just basically loops through the animations then. Making sure they get processed in the correct order. The _global.aniMation is a variable that holds what animation you hit last.. maiing sure everything is ambiguous.
[AS]
currentFacing = (facing * walkingAnimations) + _global.aniMation;
this.gotoAndStop(currentFacing);
this._x += moveX;
this._y += moveY;
[/AS]
These next four lines of code finish off the function. the currentFacing variable gets set with the current facing (0 for south, 1 for north, 2 for east and 3 for west). With this number it is multiplied by the number of wlakingAnimations in that set and then the current animation that will be playing is then appended to the end of this. Giving you the frame that should play to gte the right animation.
This frame is then gone to using gotoAndStop(currentFacing);
Along with these lines of code. The current MovieClip (walkingMarz in our case) gets moved in the right x and y directions depending on which key was hit.
Now.. Onto the next function... The main function of this movie.
[AS]
_root.onEnterFrame = function()
{
if(Key.isDown(Key.DOWN))
{
walkingMarz.moveMan(0, 5, 0);
}
if(Key.isDown(Key.UP))
{
walkingMarz.moveMan(0, -5, 1);
}
if(Key.isDown(Key.RIGHT))
{
walkingMarz.moveMan(5, 0, 2);
}
if(Key.isDown(Key.LEFT))
{
walkingMarz.moveMan(-5, 0, 3);
}
}
[/AS]
Anyways... This is a pretty sefl explanatory set of code... Basically it is four if statements saying that if a person hits a certain key (Key.isDown()) then you do the actions found in that if statement.. So basically..
if(Key.isDown(Key.DOWN)) then if the DOWN arrow is hit, it will perform the function walkingMarz.moveMan(0, 5, 0);
The same goes with all the other if statements except they have different values passed into the arguments of the moveMan function.
The last function in the list of functions however is the easiest....
[AS]
_root.onLoad = function()
{
_global.aniMation = 1;
}
[/AS]
This just basically tells the movie to set the aniMation to a global variable and to set it's starting amount to definition. This will never be loaded again during the coarse of the movie after it's officially loaded up.
Now.. That wasn't too hard was it? If any of you are having problems with this tutorial, please e-mail me at
playamarz@mentalconcepts.com immediately and I will try to resolve the issues. The .fla is attached to this post and here is my final .swf.
[swf="http://www.mentalconcepts.com/game/walking.swf height=300 width=300"][/swf]
Now.. Onto getting your character to attack things! (change things around again... sorry) hehe
Game Types and Examples 
For
Linear Mode
