Page 1 of 1 In this article you will learn how to integrate Flash with XML data files. We will be covering the following:
By the end of this article you will be able to load an XML formatted file
into a Flash Movie.
Why XML? First introduced in 1996, XML has gathered a huge momentum as the open data
sharing language for the Internet. The core functionality of the language is
to structure data. To begin with, XML looks very much like HTML. The language is tag based. There
are some exceptions. XML itself is not a presentation language. That is, what
you see is just the data. You need to leverage technologies such as Cascading
Style Sheets to format the data.
The following files are included with this article and can be downloaded using the download link at the bottom of this page.
For this article we will be using a basic XML document. The following code is the XML file:
<broadcast>
<story>
<lead>This is Headline 1</lead>
<body>This is where you can add content that will appear under the first
headline</body>
<URL>http://www.communitymx.com/</URL>
</story>
<story>
<lead>This is Headline 2</lead>
<body>This is content that can appear under the second headline.</body>
<URL>http://www.flash-remoting.com/</URL></story>
<story>
<lead>This is Headline 3</lead>
<body>This is content that can appear under the third headline.</body>
<URL>http://www.macromedia.com/</URL>
</story>
</broadcast>
It is the structured nature of this data that allows us to pull it into Flash. Specifically we will be focusing on the following TAg elements to this file:
The tags are placed in Upper case here as we will need to do this when we call the script from within Flash.
TIP: IMPORTANT!!! You can only load XML files if they reside on the same network as the Flash Movie. This means you can not link to an external XML feed such as a RSS Newsfeed (you may have heard of them being called blogs). There is a way around this. Either through Flash Remoting or through a Server Side Scripting Technology such as Microsoft's ASP/.NET, Java Server Pages, ColdFusion or PHP. These tools can be used to connect to external XML feeds which can then pass the content onto your Flash movie.
One of the cool tricks you can do with Internet Explorer 6 is use it to display XML files. Just use File->Open to browse to the XML files on your hard drive and Internet Explorer6 will display the contents of the file in your browser window.
The question that begs to be answered is why use Flash to integrate with XML. Flash 5 was extended to allow XML to be used as an external data source. This gives you as a designer a great edge. XML takes care of the content and Flash manages the presentation. With this combination you can create a template SWF file that is populated by an external XML document. Why is this good? The end result is that you only need to update the XML document to change the content of the movie. No need to open the Flash movie.
Flash MX uses much the same objects and methods to control XML files. So what is the difference between 5 and MX? You will find that the current Flash 6 Player (version 6,0,65,0) is more stable and can handle more XML documents simultaneously. Flash 5 had a challenge in that any one movie could only handle approximately 3 XML files. If you relied heavily on XML as a data format then you were in big problems. The latest Flash Player handles more XML files and is more efficient in parsing the ActionScript used to present the XML in your document.
Flash is good at presentation. For our example we are going to keep everything very simple, but it can be easily extend.
Open Flash and create a new movie. Set the movie dimensions to 450px by 220 px. Add two layers: Content and Script. Only add one key frame for both of the layers. You will not need anymore.
Visually, all we need is a Dynamic Text field.
Select the Content layer and on the stage draw a Text Field 400 by 180 pixels. Change the Text Type to Dynamic.
The Text Field will need a Variable name. Call the Text Field “txt”, later this will be referenced by our ActionScript. Select the “Render HTML” and “Show Border Around Text” options. In our final ActionScript you will take the URL XML tag and bind it with Flash HTML to make the headlines link to web pages.
That is it. No fancy graphics with this presentation. Later on, when you feel more comfortable working with XML you can add greater interactivity to the scripts.
The mechanics of bringing XML into a Flash movie is managed completely with ActionScript. Select frame one on the Scripts layer and open the Actions Panel.
The first step is to tell Flash that we are going to be using the
XML object and it’s methods. The XML Object is a special object
within Flash ActionScript developed to understand XML.
That is done with the following script:
headlineXML = new XML();
The variable headlineXML has properties that initiate a new XML document.
With this completed the next step is to load the XML document. In
many ways, this is very similar to loading an external Flash movie.
The exception here is that we are working with XML.
The script to load an XML document looks like this:
headlineXML.onLoad = myLoad;
headlineXML.load("headlines.xml");
The headlineXML variable is used to associate the script with the correct program. The file headlines.xml is in the same directory as the final SWF file. If this is not the case for you then write out the correct path to the XML file. This is important. If Flash can not find the file then nothing will happen. There will be no magic.
The next step is to validate the file loaded correctly. If it does then we can begin to extract data from the XML document into the Flash movie.
Begin by checking to see if the file has loaded by writing in the following script:
function myLoad(ok) {
if (ok == true) {
Publish(this.firstChild);
}
}
If everything is OK then your program has found the correct XML document and has loaded it into the movie. What we are looking for is the answer to a yes/no Boolean question: is the XML document loaded? If it is then the variable Publish can execute.
The Publish variable begins to parse the data out of the XML document. Flash sees data in an XML document in relationship to where the content appears within a tag. XML data is nested with content having a parent/child relationship with other data. In other words, the tag BROADCAST is the main tag to the entire documents. All tags within it are children tags to the main BROADCAST tag. However, within our XML tags we have the STORY tag which is a child to BROADCAST but is the parent tag to LEAD, BODY and URL.
The help Flash better differentiate the tags it called each Tag a Node. The node value must be clearly defined.
The first node to be defined is BROADCAST. This is done with the following script:
function Publish(HeadlineXMLNode) {
if (HeadlineXMLNode.nodeName.toUpperCase() == "BROADCAST") {
content = "";
Here Flash establishes which Tag is the main Node.
The most important XML Tag that needs to be defined is the STORY
node. This node has the LEAD, BODY and URL nodes with their data
as direct children.
story = HeadlineXMLNode.firstChild;
while (story != null) {
if (story.nodeName.toUpperCase() == "STORY")
As you can see the ActionScript is very similar.
Here is the ActionScript used to define the final three Tags. Again,
the script is similar. It is merely our way of specifically telling
Flash to find the correct data:
lead = "";
body = "";
URL = "";
element = story.firstChild;
if (element.nodeName.toUpperCase() == "LEAD") {
lead = element.firstChild.nodeValue;
}
if (element.nodeName.toUpperCase() == "BODY") {
body = element.firstChild.nodeValue;
}
if (element.nodeName.toUpperCase() == "URL") {
URL = element.firstChild.nodeValue;
}
If we were to go ahead and place this script into Flash we would still have no results. Two more actions need to take place. The first is to tell Flash to cycle through the complete XML document to find all of the information and the second is to format and present the content in Flash.
A “while” statement will be used to cycle through the XML document to find all the data needed in the final presentation. Here is how it looks placed correctly in the ActionScript:
while (story != null) {
if (story.nodeName.toUpperCase() == "STORY") {
lead = "";
body = "";
URL = "";
element = story.firstChild;
while (element != null) {
if (element.nodeName.toUpperCase() == "LEAD") {
lead = element.firstChild.nodeValue;
}
if (element.nodeName.toUpperCase() == "BODY") {
body = element.firstChild.nodeValue;
}
if (element.nodeName.toUpperCase() == "URL") {
URL = element.firstChild.nodeValue;
}
element = element.nextSibling;
}
story = story.nextSibling;
}
}
}
Earlier we set up the initial Flash with a Dynamic Text Field called “content” and we turned on the “Render Text as HTML” option. This is why:
content += "<font size='+2' color='#3366cc'><a href='"+URL+"'>"+lead+"</a></font><br>"+body+"<br><br>";
txt.htmltext=content;
Here we are directly referencing the Text field on the stage and telling it what we should see. What we should see is the XML data formatted with HTML.
With this all completed you can now preview your Flash movie. The XML data is formatted by Flash and presented within the movie as shown in the following figure.
Flash 5 introduced XML integration. Flash MX made it better. In many ways XML integration clearly demonstrates Flash moving into the territory of Rich Internet Application development. This is more clearly demonstrated with an XML object called Sockets which allow Flash to connect directly to a live XML data source. Now you have live data being streamed into Flash.
XML is a powerful means of managing structure data. Coupled with the presentation tools within Flash and you have a well suited marriage.
Page 1 of 1 1
Keywords
XML, Flash, ActionScript
