Introduction

During the following steps we'll create an HTML Box using ActionScript 3.0. Along the way we'll see:

• Creating external scripts (classes).
• Loading, parsing and using XML and CSS files.
• Creating new events with "dispatchEvent".
• Using "TextEvent".
• Using htmlText tags.

You can create the files that we'll see below in a texteditor like notepad etc., I'll be using FlashDevelop as a development environment. Our files will be:

• "styles.css"
• "source.xml"
• "CSS.as"
• "XMLLoader.as"
• "Main.as"

and for those who want to compile in Flash IDE:

• "htmlBox.fla"

Step 1 - Starting the HTML BOX

In FlashDevelop, start a new project. Choose "AS3 project" and name it "htmlBox".

After creating the project, "Main.as" will be created automatically. You need to create other files manually. Add a folder named "keremk" to src folder.

In this folder, we'll create "XMLLoader.as" and "CSS.as" by right-clicking "keremk" and going to Add > New Class... We'll also add our "source.xml" and "styles.css" files to the bin folder by right-clicking "bin" and going to Add > New XML File... and Add > New CSS File.

For Flash IDE, create a folder named "htmlBox" in your explorer. Create "Main.as" by right-clicking and going to New > Flash ActionScript File, then create "htmlBox.fla" by right-clicking and going to New > Flash Document. Then create a folder named "keremk" then in this folder create "XMLLoader.as" and "CSS.as". You need to create "styles.css" and "source.xml" in the "htmlBox" folder (same folder as the "Main.as" and "htmlBox.fla" files). You can create them by right-clicking and going to New > Text Document then renaming the extensions. You can use any editor to write "as","xml" and "css" files. You can also write "as" files in Flash IDE by double-clicking them.

Step 2 - Creating the CSS File

I'll use font-family, font-size, text-align, font-weight, color and text-decoration properties in my CSS file. I'll also create an "hW" tag for headings and "activeL","passiveL","page" and "para" classes for other texts.

hW          : Heading styles
activeL     : Active link styles
passiveL	: Passive link styles
page		: Page number styles
para		: Paragraph styles

Here is the code. I won't explain it line by line because I think it's pretty understandable.

A:link {
	text-decoration: underline;
	
}
A:hover{
	text-decoration: none;	
}

hW {
	font-family: "Courier New", Courier, monospace;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	color: #CCCCCC;
}
.activeL{
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	text-align: center;
	font-weight: normal;
	color: #EEEEEE;
}
.passiveL{
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	text-align: center;
	font-weight: normal;
	color: #666666;
}
.para {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: justify;
	font-weight: normal;
	color: #CCCCCC;
}
.page {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	font-size: 12px;
	text-align: right;
	font-weight: normal;
}

Step 3 - Creating the XML file

When creating XML file, we'll use Flash-htmlText tags that are shown below. For more information, you can visit Adobe for TextField.htmlText.

Anchor tag (link tag): <a> 
Bold tag        :<b>
Break tag       :<br>
Image tag       :<img>
Italic tag      :<i>
List item tag   :<li>
Paragraph tag   :<p>
Span tag        :<span>
Underline tag   :<u>

We'll start creating our "source.xml" by defining the firstchild as <data></data>. Between the <page></page> tags, we'll write our html code.

<?xml version="1.0" encoding="utf-8" ?>
<data>	
	<page>
		<? Entry point for page 1 ?>
	</page>
	<page>
		<? Entry point for page 2 ?>
	</page>
</data>

Step 4 - Writing HtmlBox Pages in the XML File

We'll start with a break "<br/>" to improve presentation. Note that we have to close every tag that we use in XML, otherwise the XML file can not be parsed. "<br/>" is a closed tag. After "break" tag, we'll write a heading within the "hw" tag and start the paragraph in "<span class='para'> </span>". For the lists we'll use a "<li></li>" tag.

