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.

Click play and try typing: hen, chicken, rooster, cockerel and also a misspelling.

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.

    Click to enlarge
    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

  2. my button

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

You create a frame label by selecting the frame and typing the name into the Property Inspector .

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

Your word game should soon be working a treat.


Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction