Creating a Hangman Game in Flash
By Dr Diablo | Flash CS3 | Beginner | Page 1, 2We created all the graphical elements of our game in the previous section. We are going to code the game now, but before we do that, we need to convert all of our interactive assets into symbols and assign instance names to them in order to be able to control them via ActionScript. Our hangman animation is not really interactive as it will use frames to develop the animation. However, the letter buttons and the answer word will react in an interactive manner to our actions. So we need to convert these to a movie clip.
Converting our Letters to Movie Clip Symbols
We need to add unique commands to each of our letters, so we need to Break Up the text into these letters. Click on the alphabetical set of letters to select them and then press Ctrl+B to break the text apart into separate characters.
Next we need to convert each of these letters into a Movie Clip Symbol to be able to manipulate them using ActionScript later. We will need to convert them one at a time, so click on the first letter to select it, then press F8, select Movie Clip and then click OK. (the Symbol Name does not matter, you can let Flash create automatic names for this)
You will need to repeat this process for each of the letters.
When you are done working with the letter buttons, you will need to create symbols out of each answer characters. Start off by breaking the answer characters by selecting the word and pressing Ctrl+B, then select the letters one at a time and convert them to a Movie Clip symbol by pressing F8.
The mere fact that our letters have been converted to symbols will not let us control them via ActionScript. We will need to also assign an Instance Name to them to be able to refer to them using ActionScript. To assign an Instance Name to any symbol you will need to select that object and then access the Properties Inspector and set the name in the Instance Name field in there.
We are going to do this for ALL of the letters that we have on stage.
Start off with the button letters, select the letter A, then access the Properties Inspector and set the Instance Name to a_btn. Now select the letter B, then access the Properties Inspector and set the Instance Name to b_btn. You will need to repeat this process to all letter buttons and make sure that you name them in the same format we used (character_btn).
Once you are done we will move to the answer characters, select the first O character and assign the instance name okey to it, then assign to the D letter the instance name of dkey, the first Y an instance name of ykey, the first S an instance name of skey, the second S an instance name of s2key, the E an instance name of ekey, and the second Y and instance name of y2key.
We are now done assigning instance names to all of our objects on stage and can finally start coding. Create a new layer on your timeline, name it Actions then right-click the only frame on this layer and select Actions to open up the Actions Panel, all of our code will be written in this window.
Coding the Hangman Game
The concept of our code is pretty simple, when we start the game we will hide all of our answer characters, if the user clicks on a wrong letter the movie will simply go to the next frame, if the user reaches the game over frame the game ends. If the user clicks on a right letter the corresponding answer character will become visible, the button will also check if all the right characters are visible at that moment, if they are so the game will go to the congratulations scene.
We are going to do this step by step. First of all, we need to stop our movie from playing the rest of the hangman animation. So we will just use a stop() method to do this:
We then need to make all of our answer characters hidden by setting their _visible property to false:
dkey._visible=false;
ykey._visible=false;
skey._visible=false;
s2key._visible=false;
ekey._visible=false;
y2key._visible=false;
We now need to make all our the letter buttons that have a wrong answer simply do a nextFrame() method and then set their own visibility to false. The long way of doing this would be to write down the letters one by one for all of the wrong answers so that they will look something like this: (DON'T COPY THE CODE BELOW)
a_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
b_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
c_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
f_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
g_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
h_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
i_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
j_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
k_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
l_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
m_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
n_btn.onRelease = function() {
nextFrame()
this._visible = false;
}
And that's not even half of it. So, to make life easier, we are going to use an array to hold all the wrong letters, and then we will use a loop, which is a script tool used to repeat code dynamically, to assign the same code to these buttons:
for (i = 0; i < wrongletters.length; i++) {
my_btn = _root[wrongletters[i] + "_btn"];
my_btn.onRelease = function() {
nextFrame();
this._visible = false;
};
}
All of our wrong letter code has now been written. We need to write the code for our right letters. The right letter code will have three basic functions:
- Show the equivalent answer character.
- Check if all the right answer letters have been found, if so finish the game.
- Hide the letter so that the user does not press it again.
We can use an array and a loop for this part again, but because some letters are supposed to show more than one character that can be complicated, the number of letters is also small, so we might as well just do this the old school way.
okey._visible = true;
this._visible = false;
};
d_btn.onRelease = function() {
dkey._visible = true;
this._visible = false;
};
y_btn.onRelease = function() {
ykey._visible = true;
y2key._visible = true;
this._visible = false;
};
s_btn.onRelease = function() {
skey._visible = true;
s2key._visible = true;
this._visible = false;
};
e_btn.onRelease = function() {
ekey._visible = true;
this._visible = false;
};
You might have noticed that we did not do anything about checking if all the answer letters have been found. This code will be identical for all of these buttons, if we would like to store a set of code that we can use later then we use a Function. Our function will simply check if all the answer characters are visible using a Conditional. If our function confirms that all of our right answer letters are visible it will take us to the congratulations screen, which is found in our game at Frame 8.
if (okey._visible && dkey._visible && ykey._visible && y2key._visible && skey._visible && s2key._visible && ekey._visible) {
gotoAndStop(8);
}
}
We can now simply call this function from within our previous right-answer buttons this way:
okey._visible = true;
this._visible = false;
checkAnswers();
};
d_btn.onRelease = function() {
dkey._visible = true;
this._visible = false;
checkAnswers();
};
y_btn.onRelease = function() {
ykey._visible = true;
y2key._visible = true;
this._visible = false;
checkAnswers();
};
s_btn.onRelease = function() {
skey._visible = true;
s2key._visible = true;
this._visible = false;
checkAnswers();
};
e_btn.onRelease = function() {
ekey._visible = true;
this._visible = false;
checkAnswers();
};
That completes our code for the game. Your code show now look like this:
okey._visible = false;
dkey._visible = false;
ykey._visible = false;
skey._visible = false;
s2key._visible = false;
ekey._visible = false;
y2key._visible = false;
var wrongletters:Array = ["a", "b", "c", "f", "g", "h", "i", "j", "k", "l", "m", "n", "p", "q", "r", "t", "u", "v", "w", "x", "z"];
for (i = 0; i < wrongletters.length; i++) {
my_btn = _root[wrongletters[i] + "_btn"];
my_btn.onRelease = function() {
nextFrame();
this._visible = false;
};
}
o_btn.onRelease = function() {
okey._visible = true;
this._visible = false;
checkAnswers();
};
d_btn.onRelease = function() {
dkey._visible = true;
this._visible = false;
checkAnswers();
};
y_btn.onRelease = function() {
ykey._visible = true;
y2key._visible = true;
this._visible = false;
checkAnswers();
};
s_btn.onRelease = function() {
skey._visible = true;
s2key._visible = true;
this._visible = false;
checkAnswers();
};
e_btn.onRelease = function() {
ekey._visible = true;
this._visible = false;
checkAnswers();
};
function checkAnswers() {
if (okey._visible && dkey._visible && ykey._visible && y2key._visible && skey._visible && s2key._visible && ekey._visible) {
gotoAndStop(8);
}
}
Our game is practically done. However, you might want to allow the user to restart the game if he wins or loses. To do this, you will have to close the Action Panel, access the Game Over frame, convert the retry text to a Movie Clip Symbol, then assign the instance name again_btn to it. Then Right-Click that frame on the Actions layer and Insert a Blank Keyframe. Open the Actions layer now and use this simple gotoAndPlay() method:
gotoAndPlay(1);
}
Close the Actions panel and repeat the same exact process, you can even use the same Instance Name for your button, then after your Insert a Blank Keyframe on your Actions layer, use this code to make your button restart the game:
gotoAndPlay(1);
}
This finally completes our hangman game! Press Ctrl+Enter to test the game.
You can download the final Source FLA file from here. This concludes our tutorial, I hope that you've learnt something new from it, feel free to email me on diablo@republicofcode.com for any comments or questions or alternatively post in the Oman3D Forum to get instant feedback
- End of Tutorial.