Making a Beat-Em-Up Fighting Game in Flash: Part TWO

Let's get this guy moving about.

1. On the main Scene 1 timeline again, choose INSERT NEW SYMBOL/MOVIE and call it Rick. This is the main movie that will hold all the mini-clips of Ricks moves. If you correctly made animations of all of Ricks moves, you should have a one frame movie of Rick just standing right. Drag that movie onto the stage, and align it to center. Next, we have to put a stop command in the frame or else it will play automatically every time you Test Movie. So, click on the first frame -NOT ON RICK- and then go into the Actions dialogue. You will know you are in the correct place if you can read Actions - Frame, on the top left. Type in:

stop();

2. Next, with the first frame selected, on the bottom-left where you see a box labelled 'Frame Label' type in stance.

3. Back on to the RICK timeline, select the next frame and hit F7 to enter a blank keyframe. Make sure you're on that frame, and drag the next of Ricks animations into the center. It does not particularly matter in what order they're in, as long as you label each frame. Make sure to keep the animations lined-up with Onion Skinning. Now repeat the process of inserting a blank keyframe on the next timeline frame, dragging another animation in to the center, lining it up and labelling it. Do this for all his animations. When you've finished you'll have about 5 frames in the Rick movie, each with names such as 'standing', 'walking', 'punching', 'crouching', 'crouchkick'.

4. When we're done, exit out to the main timeline, and drag the RICK movie from the library onto the center of the stage. You will have to name this instance of him in order to reference it within ActionScript, so click once on the sprite, and in the bottom left under Movie Clip in the 'instance name' box, type in 'rick_mc'.

If you run the movie now with CTRL/ENTER you should have a still of Rick standing right with no animation. Anything else and you've screwed up somehow and need to double check you've entered stop(); on each animation and that your first mini-movie within the RICK movie is ricks right-stance.

KEYBOARD CONTROL

Go into Scene 1.
In order to manipulate a movie on the stage, we need to use the Key.isDown () function.
Click on the FIRST (and only) frame in Scene1, then open the Actions panel at the bottom. Enter the following code:

rick_mc.step=15;
rick_mc.attack = false;
rick_mc.stance= 1; 
rick_mc.crouch=false;        


this.onEnterFrame = function()
{
	if(rick_mc.attack==false)
	{
		if (Key.isDown (Key.RIGHT) )
		{
			rick_mc._xscale = 100;
			rick_mc.stance=1;
			rick_mc._x+=rick_mc.step;
			rick_mc.gotoAndStop("walk");
		}
		else if (Key.isDown (Key.LEFT) )
		{
			rick_mc._xscale = -100;
			rick_mc.stance=0;
			rick_mc._x-=rick_mc.step;
			rick_mc.gotoAndStop("walk");
		}
	}
}

Be sure that you adjust to code so that it matches the labels you made in the GotoAndStop lines, or else you'll get a Rick that just floats along with no animation. If he doesn't move at all, you didn't give him an instance name.

stance is the control for the direction Rick is facing. 1=Right, 0=Left.
step is the amount of pixels Rick will move when prompted.
attack determines if Rick is in an attacking state or not. We have made it so that Rick can move only when not attacking. rick_mc._xscale = -100; is the magical code I was talking about that automatically flips your movie for you. If you invert the scale by 100, he will flip horizontally.

Making him crouch is also simply another addition to the loop.

else if (Key.isDown (Key.DOWN) )
{
	rick_mc.gotoAndStop("crouch");
	rick_mc.crouch=true;
}

So, if everything is working correctly, you should have yourself mobile Rick you can control using the Right and Left arrow keys. One issue we have here is that he never stops animating once you have pressed a key. What we need to do is to set it so that if nothing is pressed, Rick automatically goes back to doing nothing.

In the attack == false loop, add another else statement.

else if (!Key.isDown () )
{
	rick_mc.gotoAndStop("stance");
	rick_mc.crouch=false;
}

Your code should now look something like this:

rick_mc.step=15;
rick_mc.attack = false;
rick_mc.stance= 1;  
rick_mc.crouch=false;


this.onEnterFrame = function()
{
	if(rick_mc.attack==false)
	{
		if (Key.isDown (Key.RIGHT) )
		{
			rick_mc._xscale = 100;
			rick_mc.stance=1;
			rick_mc._x+=rick_mc.step;
			rick_mc.gotoAndStop("walk");
		}
		else if (Key.isDown (Key.LEFT) )
		{
			rick_mc._xscale = -100;
			rick_mc.stance=0;
			rick_mc._x-=rick_mc.step;
			rick_mc.gotoAndStop("walk");
		}
		else if (Key.isDown (Key.DOWN) )
		{
			rick_mc.gotoAndStop("crouch");
			rick_mc.crouch=true;
		}
		else if (!Key.isDown () )
		{
			rick_mc.gotoAndStop("stance");
			rick_mc.crouch=false;
		}
	}
}

Go ahead, click Rick with the mouse and use the arrow keys to move the wee felly!
Let's move on to create the code to make him punch&kick.