Approach to Understand XML and Flash Workflow

The main programming language in Adobe Flash Action Script. Meanwhile, it integrates smoothly with different programming languages such as PHP and .NET and communicate with these languages through XML. In this approach tutorial we will understand working with XML inside Flash, and in the next part of this flash tutorial we will have a practical example of using XML to create a quiz application in Flash.

Related posts:

• Create Your First Android AIR App in Flash
• How to Create a Snake Game in Flash Using AS3
• Creating Reflection in Flash Using AS3
• Bitmap Data Manipulation in Flash ActionScript 3
• Creating and Controlling Flash Animation with XML
• How to Build a XML Driven Quiz Application in Flash

Step 1: XML – Introduction

Advance user may skip this step. But revision always adds a value. This section covers basics of XML in brief. So nothing to do much.

What is XML?

Everybody knows that XML stands for eXtensible Markup Language. It is a textual data format.

Birth of XML?

XML was developed in 1996 by an XML Working Group (i.e. the SGML Editorial Review Board).

XML is a child of SGML (Standard Generalized Markup Language).

SGML was developed in 1986. It’s main purpose was to reduce the cost of document management.

XML follows SGML.

Step 2: XML – Brief Overview

Why XML?

XML is simple and easy to understand.

The most powerful feature of XML is that you can create your own tags.

XML is used to link, store, exchange and carry data.

In short, XML is everywhere.

How XML works?

Sounds strange but XML itself do nothing. It is not a language with compiler. It is used in conjunction with Languages like JavaScript, Action Script, PHP, etc.

These languages have XML processor. It reads XML file and utilizes for further manipulation. In this tutorial we are going to use XML with AS3 (Adobe Flash IDE).

For more information about XML follow the links given below,

http://www.w3schools.com/xml/default.asp

http://www.w3.org/TR/1998/REC-xml-19980210.pdf

http://www.w3.org/XML/

http://www.ecma-international.org/publications/standards/Ecma-357.htm

Step 3: XML – Simple Example

<?xml version=”1.0” encoding=”UTF-8”?>
<RootNode>
<Node1>this is node1</Node1>
<Node2>this is node2</Node2>
<Node3>this is node3</Node3>
</RootNode >

Let us walk above example line by line,

Line1: <?xml version=”1.0” encoding=”UTF-8”?>

This line is XML declaration.

If XML has non ASCII characters you must specify this line to avoid errors.

Without this line you can continue but it is not a good practice.

Line2: <RootNode>

XML document must contain root node. You cannot proceed without root node.

Line3: <Node1>this is node1</Node1>

This is a child node of a root node. Child node may have its child node and so on.

Observe this line carefully. It has <Node1> start of node and </Node> end of node.

Line 4 and 5: These are also child nodes of a root node.

Line 6: </RootNode >

This line specifies the end of the root node. You cannot have XML document without start and end of root node.

Step 4: XML – Real Life Example

Let us put above example into playground.

<?xml version=”1.0” encoding=”UTF-8”?>
<Songs>
<Rock>This section contains ROCK songs</Rock>
<Jazz>This section contains JAZZ songs</Jazz>
<Pop>This section contains POP songs</Pop>
</Songs>

The above example is kept simple w.r.t step3 example for easy understanding.

The above example classifies the songs into 3 categories (Rock, Jazz and Pop).

Now, we will add more information to above example.

<Songs>
<Rock>
<SongTitle>The name of the ROCK song</SongTitle>
</Rock>
<Jazz>
<SongTitle>The name of the JAZZ song</SongTitle>
</Jazz>
<Pop>
<SongTitle>The name of the POP song</SongTitle>
</Pop>
</Songs>

Here we have added titles of the songs to the list as follows

<SongTitle> The name of the ROCK song </SongTitle>
<SongTitle> The name of the JAZZ song </SongTitle>
<SongTitle> The name of the POP song </SongTitle>

Step 5: XML – Attributes

Now we will discuss about attributes. We will consider the same example.

<Songs>
<Rock>
<SongTitle singer=”Singer1”>The name of the ROCK song</SongTitle>
</Rock>
<Jazz>
<SongTitle singer=”Singer2”>The name of the JAZZ song</SongTitle>
</Jazz>
<Pop>
<SongTitle singer=”Singer3”>The name of the POP song</SongTitle>
</Pop>
</Songs>

