Creating a Hangman Game in Flash
By Dr Diablo | Flash CS3 | ActionScript 1/2 | Intermmediate | Page 1, 2This tutorial is going to teach you how to create the popular paper and pen game, hangman! You are going to learn how to create a one time hangman round in flash using basic actionscript techniques and the 'if' conditional statement. Check the Flash movie below to see the end result of our tutorial.
Our tutorial is going to be divided into the following sections:
- Setting up the stage and basic graphical assets.
- Creating the game timeline sequence.
- Coding the game.
Setting Up the Stage
To start off open up Flash and create a new ActionScript 2.0 Flash File and set its dimensions to 550x300 px, the frame rate to 32 and the background to white.
Our stage is going to have three basic elements:
- The letter selection part, where you can click the letter you wish to use.
- The 'right-answer' field on which the correct letters will pop-up if you click on a correct letter.
- The hanger diagram that will indicate how many guesses you made were wrong.
We are going to start off with the letter selection block. Grab the Text Tool from the Tools Panel on the left part of the screen. Then access the Properties Inspector and set the Text Options in accordance to the screen shot below. Note that We have set the distance between each character to 20px - we have done this to make it easier to select a specific letter.
Now start typing the English alphabet and make sure that you go down a line while typing to be able to fit the letters horizontally inside the stage. Once you are done, position your block of letters to the bottom center of your stage.
Create a New Layer by going through Insert>Timeline>Layer. (You can double-click the name of the layer and name it "Answer", you can also now name the first layer "Letters"). Using the same method, type out the right-answer word. For the sake of following this tutorial, I suggest that you use the same word I used ODYSSEY. You will need to reduce the Character Distance a bit to make it look better. Position the word to the left side of the stage as shown in the image below.
Using the Line Tool from the Tools Panel, draw 3px thick horizontal lines under every letter of the answer word as shown below.
.
Finally, create a new layer by going through Insert>Timeline>New Layer, name it Hanger, then use the Pen Tool to draw only the hanger without the little man as shown in the image below.
Creating the Game's Timeline Sequence
This part is going to challenge your drawing skills in Flash! We are going to create multiple frames on the timeline where each one is going to represent the progression of the hanging process. After our animation is completed, we are going to have a 'Win Congratulation" screen or a "Loss Game Over" screen. Both of these last two frames will have a retry button to start the game all over again.
We now have three layers on our timeline, the contents of our Letters and Answers layers are not going to change throughout the animation. So we are going to leave these the way they are now and will just work on the Hanger layer. Our Hanger layer is going to have a unique keyframe in each frame representing the change in the animation. So start off by right-clicking the second frame of the Hanger layer and selecting Insert Keyframe. This should duplicate the content of the first frame onto the second, simply draw the head of the stickman on this frame.
We will need to repeat this process (Insert Keyframe then Draw) to create the remaining body parts each on a separate frame. Here is the sequence I came up with.
You need to make sure that you do NOT complete the drawing, the complete drawing screen is the "Game Over" screen. Instead, when you have all the drawing ready, except the last one that shall complete the drawing, go back to the other two layers and expand their single frame all the way to the same number of frames you have in your Hanger layer. You can do that by right-clicking the frame to which you want your layer to expand to and select Insert Frame. Do this for both of the Letters and Answer layers.
The previous step should make our letters and answer visible throughout the game. All of our in-game graphics are now set. We need to create the "Game Over" and the "Congratulations" screens.
Starting off with the bad news, simply insert another keyframe in our Hanger layer by right clicking the required frame slot and selecting Insert Keyframe. That will duplicate the content of the previous frame. Complete the drawing of the stickman and then use the Text Tool to write Game Over and then Retry? in two separate text fields.
Insert another Keyframe on the same layer, then change the drawing to show the stickman happily floating and write Congratulations instead of Game Over.
Our timeline should now look like this:
We have created all the necessary visual elements of our hangman game. We are going to code the game in the next page.
- Next Page.