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: <, >, &, ", ' - 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.
- 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:
- Open a new Flash document, ActionScript 3.0
- Right-click on the first frame in the Timeline and choose Actions
- 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. - To see the result, press "Ctrl+Enter", it will appear like in the following image:
• 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").
// 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.