Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

11.3. Loading and Styling Text

Now that you know how to set up your text elements and use the typeface of your choice, it's time to populate those fields. Typing in straight text and even adding normal strings through ActionScript are both tasks you've accomplished in prior chapters. However, using HTML tags in fields is something new. In this section, you'll see how you can use rudimentary HTML and CSS in Flash.

11.3.1. HTML

First, it's important to realize that Flash's support for HTML tags is very limited. Table 11-1 lists the tags that are supported.

There is also a Flash-specific tag that allows you to take advantage of the TextFormat ActionScript class for text formatting in an HTML context. Use of this class will be detailed in a later section of this chapter, but for completeness's sake, the HTML syntax has been included in Table 11-2.

To use HTML formatting in a dynamic text element, the html property must be set to true, and the htmlText property must be used to populate the field, rather than the text property discussed earlier. Try this:

1. Create a new file and save it as html_and_css.fla in your 11 folder.

2. Give the file dimensions of 550 x 450 using the Modify Document menu command.

3. Create a dynamic text field on the Stage. Give it a width of 470 x 390 and position it at (40, 30) on the Stage. Give it an instance name of styled_txt.

4. Choose "Use device fonts" from the anti-aliasing menu in the Properties panel.

5. Name the first layer field and add a second layer called actions.

6. If you wish, you can select the field again and turn on the multiline and html features using the Properties panel buttons. However, it's better to learn how to do this with ActionScript so you can also do it dynamically.

7. Add the following script to frame 1 of the actions layer:

   styled_txt.multiline= true; styled_txt.wordWrap = true; styled_txt.html = true; styled_txt.htmlText = "<li><b>bold</b></li>"; styled_txt.htmlText += "<li><i>italic</i></li>"; styled_txt.htmlText += "<li><u>underline</u></li>";

   This builds the HTML content step by step, although you will see later that you can also load HTML content from an external source.

   ---

   Note: For the remainder of this project, the step-by-step content additions will be kept brief for space reasons, while the corresponding provided sample files will contain more feature-rich examples. Feel free to compare as you go along.

   ---

8. Save your movie and test your work. You should see a list with bold, italic, and underlined elements in list format.

9. If you want to see a more detailed example, open the html_ css_01.fla file in the 11 folder of your working directory. This file uses at least one of most of the supported tags.

10. Once you are finished experimenting, close all open files.

You may have noticed the omission of ordered list tags (<ol></ol>) or unordered list tags (<ul></ul>) surrounding the list items in the code featured in the final step of the last example. That's because these tags are not supported. All list items will be bulleted by default.

11.3.2. CSS

With HTML tags working in your text file, it's time to step up and style your text with Cascading Style Sheets (CSS). Space limitations do not allow an in-depth description of CSS here, so some awareness, or at least an ability to hit the ground running, must be assumed in this context. If you think it will help, you might want to spend a few minutes on the Web brushing up on the concepts behind CSS. A quick description might qualify CSS as a centralized styling system that can be applied to tags project-wide. In a nutshell, you begin by defining a collection of style attributes that can then be applied to many text elements so you don't have to format each one manually.

If you have some experience with CSS, don't get too excited that this will be the answer to every styling need you will ever have in Flash. As with HTML, support for style properties in Flash is limited. Table 11-3 lists the supported properties, and their ActionScript equivalents, as described in the ActionScript dictionary.

These properties can be applied using tags and classes, and the anchor tag can add link, hover, and visited states to links.

A style defined to work with a tag begins with the tag itself and is followed by the properties you wish to use, each on a line followed by a semicolon, and all within braces. For example:

p { font-family: Times,serif; font-size: 14px; }

This style would affect all paragraph tags in the text element to which the corresponding style sheet object is applied.

A style defined to work with a class begins with a period and the class name, and the remainder of the structure is the same as you've just seen with tag styles. For example:

.headline { font-family: Verdana; font-size: 24px; font-weight: bold; }

This style would affect any applicable tag with a attribute and value.

