Current Classes | Syllabus | Class Schedule

VCB-331 Rich Media 1

Input/Output Text (Flash AS3)

Introduction

One of the cool tools you can use in Flash is input text—that is, text that is input by the user as the program is running. This information is stored as one or more variables that can be accessed later by the program and used in a variety of ways. In this simple exercise, you will create a swf file that asks for the user's name, then displays it in a greeting.

Procedure

1. Open a new Flash document.
2. Draw a text box; choose static text. In the text box, write "What is your name?" You can choose whichever font face, color & size you prefer.
3. Below the static text box draw another text box. Change this one to input text. Give it the instance name "input_txt." Note that this variable name is arbitrary; I could have called it just about anything, even "fred," but "input_txt" is more descriptive. In order to make it more visible, choose "Show border around text" in the properties window.
4. Create a button symbol and place an instance on the page.
5. Give the button the instance name next_btn.
6. Add a keyframe at frame 2.
7. In frame 2 add a new text field. Make this one a dynamic text field. Give it the instance name output_txt. Set the font face, color and size to your preference.
8. Create a new button (or drag on to the stage an instance of the button created previously). Give the button the instance name back_btn.
9. Go back to frame 1. Create a new layer called actions.
10. Click on the keyframe in this new layer and open the actions window. Add a stop();
11. Now we need to create a variable to store our text input:

    var myText:String;

12. Next we'll create a handler for the button:

    next_btn.addEventListener(MouseEvent.CLICK, nextClick); 

13. The handler calls a function called nextClick; let's write that now:

    function nextClick(myNextEvent:MouseEvent):void { 
        captureText(); 
        this.nextFrame(); 
    }  

    The nextClick function does two things—it calls a function called captureText (which we still have to write), and it advances the playhead to the next frame. But it won't work yet because even though we created the variable "myText" in step 11 to hold the name written in the text field, we haven't actually put the name into the variable yet. That's what the captureText function will do:

14. Add the following function:

    function captureText():void { 
        myText = input_txt.text;
    }  

    This function reads the text currently in the input_txt field and dumps it into the myText variable. Once there we can use it.

15. Okay that'll get us from frame 1 to 2; now we need to display out message using the captured text. In frame 2 of the actions layer add a keyframe and then write the following action:

    output_txt.text = "Hello "+myText+"!"; 

16. Now let's get the "back" button working; add these lines:

    back_btn.addEventListener(MouseEvent.CLICK, backClick);    
    
    function backClick(myBackEvent:MouseEvent):void { 
        this.prevFrame(); 
    }  

17. Try it out.
18. Okay, what if you wanted to add another question like "What is your favorite color?" First add a new static text box with you question. Next, add a new input text box as above. Give it a different instance name, like "input2_txt".
19. You'll need to add a new variable to hold the new piece of text. Then we'll have to modify the captureText function so that it captures both fields. Add the parts in red below:

    stop();    
    var myText:String;    
    var myText2:String;    
    next_btn.addEventListener(MouseEvent.CLICK, nextClick);    
    
    function nextClick(myNextEvent:MouseEvent):void {
        captureText();
        this.nextFrame();
    }    
    
    function captureText():void {
        myText=input_txt.text;
        myText2=input2_txt.text;
    }     

20. Now modify the ouput text in frame 2 to include the new variable. Something like this:

    output_txt.text = "Hello "+myText+"! I like "+myText2+" too!"; 

Go Above and Beyond

Some possibilities:

• Add more text fields.
• Create a cool looking interface and buttons.
• Think of a clever use for input/output text.

 

Grading rubric

10 pts	Went above & beyond and made something special
9 pts	Above and beyond the basics—additional text fields and functionality
8 pts	Added a little design, perhaps a new field
7 pts	Did just the basics
6 pts	Something's not working right.
0-5 pts	Poor showing; mostly incomplete or full of errors.