Multimedia Web Programming using Flash and ActionScript
ITApps 2010-11
HO7: Conditional Statements – A Simple Guessing Game
Objectives
•
To learn more about conditional statements and extend your understanding of
programming in Flash and ActionScript.
Conditional Statements – If and If Else
You have already used simple 'If' and 'Switch' statements in the previous handson exercise.
Here you will use them to create a simple game that requires the user to 'guess' a number. If
the user guesses correctly the game will return a message saying 'Well done, you have
guessed correctly!'.
If Statements
An If statement comprises two arguments:
•
A Condition: which is either true or false, for example the condition would be true if the
user guesses the number correctly, otherwise it would be false.
•
An Action or Response: the instructions to be executed if the condition is true. If the
condition is false then ActionScript will execute the next statement outside the block of
code.
The syntax for an If Statement is:
if (condition) {
do action1;
}
If Else Statements
The syntax for an if else statement is:
if (condition) {
do action1;
}
else{
do action2;
}
The says that if the condition is true, action1 will run, but if it is false action2 will run.
Random Numbers
Flash has built in methods that can generate random numbers. Math.random(), for example,
will generate a random number similar to 0.5659644291736186. Enter the following code in the
Actions panel and press Ctrl+Enter to see the result:
var randNo1:Number = Math.random();
trace(randNo1);
However, there isn't much you can do with such a number. So to make it more useful you can
add the Math.ceil() method to the random number. The Math.ceil method rounds the number
inside the parentheses to the highest whole number, and since math random only generates a
number less then zero, the number produced will always be one. Enter the following code in
the Actions panel and press Ctrl+Enter to see the result:
var randNo2:Number = Math.ceil(Math.random());
trace(randNo2);
There is one more thing that you need to do in order to generate a random number between 1
and 10 – multiply the random number by a whole number, in this case 10. Enter the following
code in the Actions panel and press Ctrl+Enter to see the result:
HO7: Conditional Statements – A Simple Guessing Game
Page 1 of 4
Multimedia Web Programming using Flash and ActionScript
ITApps 2010-11
var randNo3:Number = Math.ceil(Math.random()*10);
trace(randNo3);
This equation will generate a random number between 1 and 10. The multiplier is the key, if
you want to generate a random number between 1 and 100 you would simple change the 10 to
100.
A Simple Guessing Game
There are essentially three elements to the guessing game: (i) an input field where the user
can type their guess, (ii) a button for the user to submit their guess and (iii) a dynamic text field
where you display the result/outcome of the guess.
1. Open Flash and create a new document called mpho7A.fla.
2. Modify the document so that it is 400 x 250 pixels in dimension.
3. Create four layers called: actions, buttons, static text and user text.
4. Select frame 1 of the static text layer and drag out a text field on the stage. In the
Properties Panel choose Static Text from the drop-down menu and enter a heading for
this exercise, eg. 'Guess a Number Game.'
5. Create two more static text boxes, containing the text: (i) "Guess a Number Between 1
and 10" and (ii) "Enter your Guess Here:", similar to that shown below.
6. Select frame 1 of the user text layer and create an Input Text box next to the 'Enter
your guess here' static text box. Setting the instance name to: 'myGuess_txt' (you will
use the input text box for the user to enter their guess) and selecting the option that
shows a border around the text.
7. Still in frame 1 of the user text layer, create a Dynamic Text box, setting the instance
name to: 'myResult_txt' (you will use this dynamic text box to display whether the user
has guessed correctly).
8. Select frame 1 of the button layer and create a simple button, with the text label:
"Submit my Guess" and instance name: myGuess_btn:
9. The next step is to add an event handler to the button. This needs to do a number of
things: (i) generate a random number between 1 and 10, (ii) compare the random
HO7: Conditional Statements – A Simple Guessing Game
Page 2 of 4
Multimedia Web Programming using Flash and ActionScript
ITApps 2010-11
number with the user's guess, and (iii) output a message that tells the user whether
their guess was correct or not.
10. Select frame 1 of the actions layer and building on what you learnt in the previous
handson exercises enter ActionScript code that will perform these actions.
11. Your code should look similar to that shown below and involves the use of the ==
operator to check whether the value of the user's guess is the same as the randomly
generated number. If the numbers are the same the If statement returns the “Well
done... “ message, but if they aren't the same the Else statement returns the “Sorry...”
message:
12. Once you have entered the code, save your work and then test your movie to check
that it functions correctly:
13. Save your file as mpho7B.fla and think about how you can improve the game by:
nd
z Adding a 2 button that resets the input and dynamic text boxes.
z Adding keyboard event listeners that: (i) run the game when the Enter/Return
key is pressed, (ii) reset the input and dynamic text boxes when the Delete key
is pressed.
14. Enter appropriate ActionScript code and then try out the game.
Code Examples
Click here to download the completed ho-file (mpho7A)
HO7: Conditional Statements – A Simple Guessing Game
Page 3 of 4
Multimedia Web Programming using Flash and ActionScript
ITApps 2010-11
Other Examples:
Work through the following tutorials:
• A Number Guessing Game in AS3: http://www.ilike2flash.com/2009/12/numberguessing-game-in-as3.html
• A Letter Guessing Game in AS3: http://www.ilike2flash.com/2010/11/letter-guessinggame-in-as3.html
Research
Compile a list of the ActionScript terms used in this ho-exercise and carry out research to
clarify your understanding of the terms and concepts (Random Numbers, If and If Else, etc)
covered and to find other examples to try out.
Additional Reading and Resources
•
•
•
•
•
AS3 Basics – IF Statements: http://www.wuup.co.uk/as3-basics-if-statements
Conditional Statements in AS3:
http://www.republicofcode.com/tutorials/flash/as3conditionals/
AS3 - Conditional Statements: Switch Versus If/Else if/Else:
http://flashspeaksactionscript.com/conditional-statements/
Conditional Statements in AS3: http://www.kirupa.com/forum/showthread.php?337629Conditional-statements-in-AS3
IF and Else Statements: http://www.kirupa.com/developer/actionscript/ifelse.htm
HO7: Conditional Statements – A Simple Guessing Game
Page 4 of 4