AS: Input from GUI and custom classes

**chili5** · 08-27-2009 03:23 PM

Getting User Input from Flash

Using the Text Input control in the components make it really easy to get user input. However, let us look at how to define a class ourselves.

First thing you need to do is go to the components window, and click and drag text input, button, and label to the library.

Now, we need to make a new file "input.fla". In the properties you will see a Class text field. In that field type input and press enter. Click okay on the popup that you see. Now, the rest of this tutorial is going to be code.

You will see a lot of details on how to position items on the stage and how to listen to events.

Go to file, new and click new ActionScript 3.0 file.

This is where we are going to add our code.

First we need to import a few packages of code.

Code:

package {
	import flash.display.*;
	import flash.events.*;
	import fl.controls.*;

	public class input extends MovieClip {
		
	}	
}

The details of what movie clip is doesn't matter just yet. Just note that it is required. The display import is important for methods to draw items to the stage. We need the events package to listen for events and fl.controls gives us access to the controls that we added to the library.

Now what we need to do is add a text field, a button, and a label to the stage. We have to declare three variables for these controls before we can do anything with them.

Code:

private var txtInput:TextInput = new TextInput();
private var lblInput:Label = new Label();
private var btnInput:Button = new Button();

Add those three lines just after the input class declaration.

Now we are going to write a constructor function that will set up the controls and add them to the stage.

Code:

public function input() {
	lblInput.x = 20;
	lblInput.y = 20;
	lblInput.text = "Input a number: ";
			
	txtInput.x = 150;
	txtInput.y = 20;
			
	btnInput.x = 150;
	btnInput.y = 100;
	btnInput.label = "Read Input";
			
	stage.addChild(lblInput);
	stage.addChild(txtInput);
	stage.addChild(btnInput);
}

When you add that constructor to the class, you will have the items on the stage and in appropriate positions. We move items around by setting the x and y values.

Now all that is left to do is add an event listener for the button.

Add the line below to the constructor.

Code:

btnInput.addEventListener(MouseEvent.CLICK,readInput);

This sets up the button to receieve clicks. When the button is clicked, the readInput function is called.

This function is:

Code:

private function readInput(e:MouseEvent):void {
	var sText:String = txtInput.text;
	trace(sText);
}

The parameter indicates the type of event. Here we grab the value from the text field and show it in the output. That is all there is to it. Most of the code is set up code.

The final code is:

Code:

package {
	import flash.display.*;
	import flash.events.*;
	import fl.controls.*;

	public class input extends MovieClip {
		private var txtInput:TextInput = new TextInput();
		private var lblInput:Label = new Label();
		private var btnInput:Button = new Button();
		
		public function input() {
			lblInput.x = 20;
			lblInput.y = 20;
			lblInput.text = "Input a number: ";
			
			txtInput.x = 150;
			txtInput.y = 20;
			
			btnInput.x = 150;
			btnInput.y = 100;
			btnInput.label = "Read Input";
			
			stage.addChild(lblInput);
			stage.addChild(txtInput);
			stage.addChild(btnInput);
			
			btnInput.addEventListener(MouseEvent.CLICK,readInput);
		}
		
		private function readInput(e:MouseEvent):void {
			var sText:String = txtInput.text;
			trace(sText);
		}
	}	
}