Displaying
XML Data in Flash - Page 3
by
kirupa | 24 July 2004
In the previous
page you adding the ActionScript and learned a
little (ok - a lot!) about your XML file. On this page, we
will shift gears and learn about the ActionScript that works
to display the XML file.
The Script of Action -
ActionScript!
This is the same code you copied and pasted in the previous page
in your Flash file:
- function
loadXML(loaded)
{
- if (loaded)
{
- _root.inventor
= this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
- _root.comments
= this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
- name_txt.text
= _root.inventor;
- comment_txt.text
= _root.comments;
- }
else {
- trace("file
not loaded!");;
- }
- }
-
xmlData =
new XML();
- xmlData.ignoreWhite
= true;
- xmlData.onLoad
= loadXML;
- xmlData.load("inventors.xml");
The following sections will
explain each line of code:
-
xmlData =
new XML();
Here you assign a variable to the
new XML object. The XML object in Flash contains all of the
nifty XML features and properties that greatly simplify
displaying and modifying XML data in your Flash animation. I am
calling my XML object xmlData.
- xmlData.ignoreWhite
= true;
When Flash reads an XML file, it
reads all the spacing contained in the XML file also. You should
almost always use this line to tell Flash to ignore the white
spaces such as empty text nodes. Note that the .ignoreWhite property is a part of the
xmlData object you declared in the previous line.
If you are using Flash MX or
higher, which you really should for better XML support, you
do not need to have this line here. Thanks to
mdipi
for pointing that out.
- xmlData.onLoad
= loadXML;
When you are dealing with XML
data in Flash, a common mistake is to assume that the XML file
is loaded almost immediately. For large XML files, or even
smaller XML files over a slow connection, that is hardly the
case. Therefore, it is good to create your own event handler to
ensure that your XML file is loaded.
In this line, I am telling
xmlData to invoke the loadXML function when loaded - hence
the onLoad. I will explain in greater detail about the loadXML
function a few lines down from here.
- xmlData.load("inventors.xml");
In this line I specify the path
to the XML file that I am interested in loading. Since we saved
our FLA file into the same directory as our inventors.xml file,
I simply specify the name of the file. You can add relative
paths if your XML file happens to be in a different location.
- function
loadXML(loaded)
{
- if (loaded)
{
- _root.inventor
= this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
- _root.comments
= this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
- name_txt.text
= _root.inventor;
- comment_txt.text
= _root.comments;
- }
else {
- trace("file
not loaded!");
- }
- }
This is the code for the loadXML
function. This function ensures that nothing XML related is done
without first making sure the XML file is loaded.
- if (loaded)
{
- _root.inventor
=
this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
- _root.comments
=
this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
- name_txt.text
=
_root.inventor;
- comment_txt.text
=
_root.comments;
- }
else {
- trace("file
not loaded!");
- }
This if statement checks to see
if the file is loaded. If the file is not loaded, the code under
the "else" section is activated. I have it set to display "file
not loaded!" in the output.
If the XML file is loaded, I have
set it to execute the following code:
- _root.inventor
= this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
- _root.comments
= this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
- name_txt.text
= _root.inventor;
- comment_txt.text
= _root.comments;
The first line of code (broken
off into two lines) displays the data about the inventor's name
from the XML file into the variable inventor. The second line of
code (also broken into two lines) displays the comment about the
inventor by storing the data into the comments variable. That
data is also taken from the XML file.
The final two lines simply
display the data from the inventor and comments variable into
the text fields you created in the first page.
I have not explained in detail
the stuff such as firstChild, childNodes, and nodeValue that
appear in the line for _root.inventor and _root.comments. In
order for you to understand the explanation, I think we will
need to go back and look at the XML file again. I will provide a
detailed explanation about that on the
next page.
Let's continue on to the
next page!
|
page 3 of 5 |
|
|