HTML Support (ActionScript: The Definitive Guide)

18.5. HTML Support

The Character panel lets us set a text field's font size, font face, and font style, but it sets the attributes of the entire text field only. To set styles on a character-by-character basis and to add hypertext links, use HTML (which was added as a text field feature in Flash 5).

Though HTML can be used with both dynamic text fields and user-input text fields, we normally use HTML text fields for display purposes only. To add HTML support to a text field, select the HTML option in the Text Options panel.

The set of HTML tags supported by text fields is limited to: , , , , ,  , and <A>.

18.5.1. (Bold)

The  tag renders text in bold, provided that a boldface exists for the font in question:

<B>This is bold text</B>

18.5.2. (Italics)

The  tag renders text in italics, provided that an italic face exists for the font in question:

<I>This is italic text</I>

18.5.3. (Underline)

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

<U>This is underlined text</U>

Because linked text is not underlined in Flash, you should use the  tag to identify hyperlinks:

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

18.5.4. (Font Control)

The  tag supports the following three attributes:

FACE

SIZE

COLOR

Here are some  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>

See Section 18.5.11, "Using HTML as Output" later in this chapter for more important details on fonts in Flash.

18.5.5. (Paragraph Break)

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

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  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,  causes a single line break, exactly like  , whereas in web browsers,  traditionally causes a double line break. Consider the following:

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

In Flash, that code would be rendered with no gap between the lines, as in:

This is line one.
This is line two.

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

This is line one.

This is line two.

Because Flash's  tag behavior differs from web browsers, we often use the   tag instead. However, the ALIGN attribute of the  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>

18.5.6. (Line Break)

The   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 would be rendered in Flash as:

This is line one.
This is line two.

18.5.7. < 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 Player is running in standalone mode, 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 video game, we could use:

<A HREF="http://www.quake3arena.com/">nice game</A>

As with HTML, the URL can be absolute or relative to the current page. Normally, links followed via 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 each 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 Part III, "Language Reference", and Section 18.5.13, "Executing JavaScript from HTML Links" later in this chapter.

The TARGET attribute can also be used to load documents into frames, as in:

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

Flash anchor tags do not always behave exactly like HTML anchor tags. We cannot, for example, use the NAME attribute of the anchor tag in Flash, so internal links within a body of text are not possible. Furthermore, Flash links are not underlined or highlighted in any way. Link underlines and colors must be inserted manually with the  and  tags described earlier.

18.5.8. Anchor Tag Tab Order

In Flash 5, 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.

18.5.9. Quoting Attribute Values

Outside Flash, HTML attribute values may be quoted with single quotes, double quotes, or not at all. The following tags are all valid in most web browsers:

<P ALIGN=RIGHT>
<P ALIGN='RIGHT'>
<P ALIGN="RIGHT">

But in Flash, unquoted attribute values are not allowed. For example, the syntax <P ALIGN=RIGHT> is illegal in Flash. However, both single and double quotes may be used to delimit attribute values. When composing text field values that include HTML attributes, we must be careful to quote our attributes correctly, using one type of quote to demarcate the string itself and another to demarcate attribute values. For example:

// These examples are both valid
myText = "<P ALIGN='RIGHT'>hi there</P>";
myText = '<P ALIGN="RIGHT">hi there</P>';
// This example would cause an error because double quotation marks are
// used to demarcate both the string and the attribute
myText = "<P ALIGN="RIGHT">hi there</P>";

For more information on using quotation marks to form strings, see Section 4.5.2, "String Literals" in Chapter 4, "Primitive Datatypes".

18.5.10. Unrecognized Tags and Attributes

Like web browsers, Flash ignore tags and attributes it does not recognize. For example, if we assign the following value to an HTML text field in Flash:

<P>Please fill in and print this form</P>
<FORM><INPUT TYPE="TEXT"></FORM>
<P>Thank you!</P>

The output would be:

Please fill in and print this form
Thank you!

The FORM and INPUT elements are not supported by Flash so both are ignored. Similarly, if we use container elements such as <TD>, the content is preserved but the markup is ignored. For example:

myTextField = "<TABLE><TR><TD>table cell text</TD></TR></TABLE>";

outputs the following line without table formatting:

table cell text

18.5.11. Using HTML as Output

HTML text entered manually into a text field using the Text tool will not be rendered as HTML. To display HTML-formatted text on screen, we must assign HTML text to a dynamic text field via ActionScript. For example:

myTextField = "<P><B>Error!</B> You <I>must</I> supply an email address!</P>";

Embedding a font for an HTML text field embeds only a single style of a single font. For example, a text field set to bold Arial in the Character panel will only support characters of the Arial bold typeface. If we use HTML to assign a different style of Arial (such as italic) or a different typeface altogether (such as Garamond), the tagged text will be invisible unless the appropriate fonts are embedded with the movie!

Suppose, for example, that we create a text field called output. In the Character panel for our output text field we select Arial set to Italic. In the Text Options panel, we embed the entire Arial italic font. Then we set output to display HTML. Finally, we assign the following value to our text field:

output = '<P><I>My</I>, what <B>lovely</B>'
         + '<FONT SIZE="24">eyes</FONT> you have!</P>';

When the movie plays, the following text will appear in the text field:

My

Everything else we assigned to output is missing! Only the italic text in the HTML can be rendered. The rest of the text requires other variations of the Arial font that we didn't embed -- "what", "eyes", and "you have" are all nonitalic, and "lovely" is bold.

For every font face and variation we use in an HTML text field, we must embed the appropriate font. We have two means of doing so:

Make a dummy text field, hidden from view, with the desired font selected in the Character panel and embedded in the Text Options panel.
Add a new font symbol to the movie's Library and export the font with the movie.

Here are the steps for embedding Arial bold in a movie for use with a text field:

Select Window Library.
Select Options New Font. The Font Symbol Properties dialog box appears.
Under Font, select Arial.
Under Style, select Bold.
Under Name, type ArialBold (this is a cosmetic name, used only in the Library).
In the Library, select the ArialBold font symbol.
Select Options Linkage.
In the Symbol Linkage Properties dialog box, select Export This Symbol.
In the Identifier box, type ArialBold. For our purposes, the name we type here doesn't matter. Exported symbol identifiers are used only for shared libraries.

Note that every variation of a font style must be embedded individually. If we use Arial bold, Arial italic, and Arial bold italic in a text field, then we must embed all three font variations. Underline is not considered a font variation, nor is font size or color.

If, however, we do not enable any of the Embed Fonts options in the Text Options panel, then Flash relies entirely on the user's system for fonts, in which case normal, bold, and italic text will be rendered only if users have the appropriate font variant installed on their systems.

To ensure that text will display consistently across all platforms and user systems, you should embed all the fonts required for your text field.

18.5.12. Using HTML as Input

Whereas HTML is normally used with text fields for display purposes, it may also be entered into a movie via an HTML-enabled or a regular (non-HTML) user-input text field.

When regular text is entered into an HTML-enabled user-input text field, HTML markup tags are added automatically. For example, the text "Hi there" would be converted to the HTML value:

'<P ALIGN="LEFT"><FONT FACE="Arial" SIZE="10" COLOR="#000000">Hi there</FONT></P>'

When HTML tags are typed into an HTML-enabled user-input text field, the < and > characters are converted to > and <. For example, the text "hi there" would be converted to the value:

'<P ALIGN="LEFT"><FONT FACE="Arial" SIZE="10"
 COLOR="#000000">&lt;B&gt;hi there&lt;/B&gt;</FONT></P>'

HTML-enabled user-input text fields may be used to create a very simple HTML data entry system.

When regular or HTML text is typed into a normal (non-HTML) user-input text field, no modification of the entered text occurs. Regular user-input text fields allow raw HTML code to be entered into a movie without distortion.

An example showing HTML-enabled and regular user-input text field data entry is available from the online Code Depot.

18.5.13. Executing JavaScript from HTML Links

In most JavaScript-capable web browsers, it is possible to execute JavaScript statements from an anchor tag using the javascript: protocol as the value of the HREF attribute. For example:

<A HREF="javascript:square(5);">find the square of 5</A>

In ActionScript, we can also execute JavaScript statements from an <A> tag, like this:

myTextField = "<A HREF='javascript:alert(5);'>display the number 5</A>";

However, to include string values in JavaScript statements, we must use the HTML entity " for quotation marks, as in:

myTextField = "<A HREF='javascript:alert(&quot;hello world&quot;);'>"
               + "display hello world</A>";

18.5.14. Calling ActionScript Functions from HTML Links

Though arbitrary statements of ActionScript code cannot be executed from a Flash <A> tag, ActionScript functions can. To invoke an ActionScript function from an anchor tag, we use the following syntax:

<A HREF="asfunction:myFunctionName">invoke the function</A>

The function invocation operator ( ) is not allowed and should not be used when invoking an ActionScript function from an anchor tag. In addition to calling an ActionScript function from an anchor tag, we may also pass one parameter to that function using the syntax:

<A HREF="asfunction:myFunctionName,myParameter">invoke the function</A>

where myParameter is the value of the parameter to pass. Inside the invoked function, myParameter is always a string. To pass more than one piece of information to a function from an anchor, we use a delimiter in the myParameter value and dissect the string ourselves in the function. For example, here's a function invocation that passes two values, separated by a | character, to the roleCall( ) function:

<A HREF="asfunction:roleCall,megan|murray">invoke the function</A>

And here's the roleCall( ) function. Notice how it separates the values with the split( ) method:

function roleCall (name) {
  var bothNames = name.split("|");
  trace("first name: " + bothNames[0]);
  trace("last name: " + bothNames[1]);

}

18.5. HTML Support

18.5.1. <B> (Bold)

18.5.2. <I> (Italics)

18.5.3. <U> (Underline)

18.5.4. <FONT> (Font Control)

18.5.5. <P> (Paragraph Break)

18.5.6. <BR> (Line Break)