Flash CS3 and the Cascading Style Sheet (CSS)

[Flep]

We saw how to assign an HTML text to a text field in Flash and how to do it also from an XML file.
With this article, I would like to take a look at the use of the CSS style sheet with Flash.
We know that we can assign an HTML text to a text field but how can we format that text using a CSS file?

Well, it can be done but not at 100%.
It is possible to use the HTML tags and CSS properties supported by the Flash Player.
In the first tutorial linked at the beginning of this article, you can see which are the HTML tags supported by the Flash Player.
About the supported CSS properties, I send you back to this Adobe page: supported CSS properties.
In this example, I firstly load a clean external HTML file (meaning without the tags body, head and title).
I will next load the file CSS, assign that CSS to the text field in Flash and display the text of the HTML file in the text field in Flash.
Strange, isn’t it?!

I create a FLA and I save it as ‘main.fla’.
Into which I drag from the library a UIScrollBar component from the Component Panel.
I create a dynamic text field on stage and I name it ‘field_txt’.

I create the Document Class, an AS file saved as ‘Main.as’, implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import fl.controls.UIScrollBar;
	import flash.text.StyleSheet;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	
	public class Main extends MovieClip
	{
		private var _html:String;
		private var _css:StyleSheet;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			loadHTML();
		}
		
		private function loadHTML():void
		{
			var loader:URLLoader=new URLLoader();
			var request:URLRequest=new URLRequest();
			request.url='info.html';
			loader.addEventListener(Event.COMPLETE,onHTML);
			loader.load(request);
		}
		
		private function onHTML(evt:Event):void
		{
			_html=evt.target.data;
			
			loadCSS();
		}
		
		private function loadCSS():void
		{
			var loader:URLLoader=new URLLoader();
			var request:URLRequest=new URLRequest();
			request.url='style.css';
			loader.addEventListener(Event.COMPLETE,onCSS);
			loader.load(request);
		}
		
		private function onCSS(evt:Event):void
		{
			_css=new StyleSheet();
			_css.parseCSS(evt.target.data);
			field_txt.styleSheet=_css;
			field_txt.wordWrap=true;
			field_txt.htmlText=_html;
			var scroller:UIScrollBar=new UIScrollBar();
			scroller.setSize(stage.stageWidth-20,300);
			scroller.scrollTarget=field_txt;
			addChild(scroller);
		}
	}
}

The external HTML file (info.html) is as follow:

<p class="title">Lorem ipsum no vix fierent honestatis reformidans.<p></p>
<p class="subtitle">Per timeam aliquip feugiat an, sint mentitum nam in, id solum justo tincidunt mel.<p></p>
<p class="body" >Ex vix sumo simul. Vel expetendis sadipscing in, quem consetetur mel ex, soluta alienum atomorum nam ex. Sed cu iusto nemore splendide, sea eu sadipscing scribentur. Ad vel etiam dictas euripidis, errem graecis intellegat mel te.

An vim accusata rationibus. Duo ex sint duis torquatos, scaevola iracundia mei ea, iusto delectus senserit et pro. Eum in pericula reformidans, has diceret sanctus cu. Atomorum petentium ad eos, munere melius principes vix at, est in omnis rationibus voluptatibus. Stet labore audire nam ea, per et mentitum instructior.

Kasd adolescens nec ut, vim dico lorem eu. Et pri epicuri ocurreret. Ne vitae reprimique his, dolor honestatis an eam, duo iuvaret equidem oportere ne. His eu singulis perpetua, nonumy tractatos eam no. Nihil eruditi qui te, ex eam invidunt facilisi euripidis.

Te sea dictas mediocritatem, ea vide doctus aliquip sea. Est et aperiri aliquando definiebas, no has ancillae invidunt recteque, mea rebum mucius mollis eu. Sumo consul copiosae mel an, sea homero noster animal ea, ei eam meis verterem. Mel ad enim lucilius, eum ad dicant fabellas lobortis. An copiosae cotidieque vel.