<page><br/>
	<hW>HEADING</hW>
	<br/>
	<span class='para'>
		<? Paragraph text ?>
	</span>
	<li>
		<? List item ?>
		<? List item ?>
	</li>
</page>

Step 5 - Adding "Next" and "Previous" Links to Pages

To add next and previous links, we'll use "event:next" and "event:prev" as "href". These will be captured by flashplayer as an event. When the links are clicked, "event:next" dispatches a "link" event with a "next" text in flash.

<page>
.....
<span class='passiveL'>
	<a href="">&lt; PREVIOUS |</a>
</span>
<span class='activeL'>
	<a href="event:next">| NEXT &gt;</a>
</span>
</page>

In this page (for the first page) there won't be a previous page. So previous link should be passive and its "href" has to be empty.

By the way, to see "<", "&" etc. symbols in htmlbox we should use their codes shown below.

&lt;   : < (less than)
&gt;   : > (greater than) 
&amp;  : & (ampersand)
&quot; : " (double quotes)
&apos; : ' (apostrophe, single quote)

Step 6 - Adding Page Numbers to Pages

When adding page numbers, we just need to use the "page" class for "span". The pattern of page numbers is up to you. I wrote them like so: "(page 1/3)".

<page>
.....
<span class='page'>(page 1/3)</span>
</page>

And here is my XML file with one page.

<?xml version="1.0" encoding="utf-8" ?>
<data>
<page>
	<br/><hW>AS3 HTML BOX with XML and CSS support</hW><br/>
	<span class='para'>Hi everybody.<br/><br/>This HTML Box has been created with only AS3. And all codes have been written in external "as" files. <br/><br/>With the tutorial below, you'll learn:
	<br/>
	<li>How to create external classes.
		<br/>How to load, parse and use XML and CSS files in a htmlText.
		<br/>How to create new events with "dispatchEvent" and use those events.
		<br/>How to use "TextEvent" in htmlText.
		<br/>How to use htmlText tags.
	</li>
	</span>
	<br/><br/><br/><br/><br/><br/>
	<span class='passiveL'><a href="">&lt; PREVIOUS |</a></span>
	<span class='activeL'><a href="event:next">| NEXT &gt;</a></span>	<br/><br/><span class='page'>(page 1/3)</span>
</page>

By the way, you can add images to your pages as shown below:

<? with link ?>
<a href="your_link"><img src="your_image_source"/></a>

<? without link ?>
<img src="your_image_source"/>

Step 7 - Action Script Files (External Classes)

We've created the "keremk" folder and we'll use this folder for our "XMLLoader" and "CSS" classes.

We therefore have to start our classes with:

package keremk {

}

Step 8 - Creating the CSS Class

We'll start our CSS class with "package keremk{}" . Its class name will be the same as the file name "CSS". Note: ActionScript is case sensitive. Since we'll dispatch events with this class, it will extend "EventDispatcher".

package keremk {//CSS is in keremk folder
	public class CSS extends EventDispatcher {//CSS will dispatch events
		public function CSS():void {
			loader = new URLLoader;//when a CSS is created, new loader will be defined
		}
	}
}

Step 9 - CSS: Importing Flash Classes

import flash.net.URLLoader;//We'll load css file with urlloader
import flash.net.URLRequest;//and there should be a request to load.
import flash.text.StyleSheet;//We'll parse css file as a StyleSheet.
import flash.events.SecurityErrorEvent;//We'll dispatch events, so we need to import related classes too.
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.events.EventDispatcher;

You can also import those classes within 3 lines by using "*" to import all "events" and "net" classes, but I prefer to import them one by one. We don't need all "events" and "net" classes. If you prefer to write less code, here is the abbreviated equivalent.

import flash.events.*;
import flash.net.*;
import flash.text.StyleSheet;

Step 10 - CSS: Variables

We'll need only two variables in this class, a URLLoader and a StyleSheet.

private var loader:URLLoader;
public var sheet:StyleSheet;

By the way, private variables are not reachable from out of their classes. I'll use "loader" only in the CSS class so I can create it as private. I'll use "sheet" from the main class, so I need to create it as "public" (reachable).

Step 11 - CSS: Load Function

We'll use this load function from our main class, so we need to create it as public. It will require a string to load, that will be "_req:String"

public function load(_req:String):void {//function will load the file that its is path given.
	loader.load(new URLRequest(_req));//path should be transformed to a URLRequest to load the file.
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, secError);//We'll listen to 3 events to transfer to the main class.
	loader.addEventListener(IOErrorEvent.IO_ERROR, ioError);
	loader.addEventListener(Event.COMPLETE,loaded);
}

Step 12 - CSS: Event Handlers and Dispatchers

In Step 11, we added 3 event listeners to loader, Security Error, IO Error and Complete. One of them will be dispatched eventually. When it's happened we need to transfer it to the main class by listening and dispatching. We should also check if there is any problem when parsing CSS file after "Complete" event. We'll check it by using "try catch".

private function ioError(e:IOErrorEvent):void {//When IO error occurs,
	dispatchEvent(new Event("CSS_IOError"));// this line dispatches the "CSS_IOError".
}
private function secError(e:SecurityErrorEvent):void {//When there is a security problem,
	dispatchEvent(new Event("CSS_SecurityError"));//this line dispatches the "CSS_SecurityError".
}
private function loaded(e:Event):void {//If loading the file is done,
	try {								//try to parse it.
		sheet = new StyleSheet();
		sheet.parseCSS(loader.data);
		dispatchEvent(new Event("CSS_Loaded"));//If parsing is OK, this line dispatches "CSS_Loaded".
	} catch (e:Error) {
		dispatchEvent(new Event("CSS_ParseError"));//If parsing is NOT OK,this line dispatches "CSS_ParseError"
	}
}

With event handlers and dispatchers, our CSS class is done. Here is the full CSS.as file:

package keremk {
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.StyleSheet;
	import flash.events.SecurityErrorEvent;
	import flash.events.IOErrorEvent;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	public class CSS extends EventDispatcher {
		private var loader:URLLoader;
		public var sheet:StyleSheet;
		public function CSS():void {
			loader = new URLLoader;
		}
		public function load(_req:String):void {
			loader.load(new URLRequest(_req));
			loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, secError);
			loader.addEventListener(IOErrorEvent.IO_ERROR, ioError);
			loader.addEventListener(Event.COMPLETE,loaded);
		}
		private function ioError(e:IOErrorEvent):void {
			dispatchEvent(new Event("CSS_IOError"));
		}
		private function secError(e:SecurityErrorEvent):void {
			dispatchEvent(new Event("CSS_SecurityError"));
		}
		private function loaded(e:Event):void {
			try {
				sheet = new StyleSheet();
				sheet.parseCSS(loader.data);
				dispatchEvent(new Event("CSS_Loaded"));
			} catch (e:Error) {
				dispatchEvent(new Event("CSS_ParseError"));
			}
		}
	}
}

Step 13 - Creating the XMLLoader

We'll start our XMLLoader class with "package keremk {}" and it will extend "EventDispatcher", too.

package keremk { // XMLLoader is in keremk folder.
	    public class XMLLoader extends EventDispatcher {
		public function XMLLoader() {
			loader = new URLLoader;//when a XMLLoader is created, new loader will be defined.
		}
	}
}

Step 14 - XMLLoader: Importing Flash Classes

We'll need the same classes as we did for our CSS without the "StyleSheet" class. They're as follows:

import flash.events.SecurityErrorEvent;//Event classes to listen and dispatch.
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.net.URLLoader;//net classes to load xml files.
import flash.net.URLRequest;

Step 15 - XMLLoader: Variables

We'll now need 5 variables:

private var loader:URLLoader;// to load XML file
private var data:XML;// to hold XML file data to parse it.
private var i:uint;//counter to use in parsing.
private var lenXML:uint;//to check how many pages there are in XML. 
public var pages:Array = [];// to hold pages after parsing the XML.

