Loading an external CSS file

The CSS approach to formatting is more powerful when you can load CSS information from an external file at run time. When the CSS data is external to the application itself, you can change the visual style of text in your application without having to change your ActionScript 3.0 source code. After your application has been deployed, you can change an external CSS file to change the look of the application, without having to redeploy the application's SWF file.

The StyleSheet.parseCSS() method converts a string that contains CSS data into style declarations in the StyleSheet object. The following example shows how to read an external CSS file and apply its style declarations to a TextField object.

First, here is the content of the CSS file to be loaded, which will be named example.css:

p {
    font-family: Times New Roman, Times, _serif;
    font-size: 14;
}

h1 {
    font-family: Arial, Helvetica, _sans;
    font-size: 20;
    font-weight: bold;
}

.bluetext {
    color: #0000CC;
}

Next is the ActionScript code for a class that loads the example.css file and applies the styles to TextField content:

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    public class CSSFormattingExample extends Sprite
    {
        var loader:URLLoader;
        var field:TextField;
        var exampleText:String = "<h1>This is a headline</h1>" + 
            "<p>This is a line of text. <span class='bluetext'>" +
            "This line of text is colored blue.</span></p>";
        
        public function CSSFormattingExample():void
        {
            field = new TextField();
            field.width = 300;
            field.autoSize = TextFieldAutoSize.LEFT;
            field.wordWrap = true;
            addChild(field);
            
            var req:URLRequest = new URLRequest("example.css");
            
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
            loader.load(req);
        }
        
        public function onCSSFileLoaded(event:Event):void
        {
            var sheet:StyleSheet = new StyleSheet();
            sheet.parseCSS(loader.data);
            field.styleSheet = sheet;
            field.htmlText = exampleText;
        }
    }
}

When the CSS data is loaded, the onCSSFileLoaded() method executes and calls the StyleSheet.parseCSS() method to transfer the style declarations to the StyleSheet object.

Flash CS3

Comments

Roger Pearson said on Oct 23, 2007 at 1:25 AM :

I've just tried using the code and I get an error saying packages cannot be
nested.
What am I doing wrong? i would have throught that the code is usable as is
before I tried to customise it.

No screen name said on Aug 1, 2008 at 8:21 AM :

The previous code must be saved in a ".as " file and imported in a .fla file

Yo can try this ( in a .fla file)

var loader:URLLoader;
var exampleText:String = " This is a headline " +
"This is a line of text. " +
"This line of text is colored blue.";

var req:URLRequest = new URLRequest("example.css");

loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(req);

function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(loader.data);
mi_texto.styleSheet = sheet;
mi_texto.htmlText = exampleText;
}

You need a dynamic text named mi_texto and with the option "render text as html" enabled

It works

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000232.html