Flash AS3 Tutorial: How To Change Font Styles on TextInput and TextArea Components

This took me about 15 minutes of Google searching to muddle my way through so hopefully this will save someone else some trouble in the future. If you’re building a interface in AS3 and you want to change the style of your TextInput or TextArea component you have to do things a little differently than if you were using a TextField.

Setup

1. In order for this to work you’ll need to create a new AS3 .FLA file.
2. Drag a TextInput to the stage and a TextArea to the stage.
3. Now delete both of them from the stage. You’ll notice they are still available in your library along with a Component Assets folder.
4. Make sure both of them are being exported for actionscript. To double check, right click on them in your library and select Properties. Make sure the export for actionscript checkbox is selected.
5. Now locate the properties window for your .FLA file. It has a field that says Class with a pencil at the end of the input box. In the Class box type in testformats.
6. Now create a AS3 file (not an AS3 .FLA file, it should have a .as extension) and name it testformats. Save it in the same location as your .FLA file.
7. In the testformats.as file put this code:

package {

//the necessary flash imports
import flash.text.TextFormat;
import fl.controls.TextArea;
import fl.controls.TextInput;

   public class testformats()
   {
        var myTextInput:TextInput = new TextInput();
        var myTextArea:TextArea = new TextArea();
        var componentFormat:TextFormat = new TextFormat();

        //default constructor
        public function testformats()
        {
            //lets change both fields to use the following properties
            componentFormat.size = 18; //change the font size
            componentFormat.font = "Helvetica"; //font type
            componentFormat.align = "Right"; //font alignment
            componentFormat.bold = true; //make all the text bold

            //now we add a text input to the stage
            myTextInput.x = 100;
            myTextInput.y = 50;
            myTextInput.width = 100;
            myTextInput.height = 22;
            myTextInput.visible = true;
            myTextInput.setStyle("textFormat", componentFormat); //apply our style changes
            addChild(myTextInput);

            //add the textarea to the stage
            myTextArea.x = 100;
            myTextArea.y = 80;
            myTextArea.width = 200;
            myTextArea.height = 100;
            myTextArea.visible = true;
            myTextArea.setStyle("textFormat", componentFormat); //apply our style changes
            addChild(myTextArea);
        }
   } //end class
} //end package

When you’re done save your changes and compile your .FLA. You’ll notice the font style has changed from the default settings if you try to type into either one of them.