Flash Working with Textboxes
syllabus | schedule | assignments | Web Resources | ARTC courses
[Flash Intro]     [Drawing]     [Other Tools]     [Modify/Import]     [Symbols]     [Animation]     [Navigation]     [Publishing]    [Audio]     [ActionScript]     [Textboxes]     [Conditionals/Loops]     [Functions]     [Timing]     [Interaction]    [KeyPressed]    
Text Boxes and ActionScript:
  • Static Text Box: Basic text, can be broken apart and/or tweened. No interactivity involved.
  • Input Text Box: Used for gathering information from an external source: the user.
  • Dynamic Text Box: Used for printing information back to the screen from ActionScript.

To create an INPUT text box:

  1. Draw a box with the type tool.
  2. While the text box is selected on stage, use the drop-down menu in the property inspector to designate its type as INPUT.

EX: Input Text

  1. Choose show border - third icon from single line - to have a 1 px stroke around your text box when the movie is running.
  2. Set an Instance Name to tell the program where you will store the information the user enters: INSTANCE NAME = theInput (theInput is a made up variable name).

Initializing text box:

Input text can be initialized in a frame script so that a message, such as, "type here", appears in the box prompting the user to enter information.

To do so, you need to add some text to theInput.text using ActionScript

    theInput.text = "something"

  1. Create a frame script by choosing the point in the movie where you want to initialize the variable (usually frame one)
  2. Set a BLANK KEYFRAME or add to an existing script
  3. Open the actions panel, type: theinput.text = "enter info here";

EX: Initializing in a frame script

  • Dynamic Text Box: Used for displaying information, visually on screen, back to the user and is created the same way as an INPUT text box. Think of this as the output box.

    EX: Dynamic Text

    • Instance Name can also be declared and initialized just like the INPUT box.
    • In the example above, the dynamic text box Instance Name is called: theOutput.

Input and Dynamic text boxes can be used in tandem for events, such as, storing or checking a user's password. The following is an example of a simple password scheme. Remember this is not secure or hacker proof.

The following image contains (from top):

  1. Static Text Box prompting the user with instructions.
  2. Input Text Box to enter password.
  3. Dynamic Text Box to return a "try again message" if wrong.
  4. Button to trigger the sequence.

    All existing in one frame of the main timeline and on separate layers.

  1. Set the Input Text Box Instance Name = TheInput.
  2. Set the Dynamic Text Box Instance Name = TheOutput.
  3. Create an actions layer and place a BLANK KEYFRAME in the frame that corresponds to your visual elements on stage.
  4. At that blank keyframe, open the Actions panel and type:

    stop(); //pause movie
    theInput.text = ""; //initialize as empty - can put a message here
    theOutput.text = ""; //initialize as empty

  5. Click on button once to select and in Actions panel type:

    on (release){

    if (theInput.text == "password") {

    theOutput.text = "correct!" //or gotoAndPlay(2); or gotoAndStop(2); etc...

    }else{

    theOutput.text = "wrong, try again!"

    }

    }


Storing and retrieve user information:

  1. Create first Input Text Box, Instance Name = input1 for username.
  2. Create second Input Text Box, Instance Name = input2 for user password.
  3. Create one Dynamic text box, Instance Name = output1 for displaying user info.
  4. To store a username and password, use ARRAYS. Initialize your arrays on the frame script like so:
  5. users = new Array();
    passwords = new Array();
    userCount = 0;
    //keeps track of how many users are saved

  6. Use a button to trigger the event of storing the input data into the array. Button script:
  7. on (release){

    users[userCount] = input1.text;
    passwords[userCount] = input2.text;
    userCount ++;
    //updates the number of users by 1
    input1.text = "enter another one";
    input2.text = "enter another one";

    }

  8. Create a second button for retrieving data with the following script:

on (release){

output1.text = users[userCount-1] + " " + passwords[userCount-1];

// userCount-1 represents the last person to log in.
// I added a space in the double quotes so the words don't run together.

}