Tutorial for Using CSS with XML in Flash

This tutorial is based on one written by Neil Webb in 2005. It was the best one I could find. For a related tutorial, see my Tutorial for Using CSS in Flash.

If you are having trouble with accented characters, such those used in Spanish and French, see this page.

Below is a SWF embedded in this page. The text is selectable. All the text you see is formatted via an external CSS style sheet (see the style sheet). What you will notice in the style sheet is that the selectors are not standard HTML tags. Why? Because these are the custom tags created in the XML document (view the XML file).

The biggest drawback: To insert spaces between paragraphs and other elements, I had to insert <br /> tags. This is quite nasty, and I don't like it one bit.

The biggest benefits: You can style each thing you label in the XML file to look any way you want it to look. Also, you can easily include traditional A HREF links within the text.

To play with these files, download the FLA (432 KB; it is a piglet because the UIScrollBar is included; the SWF is only 35 KB), the XML file (2 KB), and the CSS file (1 KB). That is all you need. The ActionScript to load the CSS file and the XML file is all in Frame 1 in the top layer.

This tutorial assumes that you already know how to: (a) write CSS; (b) create a text field with dynamic text in Flash; and (c) write ActionScript in Flash. This method should work in Flash 8 and all later versions of Flash. It will work only with ActionScript 2.0 because I included the UIScrollBar. The version you see above was saved for Flash Player 8.

Two things about the XML file that you might not recognize at first glance: (1) The first line can be the same for every XML file you create. (2) There must be one single root node containing everything else in the document. (This works like <HTML> and </HTML> in a traditional HTML document.) In the XML file used here, that node is named storyfile -- but it could be named anything.

Tags in XML documents are ad hoc. You invent your own.