Word Game

The aim of the tutorial is to learn how to create a simple word game. You will create an input box which will give different results depending on what is typed. The code for this is quite straight forward and has many uses other than this word game. For example forms and password controls.

Step one: Text Input Box

1. With the text tool selected drag out a small text box on the main stage.
   
2. Go to: Window > Properties
   
   
3. Select: Input Text  
   
4. Select your: Font, Font Style, Size and Colour
   
   
   
   
5. Select: Left/Top Justify
   
   
6. If your Property Inspector is in collapsed view, click on the down arrow in the bottom right corner of the Property Inspector to expand the panel. If you have an up arrow the Inspector is already expanded.
   
   
7. For line type select: Single Line
   
   
8. Input text should be Selectable. You do not need to switch it on as input text is always selectable.
   
   
9. Select: Show Borders Around Text   
   
   
10. For Variable name type: answers   
    
    Important: Do not use an instance name only a variable name.
    
    
11. For Maximum Characters type: 12
    
    
12. Click on the Character button and select: Only > Lower Case
    
    
    
    Note: If you do not restrict the case to lower case (or capitals) you will find that the input box is case sensitive so if someone types Rooster (instead of rooster) the answer is incorrect.
    
    
    

    When you have finished your Property Inspector should look like this. (Click to enlarge)

Step Two: Making the Text Input Box Blank

You do this so that when you play the game the text field is always empty. For example if you get the wrong answer and try again the text field will reset to a blank box.

1. Place the following action in the frame 1 of the timeline (the same frame as your text box):
   
   answer = "" ;
   
   Note: If your text input box is not called answer type the name that you used instead of 'answer'.

Step Three: Placing the ActionScript in the button

1. Place a button next to the text box.
   Either create your own or drag one out of the Button Library: Window > Common Library > Buttons
   



my button


2. Attach the following code to the button:
   
   

   on ( release , keyPress "<Enter>" ) { if (answer eq "rooster" or answer eq "cockerel" ) {        gotoAndPlay ( "win" );     } else if (answer eq "hen" or answer eq "chicken" ) { gotoAndStop ( "boy" );     } else { gotoAndStop ( "wrong" );     } }

Line 1: on (release, keyPress "<Enter>") {
On the mouse click or if you press Enter on the keyboard and ...

Line 2: if (answer eq "rooster" or answer eq "cockerel") {
If the the text input box called answer is rooster or cockerel then ...

Line 3: gotoAndPlay ("win");
Go to the frame labeled win.

Line 4: } else if (answer eq "hen" or answer eq "chicken) {
If the the text input box called answer is hen or chicken then ...

Line 5: gotoAndStop ("boy");
Go to the frame labeled boy.

Line 6: } else {
This has not got a (answer = "word") which means that whatever is typed (other than the specified words above) then ...

Line 7: gotoAndStop ("wrong");
Go to the frame labeled wrong

Note: If you have specified lower case as the input text value then the words "rooster" , "chicken" etc. must be typed in the code as lower case and visa versa if you have typed them in upper case.

Step Four: Creating the additional frames

You must create the frames which the buttons go to. These frames should have buttons which bring you back to play area of the game so that the user can try again.

Note the labels in the timeline

The label 'wrong' has been typed into the Property Inspector (Click to enlarge)

Your word game should soon be working a treat.