About Text in Flash

There are three types of text in Flash: static, dynamic and input.

Static text is the text whose contents and appearance you determine when you author the Flash document.

Dynamic text fields are the fields whose contents can be updates dynamically at runtime.

Input text fields allow users to enter text into it at runtime.

Just like movie clips and buttons, you can also specify instance names to the dynamic and input text fields to control those using ActionScript. All dynamic and input text fields in a SWF file are instances of the TextField class. So, by specifying the instance name to a text field, you can use the methods and properties of the TextField class to manipulate it with ActionScript. However, unlike with movie clips, you cannot write ActionScript code inside a text instance, because text instances do not have Timelines.

Apart from the TextField class, there is one more class for text -- the TextFormat class. You can use the ActionScript TextFormat class to set the formatting properties of a text field. The TextFormat class incorporates character and paragraph formatting information. Character formatting information describes the appearance of individual characters: font name, point size, color, and an associated URL. Paragraph formatting information describes the appearance of a paragraph: left margin, right margin, indentation of the first line, and left, right, or center alignment.

Using ActionScript you can set, change, and format the text field and its content with the methods and properties of TextField and TextFormat classes. The methods of the TextField class let you set, select, and manipulate text in a dynamic or input text field that you create during authoring or at runtime.

You can also assign HTML formatted text directly to a text field. In Flash Player 7 and later, HTML text that you assign to a text field can contain embedded media such as movie clips, SWF files, and JPEG files. The text wraps around the embedded media in the same way that a Web browser wraps text around media embedded in an HTML document.

You can create an empty text field on the Stage at runtime using the createTextField()method of the MovieClip class. The new text field is attached to the Timeline of the movie clip that calls the method. The createTextField()method uses the following syntax:

movieClip.createTextField(instanceName, depth, x, y, width, height)

Example:

_root.createTextField("sample_txt", 1, 0, 0, 200, 150);
 

The above example creates a text field with instance name “sample_txt”, 200 pixels wide and 150 pixels high at location (0,0) and a depth of 1.

You use the instance name specified in the createTextField()call to access the methods and properties of the TextField class.

After creating the text as shown above, you can set some of its properties as shown below:

sample_txt.multiline = true;

sample_txt.wordWrap = true;

sample_txt.autoSize = true;

sample_txt.html = true;

sample_txt.background = true;

sample_txt.backgroundColor = “
0x003366”;

test_txt.text = "Sample text field created with
createTextFieldmethod
of movie clip class"; 

You can use the TextField.removeTextField()method to remove a text field created with createTextField(). The removeTextField()method does not work on a text field placed by the Timeline during authoring.

The following are the default properties that will be applied when creating a text field using the createTextField() method of movie clip class:

font = "Times New Roman"

size = 12

textColor = “0x000000”

bold = false

italic = false

underline = false

url = ""

target = ""

align = "left"

leftMargin = 0

rightMargin = 0

indent = 0

leading = 0

bullet = false

tabStops = [] (empty array)
 

Note that the default font property on the Mac OS X is Times.

To use the TextFormat class, you first create a TextFormat object and set its character and paragraph formatting styles. You then apply the TextFormat object to a text field using the TextField.setTextFormat()or TextField.setNewTextFormat()methods.

The setTextFormat()method changes the text format that is applied to individual characters, to groups of characters, or to the entire body of text in a text field. The text that is newly inserted, such as text entered by a user or inserted with ActionScript, does not assume the formatting specified by a setTextFormat() methodcall. To specify the default formatting for newly inserted text you need to use the setNewTextFormat() method.

Now let's see an example of how to use the TextFormat class.

// Create a TextFormat object

var txtfmt:TextFormat = new TextFormat();

// Specify paragraph and character formatting

txtfmt.bold = true;

txtfmt.italic = true;

txtfmt.underline = true;

txtfmt.bullet = false;

txtfmt.align = “center”;

txtfmt.color = “0xFF0000”;

txtfmt.font = “Verdana”;

txtfmt.url = “http://www.devarticles.com”;

txtfmt.target = “_blank”;

txtfmt.indent = 10;

txtfmt.size = 24;

// apply the TextFormat object to the text field

sample _txt.setTextFormat(txtfmt);

You can also apply the TextFormat object properties to a specific part of the text field as shown below.

// applies the TextFormat object only to the first three characters of the text field

sample_txt.setTextFormat(0, 3, txtfmt);

You can also apply the TextFormat object properties to a specific character of the text field as shown below.

// applies the TextFormat object only to the second character of the text field

sample_txt.setTextFormat(3, txtfmt);

The following is the list of supported HTML tags in Flash:

