Introduction: Creating Your First Game: Part 2: Boundaries and Character Flipping

By www.frankfor.me

In the second part of many Flash tutorials, we'll be looking at how to make our character flip and look either direction he is moving, and add boundaries so we can't move off the screen. In Part 1, we looked into movement, and we'll be making it look so much better.

Step 1: Making the Character Face the Direction He's Moving

What we want the character to do is look the direction he's facing, so, what we need to do is make him have a face. To do this, we must double click on the character. Then, if you notice up above the time line, it says "Scene 1" then a square with a gear in it, then "ball", that means we're inside the movieclip and can change it as we please. To add a face, I just got the brush tool, press "b" on the keyboard. I then went to the colors in the tools panel and you click on the square next to the bucket. I chose color #999999. It's a gray. You can choose whatever color you want, have green eyes and a red mouth, I just went for simplicity. Then draw a mouth and an eye. That's all for the face. Now what we need is to have him facing the other way as well.

Step 2: Flip It!

To flip him, just press F6 on the keyboard and a new frame will show next to the first one. It will automatically put you on the second frame. Now, select the ball, all of him, the eyes and mouth. If you don't know how to do this, click somewhere on the stage, drag the mouse past the ball, and release, you should see lots of dot on the ball. Go up to the top of the screen, click Modify-Transform-Flip Horizontal.
This will make the ball face the other way. Next, select the frame by clicking on it, then open the actions panel by right-clicking on the frame and selecting Actions. Type in the actions panel:

stop();

Do the same for the other frame, whether it be the first or second, it doesn't matter. Just add those actions. You will notice that as soon as you type the code, or anything in the actions panel for a frame, that frame will have an "@" symbol on it. This is just telling you that this frame does in fact have code on it. This code will make the movie clip stay on the frame and not change. Now go to the top where the Scene 1 and the "ball" was, and click the "Scene 1" button. Now you're out of the movie clip.

Step 3: Actually Flipping It...

Now, click on the character and pull up the actions panel. Find where we had put the code for the left and right arrow key actions or the:

if(Key.isDown(Key.LEFT)){
this._x -= speed;
}
if(Key.isDown(Key.RIGHT)){
this._x += speed;
}

Change it to this:

if(Key.isDown(Key.LEFT)){
this.gotoAndStop(2);
this._x -= speed;
}
if(Key.isDown(Key.RIGHT)){
this.gotoAndStop(1);
this._x += speed;
}

This will make the ball stop on the different frames corresponding to the key presses. Test the game and you will see...

Step 4: BORDER PATROL!!!

In this step we'll be adding the code for the boundaries. There are to methods with this being the most time consuming. This gives much better readings though and is less glitchy. I like quality over how fast I can do something. So, go to our character's actions panel (should still be open from last step) and below the last key isDown action, but before the last curly bracket, you'll want to add this:

if(this._x >=510){
this._x -= 10;
}
if(this._x <=30){
this._x += 10;
}
if(this._y >=360){
this._y -= 10;
}
if(this._y <=30){
this._y += 10;
}

This code just states that if the ball's x position is greater than or equal to 510, he stop. Same for the 30, but if it's less than it, it will stop. Same goes for the y position. Remember, negative is up and positive is down. Also, if you decided to change how much the "speed" variable is, you'll need to change all of the += or -= to whatever speed is equal to. If it's less than speed, it will just slow down the ball, if it's more you get an ugly "shot back" effect. Also, these are the settings for if you have a standard 550 x 400 stage. If you don't, you'll have to change them up and it's quite time consuming to get it right. test the game and he should stop right about at th edge of the stage. You can change it as you wish, but that's the best effect I got.

Thanks and I'll see you next time for Multiple Rooms and Setup!