First, I’d like to apologize for my brief hiatus over the past month — I upgraded to a new computer, and Flash was out of commission for a while. But assuming you haven’t abandoned this site yet, here’s the next part of the side scrolling series.

Last tutorial pretty much finished up the bare-bone mechanics and visuals of a basic platformer. So I figured with this tutorial we’d start adding various extra features to spice up the game. This time, we’re adding a collectible key to the level, as well as a locked door which it will open. This door might be the end of one of your levels, which in turn might load a new level afterwards (although we aren’t coding multiple levels in this tutorial — just the door and key which will allow for this in the future).

Make sure you’ve read up through Part 6 of the series.

Creating the Objects

We need to create:

• A Locked Door
• A Key

The Door

Double-click on the main background object to edit it, then create a new layer on top of the Visuals layer from last tutorial. You can just name it “Other“. This layer isn’t really necessary, but for the sake of organization, this is where we will put any game objects that don’t collide with player and block him (like a wall), but also aren’t only for a visual purpose. We will individually add code for each object in this layer, instead of using a container-object.

Now, I just chose the uppermost platform of my level to be the “end”, which is where I am placing my door. So I drew my door in the “Other Layer”, right on top of the visuals of that platform. I used a combination of the Rectangle Tool, the Circle Tool, and the Transform Tool to draw the following door:

Convert the door into a Movie Clip, which I named LockedDoor, and give it the instance name “lockedDoor“. That’s all set now, except it would be nice to have a separate image of an open door, which we can switch to after the player unlocks it with the key. So double-click the door to edit it. In order to hold multiple images within the same object, we need to add another keyframe to its timeline.

You can do this by using the menu: Insert –> Timeline –> Keyframe.

You can click on Frame 2 in the timeline to make sure you switched to it, and then edit the door to show that it is open. I just filled it in with black on the inside of the door frame.

So, the door is finally done now, right? Wrong.

By default, Flash plays each frame in a Movie Clip object as an animation. If we don’t stop it using code, these two frames will switch back and forth 30 times per second, no matter if the key is collected.

Luckily, the solution is simple! We just use the built-in stop() function. There are two ways we can do this. First, we could go into our main code file on Frame 1 of the main timeline, and add in back.lockedDoor.stop(); at the beginning of the program. But if we end up adding a lot of different objects, that can get a bit complicated. So the easy way out is to add code directly onto the timeline of the door object itself.  Yes, that is within the rules (although it’s considered poor practice to add code that isn’t related to the animation).

Click on frame 1 of the LockedDoor, and go to the Actions Panel. It should be blank.

Add to line 1:

stop();

…that’s it. Done!

The Key

OK, time for the key… this one’s simple.

Go back to the “Other” layer in your background object, and find a good location for the key. Then draw any kind of key you like at that spot. Finally, convert it into a Movie Clip symbol (which I named DoorKey), and give it the instance name: “doorKey“.

We’re all set now to start coding! After adding in the door and the key, my background looks like this:

Programming the Door and Key

Here’s what we want to happen:

• If the player hasn’t collected the key yet, keep checking if he is colliding with it
• But don’t check for collisions between the door and the player if he hasn’t collected the key yet
• When the player does collect the key, hide it from view
• After the player collects the key, if the player collides with the door, unlock the door by changing its frame

By breaking it into steps, we have really simplified what we need to do.

First, let’s create two Boolean variables. Add these right underneath the rest of the variable declarations.

var keyCollected:Boolean = false;
var doorOpen:Boolean = false;

These will keep track of the logic that is going on behind the scenes in the game.

Now, anywhere in the main game loop, start by adding the code that handles the key:

if(keyCollected == false){ // if we still haven't collected the key
if(player.hitTestObject(back.doorKey)){ // and if the player collides with the key
back.doorKey.visible = false; // hide the key from view
keyCollected = true; // set our Boolean to true
}
}

I realize I just combined a few of the steps we outlined earlier, but hopefully it is easy enough to understand. As long as our keyCollected variable is false, we know that the player is still looking for the key, so we run a hitTestObject between the player and the key. If that hitTest is successful, the first thing we do if modify the “visible” property of a key. Every Movie Clip has a “visible” property, which can be used to show or hide an object. Setting it to false doesn’t completely remove the key from the stage — it makes the key invisible. If we wanted to show the key again, we would just set the property to true, and the key would reappear in the same spot.

Finally, we set the keyCollected Boolean to true.

Next, we need to handle the door. Here is the last chunk of code. Add this directly beneath the last code snippet.

if(doorOpen == false){ // if the door hasn't been opened yet
     if(keyCollected == true){ // and if the player has already collected the key
          if(player.hitTestObject(back.lockedDoor)){ // check if the door and the player are touching
               // if all of these conditions are met...
               back.lockedDoor.gotoAndStop(2); // ...switch the door's image to its 2nd frame
               doorOpen = true; // ...set the variable to true
          }
     }
}

This shouldn’t be too had to understand. If the door is still locked, but the player has already collected the key, we keep checking whether the player and the door are colliding. When they do finally collide, we change the door’s image using the built-in gotoAndStop() function on the lockedDoor. This function switches whatever frame number you pass into the function. back.lockedDoor.gotoAndStop(1) wouldn’t do anything, because the door started on frame 1, but back.lockedDoor.gotoAndStop(2) does just what we need to make the door open up.

The last thing we do is set the doorOpen variable to true. This prevents this conditional from running more than once, and we can also use this to make certain things happen after the door is open.

That’s as far as we’re going in this part — try out the demo below to see how the door works:

And here’s the source file.

Enjoy! Sorry again for the lack of recent tutorials — I’ll try to get another one up within the next week to catch up on lost time! :-)

EDIT: Part 8 has been released! Click here to learn how to connect multiple levels with the door from this tutorial.