Publishing System Settings Logout Login Register
Flash and XML - a beginners guide
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on August 1st, 2005
11707 views
Adobe Flash
Welcome to the "How to Flash with XML" guide.
This is not a real tutorial where you will see something cool flowing around your screen.
I will try to explain you how flash can grab data from an xml.

This guide is separated in 3 Chapters:


  • 1 - XML what?

  • 2 - The fusion

  • 3 - Real life example



On the early day's of flash I worked a lot with txt files.. and that was really a pain, since I had to use special characters to define a new line or to define a new instance and so on.
Those times are over, thanks to XML.


XML what??

Now before we begin some gray theory about XML:

  • XML stands for EXtensible Markup Language

  • XML is a markup language much like HTML

  • XML was designed to describe data

  • XML tags are not predefined. You must define your own tags

  • XML uses a Document Type Definition (DTD) or an XML Schema to describe the data

  • XML with a DTD or XML Schema is designed to be self-descriptive

  • XML is a W3C Recommendation


source: http://www.w3schools.com

after this "boring" part, let's begin with the basics

How does an XML file look like?

<?xml version='1.0' encoding='utf-8'?>
<websites>
<website name=\"Twodded\" description=\"Have you been twodded yet?\" />
<website name=\"Pixel2Life\" description=\"Bring your Pixels to Life\" />
<website name=\"your site comes here\" description=\"your comments\" />
</websites>


First Line: Definition of document type and encoding (this line will not be used in flash but you should put it, in case future versions requires it)
Second Line: Next line is our first node (in flash, childNode), here you can write anything you like, I named mine website, since this is a list of websites.
Third ++ Line: These are the entries corresponding to the childNode, these lines are also called childNodes, because they're inside of the tag.
Sixth Line: Closing childNode.

Childnodes:
Our Childnodes are made of two variables "twodded" as name, and "Have you..." as description.
Variables must be inside of "" and we close our childnodes at the end with />
It's very important that you open and close all your tags properly otherwise the XML will not be parsed by flash.

Special Characters:
Special characters can be used inside of our variables, rather though I recommend you not to use it, just to minimalize the risk of something going wrong.

As you see our XML file is built like a tree:

MainNode
-- childNode
-- childNode
-- childNode
SecondMainNode
-- childNode
-- childNode
-- childNode

Let's get our xml into flash now..


The Fusion with flash

We need to create an XML object in flash, where all the function will take place:
myXML = new XML();


Flash cannot read our XML if it has whitespaces,and we couldn't write an XML without whitespaces,so we need to put this line:
myXML.ignoreWhite = true;


At the end you need to tell Flash to load our XML file.
myXML.load(\"XML123.xml\");


Next we will use the onLoad function to define a callback
myXML.onLoad = function (success){
....
...
}


And now we need to create the arrays that will hold our data, in our case 2 arrays. One for Websitename and one for Description.
myXML_websitename = [];
myXML_description = [];


We checked if our XML has been loaded, and with if we check if it has been completely loaded
if (success){
..
.
}


When the XML has been loaded, we want to check how many childNodes we have, so we need to create a for loop
for (i=0; myXML.firstChild.childNodes.length; i++){
...
..
}


Now you're asking what a firstChild is? FirstChild is the first Node of our XML, in our case "websites" and childNodes is like I've already explained you the content. And with length you determine how many childNodes are available inside the "Websites" tag.

Now let's fill our arrays with some data:

I will start with the websitename array, to have a bit of a clean workflow.
myXML_websitename[i] = myXML.firstChild.childNodes[i].attributes.name;

So now we have our array being filled by all attributes inside of our firstChild.childNodes.
attributes is an object containing attribute variables assigned to this element (in our example name & description are attributes).

And now let's do the same for our description array:
myXML_description[i] = myXML.firstChild.childNodes[i].attributes.description;


Thanks to the for loop this actions are being done continuosly till all childNodes have been saved into the array.

For a more detailed information of xml in flash, please press F1 and type "xml class" in your flash interface.


Let's see if everything is working as it should.

We want to see first childNode (Twodded) name in our output window, you probably know how to do it, but here the code:
trace(myXML_websitename[0]);

This will write Twodded on the output window

If you replace the [0] with [1] you will get Pixel2Life written on it.
That's because array's always start with a 0,so in our case

0 - Twodded
1 - Pixel2Life
2 - your site comes here

The same would also work for our description array..
trace(myXML_description[0]);


If you want to see if all our data has been read in correctly just type the name of the array inside the trace action without the [].

Complete Code:

myXML = new XML();
myXML.ignoreWhite = true;
myXML.load(\"XML123.xml\");
myXML.onLoad = function (success){
myXML_websitename = [];
myXML_description = [];
if (success){
for (i=0; myXML.firstChild.childNodes.length; i++){
myXML_websitename[i] = myXML.firstChild.childNodes[i].attributes.name;
myXML_description[i] = myXML.firstChild.childNodes[i].attributes.description;
}
}
}


This was already everything you needed to know about XML and Flash, now you can get your data in a more efficient way.

On the next page we will build a small example of how to use it.
If you feel that you are good enough, then jump to my Streaming Flash Player Tutorial to get you hands dirty.



You don't feel good enough to build the MP3 player? No worries, you will be after this small example.

First Step:
Open your notepad or your favourite texteditor and create an XML file named "textfields.xml"
And this will be the content of our xml file:
<?xml version='1.0' encoding='utf-8'?>
<textfields>
<field name=\"Description or comment One - 1\"/>
<field name=\"Description or comment Two - 2\"/>
<field name=\"Description or comment Three - 3\"/>
<field name=\"Description or comment Four - 4\"/>
</textfields>


Moving to flash, just create a new movie and put this code on the firstframe.

stop();
myXML = new XML();
myXML.ignoreWhite=true;
myXML.load(\"textfields.xml\");
myXML.onLoad = function(success) {
thisXML = myXML.firstChild.childNodes.length;
amount = [];
for (var i=0; i<thisXML; i++) {
amount[i] = myXML.firstChild.childNodes[i].attributes.name;
}
gotoAndStop(2);
}

This time I've created a variable thisXML holding our XML hierarchy to shorten the code a bit.

Create a blank keyframe at frame 2 and paste this code:

stop();
for (var i=0; i<thisXML; i++) {
_root.createTextField(\"field_txt\"+i, i, 10, i*20, 0, 0);
_root[\"field_txt\"+i].autoSize = true;
_root[\"field_txt\"+i].text = amount[i];
}


We create again a for loop to count the entries of our xml.
After that we create dynamic textfields, generated by ActionScript. (check helpfile for more information about the textfield class).

Test the movie CTRL+ENTER, and you will see our entries are being displayed on our Stage

Here the .zip file for download, maybe you need it as reference.
Hope this tutorial was helpful, don't forget to leave your comments/rating before you go.

Funkysoul
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
funkysoul

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top