Simple Flash Blog

This tutorial is about how to load some content from a XML file in a flash project. It will be loaded a random text from the XML file.

STEPS TO FOLLOW:

1. First create a XML file, save it as xmlFlash.xml and put in the following lines:

<?xml version="1.0" encoding="iso-8859-1"?>
<root>
  <item>
   <title>Dracula</title>
 <content>Count Dracula is the main character from the Bram Stoker's novel "Dracula". This novel was inspired from the historical Vlad Tepes (also known as Dracula).</content>
  </item>
  <item>
   <title>Bucharest</title>
 <content>Bucharest is political capital of Romania and also the main commercial city in the country. Bucharest was established capital of Rmanian Land in 1459 by Vlad Tepes (known as Dracula). </content>
  </item>
  <item>
   <title>The Romanian Land</title>
 <content>The Romanian Land is a historical region of Romania country. The Romanian Land was ruled by Vlad Tepes (known as Dracula) in three reings: 1448, 1456 - 1462 and 1476.</content>
  </item>
</root>

2. Create a new flash document having dimensions about 400×300 pixels. Save it as xmlFlash.fla in the same folder with xmlFlash.xml. Insert one new layer and rename them from top to bottom: actions, content.

3. In the content layer put two dynamic text fields: select Text Tool (T), go to the Properties Panel and choose Dynamic Text as Text Type and the other properties you want (font, size, color, aligment etc.), then draw a text field on the stage. For the first text field give it an instance name of title_txt and content_txt for the second text field.

I also drawn a red line under the title_txt.

4.Now go to the actions layer, open the Actions panel (F9) and put the next AcionScript code. The ActionScript is commented to explain the steps how XML is loading in Flash:

var xmlFlash_xml:XML = new XML(); // create a new XML object
xmlFlash_xml.ignoreWhite = true; //
xmlFlash_xml.onLoad=function(success){ //onLoad event is triggered when the XML document hasbeen entirely loaded
  if(success){ // success is true if the XMl has been loaded with no errors, and false else
  var l =this.firstChild.childNodes.length; // firstChild property represents the rootnode of the XML document, childNodes property returns an array containing the children nodes of the current node. So, l variable holds the number of children of the root node
 var c=Math.floor(Math.random()*l); // c is a random number between 0 and l-1
  title_txt.text=this.firstChild.childNodes[c].childNodes[0].childNodes[0].nodeValue; // we display in title_txt the content on the title node from the c child of the rootcontent_txt.text=this.firstChild.childNodes[c].childNodes[1].childNodes[0].nodeValue; // we display in content_txt the content on the content node from the c child of the root
 }
}xmlFlash_xml.load("xmlFlash.xml"); // the load() method of XML class is using Http to go to the specified URL and bring the entire XML document fo Flash

5. Great now! Test your movie (Ctrl+Enter) and see that a random text from the XML document is display in your text fields. Refresh this webpage to observe that the text is chancing.

Hope this tutorial about flash and XML was helpful.

This entry was posted on Wednesday, November 21st, 2007 at 12:50 am and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.