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
- In order for this to work you’ll need to create a new AS3 .FLA file.
- Drag a TextInput to the stage and a TextArea to the stage.
- Now delete both of them from the stage. You’ll notice they are still available in your library along with a Component Assets folder.
- 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.
- 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.
- 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.
- 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.
Hi Greta,
Nice tutorial. However, your code has a few errors. It should be:
package {
// the class needs to inherit from Sprite
import flash.display.Sprite;
import flash.text.TextFormat;
import fl.controls.TextArea;
import fl.controls.TextInput;
public class testformats() extends Sprite {
// the 3 variables below cannot be defined outside the class
var myTextInput:TextInput = new TextInput();
var myTextArea:TextArea = new TextArea();
var componentFormat:TextFormat = new TextFormat();
…
} //end class
} //end package
It didn’t give me any errors when I compiled it. Did you have strict mode and warnings mode turned on in the flash AS3 settings?
Tedd comment is right, do you are compiling in FLEX, Jade?
No. I’m not but I typically have strict mode turned off because of some of code I have in my MMO.
This was very helpful, thanks so much. I spent whole morning trying to get around the bug which removes new line characters when text area text is converted to htmltext. Finally, I can use the styles.
Thanks!
I followed both Jade and Todd’s codes but in both cases I got the following error when compiling the .FLA file.
testformats.as, Line 12 1084: Syntax error: expecting leftbrace before leftparen.
can any one of you explain? Thanks.
Hey Jesse,
That means you have a syntax error somewhere. Can you copy/paste your code?
Hi, Jade,
Thanks for replying. First I tried your code exactly. I got the error then I noticed that Todd said and tried to modify the code as he suggested. I got the same error again. I also tried turning off strict mode and it didn’t help either.
Also could you please explain a little bit how does this workaround work exactly? I am confused how the things in flash (TextInput component) and the code in the .as file are connected. If I know how they interact I might find a solution or what’s wrong.
My issue is, I use the TextInput and TextArea components from the flash library in my as3 code elsewhere (include the published .swc file). But now my resolution is higher the text in them is tiny. I can resize the component but the text size doesn’t change. I have the same problem with other components like combo box, check box, radio button, etc. I spent many hours and couldn’t find a solution. Do you have any suggestion? (This sounds like the fix I needed but I couldn’t get it to work).
Regards,
Jesse
Hey Jesse,
First of all make sure that you have three open curly braces at the beginning of your file and three closing curly braces at the end. The error you’re getting typically means that you’re missing a curly brace {} or that you’re missing a open or closed parenthesis (). It could also mean that you’re missing a semi-colon ; after a closing parenthesis ) that the compiler is expecting before one of your closing curly braces }
As far as your questions go, this solution works by defining a new textFormat for the component. Every component in AS3 has a textFormat by default and this code is essentially overriding those default settings in place of your custom ones. In order to tell the component that it needs to use our custom formatting we have to go to the Class field in the properties window and give it our testformats.as file. When flash compiles the project it loads and applies all the properties we’ve defined in the testformats.as to the component.
As far as your font sizes are concerned you shouldn’t need to apply this solution (although you certainly can) in order to adjust the text size. See this solution here: Change Textarea Component Font Size in Flash AS3
Hi, Jade,
Wow! The solution in the other thread you pointed me to is exactly what I was looking for for so long! I thought something like that should be available but gave up hope after couldn’t find it for long time. I assume other components (e.g. radio button, check box, etc.) have similar setStyle function?
Now that I have a solution for TextInput, I don’t have to pursue the error I have with your trick. But I still have a few questions about it. I understand the textFormat concept and I do use it in my codes. I just don’t understand how you affect the TextInput component with the testformats class you defined. You assigned the textFormat to myTextInput, which is your own instance of the TextInput component. How can that affect the TextInput component inself?
Also, I literally copied your code, so I don’t have the syntax errors you mentioned. I think my lack of understanding of your method is the real cause of the problem. Perhaps I should not literally copy your code but adapt it for my own?
Regards,
Jesse
Yes all components have styles and text formats. I would suggest you read though the documentation on Adobe’s website as it may help you understand components much better than I could in the span of my responses to your comments: Flash AS3 Learning Components
For more information on the testformat class I made as well as why and how you can use classes to affect your flash projects I would recommend you read this as well: Classes in Flash AS3
Thanks a lot, Jade. I will study them.