Styling your text with CSS in Actionscript 3

I know, it’s a very silly stuff, but I think could be useful for anybody that would like to styling textfields with CSS in few moments.
This little sample, show you how to make it via Actionscript 3 in Flash. 

First of all we create CSS file called cssStyle.css with a custom color for the text:

 .customBold{

color:#FF00CC;

}

Ok now, in the first frame of our Flash file we create a dynamic textfield with t_txt istance name and then we create another layer called “actionscript”. In the first keyframe of Actionscript layer we copy and past this code:

stop();


var loader:URLLoader = new URLLoader();

var req:URLRequest = new URLRequest(“cssStyle.css”);

loader.load(req);



loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);


function loaderCompleteHandler(event:Event):void {

var sheet:StyleSheet = new StyleSheet();

sheet.parseCSS(loader.data);

t_txt.styleSheet = sheet;

t_txt.htmlText = “<span class=’customBold’>This is a silly text with CSS style</span> and without CSS!”;

}

So first of all we load the external CSS file with URLLoader class and when loaded complete we use StyleSheet object to parse CSS and to apply it in our textfield in the stage we only set stylesheet textfield property with StyleSheet object.
You can download sample files from this link 

Advertisements

2 thoughts on “Styling your text with CSS in Actionscript 3

  1. Everything fine so far.
    For binding it into a Flex Actionscript project the font is showing rough without antiAlias. If I debug with a breakpoint on the parsing line or even the loading line and continue, everything is fine again. Despreatly trying to find the reason – any idea?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s