jump to navigation

Manipulating the TextField/TextArea component in Flash CS3 September 13, 2010

Posted by Tournas Dimitrios in Flash.

These code snippets are just a note for me . They will be a reference for future projects .I hope they will also be helpful for other Flash developers.

  • Using embedded font with the Flash ActionScript 3.0 TextArea component.

The following example requires a TextArea control in your Flash document’s library, as well as an embedded font with the linkage class set to “CustomFont”.

Need some help/refresch how to embed fonts in Flash CS3?

import fl.controls.TextArea;

var customFont:Font = new CustomFont();

var textFormat:TextFormat = new TextFormat();
textFormat.font = customFont.fontName;
textFormat.size = 32;
textFormat.color = 0x0000ff;

var textArea:TextArea = new TextArea();
textArea.setStyle("textFormat", textFormat);
textArea.setStyle("embedFonts", true);
textArea.text = "The quick brown dog jumps over the lazy fox.";
textArea.move(10, 10);
textArea.setSize(300, 200);
  • Reading Text files using action script and displaying on TextArea  component :
import flash.events.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import fl.controls.TextArea;

var fileLoader:URLLoader;
var yourTextArea:TextArea = new TextArea();


function loadFile(url:String) {
	fileLoader = new URLLoader();
	fileLoader.addEventListener(IOErrorEvent.IO_ERROR , onFileLoadError);
	fileLoader.addEventListener(Event.COMPLETE, onFileLoadComplete);
	fileLoader.load(new URLRequest(url));

function onFileLoadComplete(event:Event):void {
	fileLoader.removeEventListener(Event.COMPLETE, onFileLoadComplete);
	fileLoader.removeEventListener(IOErrorEvent.IO_ERROR , onFileLoadError);
	yourTextArea.htmlText = event.target.data as String;

function onFileLoadError(event:IOErrorEvent):void {
	trace("Could not load text ");
  • To set the disabledTextFormat style for a TextArea :

The following example sets the disabledTextFormat style to change the appearance of text when the TextArea is disabled but the same process applies to setting the textFormat style for an enabled TextArea.

var my_ta:TextArea = new TextArea();
my_ta.width = 200;
my_ta.height = 200;
my_ta.htmlText = "<strong>This is some text</strong>
 Hello dimitrios";

var tf:TextFormat = new TextFormat();
tf.color = 0x0000FF;
tf.font = "Arial Narrow";
tf.size = 24;
//Drag a TextArea component to the Stage and give it an instance name of myTa.
myTa.setStyle("disabledTextFormat", tf);
myTa.htmlText = "<p><b>This is some text</b></p><br/> The quick brown dog jumps over the lazy fox.";
myTa.setSize(250, 550);
myTa.move(200, 150);
myTa.enabled = false;

//The background color is a skin feature
// so it can only be changed through the IDE
//vs double click the TextAre component on the stage
//inside the component select a skin (normal or disabled skin and change the color
//now all the TextArea components will inherit these modifications 
  • Formating the CS3 TextField with internal CSS :
var url:String = "text.txt";
var req:URLRequest = new URLRequest(url);

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE ,textLoaded);

function textLoaded(evt:Event):void{
	trace("Text was loaded");
	//textBox.htmlText = loader.data;
	textBox.htmlText = evt.target.data;  //same as above
    textBox.styleSheet = customStyle;

//ActionScript 3.0 Language and Components Reference
//Class StyleSheet --> to see all options for CSS
var customStyle:StyleSheet = new StyleSheet();
customStyle.setStyle("a" ,{color:"#CC0000"});

//Create the textFormater
var format:TextFormat = new TextFormat();
format.size = 23;
format.color = 0x000000;
//Create a TextField with Actionscript
var textBox:TextField = new TextField();
textBox.wordWrap = true;//this option <b>must</b> be enabled so that html will corect displayed
textBox.border = true;
textBox.borderColor = 0xff0000;
textBox.width = 200;
textBox.defaultTextFormat = format;
textBox.selectable = false;
textBox.multiline = true;
textBox.height = 200;

  • Formating the CS3 TextField with external CSS :
//First create a dynamic TextField on stage with an instance name "external_txt"

var textLoader:URLLoader = new URLLoader();
var textReq:URLRequest = new URLRequest("externalHtmlText.txt");
var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest("externalCSSText.css");

var customStyle:StyleSheet = new StyleSheet();

function textLoaded(evt:Event):void {
        textLoader.removeEventListener(Event.COMPLETE , textLoaded);	
	cssLoader.addEventListener(Event.COMPLETE , cssLoaded);
function cssLoaded(evt:Event):void {
        cssLoader.removeEventListener(Event.COMPLETE , cssLoaded);
	external_txt.styleSheet = customStyle;
	external_txt.htmlText = textLoader.data;
 textLoader.addEventListener(Event.COMPLETE , textLoaded);


1. Rama - October 19, 2011

Great stuff!


TextArea – Background Color


Took me forever to realize that in AC3, as of now (2011), they officially tell you to use spark TextArea instead of mx

(s:TextArea instead of mx:TextArea)

This is the magic line for background color:


How to Change Background Color using Spark component:

Code Below



Please Note

color = font color

make sure to include in your namespaces: (up at top of .mxml file)


Joy to you!

2. Rama - October 19, 2011

The code didn’t show for some reason, here it is again, in quote marks


3. Rama - October 19, 2011

third attempt, just showing you the actual line, add this to a s:TextArea in your mxml file (not including < brackets because i think that's why its not showing up

the important line

tournasdimitrios1 - October 19, 2011

Paste the code on pastie.org and post the link here .
Notice that this article is targeted to the Flash CS3 IDE .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s