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 πŸ˜‰

Advertisements

Author: saumya

designer / developer / maker / educator @saumya

56 thoughts on “Flash-XML [ Part 2]”

  1. Great job in helping me to understand a few things about xml and flash. However, since xml stores data from what I see. Can you hyperlink parts of the data. For instance the email address in your example or the image. If so can you help me to understand this part also.

    Thanks

  2. Hi DCC,
    If you want to store hyperlinked data, you must understand “CDATA” in XML. Through this method we can store data in xml, where in the parser does not parses this particular data and we get the exact data what is stored in the xml. I will suggest you go to the following link and study a bit about “CDATA”.

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

    Thats a quite good explanation there.
    πŸ˜‰

  3. hi,

    i am doing a flash that load image from xml and display in flash…i happen to see ur website…i try it out…bt the image does not displayed in the flash file…can help???…thanks

    Regards,
    shixuan

  4. hi shixuan,
    Can you tell me exactly what/how you want to do ?
    hint : from XML you have to get the image file reference only.Then that particular image has to be there in the folder mention in XML.
    Ex:
    “imageFolder/imagename.jpg”

    once you read the XML into Flash, just load the respected image you got from XML data.

    πŸ™‚

  5. I am just learning this stuff and had some questions. I have all of this working, now how do I display more than one . For instance I would like to display all of the Names on the left, then when I click on them have all of their information appear to the right? Is that possible?

    Thanks

    Bruce

  6. hi bruce,
    1. get all the names nodes value one by one and disply it in the left. You have to write a “for” loop for it and then retrive the values and show them.
    2. Once you click the value on left, get the desired values of that particular node and get all the detail values from XML and show it.
    It is very well possible. But you have to take one step at a time and most do some ground work as to know the following
    1. How to send and load data from FLash.
    2. How to loop through all the nodes in an XML.
    ( We can discuss it here too )

    But first come up with some script about how you are approaching the solution.

    How you are going to disply the values on left ?Is it a datagrid, list or any other component or they are simply buttons put one on top of the other?
    How the detailed values are going to be shown at right?Is it simply a textfield?

    Come up with your script and we can modify it to fix it.
    πŸ™‚

  7. hi Muthu M,
    As far as storing value are concerned, flash can not only do that. You have to use a middleware software like PHP or ASP. I could help you only if you can give me the details of the way you are trying to fix this.I eman I want to know your approach.
    saumya

  8. this is a fantastic and easiest tutorial. will u please help me to apply css to the childnodes? In ur example if i waant to apply css on the text “saumya” then what to do?Pls help.

  9. hi runa baksi,
    thanks for the kind words.
    Well as far as attaching a CSS is concerned, that all is done on flash side and nothing to relate with xml parsing. If you know how to attach CSSs to texts then the trick lies in there.
    Trick : Once you get the string inside Flash, manually attach a CSS to it.

    After getting the data inside flash, all you have to do is play around the data.

    I know I am not coding anything here, but I think to make you understand how CSS works, I must right another tutorial here.I will try to make it as soon as possible.

  10. i have applied the following script:

    addStyle = new TextField.StyleSheet();
    addStyle.load(“menustyle.css”);
    addressbook_txt.styleSheet = addStyle;

    But it is not working.

  11. hi runa baksi,
    this is not working becaue you are not checking whether your stylesheet has been loaded or not, before applying it to a textfield.Here is a good reading at Kirupa
    http://www.kirupa.com/developer/mx2004/css.htm

    I will right down it again :
    addStyle = new TextField.StyleSheet();
    addStyle.load(”menustyle.css”);
    //now check for load completion
    addStyle .onLoad = function(loaded) {
    if (loaded) {
    addressbook_txt.styleSheet = addStyle ;//adding the style
    addressbook_txt.text = “your text goes here”;//updating text
    } else {
    output.text = “Error loading CSS file!”;
    }
    };

    That should be working now πŸ˜‰

  12. thanx saumya.its working.would you kindly give me a simple code for making horizontal menu and submenu using xml?

  13. Good to know that its working.

    I would suggest, just make a habit of learning and do it yourself. Providing code will not help you in the long run.

    This post is regarding XML-Flash, if you have any doubt in code of yours then we can discuss it here and solve. If you have any other questions regarding Flash, I would strongly suggest to go to any Flash forum ( Flashmove is a good place too ). πŸ™‚

  14. i have a swf which contains a dynamic text area(var:output).This swf is loaded into a flash file where i m putting the script to load data from xml to the dynamic text area.how will i call the variable “output” in this flash file?

  15. hi runa,
    I think your problem is how you get a varibale from One SWF into another. For That i have another post, just browse through all the flash post, and you will get it.Ask these problems, there. This place is for XML parsing.

    As I have said already

    This post is regarding XML-Flash, if you have any doubt in code of yours then we can discuss it here and solve. If you have any other questions regarding Flash, I would strongly suggest to go to any Flash forum ( Flashmove is a good place too )

  16. who is “soumya” Runa?
    Well, what kind of formating you want? But again, this post is about XML parsing into Flash.Why are you not trying flashmove forum or any other forum for all these kinds of questions, I am sure you will get your answers much faster and get to learn a lot also.
    Trying to answer your question, below are the possibilities :
    1. First of all you can make the textfield the kind you want.
    2. You can write HTML formatted text into the textfield.
    3. Can use stylesheet too.

    option is yours. πŸ™‚

  17. do u have any idea how to make tooltip on a word of a paragraph, the text of which is loaded via xml? The text for tooltip will also be loaded via xml. I have searched in flashmove forum but have no hints.

  18. Hi Runa,
    If you want some of the text should have a tooltip and some are not , then you have to customise the default textarea with your textarea.I mean, you have to write a textarea class for yourself or extend the existing textarea and customise it as per your need.You cannot just create a tooltip with the default textarea.

  19. Is reading an xml file into flash and putting them into textfield is similar with reading an qml file into flash and putting them into textfield?

    If not…..Can you help me in that regard?

  20. Hi krishna,
    You must know “qml” is a structured “XML”, I mean, if you make an XML file with the format and specification given by QML DTD, then its called a “qml” file.
    So, if you are comfortable with parsing “QML” that means you are actually parsing an formated XML data and showing it in textfield.
    You are already doing an XML parsing, oooohoooo πŸ™‚
    happy fashing πŸ˜‰

  21. wow. your step by step explanations are amazing! I have looked so many places for help and I found it here in your tutorial. I love the way you explained the childNodes. I just started to learn xml and actionscripting. This is awesome πŸ˜€ Thank you for putting it out!

  22. Hi saumaya

    I want to give tooltip by xml to 300 movie clips in flash. which have there on instant name can You help me in this matter.

    if u can provide me a sample it would be great help..

    Thanks
    Murtuza.

  23. hi Murtuza,
    who is saumaya ?!!

    The problem is not clear as to how you want to use the XML?You need, tooltip, thats fine.But then how these movieclips are created and what are the codes in them?I would need more code of yours and explanation of the problem.

    If you just want to extract from XML, then its just parsing the xml and then showing it in a textfield.But as I said to solve the problem in hand, I need more explanation.

  24. Dear Saumya,

    I will explain to you clearly the problem i am facing.

    I have a map which has a number of movieclips placed on stage (not in root) inside various mcs .

    on mouseover on the movieclips, I want the tooltip to generate via xml. plus the movieclip changes its color highlighting it.

    I shall send you the work file, so that you will get a clear picture.
    can you kindly give me ur email id so that i can send you the file.

    thankyou. waiting for ur reply at the earliest..

  25. hi Murtuza,
    I got your problem.For me it seems to be a problem of how you have scripted your movieclips and how you are showing the data.The thing is you need some data to be shown on rollover something.Well, that does not matter whether that data is inside flash or comes from outside script or XML.We have to worried about how to show it and that is a part of logic building for the application you are developing, not related to XML.

    hint :
    1. parse your XML data and store it in an object
    2. when you are mouse over a clip, extract the desired data from that object and show it in the required movieclip

    It does not matter whether the clips are on stage or inside other clips, you can always refer them.

  26. Hi,

    Good tutorial..;-)

    I can’t get this to work though.
    I copy-pasted your script. So I quess that should be OK.

    When I publish the textfield keep saying: “Undefined : Undefined : Undefined”

    Both as dynamic multiline textfield and as component TextArea and as component TextInput.
    I did try both HTML Render (properties) and without it.
    Same result: Not working.

    The Output gives me the whole xml file and no Compilor Errors.

    What do I do wrong?

    Best regards
    Ruggero

  27. hi ruggero,
    thanks for the compliment.

    The thing that you could not make the code work, is probably because of where and how you have created the text field and written the code.Without looking at your FLA, I could not say much, but there seems to be a problem as to where and how you have written the code.

  28. Hey Saumya,

    Your way of tutoring is exellent.. One can easliy understand the essence in ur tutorial.. Nice work.. now am here with one of my Flash XML video problem. 😦

    this is a question regarding Flash XML .. i have one Video which is called inside flash.. i have 7 buttons placed in the flash below this flash player. ie.. on each button click i want to read the value (time frame) from XML and play the video from that particular time frame. eg: if i click button 5 then the same video should strat from “00.00.60”.. am not able to figure out how to solve this thing.. any help from your side Saumya.

    regards
    Kiran S

  29. hi Kiran,
    Thank you for your kind words.

    Your question is towards logic building not the flash-XML thing. I am sure you know how to get data from XML to Flash. I ma providing you with the approach, rest I think you can take care.
    Once you get the datas from XML, store each value inside a variable or all of the values inside an array. Now all you need is to write a “if-else” condition, about which button is clicked and depending upon the button name or id, get the respective variable value and play the video.I hope that makes sense to you.

    happy flashing πŸ™‚

  30. hi Dinesh,
    this is not a general discussion board.If you are really serious about your Flash, why do not you join any of the flash forums (flashmove, flash-db, ultrashock are few to name).

  31. Thanks for your tips, i have joined in (flashmove) forums. Also can you please suggest me a good flash reference tutorial.

    Thanks in advance,
    Dinesh

  32. If you are new to actionscript, just search in here, I had posted some tips regarding the getting started with actionscript.Read the question answers at the forum, ask your doubts there.And yes, if you can get Essential Actionscript 3 (essential Actionscript 2, if you still want to do AS2) by coolin Mook, it would be real handy.
    happy flashing

  33. hi Saumya,
    I need to learn AS 2.0 and my problem is i just unable to write the code. Can you please tell me a better way to practice . I know it is bit funny but i just can’t write it.
    Also i like the tutorial that you have given. But can we store the flash data in XML ?
    I mean i have a feedback form done in flash and i need once the form is filled and user just move from that page the data at the time of leaving the page stored in XML.
    Kindly help me with it.
    thanks and regards
    nikhil singh

  34. Hi Nikhil,
    The best way to get going is start walking. I have written the tutorials in a way as to be understood by a designer. Just start from the beginning at my tutorial section.I hope you can start moving from there.
    As far as saving is concerned, you must know that Flash by itself can not read or write to any file or anything.For that you need to have another programming language such as PHP, JAVA or something like that. Or you can take advantage of MDMZinc or AIR to save a local file.
    thanks for your kind words, happy flashing πŸ™‚

  35. Hi Raju,
    thanks for your kind words. It really boosted me up for writing these kind of tutorials often.
    cheers πŸ™‚

  36. hi saumya
    can you please tell me how to show a xml data into text area by clicking button . please help me with it …….. by the way merry Christmas.

  37. Hi Saumya.
    Your tutorial is very good. =)
    But i am stucked and encounter on an issue.
    I have done a flash clip which its data is extracted from the XML file,
    and i am trying to create a hyperlink in it but it didn’t work out.
    Please help me Saumya. Really thanks alot if anyone can help. =)
    Hope to get your response soon. =)

  38. Hi Saumya.
    your tutorial was good. this is very helpful for loading external images in flash from xml.
    will you can give answer for it.
    how can i open or load external images in flash from xml by click on movieclip or button present on that movie clip.

  39. hi Sonalika,
    thanks for your kind words.
    To answer your question, let me explain the process. I hope you understood the XML parsing part.Well, after that all that remains is to get the actual data from the XML, which you have already learned.Now add the interaction.I mean on clicking of a movieclip, load the particular image from the XML node you are interested in.
    Divide your problem into 2 parts, one reading the xml and one loading the image.
    hope that helps.
    happy flashing

  40. Hi Saumya.
    thanks for giving advice
    actually i am working for following example

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

    i know this is too difficult for intermediate, now with the help of your example i am able to set the images from xml to flash, but when i want to use different movie clip for different thing that mean separate movie clip for thumbnail ,separate for mouse over. then it create problem.how can i call images in different movie clip and link with each other.

    in this example i have used different folder for images and also xml file.
    then can we call more than one xml file in our flash file.

    and link with each other in flash

    can you give any idea?
    thanks in advance.

  41. hi Sonalika,
    As I look at it, you have an understanding of XML data into Flash and know how to get image loading into flash.Now all that remains is the application architecture.
    Go one step at a time. First think when you will need data and when you are going to load the images.Whether you need your XML data through out your program or not is also important to answer so as to create your application architecture.
    Here are 2 previous posts, which will help you understand the Flash application in a better way.
    β€œthis” is me
    Where can I find your home?

    Now to answer your questions, yes you can call any number of XMLs. Linking, i think you are referring to targeting movieclips from one to another(this topic is cleared in above links I gave you).

    hope that helps
    Happy flashing πŸ™‚

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