mx flash XML mx tutorial flash Flash game player macromedia flash MX flash XML tutorial extensions free online tutorial flash mx tutorial

»»» Integrating XML with Macromedia Flash ( SOURCE CODE )

This solution will work for Macromedia Flash 5 and Flash MX.

Flash and XML
In this article you will learn how to integrate Flash with an XML data files. We will be cover-ing the following:

o Creating an XML document that will work with Flash
o Setting up the visual elements within the Flash Movie
o Define the ActionScript used to code the Flash Movie

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 lan-guage 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 Cas-cading Style Sheets to format the data.
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 head-line</body>
<URL>http://www.elementk.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.elementkjournals.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 al-lows us to pull it into Flash. Specifically we will be focusing on the following TAg elements to this file:
o BROADCAST
o STORY
o LEAD
o BODY
o URL
The tags are placed in Upper case here as we will need to do this when we call the script from within Flash.

Integrating Flash and XML
The question that begs to be answered is why use Flash to integrate with XML. Flash 5 was ex-tended 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 combina-tion 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.

Visual Elements
Flash is good at presentation. For our example we are going to keep everything very simple, but it can be easily extend.
Open Flash 5 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 "content", later this will be referenced by our ActionScript. Select the "Ren-der 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 presen-tation. Later on, when you feel more comfort-able working with XML you can add greater in-teractivity to the scripts.

ActionScript
The mechanics of brining 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 Ac-tionScript 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 associ-ate the script with the correct program. The file headlines.xml is in the same directory as the fi-nal 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 con-tent 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 (Headlin-eXMLNode.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 simi-lar.
Here is the ActionScript used to define the fi-nal 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 Dy-namic Text Field called "content" and we turned on the "Render Text as HTML" option. This is why:
content += "<a href='"+URL+"'>"+lead+"</a> "+body+" ";

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.

Future Shock
Flash 5 introduced XML integration. In many ways it clearly demonstrates Flash moving into the territory of application development. This is more clearly demonstrated with an XML object called Sockets which allow Flash to connect di-rectly to a live XML data source. Now you have live data being streamed into Flash.
XML is a powerful means of managing struc-ture data. Coupled with the presentation tools within Flash and you have a well suited mar-riage.

----------------------------------------------------------------------------------------------
Matthew David is a long standing evangelist for Macromedia’s product line. He has contributed to some of the best selling Macromedia books, such as The Dreamweaver Bible (IDG/Hungry Minds), Flash 5 Magic (New Riders) and Inside Flash MX (New Riders). He has also written Flash MX Magic (New Riders) and Building Great Games with Flash MX (Wiley).

He is a regular contributor to Macromedia’s Designer/Developer site, InformIT.com, Element K Journals’ Macromedia Solutions and MX Insite Magazines.
http://www.matthewdavid.ws

Matthew works as a freelance consultant. He can be contacted at 262-488-0026
----------------------------------------------------------------------------------------------
Click here to print this page