Flash-XML [ part1 ]

Hi,
Here we will learn how to make flash movie, which can communicate with XML data. I am not going to delve into the details of XML here. But quickly go through the process of getting data from XML into Flash.

First we must understand XML, though not thoroughly, but atleast the basics. XML is a data storing language.Its not like HTML, which is a presentaion language. So basically XML files store some data.Thats more than enough for this lesson.we can write xml files by simply opening our notepad and typing in the tags.then saving the file with ".xml" extension. we can save the file with ".txt" extension too.But then we have to rename it, so that the extension will be ".xml". Now, how it stores the data? Well it stores all the datas in the form of "Elements" or "Nodes". Whats that ?!! That is,
<name>my name</name>
This is a basic exmple of a xml node. we start a node by a start tag say "<node>", and end the tag with a end tag of same name "</node>".So a node is like
<me></me>
The above thing is a node which contains no data. See the name of teh node is not important, unlike HTML where we have pre defined tag names.So we can create any node with any name.Though there is also a naming convention, which should be used, and there are certain rules to name a node, but for our understanding here and to keep things simple at first go we will not delve into the details of those right now.Just understand that to name a node, it should consist of alphabets only.So we can create nodes like the following
<name></name>
<value></value>
<age></age>

Now, where to put data.We data is stored inside the start tag and end tag of nodes.So lets put some value in our nodes.
<name>my name</name>
<value>555</value>

Thats great. Now lets say we want to put a person's data.And in the long run, I have to go on putting different people's data in my XML to create my XML addressbook.Ok, Now we will create kind of datas inside datas.Simply I can put nodes inside nodes. As I put some value inside my nodes, I can put nodes also, instead of values, like
<me><name>saumya</name><no>678</no></me>
See, I have put nodes inside nodes.To better understand we generally write this as
<me>
<name>saumya</name>
<no>678</no>
</me>
Makes sense? yeah. "me" node contains all the datas regarding me. Now to make it generalised, I thought, "me" should be changed to "person".So that I can put any body's data.well, now the XML will look like
<person>
<name>saumya</name>
<no>678</no>
</person>

Now, if I want more people in my addressbook, I will simply add on more "person" tags, like
<person>
<name>saumya</name>
<no>678</no>
</person>
<person>
<name>joe</name>
<no>6669</no>
</person>
<person>
<name>rat</name>
<no>111</no>
</person>
WOW. We have just created an XML document.Now save this as "my.xml".

Now we will see, how xml is read inside Flash.
Open a new Flash document.Create 2 layers in it. Name the first layer to "gfx". Name the second layer to "actions". This is just for clarity and best practice.Now in the same folder, where you save your this flash movie, create an XML file with name "myadressbook.xml". Yuo can do so, by first creating a blank text file and then changing its name and extension to the desired name and extension. Open the XML file in nodepad and type the following nodes. You can just copy paste this too.
<?xml version="1.0" encoding="iso-8859-1"?>
<xml>
<person>
<name>Joe</name>
<gender>Male</gender>
<age>28</age>
<phone>00110022</phone>
<country>India</country>
</person>
<person>
<name>Cena</name>
<gender>Male</gender>
<age>25</age>
<phone>11115533</phone>
<country>Japan</country>
</person>
<person>
<name>Jini</name>
<gender>Female</gender>
<age>26</age>
<phone>22774434</phone>
<country>Africa</country>
</person>
</xml>

Ok.Now lets open our flash document again.
Select the first frame of "actions" layer and type in the following lines of code.You can copy paste the code too.

//making an XML Object
var myAddressBook:XML=new XML();
//Customizing my XML Object, so that it will ignore all the white spaces
myAddressBook.ignoreWhite=true;
//Loading the external XML file into Flash
myAddressBook.load("myadressbook.xml");
//Checking, if all my XML data has been loaded or not
myAddressBook.onLoad=function(ok){
if(ok){
trace("XML is loaded. Now Lets call appropriate function to handle our xml data.");
//showMyAddressBook(this);
}else{
trace('Could not load XML');
}
}

The code is self explanatory, as the comments are there. If you do not understand anything, now.then you are in the right track.Do not worry, at first it goes like this only.We will go slowly and understand.But for the time being lets just get the data into flash and see how big the deal is? Once you have put all the data in the actions layer, then test your movie and you can see the trace as "XML is loaded. Now Lets call appropriate function to handle our xml data.".

We have commented "showMyAddressBook(this);" , in our code. Because now I do not have afunction with that name.But we know, that once we get the data inside Flash we have to do something with it.So we need to call a function for that.thats why I have put a function there but commented out.That way next time I open my code, I will be sure that I have to write a function.Everything else has been done already.
Now after writing the function, our code will look like

//making an XML Object
var myAddressBook:XML=new XML();
//Customizing my XML Object, so that it will ignore all the white spaces
myAddressBook.ignoreWhite=true;
//Loading the external XML file into Flash
myAddressBook.load("myadressbook.xml");
//Checking, if all my XML data has been loaded or not
myAddressBook.onLoad=function(ok){
if(ok){
trace("XML is loaded. Now Lets call appropriate function to handle our xml data.");
showMyAddressBook(this);
}else{
trace('Could not load XML');
}
}

