An example of using styles with XML

In this section, you'll create the same FLA file that you created earlier (see An example of using styles with HTML) but with XML-formatted text. In this example, you'll create the style sheet using ActionScript, rather than importing styles from a CSS file.

To format XML with a style sheet:

  1. In Flash, create a FLA file.
  2. Using the Text tool, create a text field approximately 400 pixels wide and 300 pixels high.
  3. Open the Property inspector (Window > Properties) and select the text field.
  4. In the Property inspector, select Dynamic Text from the Text Type menu, select Multiline from the Line Type menu, select the Render Text as HTML option, and type news_txt in the Instance Name text box.
  5. On Layer 1 in the Timeline (Window > Timeline), select the first frame.
  6. To create the style sheet object, open the Actions panel (Window > Development Panels > Actions) and add the following code to the Actions panel:
    var xml_styles = new TextField.StyleSheet();
    xml_styles.setStyle("mainBody", {
      color:'#000000', 
      fontFamily:'Arial,Helvetica,sans-serif', 
      fontSize:'12', 
      display:'block'
    });
    xml_styles.setStyle("title", {
      color:'#000000', 
      fontFamily:'Arial,Helvetica,sans-serif', 
      fontSize:'18', 
      display:'block', 
      fontWeight:'bold'
    });
    xml_styles.setStyle("byline", {
      color:'#666666', 
      fontWeight:'bold', 
      fontStyle:'italic', 
      display:'inline'
    });
    xml_styles.setStyle("a:link", {
      color:'#FF0000'
    });
    xml_styles.setStyle("a:hover", {
      textDecoration:'underline'
    });
    

    This code creates a new style sheet object named xml_styles that defines styles by using the setStyle() method. The styles exactly match those you created in an external CSS file earlier in this chapter.

  7. To create the XML text to assign to the text field, add the following code to the Actions panel:
    var storyText = "<title>Flash Player now supports CSS</title><mainBody><byline>San Francisco, CA</byline>--Macromedia Inc. announced today a new version of Flash Player that supports Cascading Style Sheets (CSS) text styles. For more information, visit the <a href=\"http://www.macromedia.com\">Macromedia Flash website</a></mainBody>";
    
  8. Last, add the following code to apply the style sheet object to the text field's styleSheet property and assign the XML text to the text field.
    news_txt.styleSheet = xml_styles;
    news_txt.text = storyText;
    
  9. Save the file as news_xml.fla.
  10. Run the movie (Control > Test Movie) to see the styles automatically applied to the text in the field.