Videogames are magical. There’s this guy on the screen and he’s doing what you want. Sure, it’s just an animation on ‘roids, but somehow it delights and amazes: it manages to be more than the sum of its code.

Raigan and Mare taught me how to make a little guy walk around on the screen with Flash MX, and if you’ve had a bit of experience with the program (or a bit of patience) you too can learn how to breathe life into your characters. This is the first time I’ve written something this technical, so if you’re stuck, feel free to leave questions in the comments. And if you make a lil walker of your own, please post a link to it there, too!

After we had Marc Ngui’s character moving around, I drew my own character and dropped the frames in. Crappier, sure, but more exciting. Use the arrows to make him move (you might have to right or left click the box to activate it first).

Here’s how you can do the same

Make the frames you’ll need to create the walking animation, using Marc Ngui’s character as the template. There’s lots of ways to show a biped shambling around, natch, but we chose quasi-isometric to give it that 3D feel. Make sure the canvas size is the same, the positioning is the same on each frame, and you’ve saved to either GIF or PNG format.

Once you’ve got those frames, import them into Flash MX’s library. Drag the front, standing one to the stage and convert it from a bitmap to a movie clip. Double click on it — inside the movie clip we’re going to put all the different animations we need to walk convincingly.

Put the standing forward graphic in the first frame. (Tip: rather than dragging it, copying it from the library and then ctrl-shift-v pasting it onto the stage helps with keeping stuff aligned.) It doesn’t matter so much that it’s in the first frame, just that you name the frame stand_fw in the properties — we’re gonna call it from the code this way. Go to frame two, paste in standing backwards graphic and call it stand_bw. (By the way, there’s no reason it couldn’t be called "stand-backwards" instead, but if you leave the names as they are you won’t have to change the code I’ll introduce later.) OK, we’re done standing around.

Now we’re on to walking, which is four different graphics played on a loop. To do this, you paste in each frame like the standers, but unlike them you’ll want to give each graphic about five frames so it doesn’t play too fast to see (and waste all your work!). Also unlike them, you only need to name the first frame of the first graphic (move_fw). Once that one’s called, it’ll continue along the timeline until told to stop.

But you don’t want it to stop, you want it to loop back to the first frame so your walker doesn’t just cycle through the animation once and freeze. So we’ll introduce our first piece of actionscript. Click on the first frame after the last graphic and open the Actions window (f9 or Window->Development Panel) and paste in this code:

this.gotoAndPlay("move_fw");

You should see a lowercase a on the frame if in the timeline if you did it right.

Now you want to do the same thing for the backwards graphics, including the actionscript (though changed to loop back to move_bw, obviously).

OK, now for the code…

A few things to keep in mind:

• commenting not only is superimportant for yourself a few months down the line, it also makes it possible for other people to work with it. It’s also a good way to think through the logic of your programs before you code a line. Comments are preceded by "//" and ignored by the program (and Flash turns them grey.)
• the code is looping and refreshing constantly, even when the walker is still. In order for the walker to remain still, he has to have a variable set ("standing=true") in order to "remember" not to do anything else until the next keypress.
• In general what you’ll be doing is giving objects certain attributes that cause behaviors (object oriented programming) rather than a straight list of commands. In this case the behavior is walking the direction of the pressed keypad arrow.
• A lot of the code is playing with variables, kind of memory boxes for the program, and some of the code is Actionscript commands: hardwired, so to speak. You don’t want to pick a variable that’s got the same name as Actionscript commands.
• Be case-sensitive with you variables, even though it may work if you aren’t.

Make a new layer in the timeline called WalkerObject, click on the first frame and open the Actions window (f9 or Window->Development Panel) and paste in this code:
function WalkerObject()
{
//Set how fast you want the walker to walk
    this.speed = 3;
//Specify that the mc refered to later is the movie clip you named walkerGraphic
    this.mc = _root.walkerGraphic;
//this variable keeps track of which way the walker is facing when he’s not walking
    this.facingDir = 3;//0=left, 1=down, 2=right, 3=up
//this variable keeps track of whether the walker is in motion or not
    this.standing = true;

//this starts our walker in a standing position
    this.mc.gotoAndPlay("stand_fw");
   
    this.Update = function()
    {

       
//an else if loop that checks to see if keys are being pressed this frame
        if(Key.isDown( Key.UP ))
        {
//this takes care of the actual movement across the screen by calling a function "Move" below
            this.Move(0, -this.speed);
//if the facing direction is not up or right, and the walker isn’t standing…
            if((this.facingDir < 2) || this.standing)
            {
//…play the movie clip move_bw
                var str = "move_bw";
                this.mc.gotoAndPlay(str);               
            }
//this establishes the facing dir is 3, so it doesn’t need to keep playing the move_bw (it already loops)
            this.facingDir = 3;
            this.standing = false;
        }
//similarly, the other three keypresses are given appropriate behaviors
        else if(Key.isDown( Key.DOWN ))
        {
            this.Move(0, this.speed);
           
            if((2 <= this.facingDir) || this.standing)
            {
                var str = "move_fw";
                this.mc.gotoAndPlay(str);               
            }           
           
            this.facingDir = 1;
            this.standing = false;
        }
        else if(Key.isDown( Key.LEFT ))
        {
            this.Move(-this.speed, 0);
           
            if((2 <= this.facingDir) || this.standing)
            {
                var str = "move_fw";
                this.mc.gotoAndPlay(str);               
            }   
           
            this.facingDir = 0;
            this.standing = false;
        }
        else if(Key.isDown( Key.RIGHT ))
        {
            this.Move(this.speed, 0);
           
            if((this.facingDir < 2) || this.standing)
            {
                var str = "move_bw";
                this.mc.gotoAndPlay(str);               
            }           
            this.facingDir = 2;
            this.standing = false;
        }
        else
        {
//this makes the walker stand in the same direction as he last walked
            if(!this.standing)
            {
                var dirState = "f";//f=front, b=back
                if(2 <= this.facingDir)
                {
                    dirState = "b";
                }
               
                var str = "stand_" + dirState + "w";
                this.mc.gotoAndPlay(str);
       
                this.standing = true;       
            }
           
        }
    }
// this moves the graphic appropriately along the x and y coordinates   
    this.Move = function(x,y)
    {
        this.mc._x = this.mc._x + x;
        this.mc._y = this.mc._y + y;
    }
   
}

(Read through it carefully, you won’t learn much if you just cut and paste it.)

You should see a lowercase a on the frame if in the timeline if you did it right.

Finally, make a new layer called main loop (the loop that runs every frame) click on the first frame and open the Actions window (f9 or Window->Development Panel) and paste in this code:

//create a player
player1_walker = new WalkerObject();

//this is the main game loop
_root.onEnterFrame = function()
{

player1_walker.Update();
}

To test your man of clay, press f12. Make sure you click your walker (the browser sometimes doesn’t know your keyboard input is for the Flash) and try the arrow keys. It probably doesn’t work, mine sure didn’t, but the error messages will often give you a good clue.

Happy debugging!

If you get real frustrated, you can also download the .fla I made and compare it with your creation.