Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Text and Strings > Formatting text with Cascading Style Sheet styles > An example of using styles with XML

An example of using styles with XML

In this section, you create a FLA file that has XML-formatted text. You'll create a style sheet using ActionScript, rather than importing styles from a CSS file as shown in An example of using styles with HTML

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 > 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 > Actions), and add the following code to the Actions panel:

   var styles:TextField.StyleSheet = new TextField.StyleSheet();
   styles.setStyle("mainBody", {
       color:'#000000', 
       fontFamily:'Arial,Helvetica,sans-serif', 
       fontSize:'12', 
       display:'block'
   });
   styles.setStyle("title", {
       color:'#000000', 
       fontFamily:'Arial,Helvetica,sans-serif', 
       fontSize:'18', 
       display:'block', 
       fontWeight:'bold'
   });
   styles.setStyle("byline", {
       color:'#666600', 
       fontWeight:'bold', 
       fontStyle:'italic', 
       display:'inline'
   });
   styles.setStyle("a:link", {
       color:'#FF0000'
   });
   styles.setStyle("a:hover", {
       textDecoration:'underline'
   });
   

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

7. To create the XML text to assign to the text field, open a text editor and enter the following text into a new document:

   <story><title>Flash now has advanced anti-aliasing</title><mainBody><byline>San Francisco, CA</byline>--Adobe Inc. announced today a new version of Flash that features the new advanced anti-aliasing rendering technology. For more information, visit the <a href="http://www.adobe.com">Adobe Flash website</a></mainBody></story>
   

   NOTE

   If you copy and paste this text string, make sure that you remove any line breaks that might have been added to the text string. Select Hidden Characters from the pop-up menu in the Actions panel to see and remove any extra line breaks.

8. Save the text file as story.xml.
9. In Flash, add the following code in the Actions panel, following the code in step 6.

   This code loads the story.xml document, assigns the style sheet object to the text field's styleSheet property, and assigns the XML text to the text field:

   var my_xml:XML = new XML();
   my_xml.ignoreWhite = true;
   my_xml.onLoad = function(success:Boolean):Void {
       if (success) {
           news_txt.styleSheet = styles;
           news_txt.text = my_xml;
       } else {
           trace("Error loading XML.");
       }
   };
   

   my_xml.load("story.xml");

   
   

   NOTE

   You are loading XML data from an external file in this ActionScript. For information on loading external data, see Working with Images, Sound, and Video.

10. Save the file as news_xml.fla in the same folder as story.xml.
11. Run the SWF file (Control > Test Movie) to see the styles automatically applied to the text in the text field.

Flash CS3