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: <B>, <I>, <U>, <FONT>, <P>, <BR>, and <A>.
18.5.1. <B> (Bold)
<B>This is bold text</B>
18.5.2. <I> (Italics)
<I>This is italic text</I>
18.5.3. <U> (Underline)
<U>This is underlined text</U>
Because linked text is not underlined in Flash, you should use the <U> 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> (Font Control)
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>
See Section 18.5.11, "Using HTML as Output" later in this chapter for more important details on fonts in Flash.
18.5.5. <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:
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> 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 <P> tag behavior differs from 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>
18.5.6. <BR> (Line Break)
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>
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 <U> and <FONT> 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
<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>";
18.5.10. Unrecognized Tags and Attributes
<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:
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.
Here are the steps for embedding Arial bold in a movie for use with a text field:
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
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 "<B>hi there</B>" would be converted to the value:
'<P ALIGN="LEFT"><FONT FACE="Arial" SIZE="10" COLOR="#000000"><B>hi there</B></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.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:
Copyright © 2002 O'Reilly & Associates. All rights reserved.