Stylesheets, Flash and XML for Dummies

This tutorial will show you how to include an external XML text file into Flash using external Cascading Style Sheet (CSS) to get crisp, clean and elegantly styled text within your text boxes. The latter serves two primary advantages over any other approach… (1) XML allows you to populate Flash content-driven applications with data from a simple text file. This is perfect for designing reusable application where’s nobody has to come into the Flash file again; all they have to do is add new entries to the XML file. (2) Cascading Style Sheets can be used to group style rules, which can be applied to XML elements allowing you to format all of your text boxes quickly and easily by editing just one single text file.

Not long ago, editing text in Flash left little to be desired. Any formatting and updating of the text boxes had to be done within the FLA file, so a Flash designer would have to be called on for even the slightest modification – you would have to reopen the source file, go through the whole movie editing text boxes one at a time, recompile the new SWF file, then maybe, if blessed with the worlds nicest client you might get lucky and not have to redo it over and over again. Not to mention Flash’s anti-aliasing feature, which tends to hinder rather than serve any purpose at all. This became further complicated and even more of chore when in the process fonts would come out of focus (because of positioning). I’ve seen people try all sorts of ways to get rid of that blurriness and end up ripping their hair out, because all they get is what you see bellow.

So before you go bold, refer back to this article and try some of this code. To write my XML, I generally use Notepad++, which it’s just a nicer version of the typical Notepad that comes with Windows; but you can use any text editor doesn’t have to be this one. Here’s the XML file we start with.

It looks like plain old HTML doesn’t it? Absolutely, XML is very similar in many ways to traditional HTML - the difference being is that you are no longer restricted by a predefined list of tags; you can actually makeup the tag names yourself. Nevertheless don’t get too carried away, there are certain rules to naming your tags, such as not including spaces in the names, keeping your names short, simple, descriptive and all lower case. And always remembering to close your tags, every opening tag must have a matching closing tag.

The above XML reads as follow - the first line in any XML file is this XML declaration, HTML also has something like this and it’s basically just saying that this is an XML document and it should be treated as such. This is generally required but technically Flash will work either way. The next line is the root element or parent node, node is just another word for element, again this is very similar to the html tag in HTML in that every other tag will have to be nested between these two tags.

I will explain about the stylesheet in a minute, for now lets save this as “rhymes.xml” and head on over to Flash and create the code and visual elements needed to read our XML document. Open a new movie (.fla) - add two layers an Actions layers and a Visuals layer. Highlight the first frame in the Visuals layer then selects the text tool in the tools bar and drag it along the stage to create your text filed. Finally, in the text Property inspector (Ctrl F3 to access), resize it to about 400*350 pixels and set the follow options:

1. Select “Dynamic Text” from the Text Type drop-down menu. 2. In the Instance Name text box of the Property inspector, give it an instance name of “content_txt”. 3. For Line Type, select “Multiline” to ensure the text wraps correctly. 4. Select “Render text as HTML” and “Selectable” from the Properties inspector

With that out of the way, select the first frame on your Actions layer and opening the Actions panel (F9 to access) paste this code.

What the hell? Right lets go over this. What we’ve done is, create an instance of the StyleSheet class, load our stylesheet using the ‘load’ method and then associate it with our text field. Also, load our XML into Flash using the XML object and call our loadXML function to determine if our XML file loaded successfully. It seems now is a good time, or as good time as any to write our loadXML function so, open the Actions panel again and enter the following.

That’s it! Make sure to save your .fla file in the same folder as the rhymes.xml file and press Ctrl+Enter to test your movie, if you’ve followed the instructions correctly you should see some thing like this.

By George, I think we’ve got it! Though the text still seems a little dull and out of focus. Lets cut to the chase, shall we? I’m hoping you know something about stylesheets already, hopefully from working with HTML and stylesheets (CSS). If not, it’s no biggie. CSS in ActionScript is somewhat limited. The properties listed bellow are all you have access to.

To make this a bit easier for you. I’ve already created the stylesheet for you. Feel free to use it or create your own.

Save the stylesheet as “crisp_styles.css” in the same folder as your other files and, switch back to Flash to display the movie.

Not bad! But, how about adding a little more text between our XML tags to see what a real paragraph might look like. Heck, lets also add an image while we’re at it and amend the stylesheet by adding a class to give emphasis to special words within the paragraph then, we’ll return to the XML document and apply our new class to any word withing our tags as follows.

(1) Open the XML file and add this.

(2) Go to the stylesheet and paste this chunk of code.

(3) Return to the XML to apply our new class.

Needless to say you’ll need to make your own image, also I should point out that the Flash Player does not support progressive JPEG files. Now, if all is well the Flash should look like this.

That’s basically it-it might seem like a lot at first but it really isn’t all that difficult. If you still find this hard to understand, leave a reply.

Share This