Input and Dynamic Text
Top  Previous  Next


Description
Demonstrates how users can add text to the movie to be used at a later time in the same movie.

Aim
Introduces methods for user input through Input Text fields and storing that information as a variable to be used in dynamic content.


1. Create a new file and save the file as "mywelcome.swi"

2. Insert a Static text object and type in the text "Enter your name:" on the text panel.

scripttute12_1

3. Insert an Input Text object. Name the text field "username" and tick the 'Target' option on the text panel. Delete the default "text". Open the Advanced text options and press the button for a black border and white background panels-object-text-blackborder

scripttute12_2

4. Use the AutoShape tool to draw a 'Rounded Button' below the Input text field. Change its color to Blue on the Shape panel.

scripttute12_3

5. Insert a Static text object with the text "Continue" and place it over top of the Rounded Button. Hold down the CTRL key and click on both the Static text object and the Rounded Button shape to highlight them. Use the Modify menu and select Grouping | Group as Button.

scripttute12_4

6. In the 'Timeline' panel, at Frame 1 add a Place effect for all the objects. Add a 'Stop' - Movie Control | stop() - action on Frame 2 of the Scene_1 row in the 'Timeline'. At Frame 3 for each of the objects add a Remove effect then add another 'Stop' action at Frame 4 of the Scene_1 row. The Timeline should be shown as below:

scripttute12_4a

7. Click on the Eye icon next to each object in the 'Outline' panel to hide them from the stage.

scripttute12_4b

8. Insert a Dynamic text object and name it "message" on the text panel - remember to tick the 'Target' option as well. Open the 'Dimensions' text options and untick the panels-object-text-autosizeheight Auto-Height option. Set it to use 'Lines' rather than 'Height' and enter '2' as the number of lines it should use.

scripttute12_4c

9. In the 'Timeline' panel on the "message" row, insert a Remove effect at Frame 1 and a Place effect at Frame 3. The 'Timeline' panel should be shown as below:

scripttute12_5

10. Select the Button object in the 'Outline' panel then open the 'Script' panel. Press the 'Add Script' button and select Events | Button | on(release) from the menu.

11. Press the 'Add Script' button again and select Statements | name = expr; from the menu. Leave the Target field empty and enter "inputname" into the Name field. Leave the Operator set at "=" then enter "username.text" in the value field. Here we are creating a new Variable named "inputname" that will store the text typed into the Input text field by the user. The 'Script' panel for the Button object should be shown as below:

scripttute12_7

12. Press the 'Add Script' button again and select Movie Control | gotoAndPlay | nextFrameAndPlay() from the menu.

scripttute12_8

Note: It is important that the variable "inputname" be defined before the gotoAndPlay() action is executed.

13. In the 'Timeline' panel, Right-Click at Frame 3 on the row for Scene_1 and select Statements | name = expr; from the list.

scripttute12_9

14. Use the drop-down menu next to the Target field and select the Dynamic text object 'message' from the list. In the Name field use the drop-down menu and select Text | text. Leave the Operator set to "=" and enter the text shown in the image below:

scripttute12_10

Note: The text displayed inside quotes is the static message that will be displayed. Using the "add" is the same as adding one string at the end of another (which is why you enter spaces manually inside quotes). We have added the variable "inputname" which will be entered by the user. The "newline" command will enter a carriage return into the text field (starting a new line).

15. Go back to the 'Layout' panel and press the 'Play' button to preview the movie. Type your name into the input text field then press the Continue button. The welcome message should be displayed with the name you entered.

Note: If you only see one line of text displayed in the Message, you will either need to increase the width of the Dynamic text object or make sure that you have the Auto-Height option turned off and have it set to use 2 Lines of text.

16. Press the 'Stop' button and save your movie.


Analysis
When the 'Play' button is pressed, the movie begins with the Input text field in place. After the 'Continue' button is pressed, the variable "inputname" is created and contains whatever was typed into the Input text field. This variable is then displayed in the Dynamic text field "message".