Advertisement
  1. Code
  2. ActionScript
Code

Build an ActionScript 3.0 HTML Box with XML and CSS Support

by
Difficulty:IntermediateLength:LongLanguages:

In this tutorial, we'll create an HTML Box which parses content loaded from XML and CSS. We'll build it using ActionScript 3.0 so we can compile it in FlashDevelop. I'll also demonstrate how to compile it in Flash IDE. We'll focus on creating external script files (classes), loading and using XML and CSS files, all of which will assume some understanding of ActionScript. Let's get started!

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.

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

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.

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.

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.

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.

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.

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)".

And here is my XML file with one page.

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

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:

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".

Step 9 - CSS: Importing Flash Classes

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.

Step 10 - CSS: Variables

We'll need only two variables in this class, a URLLoader and a 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"

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".

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

Step 13 - Creating the XMLLoader

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

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:

Step 15 - XMLLoader: Variables

We'll now need 5 variables:

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.

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".

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

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:

Step 19 - Main: Importing Flash Classes

Step 20 - Main: Variables

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.

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

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.

Step 24 - Main: "textEvent" Function

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

Step 25 - Main: Finished

Here is the finished Main class:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.