11.3.3. Creating and applying styles

There are two ways to build and apply styles. The first is to build the style objects one property at a time in ActionScript, and the second is to load a finished style sheet from an external source. This first example uses the former approach:

1. If it's not still active, open the html_ css_01.fla file in the 11 folder of your working directory. This file has an assembled HTML string in it, all ready for you to style.

2. Test the movie to see what the HTML will look like without CSS applied. It should resemble Figure 11-6.

   Figure 11-6. HTML text rendered without Cascading Style Sheet formatting

3. Close the preview and go back to your main movie. In frame 1 of the actions layer, add the following code to the top of the script:

   var styles:TextField.StyleSheet = new TextField.StyleSheet(); styles.setStyle(".headline", {fontFamily: 'Verdana', fontSize: '24px', fontWeight: 'bold'} ); styled_txt.styleSheet = styles;

   The first line of the preceding code creates the style sheet object. The second line defines a class style called headline. Lines 3 through 6 define the properties of that style, and line 7 applies the style object to the dynamic text field instance.

   CSS objects must be defined and applied to text elements before the content is added. Styles can be defined and changed later, but if the CSS object itself is applied after the fact, your text will not be styled.

4. Save your work and preview your file. The headline font should now be large, bold Verdana, in contrast with the rest of the text in the field.

5. To see a more involved example, open html_css_02.fla. Several additional styles have been created in this file, and the rendered result should resemble Figure 11-7.

   Figure 11-7. The same dynamic text field seen in Figure 11-6, but with Cascading Style Sheet formatting applied

6. When you are finished, close all open files.

The second way to apply style sheets (as well as the HTML content itself) to a text field is to load the content from an external text file. You'll look at that next.

11.3.4. Loading Text

If you have your HTML and CSS documents created already, it can be much easier to load these assets into Flash than to re-create them with ActionScript. Doing so simplifies the whole process greatly.

In the case of CSS, you still need to create the style sheet object and ultimately apply it to the text element, but describing each style and attribute can be done externally:

1. Open html_css_03.fla. When loading the assets from an external source, you don't need to build any HTML or CSS beforehand. This file will start you off with a minimum of field attributes.

2. In frame 1 of the actions layer, add the following script. It will create the style sheet object the same way you did before, but it will use the load method of the style sheet object to load the external file. Only when that load is deemed a success will it then apply the style sheet to the text element, using the same syntax you used before:

   var main_css:TextField.StyleSheet = new TextField.StyleSheet(); main_css.load("html_in_flash.css"); main_css.onLoad = function(success:Boolean):Void { if (success) { styled_txt.styleSheet = main_css; } else { trace("Could not load CSS file."); } };

   Loading the HTML is very similar. The only difference is that, in this case, you are loading the HTML using standard name/value variable loading techniques. In this case, the source is a text file, but it could also be server output.

   You may have used name/value pairs frequently, and not known about it. Often, HTML forms submit data this way, and you may have noticed a URL followed by an ampersand, a variable name, and a value. An example might be:

   http://www.domain.com/search.php?name1=value1&name2=value2

   To use this approach, your text file must be formatted similarly. Before proceeding with the remaining ActionScript, open the html_in_flash.txt text file in your 11 folder. You will see that the file begins with &content= and then is followed by the HTML you need. When you are finished, continue with the HTML loading:

3. Add the following to the bottom of the script in frame 1 of the actions layer. Remember, your CSS object must be defined and applied prior to the content being added to the text element:

   var text_lv:LoadVars = new LoadVars(); text_lv.load("html_in_flash.txt"); text_lv.onLoad = function(success:Boolean):Void { if (success) { styled_txt.htmlText = this.content; } else { trace("Could not load text file."); } };

   As you can see, this structure is almost identical to the loading process for the CSS file. A LoadVars object is created, the file is loaded, and only upon success is the htmlText property of the text field populated.

4. Save your movie and preview your file. You should see a fully styled document, as depicted in Figure 11-7, by loading the content from external files.