3.6 Introduction to XML in Flash

In this exercise, we will learn how to load XML files into Flash. This will be a simple introduction to XML in Flash, using a short example based on a “favorite movies” list.

1. First, an introduction to XML. XML means “Extensible Markup Language (XML)”, and it is a “set of rules for encoding documents in machine-readable form”, according to Wikipedia. In XML, similarly to HTML for example, information is divided into markup and content. Unlike HTML, XML is extensible, meaning that you can add your own “tags” to classify information. Quoting Wikipedia:

The characters which make up an XML document are divided into markup and content. Markup and content may be distinguished by the application of simple syntactic rules. All strings which constitute markup either begin with the character “<” and end with a “>”, or begin with the character “&” and end with a “;”. Strings of characters which are not markup are content.

(from: http://en.wikipedia.org/wiki/XML)

In this exercise, we will not develop our XML to include nested elements or attributes, which can be quite useful for a deeper use of XML. We will use simple elements. According to Wikipedia, elements are:

A logical component of a document which either begins with a start-tag and ends with a matching end-tag, or consists only of an empty-element tag. The characters between the start- and end-tags, if any, are the element’s content, and may contain markup, including other elements, which are called child elements. An example of an element is <Greeting>Hello, world.</Greeting> (see hello world). Another is <line-break/>.

2. Now let’s build our XML file, using the same methodology as in the previous text file exercise. We will open our text editor, and type in the XML code. An XML file always begins with an XML declaration (<?xml version=”1.0″?>), and then starts the root element, which encapsulates the whole XML file. Usually this root element relates to the file content and the file name. We will call it “movies”. Then we create a list of movies, using the element logic presented before. Finally, we close the root element.

<?xml version="1.0"?>
<movies>
<movie>A Clockwork Orange</movie>
<movie>Blue Velvet</movie>
<movie>Stalker</movie>
</movies>

3. Let’s now convert our file to plain text, and save the file as “movies.xml”.

4. Moving to Flash, we will create a new Flash file, and save it in the same directory as “movies.xml”.

5. We will now create a text field to display the text from the XML file:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=50;
myTextField.width=450;
myTextField.height=300;
myTextField.border=true;

6. Similarly to the previous exercise, we will set up a URLRequest object (myURL) and a URLLoader object (myURLLoader) to load the data from our XML file:

var myURL:URLRequest=new URLRequest("movies.xml");
var myURLLoader:URLLoader = new URLLoader();
myURLLoader.load(myURL);

7. Also similarly to the previous exercise, we will create our listener, to check if the file will be loaded, since only then can it be displayed:

myURLLoader.addEventListener(Event.COMPLETE, showXML);

The listener will trigger a function called “showXML”.

8. Let’s now build our showData function, step by step.

8.1 First, we will create the function declaration:

function showXML(e:Event):void {

8.2 Then, we will parse the XML file into an XML object (similar to our URLVariables object from the previous exercise, but more powerful due to the flexible nature of XML). We will call this XML object “movies”:

var movies:XML=new XML(myURLLoader.data);

8.3 Now we will create a string variable to hold the text retrieved from the XML file. To begin with, it will be empty:

var filmTitles:String="";

8.4 Now we will sweep through the XML file, using a simple and useful loop: a “for each” loop. A “for each” is intelligent enough to recognize how many items we have in the XML file, allowing us to retrieve the information we want. In this case, it is the information contained in each “movie” element, within our “movies” root element. Then we ask Flash to keep adding that information to our “filmTitles” variable:

for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}

8.5 Finally, we ask flash to present the “filmTitles” string in our text field (“myTextField”). We will use the htmlText property instead of the usual text property for that, as it will filter out the tags from the elements:

myTextField.htmlText=filmTitles;

8.6 And let’s not forget to close the function:

}

8.7 The whole function will look like this:

function showXML(e:Event):void {
var movies:XML=new XML(myURLLoader.data);
var filmTitles:String="";
for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}
myTextField.htmlText=filmTitles;
}

9. And the whole code will look like this:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=50;
myTextField.y=50;
myTextField.width=450;
myTextField.height=300;
myTextField.border=true;

var myURL:URLRequest=new URLRequest("movies.xml");
var myURLLoader:URLLoader = new URLLoader();
myURLLoader.load(myURL);
myURLLoader.addEventListener(Event.COMPLETE, showXML);
function showXML(e:Event):void {
var movies:XML=new XML(myURLLoader.data);
var filmTitles:String="";
for each (var movie:XML in movies) {
filmTitles+=movies.movie;
}
myTextField.htmlText=filmTitles;
}

The end result should look like this:

Download files: ex20-xml.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 3. Project Management and tagged . Bookmark the permalink.

2 Responses to 3.6 Introduction to XML in Flash

  1. Pingback: Teaching Designing Interaction with Electronics course | nuno correia .com

  2. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s