Tutorial 4 – Buttons!

Part 1 – Flash Professional

So now we get to the meat of the game – interacting with objects. As stated earlier, much of this can be done within our uber-function.

First, though, we need to make ourselves an inventory to store items that the player will collect. Since there are only a limited amount of objects the player can collect, and most, if not all, will be disposed of once they’re used, having three inventory slots will suffice. We also need a dynamic text box to display text when a player clicks on something. So we’ll end up with something like this:

Where the three circles are inventory slots (button symbols), named slot1, slot2, and slot3 starting from the left, and the dotted rectangle is a dynamic text box with an instance name of ‘situation’. The grey rectangle that stores the HUD is a simple rectangle made into a graphic symbol, and placed behind everything else. Furthermore, put them all in a Movie Clip symbol with an instance name of hud. Note that the circles have fill, but Alpha is set to 0%. This renders the fill invisible. What we are going to do is to put the items beneath the circles because the circle will be a button. With the fill invisible, we can still see the items underneath. Make sure the complete HUD is on frames 2-6 – you can either place it in each of those frames, or create a new layer on the timeline for the HUD and place it on one keyframe spanning frames 2-6. Make sure the layer is above the previously existing layer. You may also need to adjust the size of some stuff to make room for this HUD. I had to make some changes from Tut. 3 to do this. Also, feel free to deviate from my HUD design, as long as the necessary things are in place.

So now, we’ll go around our game naming all the unnamed button symbols. On Frame 2, name the door… door. On frame 3, name the top drawer and bottom door topDrawer and bottomDrawer respectively, the window windowTwo, the computer computer, and the monkey wrench monkeyWrench. For frame 4, name the portrait portrait, the grate grate, and the safe safe. For frame 5, name the picture picture, the bookcase bookcase, and the red book redBook. For frame 6, name the key doorKey.

Ok, now that we’ve set our buttons, we can go back to code and set the messages for when you click objects. We’re not focusing on actually picking up objects yet. So at the bottom of our if statement in our uber-function on Frame 2, insert

} else if (e.target.name == "windowOne"){
gotoAndStop(6);
} else if (e.target.name == "downButton"){
gotoAndStop(4);
} else if (e.target.name == "door"){
hud.situation.text = "The door is locked! Where's the key?!";
} else if (e.target.name == "topDrawer"){
hud.situation.text = "The drawer is locked. It also needs a key.";
} else if (e.target.name == "bottomDrawer"){
hud.situation.text = "The drawer is locked. It also needs a key.";
} else if (e.target.name == "windowTwo"){
hud.situation.text = "It is a window. There's nothing of note about it.";
} else if (e.target.name == "computer"){
hud.situation.text = "It's a computer. It's not plugged in - you don't think it would help anyway.";
} else if (e.target.name == "monkeyWrench"){
hud.situation.text = "Hmm, a monkey wrench. Will this come in handy?";
} else if (e.target.name == "portrait"){
hud.situation.text = "A portrait. Looking good!";
} else if (e.target.name == "grate"){
hud.situation.text = "It's a grate, which is great! Won't help, though.";
} else if (e.target.name == "safe"){
//Insert code popup here
} else if (e.target.name == "picture"){
hud.situation.text = "A nice picture.";
} else if (e.target.name == "bookcase"){
hud.situation.text = "Lots of books on the top shelf.";
} else if (e.target.name == "redBook"){
hud.situation.text = "This book has a slip of paper in it... 932? What's that supposed to mean?";
} else if (e.target.name == "doorKey"){
hud.situation.text = "The key for the door! But... it's out of reach!";
}

We put in the comment for the safe because then a little popup will come up where you can enter a code.

Now we create a symbol to represent all the items we can have our inventory. Create a new movie clip symbol. On frame 1, there will be nothing (to signify no items). However, put stop(); in the actions panel here. On frame 2, copy the door key. Make sure it has no instance name (although it probably won’t be a problem if it has one). On frame 3, copy the key again. This time, make it a different color by messing with the color effects in the property inspector. On frame 4, put the monkey wrench. On frame 5, draw a coat hangar. On frame 6, draw the monkey wrench and the coat hanger so the monkey wrench is attached to the bottom of the hangar. The general idea is to make it so it can extend your reach, helping you to pick up the door key’s key ring.

Then, go back and place this new item inventory symbol underneath each of the inventory circles in your HUD symbol. Name them item1, item2, and item3 in the same way the slots were named. Make sure the item instances are ABOVE the background, but BELOW the slot instances.

Okay, that’s enough for now. The next tutorial should be the last! The source code of everything we’ve done so far is here: Download (217 KB)