Step 16 - XMLLoader: Load Function

The "load" function will be the same as with the "CSS.load". We'll use it from the main class and it should be public too.

public function load(_req:String):void {//function will load the file for which path is given.
	loader.load(new URLRequest(_req));//path should be transformed to a URLRequest to load the file.
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, secError);//We'll listen to 3 events to transfer to the main class.
	loader.addEventListener(IOErrorEvent.IO_ERROR, ioError);
	loader.addEventListener(Event.COMPLETE,loaded);
}

Step 17 - XMLLoader: Event Handlers and Dispatchers

We've added 3 event listeners to loader, Security Error, IO Error and Complete. One of them will be dispatched eventually. When it's happened we need to transfer it to the main class by listening and dispatching. We should also check if there is any problem when parsing the XML file after the "Complete" event. There can be two different events to dispatch: "XML_Loaded" or "XML_ParseError". We'll check it by using "try catch".

private function ioError(e:IOErrorEvent):void {//When IO error occurs,
	dispatchEvent(new Event("XML_IOError"));// this line dispatches the "XML_IOError".
}
private function secError(e:SecurityErrorEvent):void {//When there is a security problem,
	dispatchEvent(new Event("XML_SecurityError"));//this line dispatches the "XML_SecurityError".
}
private function loaded(e:Event):void {//If loading the file is done,
	try {								//try to parse it.

		data = new XML(loader.data);//takes XML data to "data"
		lenXML = data.children().length();//checks the number of the pages

		for (i=0; i < lenXML; i++) {//parses XML data to array
			pages.push(data.children()[i]);
		}
		dispatchEvent(new Event("XML_Loaded"));//if parsing the XML is OK, dispatch "XML_Loaded".
	} catch (e:Error) {
		dispatchEvent(new Event("XML_ParseError"));//if something is wrong with XML data, this line dispatches "XML_ParseError".
	}
}

With handlers and dispatchers, our XMLLoader class is done. Here is the finished XMLLoader:

package keremk {
	import flash.events.SecurityErrorEvent;
	import flash.events.IOErrorEvent;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

	public class XMLLoader extends EventDispatcher {
		private var loader:URLLoader;
		private var data:XML;
		private var i:uint;
		private var lenXML:uint;
		public var pages:Array = [];
		
		public function XMLLoader() {
			loader = new URLLoader;
		}
		
		public function load(_req:String):void {
			loader.load(new URLRequest(_req));
			loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,secError);
			loader.addEventListener(IOErrorEvent.IO_ERROR,ioError);
			loader.addEventListener(Event.COMPLETE,loaded);
		}
		private function ioError(e:Event):void {
			dispatchEvent(new Event("XML_IOError"));
		}
		private function secError(e:Event):void {
			dispatchEvent(new Event("XML_SecurityError"));
		}
		private function loaded(e:Event):void {
			try {
				data = new XML(loader.data);
				lenXML = data.children().length();

				for (i=0; i < lenXML; i++) {
					pages.push(data.children()[i]);
				}
				dispatchEvent(new Event("XML_Loaded"));
			} catch (e:Error) {
				dispatchEvent(new Event("XML_ParseError"));
			}
		}
	}
}

Step 18 - Creating the Main Class

Since the Main class will be in our project's root folder, we'll begin writing it with "package {}". It will extend "sprite" and we'll start our code in the "Main" function:

package {
	//entry point for imports.
	public class Main extends Sprite {
		//entry point for vars.
		public function Main():void {
			//entry point for codes.
		}
		//entry point for additional functions.
	}
}

Step 19 - Main: Importing Flash Classes

