Flash Explained

Learn Flash easily.

How to make a dynamic hangman game in Flash 8 with XML and ActionScript – part 1 of 4

October 20th, 2008 | Author: Luka | Category: ActionScript

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.

What you will learn in this tutorial

In this tutorial, I will show you:

  • How to create a simple text file from which a single value will be loaded,
  • What is an XML file,
  • How to create an XML file where all the game data (words) will be stored,
  • How to create and use a LoadVars object to load the data from the text file,
  • How to create and use an XML object in ActionScript to retrieve data from the XML file,
  • How to parse the XML data and place it into an Array object,
  • How to dynamically pull out a movie clip from the Library several times and display a different letter in each movie clip instance (this will create the letter buttons),
  • How to create, read data from and manipulate a String object,
  • How to compare two different String objects,
  • How to create a function that will pick a random word that has to be guessed and much more along the way.

So, roll up your sleeves and follow my guidance. Let's go!

Top of page

Preparing the environment

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.

Changing the dimensions of a Flash document.

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.

Top of page

Creating the hangman animation

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.

Selecting the options for the Pencil tool.

5 Draw a hangman, complete with gallows. Its total dimensions (top to bottom, left to right) should be about 130 pixels by 150 pixels.

The hangman drawing along with the dimensions.

Pay attention to the following: the drawing should be composed of 9 separate lines, like this:

The drawing decomposed to its base parts.

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).

All of the drawing has been selected.

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.

The options for a new symbol in Flash.

8 Position your new movie clip (using the arrow keys or your mouse) in the upper right part of your document.

The new position of the newly made movie clip.

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:

The timeline hierarchy of the Flash document.

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:

A second keyframe has been added to the movie clip's timeline.

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.

Erasing a part of the drawing.

12 Insert a new Keyframe in frame 3 of the current layer, just like you did in step 10.

A keyframe was added again.

13 Repeat the procedure you did in step 11, this time erasing the second leg of the character.

A second line is removed from the drawing.

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.

The new keyframes with the drawing as it appears in each one of them.

15 Once you have finished the previous step, select all the nine keyframes.

All the keyframes on the movie clip's timeline are selected.

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:

Moving multiple keyframes.

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.

A new layer has just been inserted inside the movie clip.

19 Click on the first (and only) keyframe of the actions layer to select it.

Selecting the first keyframe of the layer that will contain ActionScript.

20 Select Window > Actions (shortcut key: F9) to open the Actions panel. Insert the following line of code inside:


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.

Returning to the main scene in Flash.

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.

The movie clip has just had an Instance name assigned to it.

23 Call the current layer (the only one so far) on the main scene hangman and lock it.

The first layer on the main timeline in Flash is locked.

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.

Proceed to see how to create the remaining objects in your Flash document.

Top of page

Creating the dynamic text field

24 Make a new layer and call it text field.

The layer for the dynamic text is added.

25 Select the Text tool (T). Pick the following options in the Property inspector (see numbers on the image below):

  1. Choose Dynamic Text on the panel's left side.
  2. Select the generic _sans font type (you will find it at the top of the fonts list).
  3. Select a big font size, around 24.
  4. Pick black as color or any other if you have a specific design for your game in mind.
  5. Select left alignment for the text field.
  6. In the rendering options menu, select the Use device fonts option.
  7. If you don't want the player to be able to select the text in the field, leave the Selectable option turned off.
  8. Your text field should be of the Single line type.

Picking the options for the dynamic text field.

Most of these options are self-explanatory. I just want to point out two options: the _sans generic font type and the Use device fonts rendering option.

The first one is a wise thing to do, because it makes the user's operating system pick the default sans serif font. Basically, this will allow for all users to see almost the same thing. If you had chosen the Arial font for example, some Mac users wouldn't see it. Likewise, if you are working on a Mac and you want to select Helvetica, most Windows users won't see this font, because it doesn't come pre-installed with the operating system. The _sans option automatically selects the default sans serif font on any system.

The Second option, for using the device fonts, means that your final SWF file intended for the Web will be much smaller in size. Had you selected any other option, like Anti-alias for animation or readability for example, you would have to select a non-generic font family and after that, embed the characters in your SWF document. Embedding makes the SWF file larger in size, because Flash must store the vector shape data of the font's characters into itself.

