Flash-XML [ Part 2]

Hi,I hope you have already gone through part1 of this tutorial. Then you might have come across a lot many things, which seemed alien to you.No problem, thats the first experience I also had, when I started XML. The problem here is, we doubt the simpplicity of XML. Its not that complex as we think.
Here we are going to learn the steps involved in XML-Flash communication.To get the XML data inside Flash or any other environment, we need an engine, which actually converts XML data into our native environment data(In our case the Flash data). This is the engine proffessionals call "Parser". We can create our own engine or parser too.But lets take the parser provided by "Flash" itself. What this parser does is, it converts XML data into "Flash" data. That means Flash already has got an object known as "XML". We will use this object to get the external xml data inside Flash.After getting the external data into flash's XML object, we will access those data through some methods provided by Flash's XML object.So all we have to do is, know the methods to get data inside flash and access them.

Open a new flash document.
Create 2 layers, and name them "gfx" and "actions"
In "gfx" layer create a textfield and name it "addressbook_txt"
Now on "actions" layer type out the follwing script

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
}

The above script requires an XML file to load. So Lets write an XML file and name it "addressbook.xml".This file will contain the following data.

<?xml version="1.0" encoding="UTF-8"?>
<addressbook>
<person>
<name>saumya</name>
<mail>saumya@flashmove.com</mail>
<phone>9821294173</phone>
</person>
</addressbook>

Lets go one line at a time, as I have already told you a wellformed xml always has xml declaration as its first line.So our first line here does exactly that. Then we start our address book. Each "person" is a node.Inside "person" node I have decided to store all the values related to the person in their respective nodes.Simple, is not it? Fine. For the time being lets not add up more persons.We will study this one node first and then we will go on adding more persons to our addressbook.

Now run the flash movie and you can see whole of our XML data is getting traced.Lets get into the Actionscript details.
First we are creating an XML Object by
var myBook:XML = new XML();

Next step is to tell that our XML object should ignore the white spaces inside XML. This is done by
myBook.ignoreWhite=true;

This step is required, because inside XML, everything is a node.Even the WhiteSpaces. If we remove this line then we will get unexpected results, as we have to consider all the white spaces. If you want to try, remove this line and test your flash movie, you can see the XML data, with all the whitespaces inside.

Next step is loading XML inside flash, this is done by
myBook.load("addressbook.xml");
Here we are loading an external XML file into flash.

Once the XML is inside flash, we can access any of its nodes, by the methods specified by XML Object.WE will see that next.For this to happen, we must look at our XML file first. If you observe, you can see that all of our XML data is inside one node, that is "<addressbook>". Inside "<addressbook></addressbook>" , we have our data. This is known as "Parent" node. All the other nodes are its "Child" nodes. But sinces this node comes first inside XML object, we access this node as "firstchild" from flash. So lets modify our actionscript and see.

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild;
}

If you run your flash movie now, you can see your whole of XML data in output window, but you will get only the XML data without the XML declaration, in your textfiled on stage. This is the first step of getting XML data into flash. We access our XML data with its "firstChild" probperty first.But this "firstChild" is the parent of all other nodes.So next we will see how we can access other node values.For this first thing we need to know is how many nodes are there in total.So we will modify our script to look like

addressbook_txt.text=addressbook_txt.text=myBook.firstChild.childNodes.length;

What is it doing? It first goes to the firstchild of our XML object.Then counts all the childnodes,this particular node is having and then giving us the value.So our updated script will look like

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.childNodes.length;
}

Now if we test, we can see that "1" is shown in our textfield on stage.This is because our firstChild contains only one node, that is "<person>".All the other data is inside that particular node.Ok, now lets go inside our "firstChild" node's "firsChild".

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild;
}
Now, if we test we can see that our display is showing all the values of my "<person>" node.Similarly, we can count how many nodes, this particualr node is having by

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild.childNodes.length;
}

Now, if you test, you can see the display in stage is "3".Because our "<person>" node contains 3 nodes,

<name>saumya</name>
<mail>saumya@flashmove.com</mail>
<phone>9821294173</phone>

Now, lets go one step back.Where we have written

addressbook_txt.text=myBook.firstChild.firstChild;

The same thing can be written as

addressbook_txt.text=myBook.firstChild.childNodes[0];

This is better, if we have more than one nodes in our firstChild, then we can just access those by providing their respective number such as

myBook.firstChild.childNodes[0];
myBook.firstChild.childNodes[1];
myBook.firstChild.childNodes[2];

We will see this when accessing our node values.But keep in mind that "firstChild" and "childNodes[0]" are the same.Lets come back to our script

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild.childNodes;
}
This gives us the values of our first person's data in our guest book.Though we have only one person now.

We are intersted now to get the values only and displying them on stage.

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild.childNodes[0];
}

This will show our first person's name node.We are interested in the value of that node.So

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild.childNodes[0].firstChild;
}

Now, if you test it, it will give you the name of that person.But still a little thing is left out.As I have told you earlier that everything in XML is a node.So what we are viewing now is not a value, but a node.We are strictly intersted in the value of the node, so our modified script will look as

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
addressbook_txt.text=myBook.firstChild.firstChild.childNodes[0].firstChild.nodeValue;
}

Well, now lets get the other values of person and display it

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
var sName:String
=myBook.firstChild.firstChild.childNodes[0].firstChild.nodeValue;
var sMail:String
=myBook.firstChild.firstChild.childNodes[1].firstChild.nodeValue;
var sPhone:String
=myBook.firstChild.firstChild.childNodes[2].firstChild.nodeValue;
addressbook_txt.text=sName+" : "+sMail+" : "+sPhone
}
Since we know that this node has got 3 childnodes, we are accessing them as "childNodes[0]", "childNodes[1]" and "childNodes[1]". This is because xml nodes are stored like array elements and starts at zeroth index.So the first node is zero (childNodes[0]).
In the above example we have stored different vallues in different variables and them join them together to display in our text field.
Now we are interested to add a picture of the person in our address.So the xml will now look like

<?xml version="1.0" encoding="UTF-8"?>
<addressbook>
<person>
<name>saumya</name>
<mail>saumya@flashmove.com</mail>
<phone>9821294173</phone>
<image>me.jpg</image>
</person>
</addressbook>

See I have added another node named "image".Now that particular image file I have to store in the respective location.Since all of my recources are in one folder, I just have to put my image name as reference.Now I need to put "me.jpg" in my current folder. Since I need to load this image into a particular movieclip, I need a blank clip named "image_mc" on stage.So lets make all those changes and then keep going.
Well, we have made all the changes to our fla and xml.Now lets write the code to get the image inside flash.So the final code will like

var myBook:XML = new XML();
myBook.ignoreWhite=true;
myBook.load("addressbook.xml");
myBook.onLoad=function(){
trace(myBook);
var sName:String
=myBook.firstChild.firstChild.childNodes[0].firstChild.nodeValue;
var sMail:String
=myBook.firstChild.firstChild.childNodes[1].firstChild.nodeValue;
var sPhone:String
=myBook.firstChild.firstChild.childNodes[2].firstChild.nodeValue;
var sImage:String
=myBook.firstChild.firstChild.childNodes[3].firstChild.nodeValue;
addressbook_txt.text=sName+" : "+sMail+" : "+sPhone+" : "+sImage
//loads the image into my clip
image_mc.loadMovie(sImage);
}
Now, test your movie. You can see all your data and the image.
Thats the basics,you can take this idea further and make your own xml driven flash applications.
Happy Flashing ;)