Sunday, 6 July 2008

Using input text

This flash tutorial will teach you about input text. Input text allows the user to enter/input text into a text field. When the user enters a message into the input text field, the message can then be displayed in a dynamic text field via a button selection. The dynamic text field is displayed on a separate scene.

I will be making a simple questionnaire as an example to demonstrate input text. The questionnaire will ask various questions such as favourite drink, favourite colour, favourite food etc. The answers will be displayed on a different scene.

This tutorial will contain three main stages: typing the initial questions, creating the submit button and creating the dynamic text fields to display the output text.

Using input text

Step 1 (initial questions)

Open a new flash document. Select the static text tool (T) and type your questions on the stage. You can use whatever questions you want. Your layout should look something like below:



**Ensure you have enough room on your stage for the input text fields and the submission button.


Step 2

Select the input text tool (T), check border around text icon and drag a rectangle shape opposite your question. And then name the variable name accordingly eg drink, food and colour.




Step 3 (submit button)

Create a basic submit button for your questionnaire with the instance name: sub_btn.If you don’t know how to create a button have a look at this tutorial.
You layout should now look something like below:




Step 4 (display output text)

Insert a new scene by selecting Shift + F2. This will open up the scene window and now select the black plus sign to insert a new scene. Your stage should be completely empty.

Firstly select the static text tool and type following message on the stage. And then use the dynamic text tool to drag a rectangle shape opposite your message. This time uncheck the border around text icon and type the corresponding variable name from previous input text field.




Step 5

Return to the first scene by selecting scene 1 from the scene window. If you do not see the scene window select Shift + F2.

On the timeline insert a new layer called “actions” and right click on the 1st frame and select actions from the drop down menu. And enter the following code:

stop();
sub_btn.onRelease = function() {
gotoAndStop("Scene 2",1 );
};

**This code goes to the second scene upon clicking the submit button.


Step 6

Test your movie clip Ctrl + enter. Now fill in the questionnaire and hit the submit button.



You should now understand how to use input text.

**UPDATE:Using input 2 tutorial now available. This time a message is displayed when the text field is left blank.

5 comments:

TucsonFX 14 November 2008 at 09:17  

What if a field is left blank. How could you have it display:

"I'm sorry I couldn't tell what your favorite drink was!"

Before showing the results of the inputs. Basically disable the submit button until all three fields have information in them,then it would move onto the results.

iliketo 14 November 2008 at 15:16  

@TucsonFx

This tutorial is just a simple example of how you can use input text in flash.

And yes, it is possible to display a message if the field is left blank.

iliketo 29 December 2008 at 05:36  

@TucsonFX

Tutorial now available for when the field is left blank at: Using input text 2

Christopher 5 June 2011 at 13:43  

It is possible to save/store those inputed values locally and retrieve them ?

iliketo 6 June 2011 at 12:38  

@Christoper

Try Local Shared Objects.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP