E.1 HTML Tag Support in Text Fields

ActionScript for Flash MX: The Definitive Guide, 2nd Edition
By Colin Moock
Appendix E.  HTML Support in Text Fields

The set of HTML tags supported by Flash 5 text fields includes: <B>, <I>, <U>, <FONT>, <P>, <BR>, and <A>. Flash 6 adds support for <LI> and <TEXTFORMAT>. Although the <TABLE> tag is not supported, HTML tables can be simulated with text field tab stops (see TextFormat.tabStops in the ActionScript Language Reference) and Macromedia's FDataGrid Component available at the Flash Exchange (http://www.macromedia.com/exchange/flash/).

To set HTML-styled text for a TextField object, set its TextField.html property to true and then set its TextField.htmlText property to the desired HTML-tagged text. The <HTML> and <BODY> tags are neither supported nor required. Unsupported tags are ignored, although their text content is preserved. Flash requires quotes around the values assigned to tag attributes. For further details on these and related topics, see Section E.5, Section E.4, and Section E.3 later in this appendix.

For more details on using HTML in text fields, see TextField.htmlText in the ActionScript Language Reference.

E.1.1 <B> (Bold)

The <B> tag renders text in bold, provided that a boldface style exists for the font in question. For example:

<B>This is bold text.</B>

will be rendered as, This is bold text.

See the discussion of bold font embedding under TextField.embedFonts and TextField.htmlText in the ActionScript Language Reference.

E.1.2 <I> (Italics)

The <I> tag renders text in italics, provided that an italic style exists for the font in question. For example:

<I>This is italic text.</I>

will be rendered as, This is italic text.

See the discussion of italic font embedding under TextField.embedFonts and TextField.htmlText in the ActionScript Language Reference.

E.1.3 <U> (Underline)

The <U> tag renders the tagged text with an underline beneath it. For example:

<U>This is underlined text.</U>

will be rendered as, This is underlined text.

Because hyperlinks are not underlined automatically in Flash, you should use the <U> tag to identify hyperlinks. For example:

<A HREF="http://www.flight404.com"><U>Click here</U> </A> to visit a neat site.

will be rendered as, "Click here to visit a neat site."

E.1.4 <LI> (List Item)

The <LI> tag creates a bullet in front of the text it encloses. Unlike its HTML counterpart, <LI> does not require a <UL> tag. For example:

While you work: <LI>Stretch</LI><LI>Drink water</LI><LI>Rest your eyes</LI>

will be rendered as:

While you work:

  • Stretch

  • Drink water

  • Rest your eyes

The <LI> tag does not support multilevel bullets or the <OL> (numbered list) tag. Lines formatted with TextFormat.bullet are represented with <LI> tags in TextField.htmlText.

E.1.5 <FONT> (Font Control)

The <FONT> tag supports the following three attributes:

FACE

The FACE attribute specifies the name of the font to use. In Flash 6, a list of multiple font faces can also be used (as in HTML), though this feature is undocumented. Flash attempts to render the first available font listed in the FACE attribute. For example, in the code <FONT FACE="Arial,Helvetica">my text</FONT>, Flash will render "my text" in Helvetica if Arial is missing but Helvetica is present. See TextFormat.font for details. For a function that picks an appropriate font from the user's system, see TextField.getFontList( ).

SIZE

The SIZE attribute specifies the size of the tagged text as a fixed point size (such as <FONT SIZE="18">) or as a relative size. Relative point sizes are preceded by a + or - sign and are specified relative to the text size in the text field Property inspector. For example, if the point size is 14 in the Property inspector, then <FONT SIZE="-2"> displays the tagged text at 12-point. See also TextFormat.size.

COLOR

