Using XML data in Flash

In this class we learn about transferring data into and out of Flash using XML objects. What this class won't do is to teach you how to write XML. Instead, we will operate under the assumption that you have been handed a bunch of photos with an XML document and instructed to , "Do something with it." This lesson will show you one approach.

Flash 1: The XML player.

Why use an XML document? In this case, size and flexibility. Everything is external to the Flash .swf file except for the buttons. The result is a .swf that is under 15K meaning a very fast load time. More important than that is the XML document, itself. You can easily add to or even repurpose the .swf by simply changing the captions or images referenced in the XML document. There is no need to change the Actionscript code in Flash.

XML

XML (Extensible Markup Language) is now a standard for the the sharing and exchanging of data on the web. In Flash, XML is now being used for everything from news feeds to content management and the odds are almost 100% that you will eventually create Flash documents that interact with a web server. This means you will need to parse and work with XML data.

If you are familiar with working with HTML, XML is going to be a familiar place. The major difference is that HTML uses predefined tags to mark up the page. XML lets you define the tags. By defining your own tags you encounter the major difference between HTML and XML. In HTML the tags are predefined and can't be added to. The language is not "extensible". XML is and this means you invent the tags.Which brings us to another big difference between HTML and XML.

The purpose of an XML tag is to provide the data with a meaningful context. In HTML the whole purpose of the tag is to define the presentation of the data. For example, an H1 tag in HTML doesn't really tell you much about the data between the tags:

<h1> Using XML Data in Flash </h1>

XML, on the other hand uses "semantic" markup. In this case, the word "semantic" means: "indicate meaning of data". Thus the XML version of that HTML would be:

<title> Using XML Data in Flash </title>

Examining the photos.xml document

To create the Flash picture viewer you have to understand how the document you will be using is structured. Here's the document you have been handed:

Image 1: The photos.xml code

The first thing you will notice is the fact there are no HTML tags. Instead the tags are:

Those tags are called elements and elements are composed of:

Elements inside another element are said to be "children" of the element. For example, <caption>The British Columbia rain forest.</caption> is a child of the <photo></photo> element. Finally, all XML documents must have a root tag and it must be the first element in the document. In the case of our file, the root is the <photos></photos> tag.

Each complete tag in XML is called a "node". For example, <caption>The British Columbia rain forest.</caption> is child node of the <photo></photo> node. This is how Flash accesses XML data: it looks for the nodes.

It is a common practice for XML documents to indent each "layer" of the document heirarchy like the one shown in Image 1. Indents will help you to more easily recognize and understand the concepts of "child" and "sibiling" nodes.

How it does that is by examining the relationship of the nodes to eachother. If we had a simple XML doc the code would look something like this:

<photos>
<photo>
<caption>The British Columbia rain forest.</caption>
<image>pic1.jpg</image>
</photo>
</photos>

The root node is <photos> </photos>.

The child node is <photo></photo>.

The <caption></caption> node is a child of the <photo></photo> node. In Flash you refer to <image></image> as a sibling of the photo node because it is the next node in the same level of the structure because it is found between the <photo></photo> tags.

Finally all XML docs should start with a prolog. In the case this document it is:

<?xml version="1.0" encoding="utf-8"?>

All it does is to identify the document as being formatted with XML and that the character encoding used is UTF-8.

In the next section we deal with how Flash accesses XML data.

Creative Commons Licence