Sure, if you need a specific design with a specific font in mind, you may want to embed the font data into your Flash movie. If you choose this method, every single user will see the font you chose, regardless if it's installed on their system or not.

26 Click and drag out a long text field on the stage, somewhere along its vertical middle point. It should span the whole stage width. When done, press Esc on your keyboard to exit the text field.

The new dynamic text field on the stage in Flash.

Now, you should be aware of a property here: the number of characters that can appear in the text field. If you have made it as wide as I did, with the same characteristics such as font type an size, it should be able to display about 34 characters. Most of the words used in a hangman game don't have such a high letter count, so you should be safe with the text field that you just created.

On the other hand, if you plan to make your game include some less commonly used words, like latin animal species names, words used in science, etc, you should either make your text field (and the size of your document) wider, or pick a smaller font size. If you go for the second option, don't pick a font size that is too small, because the word and the guessed letters must be clearly visible.

27 With the dynamic text field still selected, go again to the Property inspector and give it an Instance name: call it guessWord_txt.

The Instance name of the text field.

That's it for the text field. It's good and ready to be manipulated with via ActionScript.

Top of page

Making the movie clip with a dynamic text field, for runtime manipulation

The title of this section mens the following: you will create a movie clip which will be used at runtime. At runtime means while the SWF movie is running. Instead of creating each letter button (for the player to press — to guess a letter in the word) separately on stage, you will save lots of time by making a single movie clip, and then writing some ActionScript code that will create all the buttons for the entire alphabet.

28 Lock the current layer and make a new one: call it start screen.

A third layer was just created.

This layer will in fact host the starting screen for the game. It is here that you will create the movie clip with the text field, since it will be erased anyway. This movie clip is going to be stored in the Library, so it really isn't necessary to create a separate layer for it.

29 Select the Rectangle tool (R) and draw a 31 by 31 pixel borderless square on the stage. If you prefer buttons with borders, by all means do make a border. Pick any color you like.

A flat color square.

30 Select the square and press F8 to convert it into a symbol. Pay attention to the following: select Movie clip as type and make sure to select the upper left corner for the Registration point. Enter letter button as name and click OK.

Convert to Symbol window.

Selecting this particular registration point will make the positioning of the many letter buttons much easier later.

31 Double-click the newly made movie clip on the stage to enter inside it.

32 Once inside it, call the first layer background and lock it. Make a new layer and call it text field.

Working with layers inside the movie clip.

33 Choose the Text tool (T). In the Property inspector, all the options should be the same as the ones in step 25 of this tutorial, except one: the font size. Make it smaller, change it to 18.

Click and drag over the square and make a text field that covers almost all of it. Press Esc to exit the text field.

The text field inside the movie clip.

34 Go to the left side of the Property inspector and assign an Instance name to the text field: name it letter_txt.

The Instance name option.

35 Click on the Scene 1 link to go back to the main scene and timeline.

Returning to the main timeline.

36 Delete the movie clip that you have just made from the stage. It is stored in the Library, so there is no need to have it on the scene and/or assign it an Instance name. You will pull it out dynamically, thanks to an identifier. You will see how to do just that in a moment.

37 Open the Library if it isn't open already (Window > Library). You will see your letter button movie clip nicely sitting there, along with the hanging sequence movie clip.

38 Right-click on the letter button movie clip and select Linkage from the menu.

The contextual menu of the Flash Library.

39 The Linkage Properties window will appear. Check the Export for ActionScript option. The Export in first frame option will automatically follow. In the Identifier field write letterButton and click OK.

Assigning a linkage identifier to a movie clip in Flash.

This movie clip is now ready to be manipulated via ActionScript, thanks to the Identifier name you gave it and the Export for ActionScript option.

The Export in first frame option means (if checked, like in this case) that this movie clip will begin to load before any other content in your SWF. This can cause problems with large, graphics-intensive movie clips, because if you happen to have a preloader in your SWF, it won't be visible until that particular movie clip has completely loaded. But there is a simple solution to that: make a SWF with just a preloader in it, which in turn loads the main SWF with the movie clip in question inside it. Here, you don't have to worry about that because the letter button movie clip's size is around 180 bytes 🙂 !

Top of page

Creating the game start/game over screen

40 Still in the start screen layer, select the Rectangle tool (R). Draw a big square on the stage, the width and height of which should be about 430 pixels.

A big square, filled with a single color.

41 Convert this square into a Movie clip symbol, call it start screen and click OK. The registration point for this one isn't important.

42 Double-click on the newly made movie clip to enter inside it.

43 Inside the start screen movie clip, call the first layer (containing the square) background and lock it. Make a new layer and call it play button.

Inside the start screen movie clip, a new layer has been added.

44 In this layer, create a 160 by 50 pixel rectangle, with round corners if you like, choosing any colors you like. Place it over the lowest third of the background square and center it horizontally.

The base for the play button has been made.

45 Use the Text tool (T) to write the message "Play!" on top of it. This time, choose any font you like and make sure that you have selected Static text for your text field. This is a design element, not a dynamic one.

The label for the button placed over the background shape.

46 Using the Selection tool (V), select both the rectangle and the text field. Press F8 to convert it into a Movie clip — call it play it again sam or whatever you like 🙂 and click OK.

47 This movie clip will need an Instance name, so that you can tell it via ActionScript what to do when a player presses it. So do just that: name it play_mc.

The Instance name of the movie clip that will be used to start playing the game.

48 Lock the play button layer and make a new one above it, with the name message.

The final layer has been created inside the start screen movie clip symbol.

49 Select the Text tool (T) again. Make sure that you have selected Dynamic text. Make the same choices for this tool as you did earlier in step 25, with one change: select the Multiline option, NOT the Single line one.

50 Create a big text field on the stage, that goes from the top of the background square, down to the play button and spans the square from side to side. Hit Esc to exit the text field. You can see the text field's blue border in the image below.

The big dynamic text field inside the start screen movie clip symbol.

51 This text field will display the welcome message, with a piece of dynamic data inside it, so it needs an Instance name. Call it message_txt.

The Instance name of the text field that will contain the welcome message.

52 Go back to the main scene and give the start screen movie clip the Instance name startScreen_mc.

The Instance name of the start screen movie clip symbol.

53 Lock the start screen layer.

The three layers on the main scene.

Fine! That's it concerning the graphical elements of the hangman game. Whew! 🙂 What follows is pure ActionScript. Go the the next page, to see how to load data into your SWF file using the LoadVars object.

Top of page

Be Sociable, Share!


