AS: Formatting Text Fields

**chili5** · 08-28-2009, 03:45 AM

Formatting Text with TextFormat

Sometimes, when you have a text field you want to change how the text is display. Perhaps, you want the color to be red, or you want to change the font size? How can you do this? In the flash.text package there is a class called TextFormat that allows you to change the formatting of text fields.

Important: This only works with text fields. You cannot use this method to format labels. Later I will explain how I get around that.

You need to create a new flash document and save it as text.fla. It doesn't appear that we can format text input fields either. In the same directory that you are in, create a new ActionScript file called TextFieldInput.as. This is going to give us a class that we can use for input and allow it to be formatted.

In this file add this code:

Code:

package {
	import flash.text.*;
	
	public class TextFieldInput extends TextField {
		
		public function TextFieldInput() {
			super();
			this.type = TextFieldType.INPUT;
			this.border = true;
			this.height = 20;
		}
	}
}

All this class is, is an extension of a TextField that is set up for user input. You don't need to know much of the details.

Now, you need to go to the timeline and on the first keyframe press F9 to open the actions window. We are going to add a new text field to the stage with a little bit of code. Then we are going to set some styles for the text.

We are going to add a TextField to the stage.

Add this code to the first keyframe:

Code:

var txtInput:TextFieldInput = new TextFieldInput();

txtInput.x = 20;
txtInput.y = 20;
txtInput.height = 80;

stage.addChild(txtInput);

All that this does is set up the text field and positions it on the stage. When you run the program, you will be able to type in the text field. Even though the TextFieldInput class provides a default height of 20, we change it to allocate for bigger fonts.

The first thing that we need to do is create a new TextFormat object.

Add this code:

Code:

var tf:TextFormat = new TextFormat();

Instead, of directly formatting the text field you tell a text format object what you want the formatting to be and then you apply the text formatter to the text field. You can change things like font face, color, font size, and all other sorts of things.

Add this code after you declared tf.

Code:

tf.bold = true;
tf.bullet = true;
tf.size = 30;
tf.underline = true;

This should read really easily the font will be bolded, underlined, font size 30, and have a bullet (like a list).

Now all we have to do is apply the formatting to the text. However, you have to set the text and then apply the formatting.

Example:

Code:

txtInput.text = "Yo!";

txtInput.setTextFormat(tf);

When you run this code, you will see the font in the text field is formatted according to the options above. However, what if you want to format what the user inputs?

Code:

txtInput.addEventListener(KeyboardEvent.KEY_DOWN,format);

function format(e:KeyboardEvent):void {
	txtInput.setTextFormat(tf);
}

That is it. When the user presses a key, I apply the formatting to the text field again and it appears that the users text is being formatted as they type it.

Formatting Labels

As I mentioned earlier, you cannot format labels with TextFormat. The way I get around this is, I create an extension of the TextField that looks like a label. Then since it is a text field you can format it as above.

The class:

Code:

package {
	import flash.text.*;
	
	public class TextLabel extends TextField {
		
		public function TextLabel() {
			super();
            //this makes it so you can't tell the difference between a TextField and a label
			this.selectable = false; 
		}
	}
}

Unless you set the text field for input, you can't input text into it. My code makes it so you can't select the text field. So it acts a lot like a text field, because it is one.

Just the end user doesn't know that.

Example:

Code:

var txtLabel:TextLabel = new TextLabel();

txtLabel.x = 20;
txtLabel.y = 100;
txtLabel.height = 80;
txtLabel.width = 300;
txtLabel.text = "Enter a num: ";

stage.addChild(txtLabel);
txtLabel.setTextFormat(tf);

Now, you can format labels.

You can see the movie clip here: Text.swf.