Exploring HTML Usage in Text Fields Flash

You may have noticed the HTML check box in the Text Options Panel. With Flash 5, you can now use HTML formatting tags within Input and Dynamic Text fields! In Flash 4 movies, you could not specify more than one set of formatting specifications for any text field. For example, if you created a text field that used black-colored Verdana text at 18 points in faux bold, then you could not insert any other typeface, color or size in that text field. With Flash 5, you can use <FONT> tags to specify multiple typefaces, colors, styles, and sizes within one text field. You can also use <A HREF> tags to link to internal Flash functions or external URLs!

Supported HTML tags
You can use the following HTML tags to format your Flash text fields. You can insert these tags into ActionScript variable values, or you can apply them (without knowing or writing the syntax) using the Character and Text Options Panels.

Font and paragraph styles
The basic <FONT> and physical “faux” styles for text (bold, italic, and underline) can be applied to Flash text.

  • <B>: Placing <B></B> tags around Flash text in string values for text field variables applies bold formatting to the enclosed text.
  • <I>: Placing <I></I> tags around Flash string values italicizes the enclosed text.
  • <U>: The <U></U> tags underlines the enclosed text.
  • <P>: The <P> tag inserts paragraph break between lines of text. You can use the ALIGN attribute to specify LEFT, RIGHT, CENTER, or JUSTIFY, to apply the respective justifications to the Flash text.
  • <BR>: The <BR> tag inserts a carriage return at the point of insertion. This is equivalent to the newline operator in ActionScript.
  • <FONT COLOR=’#HEX CODE’>: The <FONT> tag with the COLOR attribute can change the color of your Flash text. This color is specified in hexadecimal values, just like regular HTML. For example, “<FONT COLOR=’#FF0000>This is red text.</FONT>” uses full red for the text color.
  • <FONT FACE>: The <FONT> tag with the FACE attribute enables you to specify a specific typeface to the enclosed text. You can specify Flash device fonts for the FACE value, such as <FONT FACE=’_sans’> to use the Sans Serif device font.
  • <FONT SIZE>: The SIZE attribute of the <FONT> tag enables you to specify the point size of Flash text. You can use absolute values (in pt sizes), such as <FONT SIZE=’18’>, or relative values, such as <FONT SIZE=’+1’>, to change the size of text.

URL and ActionScript Linking
You can use the <A> tag with the HREF attribute to apply URL links within Flash text. You can also specify a TARGET attribute for the <A> tag. The TARGET attribute determines which browser window or frame will display the URL link in the HREF attribute. As with regular HTML, You can use the default _top, _parent, _self, or _blank values, as described for the getURL action. Later in this section we see how you can also execute internal Flash functions from <A HEF> tags.

Formatting text with the Character and Text Options Panel
You don’t necessarily need to write out HTML tags to apply them to your Flash text. You can use the Character Panel to assign HTML formatting to all Text types (for example, Static, Input, and Dynamic). For Input and Dynamic Text fields, you will need to use the Text Options Panel to enable HTML formatting, by checking the HTML option. In this section, we demonstrate the use of HTML formatting within Static and Dynamic Text fields.

  1. Open a new Flash movie (Ctrl+N or Command+N). Set the background color to white in the Movie Properties dialog (Ctrl+M or Command+M). Save your Flash movie as htmlText.fla.
  2. Select the Text Tool, and open the Text Options Panel. Make sure the top dropdown menu is set to Static Text. Click once on the Stage, and type the following text (with carriage returns) in the text block, using Verdana at 18 points:
  3. With the text block still active, select the Flash 5 Bible text, and, in the Character Panel, change the point size to 24 and click the B (for bold) option, as shown below.
  4. With the text block still active, select the Robert Reinhardt text, and, in the Character Panel, enter the following text for the URL option: mailto:[email protected]
  5. Now, select the Jon Warren Lentz text, and enter the following text in the URLoption of the Character Panel:
  6. Save the Flash movie, and test the Flash .SWF file in your Web browser by choosing File➪Publish Preview➪HTML. When you click the Flash 5 Bible text, the browser loads the Amazon.com page for the Flash 5 Bible. When you click either author’s name, your e-mail client opens a new message window.
  7. You can selectively change text within one text block or field.

    You can selectively change text within one text block or field.

    URL-linked text appears with dashed underlines. You will not see this dashed underline in the actual .SWF file.

    URL-linked text appears with dashed underlines. You will not see this dashed underline in the actual .SWF file.

Inserting HTML tags into Text Fields with ActionScript
In this section, we continue with the previous example that you created in the last section. We convert the Static Text block into a Dynamic Text field, and manipulate the formatting with ActionScript.

  1. Resave your Flash movie from the last section as htmlText_dynamic.fla. We will convert this Static Text into a Dynamic Text field, so you’ll want to keep your original Static Text example for future reference.
  2. Select the text block, and open the Text Options Panel. Change the text type to Dynamic Text, and make sure the HTML option is checked. In the Variable field, type the variable name book. Now, this text field can be updated with ActionScript directed at the variable book. You can also uncheck the Border/ Bg option if you don’t want to see a bounding box around your text.
  3. Save the Flash movie, and test it (Ctrl+Enter or Command+Enter). While the .SWF is playing back within the Flash 5 authoring environment, choose Debug➪List Variables. You should see the HTML formatting tags displayed in the Output window (note that in the Output window, the book variable and the value will be shown on one continuous line):
  4. You can observe the proper ActionScript syntax for HTML formatting in the Output window. Note that any quotes around values of tag attributes are preceded by a backslash, as in <FONT FACE=”verdana”>. Because the value of book is already a string data type surrounded by quotes, any internal quotes need to be declared with a backslash character.

  5. Close the .SWF movie window, and go back to the Main Timeline of your Flash movie. Create a new Dynamic Text field, and in the Text Options Panel, check the HTML and Word wrap options. Make sure the text field is set to Multiline.
  6. In the Variable field, type the name book2. The text field should be the same size as the previous text field.
  7. Add a new layer, and name it actions. Double-click the first frame of the actions layer, and, in the Actions Panel, specify a HTML-formatted string value for the book2 variable, such as the following code:
  8. This code should appear as one line of code in the Actions list of the Actions Panel.

  9. Save the Flash movie and test it. The book2 text field will display the HTMLformatted value that you specified in the actions layer.
  10. By using other ActionScript variables and methods, you can apply specific text formatting to external data sources that have been loaded into the Flash movie, such as database records or lists. In the next section, you learn how to execute Flash functions from HTML-formatted text fields.

Using asfunction in <A HREF> tags
Not only can you use HTML formatting in Flash text, but you can also execute Flash actions from your text fields, using the <A> tag and a HREF attribute value of asfunction:function,argument. For example, if you wanted to link text to a function that loads a new Flash .SWF into a Movie Clip target, you can create a custom function that uses the loadMovie action and reference that action from your <A HREF> tag for a text field. See the following code (note that the ¬ indicates a continuation of the same line of code; do not insert this character into your actual code):

In this code example, the text within the <A></A> tags will execute the myMovie function, passing the string movie.swf as the name argument.

If you need to pass more than one argument, then you will need to use send all the values as one string separated by a comma (or preferred character). Then, you would use the split method as follows (note that the ¬ indicates a continuation of the same line of code; do not insert this character into your actual code):

In this example, the myMovie function takes the name argument and creates an array with the split method. This array’s name is tempArgs. The elements of the tempArgs array are the two string values separated by a comma in the myArgs variable.



Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics