Load an external CSS file using ActionScript 3, sample code.

Posted byPeter WithamPosted inActionScript, Adobe, AS3, Development, Flash, TutorialsTags:, , , , , , , , ,

The code sample below loads an external CSS file and then applies it to items on the stage.

———– code sample

function cssLoadComplete(event:Event):void
{
        styles.parseCSS(cssLoader.data);
        // Now assign the StyleSheet to a text field for example
        some_text_field.styleSheet = styles;

        // Now you would load any external text or html into
        // the text field

}

var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest(“some_style_sheet.css”);
var styles:StyleSheet = new StyleSheet();

cssLoader.load(cssRequest);
cssLoader.addEventListener(Event.COMPLETE, cssLoadComplete);

———– end code sample

Notice that you assign the CSS styles to the text field before loading the content, I think this is really the way to go so that you have the receiver ready to display the content correctly before loading it, I always do it this way so cannot comment if it works the other way around.

Published by Peter Witham

Web applications developer & designer. Certified Flash Designer.

16 thoughts on “Load an external CSS file using ActionScript 3, sample code.”

  1. Hi Pete,

    thank you for your code.

    It seems very good, but I don’t understand what do you refer whit the instruction:

    some_text_field.styleSheet

    Does the property styleSheet exsist for some content?

    Thank you

  2. Hi Pete,

    I done this question because I’m developing in Flex Builder and it use ActionScript, but I think that some (probably all) Flex Builder component haven’t the styleSheet property.

    Thank you

  3. some_text_field would be the instance name on the stage of a text component that requires the assignment of created CSS stylesheet.

  4. I have not tried it in Flex but I am thinking it would be the same, but with Flex you could just create and assign the CSS Style-Sheet in the IDE rather than programatically.

  5. Hi I want to call the external css file in action script, where in action script component will be getting generated,… so in that component i need to apply the exterbnal file css.. let me know how to do this process…

  6. I believe you could simply apply the CSS to the component just the same as assigning it in MXML. You would be best to check the ActionScript help, but off the top of my head I think you can assign the CSS class style to a component in code just the same as doing it inline in the MXML. Someone else might be able to offer a more accurate answer, but check the help file as I believe there is some sample code in there somewhere.

  9. Hi pete,

    I’m a novice at this I playing with ya code (as3) but, where you say you can put a text file or html i tried all I know with no joy!! can you show me the code to load a txt file Please…
    Thabks
    Spen

    function cssLoadComplete(event:Event):void
    {
    styles.parseCSS(cssLoader.data);
    // Now assign the StyleSheet to a text field for example
    some_text_field.styleSheet = styles;

    // Now you would load any external text or html into
    // the text field

    }
    var cssLoader:URLLoader = new URLLoader();
    var cssRequest:URLRequest = new URLRequest(”some_style_sheet.css”);
    var styles:StyleSheet = new StyleSheet();

    cssLoader.load(cssRequest);
    cssLoader.addEventListener(Event.COMPLETE, cssLoadComplete);

  10. Found some more of your code on one of ya pges works a treat
    Cool! Thanks any
    Spen.
    function textLoadComplete(event:Event):void {

    t_txt.text = textLoader.data;
    }

    var textLoader:URLLoader = new URLLoader();
    var textReq:URLRequest = new URLRequest(“10to9.txt”);

    textLoader.load(textReq);
    textLoader.addEventListener(Event.COMPLETE, textLoadComplete);

  13. Hi Pete,
    I have a movic clip symbol which when I mosue over plays the first 1to24 frames and then when mouse out plays 25 to the end 50.
    When I mouse over and out quickly then animation no longer plays!! How can I prevent this? please see code below (as3)
    Thanks
    Spencer

    blue_mc.addEventListener(MouseEvent.MOUSE_OVER,playover);

    function playover(e:MouseEvent):void {
    e.currentTarget.gotoAndPlay(1);
    }

    blue_mc.addEventListener(MouseEvent.MOUSE_OUT,playout);
    function playout(e:MouseEvent):void {
    e.currentTarget.gotoAndPlay(25);
    }

  14. Hi Spen,

    I’ll take a look and get back to you, it sounds like the code is jumping to a frame before the animation has completed due to the quick mouse movement.

  15. Hi Pete,Hope u r good.I amvery new at Flash and doing my first site.I used yor code above but the css file is not showing!I have spent hours trying to figure it out.I have this code on five movieclips in the library tha are added to the time line.Ho ever the css has refused to show and i feel it may not be “compiling?” properly.All the text files are in an extenal folder.I amusing georgia as a font do you think this is the problem?I did embed the font, though,Any help is greatly appreciated…
    thanks

  16. Hi Joe, it is possible that you will need to embed the font in the swf file. Be sure that the path to your CSS file is also correct relative to the swf file.

Leave a comment