Using CSS with TLF text

In the Flash Pro CS5.5 release, the ability to use CSS stylesheets with TLF text was added. Previously you could only use them with Classic text blocks.

In order to use CSS with Flash, you need to use ActionScript 3.0. The basic requirements are as follows:

  • You need a CSS file that contains your style definitions. (Just a text file with a .css filename extension)
  • An URLLoader instance
  • An URLRequest instance
  • A function that gets called when the COMPLETE event fires from the URLLoader. This function is where you will apply the style sheet to the text.

Here are the basic steps:

  1. Create CSS text file with style definitions
  2. In ActionScript, create an URLLoader instance.
  3. Create an URLRequest instance.
  4. Add an event listener for the URLLoader instance’s Event.COMPLETE event.
  5. In the function that’s called when the COMPLETE event fires, create a new StyleSheet instance.
  6. Call the parseCSS method on the URLLoader data (which contains the stylesheet).
  7. Apply the style sheet to the text instance.
  8. Apply individual styles from the style sheet to the text in the text instance.

Paul Trani has just posted a new video tutorial on how to set this all up in ActionScript 3.0. The video page also includes a link to the sample files he’s using.

Note that there is a code error in the video at 3:20 that gets corrected later at 6:55. (The line css.parseCSS(fl_TextURLRequest_3.data) should be css.parseCSS(fl_TextLoader_3.data).