Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Text and Strings > Formatting text with Cascading Style Sheet styles > Loading external CSS files

Loading external CSS files

You can define styles in an external CSS file and then load that file into a style sheet object. The styles defined in the CSS file are added to the style sheet object. To load an external CSS file, you use the load() method of the TextField.StyleSheet class. To determine when the CSS file has finished loading, use the style sheet object's onLoad event handler.

In the following example, you create and load an external CSS file and use the TextField.StyleSheet.getStyleNames() method to retrieve the names of the loaded styles.

To load an external style sheet:

1. In your preferred text or CSS editor, create a new file.
2. Add the following style definitions to the file:

   .bodyText {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 12px;
   }
   
   .headline {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 24px;
   }
   

3. Save the CSS file as styles.css.
4. In Flash, create a new FLA file.
5. In the Timeline (Window > Timeline), select Layer 1.
6. Open the Actions panel (Window > Actions).
7. Add the following code to the Actions panel:

   var styles:TextField.StyleSheet = new TextField.StyleSheet();
   styles.onLoad = function(success:Boolean):Void {
       if (success) {
           // display style names.
           trace(this.getStyleNames());
       } else {
           trace("Error loading CSS file.");
       }
   };
   styles.load("styles.css");
   

   NOTE

   In the previous code snippet, this.getStyleNames() refers to the styles object you constructed in the first line of ActionScript.

8. Save the FLA file to the same directory that contains styles.css.
9. Test the Flash document (Control > Test Movie).

   You should see the names of the two styles in the Output panel:

   .bodyText,.headline
   

   If you see "Error loading CSS file." in the Output panel, make sure the FLA file and the CSS file are in the same directory and that you typed the name of the CSS file correctly.

As with all other ActionScript methods that load data over the network, the CSS file must reside in the same domain as the SWF file that is loading the file. (See Restricting networking APIs.) For more information on using CSS with Flash, see StyleSheet (TextField.StyleSheet) in the ActionScript 2.0 Language Reference.

For a sample source file, formattedText.fla, which shows you how to apply CSS formatting to text that you load into a SWF file at runtime, see the Flash Sample page at www.adobe.com/go/learn_fl_samples. Download and decompress the Samples zip file and navigate to the ActionScript2.0/LoadText folder to access the sample.

Flash CS3