In this lesson we will explain methods to create and add text in a Flash presentation using ActionScript 3.0, as well as a few properties and methods used to define text.
- Why create Text or other objects with ActionScript when they can be created directly on the stage? Because you can personalise the text added with ActionScript, and display the text you want dinamically, according on certain actions.

• To create text with AS3 you use the TextField class, this class contains many properties and methods to define text; such as, color, size, position and others.
Here are a few properties that can be applied directly to the instance for text.

- The complete list with ActionScript 3 properties and methods can be found at the official Adobe Flash webpage: TextField properties and methods.

- First create a variable with a "TextField" instance, then, you can add the text and define properties to the instance. To add the text in a presentation, use addChild().
In the next example you can see how to create a text and define some properties:
  1. Open a new Flash document, ActionScript 3.0
  2. Right-click on the first frame in the Timeline and choose Actions
  3. Add the following code n the "Actions panel":
    // Initialize a "TextField" instance
    var txt:TextField = new TextField();
    // set properties to define the text field
    txt.x = 50;                     //  Distance from the left edge
    txt.y = 80;                     // Distance from the top edge
    txt.width = 200;                // Lenght of the text field
    txt.textColor = 0x0000da;       // Text color
    txt.backgroundColor = 0xededfe;  // Sets the background color
    txt.background = true;           // Enables to display the background colors
    txt.borderColor = 0x007800;      // Sets the border color
    txt.border = true;               // Enables to display the border
    txt.text = "Welcome to \n Farewell";     // Adds text
    // Align the text in the created field 
    txt.autoSize = "center";
    // Apply "addChild()" to add the text in the Flash presentation
      - "\n" adds a new line.
      - When the "autoSize" property has the "none" value, the text area and the text field are the same, but when it is given a different value (left, right, center) the text area (background and border) will only encompass the area occupied by the text.
  4. To see the result, press "Ctrl+Enter", it will appear like in the following image:
    Text cu AS3
The FLA file with this example can be downloaded from: Text with AS3.

• In the text added with ActionScript you can use some HTML tags and CSS.
- To add text which contains HTML tags, you must use the "htmlText" property. Only a few HTML tags are recognized, the ones presented above at this property.
- To add CSS styles, you must use the "styleSheet" property, the "StyleSheet" object and it's method, "parseCSS("stilCSS")", which takes as argument a row with CSS properties. You can find the list with the "StyleSheet" at the following webpage: StyleSheet methods and properties
                The CSS properties that are recognized are: color, display, font-family, font-size, font-style, font-weight, leading, letter-spacing, margin-left, margin-right, text-align, text-decoration, text-indent.

Let's see an example with text formated with HTML tags and CSS styles (explanations are in the code).
// Initialize a "TextField" instance
var txt:TextField = new TextField();

// Defining properties for the text field
txt.width = 180;
txt.height = 100;
txt.wordWrap = true;
txt.multiline = true;

// store CSS styles in a String variable
var css_st:String = ".bv{color:#0808fe; font-family:Arial; font-size:16px; font-weight:bold;} .adf{color:#ed0708; font-family:Verdana; font-size:13px; font-style:italic}";

// Defines the instance for the "StyleSheet" object
var styles:StyleSheet = new StyleSheet();

// Applies the "parseCSS" method to the variable with the CSS styles

// uses the "styleSheet" property to attach the CSS styles to the "txt" instance
txt.styleSheet = styles;

// Adds HTML formated text
txt.htmlText = '<span class="bv">Welcome</span><br><font size="12" color="#00a800">to <u><a href=""></a></u></font><br><span class="adf">ActionScript course</span>.';

// add the text in the Flash presentation
- This code will show a Flash presentation like in this image:
Text with HTML and CSS in AS3
To download the FLA file with this example, click Text with HTML and CSS.

Using TextFormat

The TextFormat object gives another way to format and define a text in a "textField" instance.
To use TextFormat, you must create an object with new TextFormat(). This object has specific properties and methods to format text, these are presented on this page: TextFormat properties and methods
The instance of the TextFormat must be added to the object which contains the text (created with "textField").

- Here's an example with "TextFormat":
// Create a TextFormat instance
var textF:TextFormat = new TextFormat();

// sets properties to format the text
textF.leftMargin = 55;         // the left margin of the paragraph, in pixels
textF.font = "Arial";          // Defines the font used
textF.color = 0x5678fe;        // Color
textF.size = 17;               // Text size (in pixels)

// Initialize a "TextField" instance in a "txt" variable
var txt:TextField = new TextField();

// Defining properties for the text field
txt.width = 240;
txt.wordWrap = true;
txt.multiline = true;

txt.text = "Text with TextFormat \nActionScript 3 Course";    // Adds the Text

// Apply "setTextFormat()" to the text field , with the "textFormat" instance as argument

// add the text in the Flash presentation
- This code will display a Flash presentation like in this image:
Text with TextFormat
To download the FLA file with this example, click Text and TextFormat.

• You can also apply TextFormat to a portion of text only, with the following method:
txtField.setTextFormat(textFormat, beginIndex, endIndex);
- "txtField" is the instance created with "TextField"
- "textFormat" is the instance created with "TextFormat"
- "beginIndex" is an integer that specifies the first character of the desired range of text
- "endIndex" is an integer that specifies the character after the desired text span.
      For example, try using   txt.setTextFormat(textF, 5, 15); to the previous script.

Characters used for text in a TextField instance can be restricted with REGEX expresions, using the property restrict.
          textField.restrict = "0-9";       // Allows only numbers
          textField.restrict = "0-9 A-F";       // Allows only numbers and capital letters from A to F
          textField.restrict = "0-9 A-F ^ a-z";       // Allows numbers and capital letters from A to F, without small letters

• Another method to create text fields in flash, in which the text is interactively added with ActionScript, is combining text field made on the stage (with "Text tool") and the AS3 code.
The method is simple, make a field for text on the stage (with "Text Tool"), and add an instance name for this field (in Properties panel), then the instance name can be used in ActionScript code as if it was a "TextField" instance.
The advantage is that multiple graphical options can be combined and applied to the text with instruments from the stage and the interactivity given by ActionScript.

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Adding text with ActionScript 3

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (8982)
  2. PHP OOP - Final Classes and Methods (3622)
  3. Understanding OOP - Object Oriented Programming (3406)
  4. CSS Pseudo-elements (553)
  5. Display data from PHP Array, or MySQL in HTML table (13216)

Popular pages this month

  1. Qwop (4885)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2980)
  3. Get the value of the selected /checked checkboxes in a form (2317)
  4. Drag Racer V3 (1932)
  5. Flash Games - Free online Games (1569)