//making a function to show myAddressBook data after
//my external XML address book is completely loaded
function showMyAddressBook(myXML:XML):Void{
var nNoOfAddresses:Number=myXML.firstChild.childNodes.length;
var sNames:String='';
//filtering the names from addressbook
for(var i=0;i<nNoOfAddresses;i++){
var nDetails:Number=myXML.firstChild.childNodes[i].childNodes[4].firstChild.nodeValue;
trace("country : "+nDetails);
sNames+=(myXML.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue+'\n');
}
myAddressBook_txt.text=sNames;
}

If you do not understand anything right now, then its ok.But test the movie and see. Our data is getting into flash and we have a function to handle that data. We will learn more about all the methods and properties of XML object ib our next XML lesson.But or now you can change the values of xml node and see that the data is getting reflected inside our flash movie.

You can download the source files here.

Happy Flashing πŸ˜‰

Advertisements

Author: saumya

designer / developer / maker / educator @saumya

20 thoughts on “Flash-XML [ part1 ]”

  1. Hi saumya

    Thanks for all your help so far on the forum, I did this tutorial and all went well but I must say its all a little confusing at the moment.

    Thanks again and keep up the good work.

    Rob

  2. I understood about 65% of the thing here..but i’m still confused..somewhere I need more detail explanation about the same..I think.

    Any way thanks for this one.:D

  3. Hi guys,
    Well I understand Its a little confusing at first go.But my try here is to just get you a hang of the simplicity.Thats what is necessary. I mean its not a big deal, making flash and XML talk.
    I will be writing up more detail description about the same.But in the mean time, I would suggest that just go through the XML tutorial in Flash help. Now you know how all the things are going.So at least you can dive in.
    I will try my best to write up as simple as possible.
    thank you for your kind words.
    πŸ˜‰

  4. Hey

    I was surfing the web and i saw this site, pretty cool.
    Currently im running and adult site:Reachton
    k, just want to say hi πŸ™‚
    Can i link you from my site? im looking for quality content like yours. If no let me know if i can add u in exchange for a montly fee or something.

  5. hey Music-Band,
    Thanks for the complement.

    As long as linking to this site is concerned, you can link it.

    But, I do not find any reason my this blog will fit into your site. Rather if you want I can start writing for you at your portal @ fee.

  6. Hi, this is cool, but I am looking for a way to send the data back to XML from Flash. I have a contact form and I wanna to store the info’s into a XML file, something like this: . Thank you, any help or direction will be appreciated. PS i have tried with the XMLConnector, but doesn’t do anything when I trigger.

  7. Hi Ormus,
    as you might be knowing that Flash can not write anything to the disk, even to write XML, you have to take the help of a server side script like PHP. So that Flash will just send the variables to be updated to PHP and the XML file will be generated by PHP.You need to re-write the XML with the updated values with the help of PHP.

  8. Good Day! can you help me with my problem with xml?…

    anyways here the thing, i have mc and inside it i have 5mc’s in each mc’s there are 3 dynamic text’s how can i have an xml that will have different data for each dynamic text in all 5mc’s?

    thanks in advance.

    please mail me

  9. hi that is very nice i am very happy to see this post . how should i find your all posts. plz tell me i am new to this kind of blog. by the way thanks…..

  10. hi saumya, thanks you so much for this.
    i have knowledge how can i loaded text in flash from xml but how can we loaded image it clear by your example.
    thanks again

  11. hi saumya,
    can i ask another question from you about image loading in flash from xml is that when we write script then it is essential that script must be on the first frame of file.
    if we want to load image any where in our flash file or inside in any movie clip then it must be on first frame of that movie clip ? it is compulsory ? can we write our script on another frame instead of first frame. in case of requirement?
    thanks

  12. hi Sonalika,
    Thanks for the kind words.
    By writing script on first frame you are taking control of the flash application in actionscript. If you do not want that, its fine.You can write anywhere in you like.( not a good practice πŸ™‚ )but the possibility is yes, Its not compulsory but good practice.

  13. hi suamya,

    i know well about your prograaming skills.
    then why i ask a question from you.

    http://www.flashden.net/files/58149/index.html

    i this example separate loader use for each images.

    i have idea about single loader in flash web site.but how can i place separate loader for all images.i have no idea about it.

    can you give me any idea.
    thanks in advance.

  14. “hi suamya,” who is “suamya” ??

    Hi Sonalika,
    if you want to load all the images together, then have to write the logic manually. Suppose, you have ten images to load. Divide your loader by ten, then on each load increase the loading display by 1/10th. Just a thought, you can put your better logic in place.
    happy flashing πŸ™‚

  15. Hi Saumya,

    I read all the comments and read your article, and quite impressed from you. I need little help here http://74.213.174.176/wasim/mdbook/sample.html as like when we drag a tab and position it somewhere in the list. It must exchange its linking state with that position’s tab. I post it all the way at forums but nobody replies ever. Please guide me how I can do that, I know it must take php in between but I don’t know the algorithm what it should be. If you ask me for source code I can provide you, and for that I need your email.
    I’m looking forward for your help.

    Thanks
    chand

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s