GUIs+and+ActionScript+Interfaces

When humans use a computer, this is known as Human-Computer Interaction. The way that humans use the computer is known as an **interface**.

Originally, humans interfaced with computers through punch cards, and other binary interfaces. Then, a command-line interface became standard. Command-line interfaces are still used in many operating systems, including UNIX and Linux. In fact, you can see a command line in Windows - go to Start, select Run... and type **cmd**. (Try typing **ping google.com** when you get the black window open).

However, most modern, personal computers use a Graphical User Interface (GUI). GUI's allow users to click on buttons, drag sliders, choose items from a list, and type text in certain areas. Most GUIs also provide "windows" (whether or not they are the Microsoft Windows operating system).

When you create a new movie in Flash, a new Window is automatically created. Buttons, text areas, sliders, lists and other visual components (also called "widgets") are known as Components in Flash. You can access all of these components by selecting Window>Component). You can drag the component that you want to add to your movie onto the stage.

It is vital (as in **required**) that you give each element a name. You can name each element by following these steps: 1. Drag the component onto the Stage. 2. Click on the component, if it not selected. 3. Open the Properties window (Window > Properties). 4. Type the name of the component into "Instance Name". Be sure to have the proper naming technique! (See below!) 5. You can change some things about the component's appearance using the Component Inspector (Window>Component Inspector).

To ensure that Flash can identity what each component is in your code, we put a specific ending on each component name. For example, buttons end with _btn, so calculate_btn would be a great name for a button. Here is a list of all of the endings you may use in this course: Ever wondered how your computer knows what to do when you click a button? We'll start by getting output to appear and work up to a button!
 * Naming Techniques**
 * Button || _btn ||
 * Text area (or Text Input) || _txt ||
 * Label || _lbl ||
 * Combo Box || _cbo ||
 * Checkbox || _chk ||
 * Radio button || _rbn ||
 * Wiring Up Your Interface (or Coding Your Interface)**

Step 1: Add a Text Area to your stage. Call your text area output_txt. Step 2: In the Actions window, type: code output_txt.text = "Here's the output!" code .text is an example of using a property (or variable) of the Text Area. It is the property that stores what text is displayed in that box.

Step 3: Run your movie. You should see your output in the text area!

We can take in input from the user as well, but we won't be able to do anything with that input unless we have a button (to make the program do something with the input). Step 4: Add a text input component. Call it input_txt. Step 5: Add a button. Call it click_btn. Can you change the label on the button to say "Click me!"? Unfortunately, buttons are a bit complicated, so here is a template for your code. We will learn how to write this from scratch later in the course: code format="actionscript3" click_btn.addEventListener(MouseEvent.CLICK, clickHandler); //needed to "wire" up your button for clicking

//A function is just a bunch of code that runs on demand function clickHandler(e:MouseEvent) { //what you want the computer to do when you click the //button goes here - try adding trace("clicked button")

}//this } bracket ends the function code Copy and paste this code into your Actions window. Step 6: Inside the clickHandler function, add code to make a new message print out in the output_txt text area. Run your program to check that it works. Step 7: See if you can make the program output a message that has to with the input from input_txt. (Hint 1: To access what the user typed in input_txt, use input_txt.text. This is a String) (Hint 2: Use the + sign to join together 2 strings, as in "Hello" + "to you.")

When you use a text input to get a number from the user, you will need to convert it to a String before you can use it in a calculation. Here is an example of that: code var product:int = int(input_txt.text); //convert to int var result:int = product*1000; //use product variable output_txt.text = String(result); //convert to String code Feel free to paste this code into your clickHandler function to see what happens! Note that you can not type words into the Text Input box, or your program will not work with this code.
 * Additional Programming Details**:

When you have done this, see if you can complete Programming Task 1: Planet Age Calculator.