Loading External CSS StyleSheets in Flash9 / AS3 / CS3

External CSS stylesheets can be used with flash AS3. This is possible with the StyleSheet class in AS3 and controls such as TextField have a property for the stylesheet.


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

OR apply to a StyleSheet object that can be used for many controls


 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 = "

This is a headline

" + "This is a line of text. " + "This line of text is colored blue."; 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; } } }

Flash is limited in CSS support and only supports CSS1 properties and a minimal amount for formatting.

Supported CSS properties

Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported CSS properties and values as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized.)

CSS property ActionScript property Usage and supported values
text-align textAlign Recognized values are left, center, right, and justify.
text-decoration textDecoration Recognized values are none and underline.
margin-right marginRight Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
kerning kerning Recognized values are true and false.
letter-spacing letterSpacing Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
font-family fontFamily A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.
display display Supported values are inline, block, and none.

For an example of using styles on XML elements, see An example of using styles with XML.


  • http://felisan.wordpress.com felisan

    nice blog.
    looking forward to read more!

    and sorry, but actionscript 3.0 is really hard to understand, I think.
    so here’s my rookiequestion.

    I’ve added this code to my file:

    var styles:TextField.StyleSheet = new TextField.StyleSheet();
    styles.onLoad = function(success:Boolean):Void {
    if (success) {
    // display style names.
    trace(“this is the styles name: “+this.getStyleNames());
    } else {
    trace(“Error loading CSS file.”);
    content of styles.css:
    body {
    background-color: #cccccc;
    width: 400px;
    height: 300 px;
    border: 1px solid #4b4b4b;
    margin: 10px auto;
    text-align: center;
    h1 {
    margin: 0;
    font-family: verdana, arial, sans-serif;
    color: #4c4c4c;
    font-size: 14px;
    font-weight: bold;
    h2 {
    color: #999999;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    p {
    font-family: verdana, arial, sans-serif;
    color: #000000;
    font-size: 11px;
    p.Right {
    text-align: right;
    #content {
    text-align: left;
    background-color: #ffffff;
    padding: 10px;

    how do I actionscript a textfield, that uses this .css-file?

    thanks in advance

  • http://drawk.wordpress.com/ drawk

    Hey felisan. You are on the right track all you have to do now is set htmlText of your textbox to include spans or classes from your stylesheet. i.e.

    var label:TextField = new TextField();
    label.styleSheet = style;
    label.htmlText = “Hello World…”;

  • http://none RaQ

    I’m receving an error when i compile the file …

    1046: Type was not found or was not a compile-time constant: Void.

    What can i do ?

  • http://www.ibiseye.com Charlie Szymanski

    RaQ: Void needs to be lowercased in AS3… Use “void” instead.

  • Jason F

    How does this work with TextArea? I tried using setStyle(“textFormat”, myFomat) but I’m not getting anything.

  • http://drawk.wordpress.com/ drawk

    Hey Jason,

    Are you immediately setting it or doing it in the onload of the css file in flash? If you set it without waiting for it to load it will not whos.

    Also, setStyle is an older AS1 method. The above samples are as2 and for AS3 especially where you have StyleSheet classes that you set to the .styleSheet properties.

    Then you just use html tags like to set styles to in the TextAreas.

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

  • http://visionspin.com Louis

    I’m looking at the as3 example starting on line 16. Will this cause an “Error 1095: The string literal must be terminated before the line break.”?

    Also, do you need to escape the quotes around “bluetext” in line 21 or does as3 somehow figure that all out?

  • Thomas

    i see to be having an issue using this code to format external text loads. is there an alternative code i need when trying to format external text? thanks.

    var external_txt:TextField = new TextField();
    var externalReq:URLRequest = new URLRequest(“aboutus.txt”);
    var externalLoad: URLLoader = new URLLoader();


    externalLoad.addEventListener(Event.COMPLETE, textReady);
    external_txt.text = event.target.data;

    external_txt.x = 104;
    external_txt.y = 140;
    external_txt.width = 522;
    external_txt.height = 272;


    var styles:TextField.styleSheet= new TextField.styleSheet();
    styles.onLoad = function(success:Boolean):void {
    if (success) {

    } else {
    trace(“Error loading CSS file.”);

  • http://drawlogic.com/ drawk

    Hey Thomas,

    You need to set the text property of htmlText and then also when you have the styles object set it to the styles formatter.

    field.styleSheet = sheet;
    field.htmlText = exampleText;

    Or for your specific samples

    external_txt.styleSheet = styles;
    external_txt.htmlText = event.target.data;

  • BeeBoy

    I would like to know how to write to a file in actionscript.could someone illustrate that to me

  • andreb

    Hi, i’ve tried this example (exactly like it is) and it gives me no errors but the textfield doesn’t get formated! Anyone has any idea why this could hapen??


  • robert

    ok so i have this code(below) and i want to style the text, as in change the font, textcolor, size, etc. I dont know what i am doing and i am sooo frustrated, please help. cs3 as3

    var eMain_txt:TextField = new TextField();
    var eMainReq:URLRequest = new URLRequest(“text/eMain.txt”);
    var eMainLoad:URLLoader = new URLLoader();
    var eCap_txt:TextField = new TextField();
    var eCapReq:URLRequest = new URLRequest(“text/eCap.txt”);
    var eCapLoad:URLLoader = new URLLoader();


    eMainLoad.addEventListener(Event.COMPLETE, eMainReady);
    eCapLoad.addEventListener(Event.COMPLETE, eCapReady);
    up_btn.addEventListener(MouseEvent.CLICK, scrollUp);
    down_btn.addEventListener(MouseEvent.CLICK, scrollDown);

    eMain_txt.x = 245;
    eMain_txt.y = 80;
    eMain_txt.border = false;
    eMain_txt.width = 174.9;
    eMain_txt.height = 620;
    eMain_txt.wordWrap = true;
    eCap_txt.x = 36;
    eCap_txt.y = 223.3;
    eCap_txt.border = false;
    eCap_txt.width = 186;
    eCap_txt.height = 109;
    eCap_txt.wordWrap = true;


    function eMainReady(event:Event):void
    eMain_txt.htmlText = event.target.data;
    function eCapReady(event:Event):void
    eCap_txt.text = event.target.data;
    function scrollUp(event:MouseEvent):void
    eMain_txt.scrollV –;
    function scrollDown(event:MouseEvent):void
    eMain_txt.scrollV ++;

  • http://drawlogic.com/ ryan

    robert you are almost there. You just need to now have a Stylesheet object that you can load from a css file or use flash to create (flash internally uses names without the “-” in them.

    Where loader.data is from the css file.

    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();
    field.styleSheet = sheet;
    field.htmlText = exampleText;

    Be sure your htmlText data has the HTML tags in it like etc. Also one thing about flash HTML is it only supports limited tags. See above for all the styles it supports.

    You can also look at wrapper or flashml to look at HTML to flash conversion which can handle more like divs and tables etc.

  • humbleOne

    ok so what i want to be able to do is load some xml data into flash, then be able to change it around in flash and then save the data over the original xml file.. (pretty much just a simple flash cms, using an xml file instead of a database)

    now i know actionscript very well, however thats about it.. don’t really know any other languages, like php, asp, etc etc..

    im guessing the easiest way to do this is to import the xml data, change it, place it within a variable, and then have some kind of script overwrite the oringal xml file with the variable.

    anyone able to help me out?

  • http://drawlogic.com/ drawk

    Hey Humble,

    Here there are lots of ways. You will need external server script to help you save it to the file system (flash can’t do that by itself due to security).

    You could:
    – simple post it to a php or asp.net file that would then save the post variable to the file
    – use a service (web service or json service) to catch the remoting call and save it to disk
    – use a service to do a partial update (so you can stream the file and not kill the entire app when the file is writing)

    You can accomplish the first items with a URL loader with params.

    The second way you will need to have some service knowledge to pull off with NetConnection, PendingResult etc.

  • HumbleOne

    I appreciate the information but is it possible that you could further clarify the consept of server script or show me an example?Because the software i have to create is a selfcontain application which is suppost to be installed in the user’s machine, played and store results and user name with any internet connection.

    I am sorry for any incovinience is just that i’ve made so many attempts and now i am running out of time.

    please if methods u describe abouve doesn’t require interenet connection in order to work then please illustrate it to me

  • HumbleOne

    thank you in advance

  • http://drawlogic.com/ drawk

    HumbleOne. The only way flash can save locally is by using an SWF2EXE like MDM zinc or Adobe AIR. Flash by itself cannot write to the file system for security reasons. But AIR sounds like a perfect candidate for you. It is meant for desktop flash and has access to system info and files.

  • HumbleOne

    thanxs i’ll have a look at that

  • George

    Dont suppose you know anything about implementing Line-height? Its supported within the TextFormat class (leading) so its possible within AS3 but the CSS property (line-height) is not supported when using an external style sheet.

    Ive found a few hacks around for AS2 but nothing on AS3 and wouldnt know where to start on migrating them.
    Any insight Id love to know,

    great site btw

  • http://drawlogic.com/ drawk

    Hey George,

    I don’t think flash supports the line-height as it is not in the supported CSS list above. If is is there it will be lineHeight. Although not all hope is lost there are some great kits like flash wrapper and FlashML that convert HTML to flash and they have methods in there to get around some css that is not supported in flash (since flash css and html support is pretty ancient).

  • http://www.pixelnickel.com pixelnickel

    Hey guys, for line-height, try leading. (default is 2)


  • yav

    I’ve noticed an issue when using class in the CSS and then trying to style the hover, link and rollover effects of that class. Flash seems to hate that and none of the text is styled in the text field.



    .className a:hover


    .className a:link


    .className a:visited


    when importing into Flash it just ignores the entire style.

    I’ve also been using this nice little class that I wrote to handle my CSS loading:

    package com.barkley
    import flash.text.*
    import flash.events.*
    import flash.net.*

    public class cssStyle
    public var urlLoader:URLLoader
    private var css:StyleSheet
    private var callback:Function

    public function cssStyle(path:String, _callback:Function)
    callback = _callback

    urlLoader = new URLLoader()
    urlLoader.addEventListener(Event.COMPLETE, cHandler)
    urlLoader.load(new URLRequest(path))

    private function cHandler(e:Event):void
    css = new StyleSheet()


    public function getCSS():StyleSheet
    return this.css

    All works fine as long as I’m not using custom link styles in the CSS Class.

  • Chris

    Working on menu buttons that control the External Text with AS3. I have everything working with the main menu button, but when trying to get buttons with in a page to control the External Text i get an error and the site wont run.

    code for my a button that work in the main stage.


    function b1Listener(event:MouseEvent):void {

    Ok but now say you are on the artist page and want to display infomation on each artist once that artist is clicked. the button is not on the main stage its main stage then sections. this is the code i tried.


    function b8Listener(event:MouseEvent):void {

    Whats wrong?

  • http://www.sharedknowhow.com/2008/07/fixed-flash-textarea-css-incompatibility/ Timdj

    solution for using textArea.textField with css bug see http://www.sharedknowhow.com/2008/07/fixed-flash-textarea-css-incompatibility/

  • Gizmo

    To yav:

    the order is wrong:
    a:link {}
    a:visited {}
    a:hover {}

    ‘hover’ should always be defined last …
    stupid … I know … but it should work

  • http://www.weightlossproductz.com Acomplia

    Acomplia represents one of the latest and indeed a most novel method for controlling body weight. Acomplia operates by being a cannabinoid receptor antagonist. This means that Acomplia prevents the normal action of endogenous cannabinoid in the brain from stimulating the so-called CB1 receptors. It would appear that these receptors stimulate appetite and therefore when they are “subdued” so is the need to eat.

  • MikeS

    Shut up, Acomplia…

    Anyways im having the same issue adreb(above) is having. While i did not use this tutorial verbatim, everything i have matches up logically, its returning no errors, BUT IT WON’T FORMAT THE TEXT!

    I am successfully importing both CSS and HTML files. (i know CSS is being imported by using trace)

    What could cause Flash to ignore CSS??

  • googi

    how can i apply external css style sheet to component text area

  • googi

    plz help me

  • http://offliners.dk Jakob E

    Hi googi,

    To apply external ccs to the TextArea component try this:

    // Import Classes
    import CSSTextArea
    import CSSLoader

    // CSSLoader
    var css:CSSLoader=new CSSLoader(“CSSTextArea.css”)

    // CSSTextArea
    // – be sure that you have an instance of TextArea in your library
    var cssTextArea:CSSTextArea=new CSSTextArea()
    cssTextArea.htmlText=”CSS TextAreaLorem ipsum dolor sit amet.Link


    To make this work you’ll need the two classes and the css file:

    // ————————————————
    // CSSLoader
    // ————————————————
    // Class for loading external stylesheets
    // Usage Example 1:
    // var tf:TextField=new TextField()
    // tf.StyleSheet=new StyleSheetLoader(“styles.css”)
    // Usage Example 2:
    // var css:StyleSheetLoader=new StyleSheetLoader(“styles.css”)
    // var tf1:TextField=new TextField()
    // tf1.StyleSheet=css
    // var tf2:TextField=new TextField()
    // tf2.StyleSheet=css
    // To limit size the class only dispatches COMPLETE and IO_ERROR
    // without loader parameters
    // To get the full range of events add event listener to the
    // public property loader – like:
    // var css:StyleSheetLoader=new StyleSheetLoader(“styles.css”)
    // css.loader.addEventListener(ProgressEvent.PROGRESS,….)
    package {
    import flash.text.StyleSheet;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.events.IOErrorEvent;

    public class CSSLoader extends StyleSheet {
    public var loader:URLLoader;
    public var data:String;
    public function CSSLoader(css:String=”"):void {
    if (css!=”") {
    public function load(css:String):void {
    loader=new URLLoader();
    loader.load(new URLRequest(css));
    private function completeHandler(e:Event):void {
    private function ioErrorHandler(e:Event):void {
    private function destroy():void {

    // ————————————————
    // CSSTextArea
    // ————————————————
    // Extends the TextArea to handle StyleSheets
    package {
    import fl.controls.TextArea;
    import flash.text.StyleSheet;
    public class CSSTextArea extends TextArea {
    public function CSSTextArea() {
    // When adding text to the textarea the class tries to add default
    // TextFormat to the textfield. Since TextFormat conflicts
    // with StyleSheets adding styles will cause an error.
    // To add a bypass we add a StyleSheet check in the drawTextFormat
    // function – skipping the default TextFormat.
    override protected function drawTextFormat():void {
    if (!textField.styleSheet) {
    } else {
    if (_html) {
    textField.htmlText = _savedHTML;
    // Pass styleSheet to textField
    public function set styleSheet(css:StyleSheet):void {

    /* ————————————————
    CSS File: CSSTextArea.css
    ———————————————— */


    Best, Jakob E

  • http://offliners.dk Jakob E

    Well… the htmlText got stripped.
    Try this – replacing the “[" and "]”

    “[p class='header'] CSSTextArea [/p][p] Lorem ipsum dolor sit amet.[/p][a href='#' class='link'] Link [/a]“

  • http://none don

    I am making multiple TextFields with a for loop. I am making 4 in all. When I try to apply the htmlText I cannot seem to access the instance to apply it to only one instance.

    Here is my code:

    var textContainer:Sprite=new Sprite;
    var textBox:TextField;

    var fillType:String=GradientType.LINEAR;
    var colors:Array=[0x999999,0xFFFFFF];
    var colors02:Array=[0x333333,0x999999];
    var colors03:Array=[0xFFFFFF,0x999999];
    var alphas:Array=[80,100];
    var alphas02:Array=[.1,.9];
    var ratios:Array=[0,255];
    var matr:Matrix=new Matrix;
    var matr02:Matrix=new Matrix;
    var matr03:Matrix=new Matrix;
    var spreadMethod:String=SpreadMethod.PAD;

    var mainContainer:Sprite=new Sprite;

    var mainInterfaceBorder01:Shape=new Shape;

    var mainInterfaceBorder02:Shape=new Shape;

    var mainInterface01:Shape=new Shape;

    var mainInterface02:Shape=new Shape;

    var tabSprites:Array=new Array;

    function loadTabBg():void {
    for (var i:Number=0; i < 4; i++) {
    var tabBg:Sprite=new Sprite;
    with (tabBg) {
    tabBg.x=i * 95;

    var currentTab:Shape=new Shape;
    var currentTabBtm:Shape=new Shape;

    function loadTabs():void {

    for (var i:Number=0; i < 4; i++) {
    var tab:Sprite=new Sprite;

    var tabHlite:Shape = new Shape();
    tabHlite.x=i * 95;

    tab.name=”tab” + i;

    function clicked(evt:MouseEvent):void {

    var currentX:int=evt.target.x;
    var tag:String=evt.target.name;

    switch (tag) {
    case “tab0″ :
    case “tab1″ :
    case “tab2″ :
    case “tab3″ :

    with (tab) {

    tab.x=i * 95;


    function loadTextContainers():void {
    for (var i:Number=0; i < 4; i++) {
    with (textContainer) {

    textContainer.x=i * -1;

    var tab00text:String = “UPDATES”;
    var tab01text:String = “VIDEOS”;
    var tab02text:String = “PROMOTIONS”;
    var tab03text:String = “FEATURED PRODUCTS”;

    var tabArray:Array=new Array(tab00text,tab01text,tab02text,tab03text);

    function loadText():void {

    for (var i:Number=0; i < 4; i++) {
    textBox=new TextField ;
    var CSSFile:String = “assets/pDentalAds.css”;
    var XMLFile:String = “assets/content.xml”;

    var cssLoader:URLLoader = new URLLoader();
    var cssRequest:URLRequest = new URLRequest(CSSFile);
    cssLoader.addEventListener(Event.COMPLETE, cssLoaded);

    function cssLoaded(evt:Event):void {
    var css:StyleSheet = new StyleSheet();

    textBox.styleSheet = css;
    textBox.htmlText = tab00text;
    textBox.htmlText = tab01text;
    //textBox.htmlText = tab02text;
    //textBox.htmlText = tab03text;
    //var tFormat:TextFormat=new TextFormat;
    //tFormat.font=”Verdana, Arial, Helvetica”;
    //tFormat.color = 0xFFFFFF;
    //hFormat.color = 0×000000;
    //hFormat.size = “12″

    with (textBox) {
    textBox.x=i * 95;



  • http://twitter.com/trenoops trenoops sevenly

    This didn't work for me at all – I'm using Flash CS3 Professional and flash 9.0 as out put AS3 as the language.

  • http://myspace.com/trenoops trenoops

    This didn't work for me at all – I'm using Flash CS3 Professional and flash 9.0 as out put AS3 as the language.