ActionScript 3.0 Text Input Output

In the "Hello World!" example, the simplest possible solution was created but a rule for good coding style was ignored. This example corrects this fault by putting all the ActionScript code in its own layer.

1. Launch Flash CS3
    
2. Right click on Layer 1 and insert a new layer.
    
3. Rename both layers by double clicking the layer name.
   Rename Layer 1 to UILayer. The User Interface will be created in the UI Layer.
   Rename Layer 2 to CodeLayer. The ActionScript code will be saved in the Code Layer.
     
   
4. Alter the canvas size to 200 x 150 and select a background colour.
   
   Here is a screen shot of the steps so far.
   
   
    
   IMPORTANT:
   Select Frame 1 of the UILayer before you carry out the next steps.
   Just do a normal mouse click on the highlighted spot (below).
   This ensures that the correct frame is active when you add the User Interface items.
   
   
   
   
5. Use the Text Tool to add an input text field to the canvas and type in a suitable message.
   If you like, alter the size of the font.
    
6. Use the Selection Tool to reposition and resize the input text field.
    
7. Set the Text Type to Input Text.
    
8. Set the Instance Name to myInput.
    
9. Put a border around the input text.
   
   Here is a scren shot of the last few steps.
   
   
   
   
10. If necessary, press CTRL+F7 to toggle on the Components Window.
     
11. Drag a button from the Components Windows to the Canvas.
     
12. Set the Instance Name of your button to myButton.
     
13. Set the label of your button to Hello.
    
    
     
14. Use the Text Tool to add another text field to your canvas. Enter a suitable text message like "Snoozing".
    If you like, alter the size of the font.
     
15. Use the Selection Tool to re-position the text field.
     
16. Alter the Text Type to Dynamic Text.
     
17. Set the Instance Name of this text to myOutput.
     
18. Make sure there is not a border arround this text.
    
    
     
    
19. Click on CodeLayer Frame 1. This is to ensure that your code goes into the CodeLayer.
    
    
     
20. Press F9 to toggle on the Actions - Frame window.
    
    If you see this message - "Current selection cannot have actions applied to it", click on the canvas making sure you do not hit the button or text areas. Make sure CodeLayer Frame 1 is still selected.
     
21. Enter this code.
    
    myButton.addEventListener(MouseEvent.CLICK, sayHello);
    
    function sayHello(e:MouseEvent):void
    {
        myOutput.text = "Hello " + myInput.text;
    }
     
22. Save your movie into a well named folder and give your movie a meaningful file name.
     
23. Press CTRL+Enter to test the movie. If there are errors, double check your code and make sure your Instance Names are spelled correctly. Please note that ActionScript is case sensitive so MyButton is different from myButton.
     
24. Here you can download 02TextIO.fla
     
25. Here is the finished movie.
    
    
    
    
26. Here is the code with explanatory comments.
    
    // This line makes the button listen or wait for mouse clicks.
    // When the button feels a mouse click, it calls the sayHello function.
    
    myButton.addEventListener(MouseEvent.CLICK, sayHello);
    
    // This is the sayHello function.
    // When this function is called, it sets the text property of myOutput
    // to "Hello " joined to the text the user typed in.
    // e:MouseEvent is the click experienced by the button.
    // void is used here because this function, although useful, does not return a value.
    
    function sayHello(e:MouseEvent):void
    {
        myOutput.text = "Hello " + myInput.text;    // + is used to join text strings
    }