Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this detailed lesson made for Flash 8 and ActionScript 2.0, I will show you how to create a completely dynamic hangman game. This lesson is intended for intermediate or advanced users of ActionScript. If you are completely new to ActionScript, I suggest that you learn more about ActionScript and come back to this tutorial later. Before continuing with this lesson, you should already know some fundamental ActionScript concepts, such as variables, if/else conditional logic, for loops, function basics, paths, dynamic text fields and movie clip events.
Below is the example of the hangman game. Try it! Click play and then try to guess the hidden word by pressing on different letters.
In this tutorial, I will show you:
So, roll up your sleeves and follow my guidance. Let's go!
1. Open a new Flash document and save it in a new folder — make sure that this folder is completely empty. Only Flash files and data files (text and XML) will be stored inside it. This is a good practice, to avoid confusion. Don't save your Flash file somewhere where there are other .fla files. Keep it clean and simple.
2. Download the zip file that I prepared for you. Unpack it. You will find two files that were inside it: guessword.txt and words.xml. Place both of them in the folder where you saved your new Flash document. If you want, take a look at them now, but really there is no need — I will discuss and explain them in extensive detail later.
3. Back to your Flash document, select Modify > Document to access the Document Proprties panel. In the Dimensions section, enter 500 pixels for both width and height fields. Click OK.
Of course, if you want, you can pick any other dimensions for your Flash movie to suit your needs, but for the sake of simplicity and easier work, make them as I suggested above. These dimensions will make it easier for you to follow this tutorial and place the graphic elements accordingly.
4. Select the Pencil tool (Y). In the Property inspector, choose black for the color, Solid as line type and a line thickness of 5.
5. Draw a hangman, complete with gallows. Its total dimensions (top to bottom, left to right) should be about 130 pixels by 150 pixels.
Pay attention to the following: the drawing should be composed of 9 separate lines, like this:
It isn't strictly necessary to do this, but if you follow my suggestion, you will find the animation work that comes next much easier to follow. Also, if you want, you can make more parts for the hangman: the one used in this lesson is made up of nine parts, which allows the player to make nine errors before the game is over. But I will leave that up to you — decide the level of difficulty that you want to make for this game, and then draw the figure accordingly.
6. No matter how you drew your hangman, do the following now: select the whole drawing with the Selection tool (V).
7. Press F8 (or select Modify > Convert to Symbol) to make a symbol out of this drawing. In the window that shows up, select Movie clip as type, call it hanging sequence and click OK.
8. Position your new movie clip (using the arrow keys or your mouse) in the upper right part of your document.
9. Double-click on the hanging sequence movie clip with the Selection tool (V) to enter inside it. To be sure that you are really inside the movie clip symbol, take a look above the stage, it is clearly written there:
10. Right-click on frame 2 of the only (so far) layer of the movie clip and select Insert Keyframe. Your movie clip's timeline should now look like this:
11. On the keyframe that you have just created, click once on an empty part of the stage to unselect the drawing. Then, select a leg of the figure by clicking on it with the Selection tool (V), and then hit Delete or Backspace to erase it.
12. Insert a new Keyframe in frame 3 of the current layer, just like you did in step 10.
13. Repeat the procedure you did in step 11, this time erasing the second leg of the character.
14. Repeat this procedure, until you have 6 new keyframes, meaning 9 keyframes in total. On each new keyframe you should erase a part of the drawing. The image below shows how the drawing should look like in each of the new keyframes.
15. Once you have finished the previous step, select all the nine keyframes.
16. Now, right-click on any of the selected (blackened) keyframes and select Reverse Frames from the menu that shows up. Apparently, nothing has changed. But wait just a little more, you will see why this was done.
17. With all the keyframes still selected, click on them and move them forward by 1 frame, like the sequence of images below shows:
Ok, let me explain you now why all of this had to be done. When a player begins playing the game, the drawing must not be visible at all, because no mistake has been made yet. And when (if) the first mistake is going to happen, the first part of the drawing — the vertical line of gallows — has to appear.
And that's why you had to reverse the order of the keyframes — you began by drawing the full image, on the first keyframe. That was done because it is much, much easier to create the complete drawing first and then just erase it part by part, until you arrived at a single line. Imagine drawing the entire thing frame by frame: it is a waste of time. By doing as I had laid the procedure out, you save time and just click and delete as you go along.
18. Lock this layer (you are still inside the movie clip, remember) and call it sequence. Make a new layer above it and call it actions.
19. Click on the first (and only) keyframe of the actions layer to select it.
20. Select Window > Actions (shortcut key: F9) to open the Actions panel. Insert the following line of code inside:
stop();
The stop() action will prevent this movie clip from going forward. As you know, all the animations in Flash loop endlessly by default, unless you tell them otherwise via ActionScript. And this movie clip should advance forward only if the player made a mistake. You will make this possible later, when the main code is going to be written.
21. Click on the Scene 1 link above the layers to return to the main scene.
22. The hanging sequence movie clip which you just exited will be selected by default now. Go to the Property inspector and give it the Instance name hangman_mc.
23. Call the current layer (the only one so far) on the main scene hangman and lock it.
You shouldn't see anything inside your document right now, just the empty stage. This is perfectly ok, since the first frame of the hanging sequence movie clip is empty.
Please proceed onto the next page to see how to create the remaining objects in your Flash document.