import flash.display.Sprite;// Main class will extend "Sprite".So, we'll need "Sprite" class.
import flash.display.StageAlign;// We'll need "StageAlign" to align stage.
import flash.display.StageScaleMode;// We'll need "StageScaleMode" to manage scale mode of stage.
import flash.events.Event;// We'll need "Event" class to use events that we have created in "XMLLoader" and "CSS" classes.
import flash.events.TextEvent;// We'll need "TextEvent" to use page links in "htmlText".
import flash.text.TextField;// We'll create a "TextField" to show html pages and add our css to it with "TextFormat"
import flash.text.TextFormat;
import keremk.CSS;// And in that "Main" class, we'll use our "CSS" and "XMLloader" classes that we have created earlier.
import keremk.XMLLoader;

Step 20 - Main: Variables

private var xml:XMLLoader;//this will hold our XML data
private var css:CSS;//this will hold our StyleSheet data
private var field:TextField;//we'll use this to show our html pages
private var cssBool:Boolean = false;//these two booleans will tell us if our CSS and XML files are loaded
private var xmlBool:Boolean = false;
private var stgW:Number = stage.stageWidth;//these two will check the height and width of stage.
private var stgH:Number = stage.stageHeight;//this way we can change our HtmlBox's width and height from html file.
private var pageNum:int = 0;//this will define the page that we show in HtmlBox.(Since array index starts from 0, pageNum is 0)
private var boxBorder:Sprite;//this will be the border of our HtmlBox. We can enable border of TextField but this way we can manage the margins.

Step 21 - Main: Main Function

Main function will be executed automatically when we start HtmlBox. We therefore need to write our starter codes in this function.

public function Main():void {
	stage.align = StageAlign.TOP_LEFT;//These two lines are optional. I'd rather keep stage aligned to top-left and nonscaled.
	stage.scaleMode = StageScaleMode.NO_SCALE;

	boxBorder = new Sprite();//This is our border of htmlbox. Basically, it's an unfilled rectangle. And we'll create a new Sprite to draw it.
	boxBorder.graphics.lineStyle(2, 0xC0C0C0, 1);//thicknes = 2px, color = 0xC0C0C0(gray), alpha = 1 (100%). You can change these values as you wish.
	boxBorder.graphics.drawRect(5, 5, stgW - 10, stgH - 10);//margin = 5. It's the distance of border to stage boundary.
	addChild(boxBorder);//after we create and draw our border, we need to add it to the stage.

	field = new TextField();//We'll create a new TextField to show html pages.
	addChild(field);//since there are many properties to define, we'll add field to stage first.

	with (field) {//after we add the "field" to stage, we can use "with" to define its properties.
		x = 10; //I have defined x and y as 10 to make a 5px space between field and border.
		y = 10;
		width = stgW-20;//And width should be stgW-20. Because, if we want to make a 10px distance between field and stage, the width of the field must be 20px(10px from left + 10px from right) shorter than the width of the stage. 
		height = stgH-20;//And we should calculate the height like the width.
		multiline = true;//Field must be multiline. Because, our html texts are multiline.
		selectable = false;//If you want to make your text selectable, you can change this to "true".
		wordWrap = true;//Without "wordWrap" our paragraphs will be single lines.
		condenseWhite = true; // This is an important property that makes our text look better. Without this, there will be more spaces in everywhere of the htmltext.
	}

	//After we create our border and textfield, we can load our files.
	xml = new XMLLoader();//We'll create a new XMLLoader
	xml.load("source.xml");//and load our XML file. 

	//We need to listen for events to know what to do next.
	xml.addEventListener("XML_Loaded", xmlDone);//If we capture "XML_Loaded", we'll continue to create HtmlBox.
	xml.addEventListener("XML_IOError", error);//I'll create only one function for all errors.
	xml.addEventListener("XML_SecurityError", error);//So, all error events will go to this "error" function
	xml.addEventListener("XML_ParseError", error);

	css = new CSS();//We'll create a new CSS
	css.load("styles.css");//and load our CSS file.

	//css events are pretty the same with the xml events.
	css.addEventListener("CSS_Loaded", cssDone);//If we capture "CSS_Loaded", we'll continue to create HtmlBox.
	css.addEventListener("CSS_IOError", error);//And all error events go to "error" function, too.
	css.addEventListener("CSS_SecurityError", error);
	css.addEventListener("CSS_ParseError", error);
}

