Home Guess The Number Game Create The Interface
Create The Interface PDF Print E-mail
Written by Geoff Hill   
Thursday, 01 April 2010 10:58

Open a new flash document and set your preferred scene dimensions. This lesson is all about creating a functional interface, no time is spent on layout and design, you are expected to work that out for yourself.

The dynamic and input boxes will have instance names set in the properties panel. The instance names will be used by actionscript to update and collect data so it is very important to get these correct or the game will not work.

1. Static Text Labels.

Use the text tool to create the static text labels for the interface. Remember you can always move them or change the colour later.

Static Text Properties

NOTE: When creating static text, there is a circle in the top right corner of the text box you are creating and 'Static Text' is displayed in the properties panel.

When finished typing the labels, ensure none are selected (highlighted in blue) before proceeding to the next step or you may have a few problems when testing the game later.

2. Dynamic Text Boxes.

Dynamic text boxes will be used to display the message (feedback) and total number of guesses the player has had.

2.1 The Message Box.

With the text tool selected, change the properties panel to 'Dynamic Text', multiline, and draw a box on the screen to hold instructions and feedback that will be displayed to the user. When finished, type the word "display" as the Instance Name. Compare your properties panel with the one shown above.

NOTE: When creating dynamic text boxes there is a square in the bottom right corner of the text box being created and the properties panel is different to static text.

2.2 The Total Guesses Box.

Dynamic Text Total Guesses

Create a second dynamic text box on the screen to display the total number of guesses. Set it's properties to "Single line" and give it the instance name of "guesses" as shown above. Ensure no text boxes are selected before proceeding to the next step.

3. Input Text Box

An input text box will be used to collect the number guessed by the player.

Input Text box

Create a new text box. Set the properties to "Input Text", Single line and give it an instance name of guess as shown above.

4. The Button.

If you don't have a button handy, go to the Insert menu, select New Symbol, click type: Button and give it the Name button. When you see the Button symbol screen draw a circle, square or rectangle to use as a button then return to the main Scene by clicking on Scene above the timeline.

Drag the button from the library onto the scene and give it an Instance name of "btn" in the properties panel, see below.

Game play button

Check that all Dynamic text boxes, the Input box and the Button have the correct instance names, then Save the game. It won't do anything yet so no point in testing it.

Summary:

In this part of the lesson you have created the game interface using Static, Dynamic and Input text plus a button.

The dynamic and input text boxes require instance names so that actionscript can update/change the dynamic text and collect input from the user.

The button also requires an instance name so that actionscript can attach a function to it that will collect the input and provide feedback to the user.

Last Updated on Thursday, 01 April 2010 11:01
 
Copyright © 2012 geoffhill.com.au. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.