Introduction to XML in Flash
by senocular
Example: Load Security Text
As a first example, we'll start with something
simple. Here, text will be loaded from XML and
displayed in a text field. Nothing fancy or
complex but, to keep from being completely mundane,
an additional URL was included in the XML which
will also be added and linked at the end of
the text.
Here's the XML document:
security.xml
It should consist of the following:
- <?xml version="1.0"?>
- <text url="http://www.kirupa.com/k2/Feb2004/security.htm">Hard
drives are just as much your property as your
house. We have laws in place to protect our
homes and ourselves from intruders. Hopefully
some day legislation will be passed to make
Malware completely illegal. Enforcement would
be tricky, but so is protecting our homes.
Awareness and a commitment to "smart-surfing"
on the internet are our first line defenses
for now. I hope that you gain something useful
from this article and that you take the practices
it prescribes to heart.</text>
Very simple and straight-forward XML; you have
a single document root node, text, which contains
an attribute with a url and a child text node
with text (from that url). Do notice that quotes
within the text node use character entity references
("smart-surfing"). The Flash
movie, when complete, will give you the following:
[
click the load button for text on security ]
Preparing the Flash File
Not much to do here. There are two elements
to this file not including the scripting. You
got yourself a dynamic text field with the name
output_txt and a button named load_btn. Each
are placed directly on the main timeline in
the layer of choice. Since we're dealing with
a lot of text and HTML is being used to create
a link in output_txt, you would need to make
sure that the text field is set to be multi-lined
and that HTML is enabled from the properties
panel.
[
multi-lined and html enabled dynamic text field
]
ActionScript
Now to the scripting. Given the circumstance,
XML to populate a text field as a result of
a button click, you can pretty much divide what's
needed into 3 parts.
- The definition of an XML instance to handle
the XML loaded
- The button action to initiate the loading
process of the XML document into the instance
- Including the result within the available
text field (this happening within the onLoad
event of the XML instance)
Defining the XML instance is easy enough. This
will include the commands we've covered before.
- var output_xml
= new
XML();
- output_xml.ignoreWhite
= true;
- output_xml.onLoad
= function(success){
- // actions for when
XML is loaded
- }
Even though, given the XML for this example,
ignoreWhite is not needed (remember, it removes
white space between elements and there are only
one element, the document root, in this XML),
it is still included. You can say this is to
enforce habit or just incase, in the future,
there may be a more complicated XML to deal
with that might need the property set in order
to work as expected. Too often will you kick
yourself for having forgotten it.
Now that an XML instance exists, the load_btn
action can be set to initiate the loading of
an external XML document into that instance.
This will require using the load() command.
Once that XML has loaded, the onLoad function
from above will be run for the instance and
the desired text can be added into the text
field.
- load_btn.onRelease
= function(){
- output_txt.text
= "Loading...";
- output_xml.load("security.xml");
- }
Since it will take some time to load, even
though minimal just being a text file, the output_txt's
text is set to say "Loading..." to
ensure the user that something has in fact happened
and that the text requested will be displayed
soon. It's just a matter of waiting for the
XML to load and the onLoad function to be called.
That onLoad is what is needed to display the
text from the XML. Two key bits of information
need to be extracted: the main text and the
url that is to go beneath it. The text itself
resides in a text node within the document root
element security while the url is stored in
an attribute of that element. Here is the full
onLoad.
- output_xml.onLoad
= function(success){
- if (success){
- var security
= this.firstChild;
- var url
= security.attributes.url;
- var textNode
= security.firstChild;
-
- output_txt.htmlText
= textNode.nodeValue
+ "<br><br><a
href='" +
url +
"'>"
+ url
+ "</a>";
- }else
output_txt.text
= "Error
loading XML";
- }
You can see that most everything happens within
an if statement. This if statement checks to
see if the XML document was loaded successfully
by checking the success argument passed into
the onLoad method. If true, the bulk of the
code dealing with the loaded XML is run. If
not, then the phrase "Error loading XML"
is given to the text field.
Notice that variables are used to help identify
structures in the XML. Since the onLoad is defined
within the XML instance, this within
it references the XML instance itself. The security
tag, being the first element in the XML (document
root), is the firstChild of the XML instance.
The url is an attribute of that and the main
text is a child of the security element in the
form of a text node.
- <?xml version="1.0"?>
- <firstChild
firstChild.attributes.url="">firstChild.firstChild</firstChild>
After each are saved as their respective variables
they are added to the htmlText of the output_txt
text field. For the text node, its nodeValue
is used to get the text stored in that node.
The url is simply text (representing the value
of the attribute) so it is added straight in
and included in an HTML anchor tag (<a>)
so that it will be a link.
Click, load, interpret, use. That's XML for
you. Next we'll try something a little more
involved.
|