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

lucamezzalira

I’m the VP of Architecture at DAZN with more than 15 years of experience, a Google Developer Expert on Web Technologies and the London Javascript community Manager I had the chance to work on cutting-edge projects for mobile, desktop, web, TVs, set top boxes and embedded devices. I am currently managing DAZN, a sports video platform based on the cloud with millions of users that are watching live and on-demand contents. I'm the author of Front-End Reactive Architectures published by APress: https://goo.gl/ywAmsx I think the best way to use any programming language is mastering their models, that’s why I spent a lot of time studying and researching on topics like OOP, Functional and Reactive programming. In my spare time, I wrote for national and international technical magazines and editors, I'm also a technical reviewer for APress, Packt Publishing, Pragmatic Bookshelf and O'Reilly. I was speaker at: O'Reilly media webinars, O'Reilly Software Architecture (San Francisco & London), O'Reilly Fluent (San Jose), O'Reilly Oscon (London), Google Developers Summit (Krakow), Google DevFest (London), Frontend Devs Love (Amsterdam), Voxxed Days (Belgrad & Bristol), JeffConf (Milan), International Javascript Conference (Munich & London), JS Poland (Warsaw), Code Europe (Wroclaw), JSDay (Verona), CybercomDev (Łódź), Jazoon Conference (Bern), JDays (Göteborg), Codemotion (Milan), FullStack Conference (London), React London UG (London), Scrum Gathering (Prague), Agile Cymru (Cardiff), Scotch on the rocks (Edinburgh & London), 360Max (San Francisco), PyCon (Florence), Lean Kanban Conference (London), Adobe Creative Suite CS 5.5 - Launch event (Milan), Mobile World Congress (Barcelona)

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 )

Google photo

You are commenting using your Google 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