Sanctus imperdiet vix eu, te aeterno impedit pri, per et rebum suscipit laboramus. Te ubique ponderum mel. Veniam fabulas accusata vix no, nec facilis ocurreret at. Autem doctus ad his. Eu vidit putent senserit cum, an perfecto euripidis eos. Mel inimicus omittantur eu, his quot malis vitae ei.

Quis percipit voluptatum id sed, putant definitionem vim id, quis verear takimata te eum. Qui sumo suas ut, vel et persius adolescens. Dolorem menandri inciderint cu est, alienum omittam similique sit ei, quaestio maiestatis voluptaria eum ex. Mel augue minim blandit ad.

Cu eum dolores assentior, feugait vulputate vis ne, pri accusam consequuntur ea. Id modo eruditi torquatos ius, harum postea takimata eum ei, eu est iusto tempor eripuit. Ei his mollis officiis, per no dolores aliquyam aliquando, at dicant eloquentiam eos. Exerci numquam in vel, ex duo munere quaeque docendi. No mundi adolescens eos.

Per eu elitr voluptaria comprehensam, eum in meliore mentitum mediocrem. Puto labores intellegebat id mel, at eum insolens recusabo.<p></p>

The CSS file is as follow:

.title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: #0066FF;
	margin-left: 50px;
	margin-right: 50px;
}
.subtitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #0044AA;
	margin-left: 50px;
	margin-right: 50px;
}
.body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #666666;
	margin-left: 50px;
	margin-right: 50px;
}

And this is the result:

Let us analyse the code

Properties
a String type variable to which I will assign the content of the HTML file to be loaded
private var _html:String;
a StyleSheet type variable to which I will assign the external CSS file to load
private var _css:StyleSheet;

Constructor function
I call the method init
init();

Methods
init();
I impost the frame rate
stage.frameRate=31;
I call the method loadHTML which will load the external HTML file
loadHTML();

loadHTML();
I create an URLLoader
var loader:URLLoader=new URLLoader();
I create a request and I assign to it the property url, the file info.html
var request:URLRequest=new URLRequest();
request.url='http://www.flepstudio.org/swf/mix/StyleSheet/info.html';
I add the needed listener to the event Event.COMPLETE which will call the method onHTML once loaded
loader.addEventListener(Event.COMPLETE,onHTML);
I load the HTML file
loader.load(request);

onHTML();
I assign to the property _html the value of the info.html content
_html=evt.target.data;
I call the method loadCSS which will load the file style.css
loadCSS();

loadCSS();
I create a new URLLoader
var loader:URLLoader=new URLLoader();
I create a request and I assign to the property url, il file info.html
var request:URLRequest=new URLRequest();
request.url='http://www.flepstudio.org/swf/mix/StyleSheet/style.css';
I add the needed listener to the event Event.COMPLETE which will call the method onCSS once loaded
loader.addEventListener(Event.COMPLETE,onCSS);
I load the CSS file
loader.load(request);
I create a request and I assign to it the property url, the file info.html
onCSS();
I create (with the property _css of that class) a new instance of the StyleSheet Class of Actionscript 3.0
_css=new StyleSheet();
with the method parseCSS of the styleSheet class, I do a parsing of the content of the URLLoader ( with evt.target which is the loader and .data which is its content )
_css.parseCSS(evt.target.data);
I assign to the property stylesheet of the text field placed on stage, the property _css of that class (meaning that I assign to it a new CSS which is the one loaded)
field_txt.styleSheet=_css;
I impost the property wordWrap of the text field to true
field_txt.wordWrap=true;
via the property htmlText of the text field, I assign to it the formatted text in HTML from the content of the HTML file loaded
field_txt.htmlText=_html;
I create a new instance of UIScrollBar
var scroller:UIScrollBar=new UIScrollBar();
I assign to it the right dimension
scroller.setSize(stage.stageWidth,300);
I tell that it needs to act on field_txt via the property scrollTarget
scroller.scrollTarget=field_txt;
I add the ScrollBar to the stage
addChild(scroller);

Source files:

[Dolvid]

Thank you Flep. This was extremely helpful!