Saturday, February 10, 2007

Fetch som data from XML with actionscript

As a person used to working with good programming IDE's and well documented PHP / MySQL and C# and likes, I can't say I'm very impressed with the Actionscript documentation and Flash IDE, but at least it's nice to see that actionscript nowadays is a pretty usefull scripting language :) One of the first things I've played around with is the XML-fetching function in actionscript.
The script is small and easy, it does one thing: Reads an xml file and displays the results in the flash movie using the flash dynamic text-type. I do this in three easy steps:
1) Create the xml-file
2) Setup the flash scene
3) Create a script that reads the xml file and displays the text in the flash scene.

1. Create the xml file.
When I did this I used php to fetch some data from a MySQL database. In this example I just create the XML file, not dynamic at all.

The xml-file has the following content:

<?xml version="1.0" encoding="UTF-8"?>
<items>
<item>
<title>This is a sample title</title>
<body>Lorem ipsum</body>
</item>
</items>

I save this file to my website as www.mysite.com/test.xml

2. Setup the flash screen
I start out with an empty flash movie. In layer 1 I add a text using the Text tool.
Then I select the text and in the properties panel I change the text property from Static Text to Dynamic Text. Then by clicking right below the dropdown now saying dynamic text, I click in the field displaying and give the text the instance name text1.

3. Create the script
Now it’s time for the fun part. In order to add the actionscript I click on the first frame on the timeline panel followed by expanding the Actions panel.
Test the script by adding the following code:

text1.text = 'Hello world!';

Test the script with Control / Test Movie (Ctrl+enter).

Now copy/paste the following into the actionscript code:

// Create a new XML object.
var myXml:XML = new XML();

// Set the ignoreWhite property to true (default value is false).
myXml.ignoreWhite = true;

function findByNodeName(parentNode:XMLNode, nodeName:String){
var targetNode:XMLNode;
// Iterate through all the parentNode's children until the target
// XMLNode is found
for (var current_node:XMLNode = parentNode.firstChild; current_node != null; current_node=current_node.nextSibling) {
// Is this the one?
if(current_node.nodeName == nodeName){
return current_node;
}else{ // Nope, but does this XMLNode have it among it's children?
if(targetNode = findByNodeName(current_node, nodeName)){
// Yup, now return it
return targetNode;
}
}
}
// Nope, we didn't find any nodes with that nodename...
return false;
}

// After loading is complete, fetch the interesting data of the XML object.
myXml.onLoad = function(success) {
if(success){
text1.text = findByNodeName(myXml, 'newstitle').firstChild.nodeValue;
}else{
text1.text = 'Could not load the xml-file';
}
};


// Load the XML into the flooring object.
myXml.load("http://localhost/efterborsen.se/topnews.xml.php");
// Stop the animation. It will be started again after the load is completed.
stop();


Test this script and you have loaded some external data to your flash movie.
I hope you like it! Enjoy!