When Flash 5 came out, I was impressed by a lot of the new features Macromedia had put into their product, but none so much as the addition of the XML ActionScript object. The XML Object allows you to pull in xml data and display it within your flash movie. Take a look at my example below .
Before we get into the flash movie, let's talk a little about XML.
XML - Simple
I don't want to get too technical on the XML side, so I will keep this simple. XML is a means of describing data in tag format. In plain english, XML lets you make up tags which best describe the information each tag represents. Unlike HTML, which is a simple formatting language for text and media, XML has nothing to do with formatting the data, just describing it. Confused? Well, let's look at a really simple example to clear things up. This is a REALLY simple person XML document containing my first and last name as XML data.
Smith Chris
Not a very complex example, I know, but I think it demonstrates the basics of xml. Rather than putting this kind of data in an html table, which makes it very hard to get at and do anything with (such as reformatting it, sorting it, etc.), the data itself is marked up with tags which describe what the data is.
XML - More Complexity
XML is far more complex than my timid little example. Each XML tag can contain text of it's own, child tags (that is, tags which fall within another open and close tag), and even attributes:
<-- note the 'id' attribute ...
XML itself is just what it looks like, human readable tags which order and describe the data within them. XML is broken up into a hierarchy of nodes. Each node can contain 0 or more child nodes. In XML, each node can, by itself, be considered a separate XML document, with it's children as the elements of that xml document. Here's a simple example:
GrandChild 1a GrandChild 1b
GrandChild 2a GrandChild 2b
So, the parent_node tag is the parent of both the child_node tags. The child_node tag with the id of 1 is the parent of the two grandchild_node tags within it, and so on. Any tag which contains something is said to be those things' parent node. Any element inside a set of tags is one of that tag's child nodes. Not too hard, huh?
What Good Is It?
Now after all this XML mumbo jumbo, here's the million dollar question: what good is it to you on your site? Making records like this is all well and good for nice neat data storage, but try displaying this doc in most web browsers and you will see nothing but the raw text with all the tags stripped out. How can you use this data for displaying it to users? Well up to now, the best means of formatting XML data has been through XSL stylesheets, a formatting and styling language for XML which can read your data, and based on the information in the stylesheet (also written in a subset of XML), display the data in any format you like. An xsl stylesheet can display your data as html, wml, you name it.
Most of the tools out there for displaying XML data are varied, ranging from the very good to the not so good. The most recent browsers (IE 4 and above, and the new Netscape 6) can take XML and an XSL stylesheet and spit out the formatting you like, but since XML and XSL are still pretty new, the implementations across browsers is pretty scattered. Server-side programs in most every language are out there that can parse and display XML, including Java, PHP, Perl, just to name a few. While the server-side tools are usually a bit more reliable, still there are wide and varied differences between their implementations and gotchas, so the web developer must often beware.
Enter Flash 5
Enter Flash 5.
Flash 5 has a very good implementation of XML in ActionScript, allowing you to pull XML content into your flash movies and parse through it to get at the data. This is accomplished with the new XML Object. You create a new XML Object in ActionScript with the following:
my_variable = new XML();
Flash then let's you load up any xml content you wish from a url and load it into this new object by calling the XML Object's load() command.
It is important to note that the url you pass flash does NOT have to be an xml document, per se. That is, the file does not have to be a file at all, certainly not one that ends with the .xml extension. It could be a call to a server-side script or cgi program, with parameters passed along. This is great if you want to load up data from a database or records from an ldap server from a script on your web server, and serve up the data to a flash movie. Just format the output of the script as xml, and flash can read it no problem.
A note: flash's implementation of xml only allows you to pull remote xml files from within the flash standalone player. For flash movies on the web, the xml files you wish to use must come from your domain, or from a local source on your webserver's file system.
Event Handlers
XML Objects, like many objects in ActionScript, have event handlers. For those who don't know, event handlers are bits of code that will run when something else kicks them off. What does that mean? A great example is all the flash mouse event handlers, which cause something to happen when the mouse is clicked or released, or whatever. You assign event handlers whenever you tell some code to run after a click of a button, or when someone drags with their mouse. These are known as mouse event handlers. XML objects have their own event handlers. We will focus on the onLoad handler, which will run some function when the XML document you request is done loading into the XML Object.
So, with all the preliminaries out of the way, let's get down to it.
Dynamic Text Box
First, create a 'dynamic text' box:
Start Scripting
This text box will display the xml content as links for us. I gave it a big name, "content_feed_display". Why? I like big names. Sue me.
Once you've built the text box, that's pretty much it for the actual required objects. The rest is all in the scripting.
Right click on the first and only frame of the movie. Select 'Actions'. We'll start by setting up the XML object
//create a new xml object urlXML = new XML(); //when the xml data has loaded, we want the XML Object to run the convertXML function urlXML.onLoad = convertXML; //Write to your text area that the data is loading. content_feed_display = "Loading data..."; //now load up the url. urlXML.load("moreover.xml");
The next step is what to do with the xml once it's loaded up. For this, we need to define the convertXML function to rifle through the XML and get the data we want.
Before we do this, we might want to take a look at the XML in question. This will make the function seem a lot more clear.
The XML
<-- Document definition. We can ignore this line for our purposes. <-- The document's top-level element. This is known as the root node. <-- An article node. It is a child node of the moreovernews tag above. <-- Now on to the children of each article. This is the meat and potatoes we are after. Particularly the url data and the headline_text data--> http://c.moreover.com/click/here.pl?x12591193<-- We want this, our link PlayStation 2 continues the legend<-- TAnd we want this, our link text. STUFF text Computer games news http://www.stuff.co.nz/inl/index/0,1008,0a28,FF.html Nov 26 2000 7:10PM
...more article nodes... <-- Close of the moreovernews node.
Here's the Function
So, here's the function. Place this function in your actions box right below the code we just inserted.
function convertXML() { if(this.loaded) { content_feed_display = "Data loaded."; } mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array; mainTag = this.firstChild.nextSibling; if(mainTag.nodeName.toLowerCase() == "moreovernews") { articleList = mainTag.childNodes; content_feed_display = ""; for(i=0;i<=articleList.length;i++){ //initialize a couple of variables to hold xml data we want displayed document_url = ""; headline_text = ""; if(articleList[i].nodeName.toLowerCase() == "article") { //we get the child node array beneath the articles, aka the meat and potatoes we are after elementList = articleList[i].childNodes; //and loop through that looking for the data we need for(j=0;j<=elementList.length;j++) { elementTag = elementList[j]; elementType = elementTag.nodeName.toLowerCase(); if(elementType == "headline_text"){ headline_text = elementTag.firstChild.nodeValue; } else { if(elementType == "url"){ url = elementTag.firstChild.nodeValue; } } } content_feed_display += "
Tell the user the data is loaded. They probably won't see the message, since it is happening so fast, but why not. Good for debugging purposes, anyway.
mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array;
We set up a couple of internal XML documents (remember, a node within an XML document behaves just like a full XML document), and a couple of arrays for looping over data later.
mainTag = this.firstChild.nextSibling;
We get a handle on the xml data we want. The this refers to the original XML Object we created. Notice that we get the first child node by calling the firstChild property, but since this first child is the document definition, we get the next child node with the nextSibling property.
We want to make sure we have a handle on the moreovernews tag. To do this, we call the nodeName property of the mainTag object. The nodeName property will return the name of the element exactly as it appears between the tags. That is, .
Once we know we have the moreovernews node, we want to get all the article child nodes out of it. Simple enough.
articleList = mainTag.childNodes;
The childNodes property will return an array of XML Objects which are the child nodes of the original XML Object. In this case, the original XML Object is mainTag. Now we need to loop over them.
//set the dynamic text field to blank so we can write new data to it content_feed_display = ""; for(i=0;i<=articleList.length;i++){ //initialize a couple of variables to hold xml data we want displayed url = ""; headline_text = ""; if(articleList[i].nodeName.toLowerCase() == "article") { //we get the child node array beneath the articles, aka the meat and potatoes we are after elementList = articleList[i].childNodes;
So, we set the dynamic text field to blank, so there is a nice clean slate to put our links. Next, we loop through all of the child nodes returned to articleList. We repeatedly blank out two variables on each pass: url and headline_text.
Since the flash XML parser considers everything in the XML document (including carriage returns and newlines) as XML nodes, we check each one in turn to see if it has a node name of article. When we have a match, we put it's child nodes into an array called elementList, and loop over that! (A whole lot a' looping going on)
We take each XML node in elementList and pass it into the XML Object element Tag. We do this mostly to simplify our code. Now we set the variable elementType to contain the node name of the current elementTag. This way we can check to see if the element we currently are looking at is one of the two we want. If you remember, we are looking for headline_text and url. If we find matches, ie:
if(elementType == "item_we_want"){ ... }
We pass that data into one of our two variables, headline_text and url.
Once we've gotten the data we want, it is a simple matter of passing this data out to the dynamic text field, like this...
And that's it!! The rest of the code you see is just closing up for loops and if statements.
That's it. It takes a little while to get the hang of some of the XML stuff, but if you do, it's a great addition to your flash coding skills. There is an insane amount of free xml content out on the web, from newsfeeds to articles, even links to pertinent graphics. Also, the XML Object in Flash 5 lets you do more than read elements from the XML document. You can add your own, delete elements, move elements, and more!