Anchor tag (<a>) The <a>tag creates a hypertext link and supports the following attributes: href and target. sample_txt.htmlText= “<a href='http://www.devarticles.com' target='_blank'>Visit Dev Articles</a>”; Bold tag (<b>)

The
<b>tag renders text as bold.

sample_txt.htmlText = “<b>Bold Text</b>”;
 

A bold typeface must be available for the font used to display the text.

Break tag (<br>)

The <br>tag creates a line break in the text field.

sample_txt.htmlText = "First Line of text. <br>Second Line";

The closing </br>tag is optional, but it is good practice to include it.

Font tag (<font>)

The <font>tag specifies a font or list of fonts to display the text and supports the attributes color, face and size.

sample_txt.htmlText = "<font size=’24’ color=’#0000FF’ face=’Arial Black’>This is blue, 24-point text with Arial Black font</font>";

  Image tag (<img>)

The <img>tag lets you embed external JPEG files, SWF files, and movie clips inside text fields and TextArea component instances. Text automatically flows around images you embed in text fields or components. This tag is supported only in dynamic and input text fields that are multiline and wrap their text.

The <img>tags supports the following attributes:

src Specifies the URL to a JPEG or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG and SWF files) do not show until they have downloaded completely.

id Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded JPEG file, SWF file, or movie clip. This is useful if you want to control the embedded content with ActionScript.

width The width of the image, SWF file, or movie clip being inserted, in pixels.

height The height of the image, SWF file, or movie clip being inserted, in pixels.

align Specifies the horizontal alignment of the embedded image within the text field. Valid value are leftand right. The default value is left.

hspace Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8.

vspace Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8. 

Italic tag (<i>)

The <i>tag displays the tagged text in italics.

sample_txt.htmlText = “<i>Italic Text</i>”;

An italic typeface must be available for the font used.

List item tag (<li>)

The <li>tag places a bullet in front of the text that it encloses.

<li>One</li>

<li>Two</li>

<li>Three</li>
 

Paragraph tag (<p>)

The <p>tag creates a new paragraph. It supports the following attributes: align and class.

Span tag (<span>)

The <span>tag is available only for use with CSS text styles. It supports the attribute class.

Text format tag (<textformat>)

The <textformat>tag lets you use a subset of paragraph formatting properties of the TextFormat class within HTML text fields. It supports the attributes blockindent, indent, leading, leftmargin, rightmargin and tabstops.

Using the Text tool, create a dynamic text field that’s approximately 300 pixels wide and 100 pixels high.

1. In the Property inspector, name the instance table_txt, select Multiline from the Line Type pop-up menu, and select the Render Text as HTML option.

2. In the Timeline, select the first frame on Layer 1.

3. Open the Actions panel (Window > Development Panels > Actions), and enter the following code in the Actions panel:

4. //Creates column headers, formatted in bold, separated by tabs

5. var rowHeaders = "<b>Name\tAge\tDepartment</b>";

6.  

7. //Creates rows with data

8. var row_1 = "Tim\t32\tFinance";

9. var row_2 = "Edwin\t46\tMarketing";

10.  

11. //Sets two tabstops, to 50 and 100 points

12. table_txt.htmlText = "<textformat tabstops='[50,100]'>";

13. table_txt.htmlText += rowHeaders;

14. table_txt.htmlText += row_1;

15. table_txt.htmlText += row_2 ;

16. table_txt.htmlText += "</textformat>";

The use of the tab character escape sequence ( \t) adds tabs between each column in the table.

17. Select Control > Test Movie to view the formatted table.

Underline tag (<u>)

The <u> tag underlines the tagged text.

sample_txt.htmlText = “<u>Underlined Text</u>”;

In Flash Player 7 and later, you can use the <img>tag to embed JPEG files, SWF files, and movie clips inside dynamic and input text fields.

To embed a JPEG or SWF file in a text field you need to specify the absolute or relative path to the JPEG or SWF file in the <img>tag’s srcattribute.

Example:

sample_txt.htmlText = "<p>Picture:<img src='pic.jpg'>";

To embed a movie clip symbol in a text field, you specify the symbol’s linkage identifier for the <img>tag’s srcattribute.

Example:

sample_txt.htmlText = "<p>Movie clip:<img src='symbol_ID'>";

You can control the embedded media using ActionScript by specifying the id attribute in the <img> tag.

Flash Player creates a new movie clip for each <img>tag and embeds that movie clip within the TextField object. The movie clip created by Flash Player is added as a child movie clip to the text field that contains the image.

Example:

_root.sample_txt.htmlText =
"SWF: <img src='animation.swf' id='animation_mc'>";

The path of the embedded SWF will be
_level0.
sample_txt
.animation_mc.

_level0.textField_txt.animation_mc.stop(); stops the SWF file.