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 

Published by

luca mezzalira

Being associated with the industry since 2004, I have lent my expertise predominantly in the solution architecture field. I have gained accolades for revolutionising the scalability of frontend architectures with micro-frontends, from increasing the efficiency of workflows, to delivering quality in products. My colleagues know me as an excellent communicator who believes in using an interactive approach for understanding and solving problems of varied scopes. I helped DAZN becoming a global streaming platform in just 5 years, now as Principal Architect at AWS, I'm helping our customers in the media and entertainment space to deliver cost-effective and scalable cloud solutions. Moreover, I'm sharing with the community the best practices to develop cloud-native architectures solving technical and organizational challenges. My core industry knowledge has been instrumental in resolving complex architectural and integration challenges. Working within the scopes of a plethora of technical roles such as tech lead, solutions architect and CTO, I have developed a precise understanding of various technicalities which has helped me in maximizing value of my company and products in my current leadership roles.

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 )

Connecting to %s