Step 22 - Main: "error" Function

Since all errors go to the "error" function, we need to arrange them with "switch case". We'll check which error occurred and write the requisite text to "field". In this step, I'll show only two errors. You'll see all errors in the finished Main class at Step 25

private function error(e:Event):void {
	switch(e.type) { //We'll check the type of the error that occurred
		case "XML_IOError"://If error is "XML_IOError", we'll write the requisite text about "XML_IOError" to "field".
		field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> XML IO ERROR<br>Please control your XML path!</font></b></p>' 
		break;//If error is "XML_IOError", we'll break the operation and stop the "switch case".
		case "XML_SecurityError":
		field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> XML SECURITY ERROR<br>Please control your policy files!</font></b></p>' 
		break;
	}
}

Step 23 - Main: "Done" Functions

We'll create three "Done" functions. "xmlDone", "cssDone" and "allDone". "xmlDone" and "cssDone" will be executed after our files are loaded successfully and they'll inform "allDone". When both css and xml files are loaded successfully, "allDone" will add the StyleSheet to "field" and write the first page.

private function cssDone(e:Event):void {
	cssBool = true;//We'll make cssBool "true". Because CSS file is loaded successfully.
	allDone();//And execute allDone.
}

private function xmlDone(e:Event):void {
	xmlBool = true;//We'll make xmlBool "true". Because XML file is loaded successfully.
	allDone();//And execute allDone.
}

private function allDone():void {
	if(cssBool && xmlBool){//if both css and xml files are loaded successfully,
		field.styleSheet = css.sheet;//we'll set our styles to "field".
		field.htmlText = xml.pages[pageNum];//we'll write the first page to field.
		addEventListener(TextEvent.LINK, textEvent);//And we'll add event listener for link events that will be dispatched by htmlText.
	}
}

Step 24 - Main: "textEvent" Function

In this function, we'll check for "next" and "prev" event texts.

private function textEvent(e:TextEvent):void {
	if (e.text == "next"){//If "next" link is clicked,
		++pageNum;//we'll increase the pageNum
		field.htmlText = xml.pages[pageNum];//and write the new page to "field".
	}
	if (e.text == "prev"){//If "prev" link is clicked,
		--pageNum;//we'll decrease the pageNum
		field.htmlText = xml.pages[pageNum];//and write the new page to "field".
	}
}

Step 25 - Main: Finished

