Displaying
XML Data in Flash - Page 2
by
kirupa | 24 July 2004
In the previous
page you created the XML file and the interface for
the Flash animation. Let's now add the code to display some
XML in your Flash text fields!
Adding the Code
We don't have a mechanism for displaying data from our XML file
and displaying it in Flash. Let's add the code to enable just
that.
Select the first (and only) frame
in your Flash timeline - any layer will work - and press F9. Copy and paste the
following code into the Actions Panel:
- 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");
Now, preview your animation. If
you followed the steps properly, you should see the name of an
inventor and the associated comment in the appropriate text
fields.
Why Everything Worked
Now that you have a working example, it is time for you to learn
why the animation worked. It's important for you to understand
the theory behind what I explained, because once you understand
the behind-the-scenes work, you will be better prepared to
create your own XML/Flash implementations.
The XML File
Let's first start by dissecting the XML file. If you were to
look at the XML file, you will see a lot of text. I have pasted
a "similar" version of the XML file that you used in the next
paragraph.
- <?xml
version="1.0"?>
- <inventors>
- <person>
- <name>Thomas
Edison</name>
- <comment>Inventor
of
cool stuff.</comment>
- </person>
- <person>
- <name>Doug
Engelbart</name>
- <comment>Invented
the Mouse</comment>
- </person>
- </inventors>
The above XML file is "similar"
because I removed a lot of the words from my comment text.
Having the extra text made some of the lines break off into two
lines. Not having the extra comment text will in no way detract
from your learning. I promise!
- <?xml
version="1.0"?>
This is the header text that
appears on most XML documents. There are expanded forms of this
line that add newer features, specify how the file should be
treated, etc. Flash doesn't care about this line, so it's
inclusion is entirely optional.
- <inventors>
This is the root element/node of your
XML document. This is the most over-reaching generalization you
can make about any content that will be placed inside. In our
case, the data it contains must be related to inventors, hence
our element's name of inventors.
- </inventors>
This is the closing tag for our
root element. In the future, I will not emphasize the closing
tag, for all elements/nodes will have a closing tag.
Think of writing data in XML as
packaging a gift to send to someone (hint!). First you
open the box, put your gift inside, and then you close the box.
XML elements work similarly.
|
Quick
Note |
The words element
and node refer to the same item. You will see
it used differently from different sources. I use
both terms interchangeably because the Flash AS
refers to nodes while a lot of the XML documentation
refers to elements as well as nodes. |
|
Let's say that in our example,
the box is the element/node. You open up the box, called inventors by
writing it as <inventors>. You place all of your data inside,
and then close the box by writing </inventors>.
Here is a graphical example:
We just dealt with the root element. In XML,
you can deviate beyond the root element and subcategorize more
elements called child elements. In our example, the root element
is inventors. The child element would be the two instances of
person. Both of those elements are nested inside the inventors
element.
Being the rebel that I am, I further divided
the child elements person to contain the elements name
and comment. When read backwards (inside to out), name
and comment are child elements of person because both
person elements contain the
child elements name and comment. Person is a child element of the root element inventor.
That's a lot of bold worded text.
Hopefully the following should help you to
visualize the child/parent relationships in our XML document:
- <inventors>
- <person>
-
<name>Thomas
Edison</name>
-
<comment>Inventor
of
cool
stuff.</comment>
- </person>
- <person>
-
<name>Doug
Engelbart</name>
-
<comment>Invented
the
Mouse</comment>
- <person>
- </inventors>
The text in pink is the child element of the
text in green. All of the items in green and pink are child
elements of the text in blue.
The pieces of data contained within the child
elements are known as attributes. In our example, the text
"Thomas Edison" is an attribute of the element name.
Your attributes as well as element names have to be strings.
Note how each element (child or root) was
closed with a complementary closing tag. Also, I have been using
the word element to refer to the category names for your
data. You can also call an element a node. Several
Flash and XML books (especially if you learn XML for use with .NET) make
use of the term node as opposed to element. I am
reiterating this in case you missed the Quick Note further up on
the page.
Ok, it's time to leave XML for a bit and learn
about the code used in the Flash file. On the
next page, I will explain
the code used for displaying the XML in Flash. Don't forget all
of the XML stuff you learned though. I will be referencing and
adding on to what you learned about XML on the next page also.
Let's continue on to the
next page!
|
page 2 of 5 |
|
|