The COLOR attribute specifies the color of the tagged text, as a hexadecimal number, preceded by the pound sign (#) for example, <FONT COLOR="#FF0000">this is red text</FONT>. Specify the hexadecimal number as an RGB series of three two-digit numbers from 00 to FF. Note that Flash's implementation of the COLOR attribute is more strict than HTML allows the pound sign (#) is required, and color names such as "green" and "blue" cannot be used as COLOR values. See also the Color class and TextFormat.color.

Here are some <FONT> examples:

<FONT FACE="Arial">this is Arial</FONT> <FONT FACE="Arial" SIZE="12">this is 12pt Arial</FONT> <FONT FACE="Lucida Console" SIZE="+4" COLOR="#FF0000">this is red,  +4pt Lucida Console</FONT>

E.1.6 <P> (Paragraph Break)

The <P> tag demarcates paragraphs, but in Flash it behaves quite differently than its HTML counterpart. First of all, unterminated <P> tags do not cause line breaks in Flash as they do in regular HTML. Note the difference between Flash and web browser output for the following HTML-tagged text:

I hate filling out forms. <P>So sometimes I don't.

Flash output:

I hate filling out forms. So sometimes I don't.

Web browser output:

I hate filling out forms.
So sometimes I don't.

Closing </P> tags are required by Flash in order for line breaks to be added. For example:

<P> I hate filling out forms.</P> So sometimes I don't.

Furthermore, in Flash, <P> causes a single line break, exactly like <BR>, whereas in web browsers, <P> causes a double line break. Consider the following:

<P>This is line one.</P><P>This is line two.</P>

In Flash, this code is rendered with no gap between the lines, as in:

This is line one.
This is line two.

In a web browser, the code is rendered with a gap between the lines, as in:

This is line one.
This is line two.

Because Flash's <P> tag behavior differs from its behavior in web browsers, we often use the <BR> tag instead. However, the ALIGN attribute of the <P> tag is still useful to center, right-justify, or left-justify text, as follows:

<P ALIGN="CENTER">Centered text</P> <P ALIGN="RIGHT">Right-justified text</P> <P ALIGN="LEFT">Left-justified text</P>

E.1.7 <BR> (Line Break)

The <BR> tag causes a line break in a body of text and is functionally equivalent to the \n escape sequence or the newline keyword. Consider the following:

This is line one. <BR>This is line two. This is line one. \nThis is line two.

Both are rendered in Flash as:

This is line one.
This is line two.

E.1.8 <A> (Anchor or Hypertext Link)

The <A> tag creates a hypertext link. When the user clicks text tagged with <A>, the document specified in the HREF attribute of the tag loads into the browser. If the movie is running in the Standalone Player, the default web browser on the system is launched and the document is loaded into that browser.

The generic syntax of the <A> tag is:

<A HREF="documentToLoad.html">linked text</A>

For example, to link to a good game console, we can use:

<A HREF="http://www.gamecube.com/">nice system</A>

As with HTML, the URL can be absolute or relative to the current page. Because Flash doesn't automatically add underlining or color to hyperlinks, you might want to augment the link tag like this:

<FONT COLOR="#0000FF"> <U><A HREF="http://www.gamecube.com/">nice console</A></U></FONT>

Normally, links followed from an anchor tag cause the current movie to be replaced with the document specified in the HREF of the anchor tag. However, an anchor tag may also cause a secondary browser window to launch. Using the TARGET attribute, we can specify the name of a window into which to load the linked document, as follows:

<A HREF="documentName" TARGET="windowName">linked text</A>

If a window named windowName does not already exist, the browser launches a new window and assigns it the name windowName. To launch a new document in its own, anonymous window, we can use the "_blank" keyword, as in:

<A HREF="mypage.html" TARGET="_blank">linked text</A>

Note that when we launch windows through the TARGET attribute, we have no control over the size or toolbar arrangement of the new window. To launch specifically sized windows from a link, we must use JavaScript. Techniques for launching customized secondary windows with JavaScript are described at:

http://www.moock.org/webdesign/flash

For more information on communicating with JavaScript from ActionScript, see the global functions fscommand( ) and getURL( ) in the ActionScript Language Reference and Section E.6 later in this appendix.

In addition to "_blank", the TARGET attribute can also be "_parent", "_self", or "_top", or the name of a window or frame. For example, the TARGET attribute can load a document into a frame using:

<A HREF="documentName" TARGET="frameName">linked text</A>

Flash anchor tags do not always behave exactly like HTML anchor tags. For example, we cannot use the NAME attribute of the anchor tag in Flash, so internal links within a body of text are not possible.

In Flash, anchor tags are not added to the tab order of the movie and are therefore not accessible via the keyboard. If your content must be accessible to keyboards and alternative input devices, you should use buttons, not anchor tags, for links.

E.1.9 <TEXTFORMAT> (Formatting Support)

The <TEXTFORMAT> tag is a special Flash-only HTML extension used to implement the TextFormat class's paragraph formatting features in HTML syntax. Its attributes correspond to the TextFormat class's leftMargin, rightMargin, blockIndent, indent, leading, and tabStops properties, as follows:

LEFTMARGIN

Sets the left margin, in pixels, of the contained text. See TextFormat.leftMargin.

RIGHTMARGIN

Sets the right margin, in pixels, of the contained text. See TextFormat.rightMargin

BLOCKINDENT

Sets the left indentation, in pixels, of the contained text. See TextFormat.blockIndent.

INDENT

Sets the indentation, in pixels, for the first line of each contained paragraph. See TextFormat.indent.

LEADING

Sets the space, in pixels, between lines of the contained text. See TextFormat.leading.

TABSTOPS

Sets the horizontal tab stops for the contained text, as a comma-separated list of nonnegative integers. See TextFormat.tabStops.

The following code shows how to create a text field whose lines of text are separated vertically by 10 pixels and whose paragraphs' first lines are indented by 20 pixels:

this.createTextField("output_txt", 1, 0, 0, 100, 200); output_txt.html = true; output_txt.border = true; output_txt.wordWrap = true; output_txt.type = "input"; output_txt.htmlText = "<TEXTFORMAT LEADING='10' INDENT='20'>"                 + "<P>This is the first paragraph.</P>"                 + "<P>This is the second paragraph.</P>"                 + "<P>And finally, this is the third paragraph.</P>"                 + "</TEXTFORMAT>";

E.1.10 <TAB> (Tab Character)

The <TAB> tag (undocumented) is equivalent to inserting a tab character (ASCII 9) in a string. It is used to advance to the next tab stop when TextField.condenseWhite is true for the text field (in which case, literal tab characters are condensed with the rest of the whitespace).

     


    ActionScript for Flash MX. The Definitive Guide
    ActionScript for Flash MX: The Definitive Guide, Second Edition
    ISBN: 059600396X
    EAN: 2147483647
    Year: 2002
    Pages: 780
    Authors: Colin Moock

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net