Adding text with ActionScript 3

Actionscript Course

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.

• x - Sets the text fields distance from the left edge
• y - Sets the text fields distance from the top edge
• width - Defines the lenght of the text field
• height - Defines the height of the text field
• textColor - The text color (defined in 0xRRGGBB, RGB = Red, Green, Blue)
• backgroundColor - Defines the background color of the text area
• background - true or false, specifies if the defined background will be displayed
• borderColor - Defines a color for the border around the text
• border - true or false, specifies if the defined border will be displayed
• autoSize - Controls automatic sizing and alignment of text fields.
  The values that it can receive are: "none", "left", "right" and "center".
• text - Adds the text in the "textField" instance
• htmlText - Adds a HTML formatted text.
  The following tags are recognized: <a> (with the attributes: "href" and "tatget"), <b>, <br>, <font>, <img> (JPG, GIF, PNG, SWF. It uses a "id" in which, the MovieClip instance's name that contains the image is specified, <i>, <li> (without <ul> or <ol>), <p>, <span>, <u>; and also the HTML entities: &lt;, &gt;, &amp;, &quot;, &apos;
• styleSheet - Attaches an instance to the text with CSS styles, created with the "StyleSheet" class
• multiline - true or false, indicates whether field is a multiline text field
• wordWrap - true or false, indicates whether the text field has word wrap.

- 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 CoursesWeb.net \n Farewell";     // Adds text
   
   // Align the text in the created field 
   txt.autoSize = "center";
   
   // Apply "addChild()" to add the text in the Flash presentation
   addChild(txt);
   

     - "\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:
   

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
styles.parseCSS(css_st);

// 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="https://coursesweb.net">coursesweb.net</a></u></font><br><span class="adf">ActionScript course</span>.';

// add the text in the Flash presentation
addChild(txt);

- This code will show a Flash presentation like in this image:

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
txt.setTextFormat(textF);

// add the text in the Flash presentation
addChild(txt);

- This code will display a Flash presentation like in this image:

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.
Exemple:
          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.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net