Tutorials

Formatting Externally Loaded Text In Flash ActionScript 3.0

This article is a continuation of the Loading External Text Files In Flash ActionScript 3.0 tutorial. In this lesson, we'll be using a TextFormat object to style our externally loaded text. So let's go back to the code and create the ff:

a TextFormat object (let's name it textStyle)
some text formatting properties (let's change the font and the size)

var myTextField:TextField = new TextField();
var textURL:URLRequest = new URLRequest("summer.txt");
var textLoader:URLLoader = new URLLoader();

// This next line creates the TextFormat object which will be used to
// change the text formatting
var textStyle:TextFormat = new TextFormat();

addChild(myTextField);

// Add in some formatting properties using the TextFormat object.
// Let's change the font to Verdana and the size to 14
textStyle.font = "Verdana";
textStyle.size = 14;

myTextField.border = true;
myTextField.multiline = true;
myTextField.wordWrap = true;
myTextField.width = 215;
myTextField.height = 225;
myTextField.x = 300;
myTextField. y = 50;

After creating the TextFormat object and setting some properties, we'll then need to apply the TextFormat object to our TextField. Otherwise, we won't see any formatting changes. To assign the TextFormat object to the TextField, we'll use the setTextFormat() method of the TextField class. The TextFormat object is passed to this method as a parameter. That's how it gets assigned to a specific TextField. Also, the setTextFormat() method must be used only after the text has been assigned to the TextField and not before. So in this example, we'll need to add this inside the displayText function, right after the line that says myTextField.text = e.target.data; .

function displayText(e:Event):void 
{
     myTextField.text = e.target.data;
     // This next line assigns the textStyle TextFormat object
     // to the TextField with the instance name myTextField
     myTextField.setTextFormat(textStyle); 
}

So now, if you test the movie, you should see the formatting changes applied to the text.

Here's the code in full:

import flash.text.TextField;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.text.TextFormat;

var myTextField:TextField = new TextField();
var textURL:URLRequest = new URLRequest("summer.txt");
var textLoader:URLLoader = new URLLoader();
var textStyle:TextFormat = new TextFormat();

addChild(myTextField);

textStyle.font = "Verdana";
textStyle.size = 14;

myTextField.border = true;
myTextField.multiline = true;
myTextField.wordWrap = true;
myTextField.width = 215;
myTextField.height = 225;
myTextField.x = 300;
myTextField. y = 50;

textLoader.addEventListener(Event.COMPLETE, displayText);

function displayText(e:Event):void 
{
     myTextField.text = e.target.data;
     myTextField.setTextFormat(textStyle);
}

textLoader.load(textURL);

You'll also notice that all the text does not fit inside the TextField anymore (since we made the font size larger). In the next part, we'll fix this by learning how to add a scrolling functionality for our TextField.

PREV: Loading External Text Files In Flash ActionScript 3.0
NEXT: Completing The Project: Adding Text Scrolling

- Classes And Objects In Actionscript 3
In this lesson, I'll be explaining what classes and objects are. We'll be understanding these terms within the context of ActionScript, but classes and objects really are concepts that are part of most programming languages. So the general idea...

- As3 Textfields - The Basics
In this lesson, we are going to learn the basics of working with the ActionScript 3 TextField class. We'll learn how to create text fields using code, and how to control some of its properties - x and y for positioning the text field, width and height...

- Actionscript 3 Number To String Conversion
In this lesson, we're going to learn how to convert numbers to strings in AS3. If you you'd like to do ActionScript 3 Number to String conversions, then you can use the toString() method of the Number class. Here is an example: var myNumber:Number...

- Completing The Project: Adding Text Scrolling
This article is continued from Formatting Externally Loaded Text in Flash ActionScript 3.0. In this last part, we will be completing the sample project by adding the text scrolling functionality. You can add vertical text scrolling to a TextField by using...

- Loading External Text Files In Flash Actionscript 3.0
Work Files: Load_Text_Start.fla summer.txt (right-click > save as ) In this article, we're going to learn how to load text from an external source into a Flash movie. What is the benefit of loading text from an external source? The nice thing...

Tutorials