Submit a comment

  • Camilo Rios Oct 26, 2008 at 2:23 am

    Hi!, great lesson!…I’ll try this, everything works find excepting the “game over” message. it doesn’t appear when the chances are over. I can pick all the letter, even if the hangman is already done. I follow the steps 4 times, i read everything, i did it slowly, but every hangman has the same problem. I don’t know if i’m doing something wrong or what. If you can help me cause i don’t really know what’s wrong

  • Bartamus Oct 30, 2008 at 5:06 pm

    I’m having the same issue; no “game over” message. Other than that, this is a great tutorial! Love it!!!!!

  • Luka Oct 30, 2008 at 6:47 pm

    Camilo, Bartamus: I’ll check it out and correct any possible mistakes or missing steps. Stay tuned 🙂

  • keith Nov 3, 2008 at 12:39 am

    Great job on the game and tutorial. Any chance you can explain how to have one of the answers allow multiple words? I tried and it counts the space as a character that you cannot input. Any help would be greatly appreciated!!

  • Luka Nov 3, 2008 at 8:46 am

    keith: It should require a lengthy explanation. I will explain it, but I don’t have the time at the moment. It shouldn’t be that hard though.

  • peanut Nov 10, 2008 at 7:19 am

    Grest lesson but why “game over” doesn’t appear please help me thx

  • jessica Nov 16, 2008 at 12:24 am

    i love you

  • Luka Nov 18, 2008 at 10:32 am

    peanut: I will look that up as soon as I can.

    jessica: 😉

  • jessheng Nov 26, 2008 at 4:55 am

    hey luka! thanks for this man! it’s really a bigggg help to my project! (: but i have one question thou.. if i need to add a picture to the hangman game for the users to guess instead of just pure words, how do i go about doing it?

  • shane creelman Dec 10, 2008 at 1:48 pm

    hi there Luka i am building your game here and i am having some probelms at the end. the first time i built it the letters didnt appear on the buttons in the game and the second time the start and end screen messages were absent on the welcome page and the play again page with the letters still being missing from the buttons. can you help me out? any help would be greatly appreciated. thank you.

  • Commentor Dec 21, 2008 at 2:26 pm

    This tutorial is great but, there is a problem, a hangman game is no use if the answer isn’t revealed after a player loses.. Can you write it or e-mail it to me, I really need it. Thanks again

  • Jill Feb 5, 2009 at 11:49 pm

    I was wondering how to action script this so there is a short pause at the win or loose of the game before going to the Congratulations or Try again screen.
    You can’t really see the completed word, or the uncompleted last piece of the hangman.

  • […] http://flashexplained.com//actionscript/how-to-make-a-dynamic-hangman-game-in-flash-8-with-xml-and-ac… Condividi: […]

  • […] http://flashexplained.com//actionscript/how-to-make-a-dynamic-hangman-game-in-flash-8-with-xml-and-ac… […]

  • […] FlashExplained he encontrado este tutorial, que si bien está en inglés, se entiende facilito por la cantidad de […]

  • […] FlashExplained he encontrado este tutorial, que si bien está en inglés, se entiende facilito por la cantidad de […]

  • Caleb Mar 3, 2009 at 2:53 pm

    Ok so this didn’t work at all for me. I’m kinda new to flash but the letters didn’t appear on the buttons. I dont know what is wrong. Any tips? Please?

  • Caleb Mar 4, 2009 at 1:42 pm

    And another thing…where do you insert the movie clip for the hanging sequence. I didn’t see it in the script so i assume you have to insert it yourself. But where would i put it? Please any tips would be appreciated. Since i have to have this game done this week. It’s for school. Please help!!

  • Jeff Apr 5, 2009 at 11:02 pm

    I can’t get the code to work for step number 58, why might this be? Other than that though, it seeeeems to be a good tutorial, I just need that last code to make it work

  • Jorge Chávez Apr 11, 2009 at 6:23 pm

    Wow! nice tutorial 🙂 These days I’m learning how to make Flash games for a school project and actually your tutorial really guided me in the right direction. I’m making a flash game similar to the ‘Who has the biggest brain’ when completing math operators.
    I have just finished your tutorial to begin my research on ActionScript, but I have 1 question… What would be different if you had to do this same game (hangman) in ActionScript 3.0? I mean, are the same methods and properties on both ActionScript 2.0 and ActionScript 3.0?
    Also, I would like to learn how to make a timer for a game. Can you give me a hint?

    Thanks again for this excellent tutorial! I have learned a lot of ActionScript with it.

    Take care.

  • daniel Apr 14, 2009 at 6:56 pm

    hello, im a chilean guy and i dont know much english. i want to ask how i can change the topic of the game, because you mention this “If you ever want to change the topic of the game (the type of word to be guessed) and the words, all you will have to do is edit the text and XML files, upload them to your website, and that’s it! , but i dont have any website :/ so.. if you can help please.. how can i do it without a website


  • pelfusion Apr 28, 2009 at 2:02 am

    really nice tutorial i will post it on my blog

  • TrueLuigi Apr 30, 2009 at 6:28 pm

    This is a good tutorial but I am having trouble of getting the letters to show up o my letter buttons + the word that is chosen won’t even show up or show the dots of how many letters there are. I have tried to figure it out but nothing seems to be wrong, I checked it all about twice.

  • quero criar o jogo

  • achei bom

  • Yvonne Wadosch May 20, 2009 at 10:04 am

    Thanks for this tutorial!
    I wanted to make it, but it isn’t working, the start-text and the play button are working, but when i click on the play button there is nothing on the screen anymore.
    could you send me a finished version, to check what i did wrong?

    thank you very much, yvonne

  • ramiro May 20, 2009 at 6:43 pm

    i like it too mucho(:

  • wallace May 27, 2009 at 4:17 pm

    oi vc esta bem

  • kim Wong May 28, 2009 at 2:09 pm


    Can you write all the code in one block, so we can just place it in?

    I can’t get mine to work.

  • Zach Jun 3, 2009 at 11:29 pm

    This really helped out, but since there is so much information in the Actionscript section, it might help if the actual instructions were seperated in some way from the explanations

  • ana Jun 17, 2009 at 10:09 pm

    i have the same code that you have i just change some words to portuguese words but my play botton doesnt works why??

  • Xiong Jun 23, 2009 at 4:52 pm

    To fix the problem with the welcome message (if you can’t display the entire message), I recommend going back to your start screen, then your message, to see if the setting for that dynamic text box is set to multiple lines. I had that problem. It was set to a single line. After I set it to multiple lines, it fixed my problem. If you are having issues with the letters not showing up on your blocks, then I would check out the size that you’ve set for your empty dynamic text box. I had that issue as well. When I readjusted the size of the text box, it fixed it. Hope this helps.

    All best,

  • Vegrax Jun 28, 2009 at 3:13 am

    this is a great tutorial
    well i only have a little problem
    when i click in play nothing happens
    can you help me?

    well sorry for the bad english
    im latin

    well, goodbye

  • kostas Jul 18, 2009 at 6:49 am

    very nice tutorial

  • Ane Caroline Aug 20, 2009 at 2:48 am


    THE LINK TO DOWNLOAD THE FILES: guessword.txt e words.xml



    I started to do the game, but now, almost in the and, I dont have the files…

    Please LUKA help me…

  • canallaamuerte Aug 21, 2009 at 2:01 am

    yanquis putos nnaaaaaaaaaaaaaa mentira muy bueno che. mi primer jueguito y me salio jjeeeeeeeeeeeeeeejejejeje chau o bye bye
    i like chocolate
    i don`t like rice

    jeje lo unico que se de inglish

  • Sabrina Sep 29, 2009 at 12:54 pm

    Hey buddy! how do you get the letter buttons workin, please reply asap

  • Joe Oct 3, 2009 at 7:10 pm

    A great tutorial Luka, complete with detailed and informative explanation.

  • […] explain the principles of XML and its interaction with Flash here, because I already made a detailed explanation of XML in my Hangman game tutorial, and there is no sense repeating it if it’s already written, […]

  • felipe Dec 4, 2009 at 2:08 am

    e otimo

  • freak8969 Dec 6, 2009 at 9:09 pm

    The explanations are way to complicated and it doesnt even work, I wish it was easier to understand! For the action script all I need is a list of what to type not an explanation just one long list and no repeats!!

  • junguo Jan 5, 2010 at 10:16 am


  • […] Make a dynamic hangman game with XML and ActionScript […]

  • andeson Mar 25, 2010 at 5:32 am

    quero criar um jogo de luta um jogo impresionante que as essoas vão babar

  • christoj May 11, 2010 at 1:00 pm

    Nice tutorial Luca

    I really appreciate the time taken to explain the actionscript.

    Xiong’s spot of needing multiline was one error that had crept in for me.

    Another error was that I had my text colour set to the same colour as the background – of course it wouldn’t show up!

    Soon as I changed these two, everything works just fine.

  • Sudeep Acharya May 26, 2010 at 5:03 pm

    It is a perfect articles i will try it soon

  • daniela Jun 5, 2010 at 9:49 pm

    no entendi nada porq no entiendo ingles pero de todas nameras gracias aunq no me sirbio de nada…

  • Dana Jul 7, 2010 at 11:44 pm

    Daniela, stop commenting in spaniish it is inappropriate for us english users, and not nice at all.

  • josh Jul 10, 2010 at 3:44 am

    the main menu starts up put when i press play it go’s the the next screen and there is just a outline and 3 dots outside of the outline. anyone have this problem or knows how to fix it comment and help me out please

  • Anonymous Aug 17, 2010 at 11:24 am

    I like this one. Interesting.

You must log in to post a comment.