In the above example we have added an attribute ‘singer’. It consist a name of the singer.

Now onwards we are going to deal with flash. So write the above example in your favourite text editor. Save it as ‘SongsList.xml’ in any folder you want and forward to the next step.
Step 6: Reading XML using AS3 in Flash

Now we are going to enter into a real business. Yes let us deal with Adobe Flash.

1. Create a new Flash Document for Action Script 3 and save it in the same folder where you have saved your ‘SongsList.xml’ file discussed in step 5.
2. In Flash file select first keyframe and press F9 to open Action Script panel.
3. In Action Script panel type the following code. Don’t worry about the code. We are going to learn it in detail in following steps. So for now just copy and paste it in Action Script panel.

var url:URLRequest = new URLRequest(“SongsList.xml”);

var xmlLoader:URLLoader = new URLLoader(url);

xmlLoader.addEventListener(Event.COMPLETE, onXMLLoad);

function onXMLLoad(e:Event):void {

var xml = new XML(xmlLoader.data); //create XML document

var xmlList = new XMLList(xml); // create XML List of XML nodes

var xmlChildren = xmlList.children(); //Get number of child nodes

for (var i=0; i<xmlChildren.length(); i++)            {

trace(xmlChildren[i].SongTitle.@singer);

}

}

After that press CTRL+ENTER (Win)/CMD+ENTER (Mac) to test the document.

You will get the following result in output window.

Singer1
Singer2
Singer3

Step 7: Understanding the above AS3 code

First two lines are self explanatory,

Line1: var url:URLRequest = new URLRequest (“SongsList.xml”);

Line2: var xmlLoader:URLLoader = new URLLoader (url);

First line stores the url of the XML file while second line act as the loader of the url.

Line3: xmlLoader.addEventListener (Event.COMPLETE, onXMLLoad);

This is important part of the script. Especially ‘Event.COMPLETE’

It executes ‘onXMLLoad’ function only after XML file is completely loaded by ‘xmlLoader’. If you do not include this line and directly call the ‘onXMLLoad’ function, you will not get any result.

Line 4: function onXMLLoad(e:Event): void {.

It defines the ‘onXMLLoad function’.

Line 5: var xml = new XML (xmlLoader.data);

This line creates XML document holding data of xmlLoader.

(i.e. XML file data)

Line 6: var xmlList = new XMLList (xml);

This line creates a list of nodes (here <Rock>, <Jazz> and <Pop>) those comes under root node. (here <Songs>).

Line 7: var xmlChildren = xmlList.children ();

This variable stores total number of nodes under root node

in the form of length of the xml list. e.g. xmlChildren.length();

If you trace it as follows,

var xmlChildren = xmlList.children();

trace (xmlChildren.length ()); // ‘3’ in this example

Line 8: for (var i=0; i<xmlChildren.length (); i++) {

In this for loop we define and initialize i = 0.

Then we compared ‘i’ with the length of ‘xmlChildren’ as

‘i < xmlChildren.length()’ used to control ‘i++’.

Next ‘for’ loop statement i.e. ‘i++’ increments ‘i’ until it is less than the length of xml children.

Line 9: trace (xmlChildren[i].SongTitle.@singer);

Huushh!!! We are at the end of the code.

Whatever we did up to this step, is to make this line working.

Pretty long shot. Hope in future it will become more fast to implement,

So that we can have more time to invest in a logical part of it.

Back to our line,

(xmlChildren[i].SongTitle.@singer);

Observe ‘.@singer’. This is used to extract the value of the attribute ‘singer’ from xml file, while previous part ‘xmlChildren[i].SongTitle’ travels through all nodes having ‘<SongTitle>’ as child node.

Experiment with the code by adding following lines,

trace (xmlChildren[i].SongTitle);

trace (xmlChildren[i]);

Line 10, 11: These are the ends of the ‘for’ loop and ‘onXMLLoad’ function  respectively.

Enjoy Flashing (Adobe’s greatest software in the universe)

After completing this Flash tutorial you are now able to write XML files. You also learned how to use XML ‘attributes’. You also learned to extract XML data using AS3 Flash.

Make sure to join our Twitter and subscribed to our RSS feed? If not, join us now to receive updates of new posts and free resources.