Here is the finished Main class:

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.TextEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import keremk.CSS;
	import keremk.XMLLoader;

	public class Main extends Sprite {
		private var xml:XMLLoader;
		private var css:CSS;
		private var field:TextField;
		private var cssBool:Boolean = false;
		private var xmlBool:Boolean = false;
		private var stgW:Number = stage.stageWidth;
		private var stgH:Number = stage.stageHeight;
		private var pageNum:int = 0;
		private var boxBorder:Sprite;

		public function Main():void {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
	
			boxBorder = new Sprite();
			boxBorder.graphics.lineStyle(2, 0xC0C0C0, 1);
			boxBorder.graphics.drawRect(5, 5, stgW - 10, stgH - 10);
			addChild(boxBorder);

			field = new TextField();
			addChild(field);
	
			with (field) {
				x = 10;
				y = 10;
				width = stgW-20;
				height = stgH-20;
				multiline = true;
				selectable = false;
				wordWrap = true;
				condenseWhite = true; 
			}


			xml = new XMLLoader();
			xml.load("source.xml");
			xml.addEventListener("XML_Loaded", xmlDone);
			xml.addEventListener("XML_IOError", error);
			xml.addEventListener("XML_SecurityError", error);
			xml.addEventListener("XML_ParseError", error);

			css = new CSS();
			css.load("styles.css");
			css.addEventListener("CSS_Loaded", cssDone);
			css.addEventListener("CSS_IOError", error);
			css.addEventListener("CSS_SecurityError", error);
			css.addEventListener("CSS_ParseError", error);
		}

		private function error(e:Event):void {
			switch(e.type) {
				case "XML_IOError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> XML IO ERROR<br>Please control your XML path!</font></b></p>' 
				break;
				case "XML_SecurityError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> XML SECURITY ERROR<br>Please control your policy files!</font></b></p>' 
				break;
				case "XML_ParseError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> XML PARSE ERROR<br>Please debug your XML file!</font></b></p>' 
				break;
				case "CSS_IOError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> CSS IO ERROR<br>Please control your CSS path!</font></b></p>'
				break;
				case "CSS_SecurityError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> CSS SECURITY ERROR<br>Please control your policy files!</font></b></p>' 
				break;
				case "CSS_ParseError":
				field.htmlText = '<p align="center"><b><font color="#FF0000" size="12" face="Verdana, Arial, Helvetica, sans-serif"><br> CSS PARSE ERROR<br>Please debug your CSS file!</font></b></p>' 
				break;
			}
		}


		private function cssDone(e:Event):void {
			cssBool = true;
			allDone();
		}

		private function xmlDone(e:Event):void {
			xmlBool = true;
			allDone();
		}

		private function allDone():void	{
			if(cssBool && xmlBool){
				field.styleSheet = css.sheet;
				field.htmlText = xml.pages[pageNum];
				addEventListener(TextEvent.LINK, textEvent);
			}
		}

		private function textEvent(e:TextEvent):void {
			if (e.text == "next"){
				++pageNum;
				field.htmlText = xml.pages[pageNum];
			}
			if (e.text == "prev"){
				--pageNum;
				field.htmlText = xml.pages[pageNum];
			}
		}
	}
}

Step 26 - Compiling in FlashDevelop

We've finished writing our code, now it's time to compile it. If you have created your project in FlashDevelop, you just need to hit "F5" to check it and "F8" to build the project. Before that, you might want to change your output settings. To do that, go to Project > Properties...

In the properties panel, you can change:

• "Target" -> Flash Player version
• "Output file" -> Output file name and path (Our output file path is "bin/")
• "Dimensions" -> Width and height of the output file
• "Background color" -> Background color of the output file (I've used black "#000000")
• "Framerate" -> Framerate of the output file (Since there is no frame in our project, I've used 30fps as default.)
• "Test Movie" -> How to play test movie when pressing "F5"

After "Build Project" operation, you can use the htmlBox from bin folder. If you're planing to move it to a different folder, you need to move the "htmlBox.swf", "source.xml" and "styles.css" files to the same folder. If you're planing to use "index.html" you're going to need the whole "bin" directory. By default, htmlBox dimensions will be 100% in "index.html". You can change this in the "swfobject.embedSWF();" function in "index.html".

Step 27 - Compiling in Flash IDE

If you are using Flash CS3 or CS4, open your "htmlBox.fla" file. In the properties window, write "Main" in the "Class" box. You can also change "Frame rate", "Size" and "Background color" of htmlBox in properties window.

After defining the "Document class", you can test it by pressing "Ctrl+Enter" and publishing it by pressing "Ctrl+F12". If you want to change the publish settings (such as version), you can open publish settings by pressing "Ctrl+Shift+F12" or by going to File > Publish Settings....

Again, If you're planing to move it to a different folder, you need to move the "htmlBox.swf", "source.xml" and "styles.css" files to the same folder. If you're planing to use "index.html" you are going to need the "AC_RunActiveContent.js" file in the same directory. By default, htmlBox dimensions will be the same with swf file in "index.html". You can change it in html file or you can use the "HTML" tab in "Publish Settings".

Conclusion

We're done! You can use this html box in your web templates, for text that you don't wish to be copied or any project that you can imagine. Thanks for reading this tutorial, I hope you liked it.