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 HTML

An example of using styles with HTML

This section presents an example of using styles with HTML tags. You can create a style sheet that styles some built-in tags and defines some style classes. Then, you can apply that style sheet to a TextField object that contains HTML-formatted text.

To format HTML with a style sheet:

1. Create a new file in your preferred text or CSS editor.
2. Add the following style sheet definition to the file:

   p {
       color: #000000;
       font-family: Arial,Helvetica,sans-serif;
       font-size: 12px;
       display: inline;
   }
   
   a:link {
       color: #FF0000;
   }
   
   a:hover{
       text-decoration: underline;
   }
   
   .headline {
       color: #000000;
       font-family: Arial,Helvetica,sans-serif;
       font-size: 18px;
       font-weight: bold;
       display: block;
   }
   
   .byline {
       color: #666600;
       font-style: italic;
       font-weight: bold;
       display: inline;
   }
   

   This style sheet defines styles for two built-in HTML tags (<p> and <a>) that will be applied to all instances of those tags. It also defines two style classes (.headline and .byline) that will be applied to specific paragraphs and text spans.

3. Save the file as html_styles.css.
4. Create a new text file in a text or HTML editor, and save the document as myText.htm.

   Add the following text to the file:

   <p class='headline'>Flash adds advanced anti-aliasing rendering technology!</p><p><span class='byline'>San Francisco, CA</span>--Adobe Inc. announced today a new version of Flash that features a brand new font rendering technology called Advanced Anti-Aliasing, most excellent at rendering small text with incredible clarity and consistency across platforms. For more information, visit the <a href='http://www.adobe.com'>Adobe Flash web site.</a></p>
   

   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.

5. Create a new Flash document in the Flash authoring tool.
6. Select the first frame in Layer 1 in the Timeline (Window > Timeline).
7. Open the Actions panel (Window > Actions), and add the following code to the Actions panel:

   this.createTextField("news_txt", 99, 50, 50, 450, 300);
   news_txt.border = true;
   news_txt.html = true;
   news_txt.multiline = true;
   news_txt.wordWrap = true;
   
   // Create a new style sheet and LoadVars object.
   var myVars_lv:LoadVars = new LoadVars();
   var styles:TextField.StyleSheet = new TextField.StyleSheet();
   
   // Location of CSS and text files to load.
   var txt_url:String = "myText.htm";
   var css_url:String = "html_styles.css";
   
   // Define onLoad handler and Load CSS file.
   styles.onLoad = function(success:Boolean):Void {
       if (success) {
           /* If the style sheet loaded without error, 
               then assign it to the text object, 
               and assign the HTML text to the text field. */
           news_txt.styleSheet = styles;
   } else {
           trace("Unable to load CSS file.");
       }
   };
   styles.load(css_url);
   
   // Define onData handler and load text to display.
   myVars_lv.onData = function(src:String):Void {
       if (src != undefined) {
           news_txt.htmlText = src;
       } else {
           trace("Unable to load HTML file");
       }
   };
   myVars_lv.load(txt_url);
   

   NOTE

   In this ActionScript, you are loading the text from an external file. For information on loading external data, see Working with Images, Sound, and Video.

8. Save the file as news_html.fla in the same directory that contains the CSS file you created in step 3.
9. Select Control > Test Movie to see the styles applied to the HTML text automatically.

Flash CS3