Sheridan Interactive Multimedia - XML Communication in Flash AS3 Help

AS3 Code in Flash 9, READING XML

package xmlclass{

import flash.display.MovieClip;
	import flash.events.*;
	import flash.text.TextField;
	import flash.net.navigateToURL;
	import fl.data.DataProvider;
	import flash.geom.ColorTransform;
	import flash.geom.Transform;

import flash.net.URLVariables;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLLoader;
	import flash.net.URLLoaderDataFormat;
	import flash.events.IOErrorEvent;

public class XMLClass extends MovieClip {

private var myRequest:URLRequest;
		private var myLoader:URLLoader;
		private var myFolder:String;

// This code uses URLLoader to load an XML File

public function XMLClass() {

myRequest=new URLRequest  ;// this prepares the request for the loader
			myRequest.url='xmlclass.xml';
			myRequest.method=URLRequestMethod.POST;

myLoader=new URLLoader  ;// this is the loader that will receive the XML
			myLoader.addEventListener(Event.COMPLETE,showGrid);
			myLoader.addEventListener(IOErrorEvent.IO_ERROR,showError);

myLoader.load(myRequest);// this loads the XML

}
		private function showGrid(e:Event) {

// the data comes into the e.target.data property

var myXML:XML=XML(e.target.data);

// XML in Flash

// XML is a way to store a hierarchy of data with nested <tags>
			// each tag is called a node and it can have zero or more attributes
			// a node can hold text (its value node), or more nodes, or nothing
			// a node can also hold whitespace but in AS3 whitespace is ignored
			// here are some examples:

// <node attribute="value" attribute2="value">value</node>
			// or 
			// <node attribute="value" />
			// or
			// <node>value</node>
			// or
			// <parentnode attribute="value">
			// <childnode>value</childnode>
			// <childnode>value</childnode>
			// </parentnode>

// there are a number of methods for accessing the elements of XML
			// but we usually use the new to Flash AS3, E4X dot syntax 
			// the XML variable (i.e. myXML) represents the first node
			// all subsequent nodes must be nested inside the first node
			// then we can access the subsequent nodes with .nodename
			// we can access the attributes with .@attributename 
			// these provide an XMLList object
			// so myXML.nodename gives us a list of all nodes with that name
			// myXML.parentnode.childnode is a list of all childnodes
			// note that this XMLList spans nesting
			// you can specify a certain node different ways:
			// 1. use the array access operator 
			// myXML.nodename[0];
			// 2. use an expression
			// myXML.(nodename == "value");
			// myXML.nodename.(@attribute == "value");
			// both these return an XMLList object
			// you can access the XMLList object as a string (toString() is called)
			// so this would just return the text value of the node or attribute
			// you can get the parent node by using the parent() method
			// you can loop through elements in an XMLList with each item being XML:
			// for each (var item:XML in myXMLList) {}

// this will become easier with examples and practice
			//trace (myXML); // the XML
			//trace (myXML.category);  // a list of all category nodes
			//trace (myXML.category[0]);  // the first category node
			//trace (myXML.category[0].@type); // the list of all "type" attributes (always one - so this is it's value) in the first category 
			//trace (myXML.category.(@type == "Psychedelia"));  // the category node with a type of Psychedelia
			//trace (myXML.category.song); // a list of all song nodes
			//trace (myXML.category.song[0]); // the first song node (will trace the content of the node)
			//trace (myXML.category.song[0].@title); // the value of the title of the first song node 
			//trace (myXML.category.song.(@artist == "Miles Davis"));  // a list of all song nodes by Miles Davis
			//trace (myXML.category.song.(@artist == "Miles Davis").@time);  // a list of the times of all song nodes by Miles Davis
			//trace (myXML.category.(@type == "Jazz").song); // a list of Jazz song nodes
			//trace (myXML.category.(@type == "Jazz").song.@title); // a list of all the titles of the Jazz song nodes
			//trace (myXML.category.(@type == "Jazz").song.@title[0]); // the first title of the jazz song nodes

var myColor:String=myXML.bgcolor.@color;
			var bgColor:Number=Number("0x" + myColor.substr(myColor.indexOf("#") + 1));
			var myTransform:ColorTransform=new ColorTransform  ;
			myTransform.color=bgColor;
			myBackground.transform.colorTransform=myTransform;

myFolder=myXML.pictures.@folder;

var myDataProvider:Array=[];
			var title:String;
			var artist:String;
			var time:String;
			var category:String;
			var description:String;
			var picture:String;
			for each (var s:XML in myXML.category.song) {
				title=s.@title;
				artist=s.@artist;
				time=s.@time;
				category=s.parent().@type;
				description=s;
				picture=s.@picture;
				myDataProvider.push({title:title,artist:artist,time:time,category:category,description:description,picture:picture});
			}
			myGrid.columns=["category","title","time","artist"];
			myGrid.dataProvider=new DataProvider(myDataProvider);
			myGrid.getColumnAt(0).headerText="Category";
			myGrid.getColumnAt(0).width=90;
			myGrid.getColumnAt(1).headerText="Title";
			myGrid.getColumnAt(1).width=170;
			myGrid.getColumnAt(2).headerText="Time";
			myGrid.getColumnAt(2).width=50;
			myGrid.getColumnAt(3).headerText="Artist";

myGrid.addEventListener(Event.CHANGE,gridChange);

showData(0);

}
		private function gridChange(e:Event) {
			showData(e.target.selectedIndex);
		}
		private function showData(num:Number) {
			var mySong:Object=myGrid.dataProvider.getItemAt(num);
			myTitle.text=mySong.title + " by " + mySong.artist;
			myDescription.text=mySong.description;
			myPicture.source=myFolder + mySong.picture;
		}
		private function showError(e:IOErrorEvent) {
			trace("There was an error!");
		}
	}
}

// Sample XML

<playlist> 
	<bgcolor color="#FFFFFF" />
	<pictures folder="pictures/" />
	<category type="Jazz">
		<song title="Bitches Brew" artist="Miles Davis" time="26:59" picture="brew.jpg">Miles' horn whips the coats of travelers on the big city streets</song>
		<song title="Nutty" artist="Thelonius Monk" time="6:35"  picture="nutty.jpg">Monk cracks the keys on this one</song>
		<song title="The Pink Panther Theme" artist="Henry Mancini" time="2:35"  picture="pink.jpg">Mancini must have worn Clouseau's moustache when humming up this one</song>
	</category>
	<category type="Psychedelia">
		<song title="Gomper" artist="The Rolling Stones" time="5:12" picture="gomper.jpg">A frolicking tribal soundtrack to a Rousseau painting</song>
		<song title="Inagadadavida" artist="Iron Butterfly" time="28:70"  picture="inagadadavida.jpg">A wild land of majestic heights dropping to dew under ancient fern</song>
		<song title="Sudh Sarang" artist="Ravi Shankar" time="29:27" picture="sudh.jpg">Musical eyes and voice lopes across the spicy land</song>
		<song title="Tangier" artist="Donovan" time="4:10"  picture="tangier.jpg">With a dry hot drone and the rhythm of experience, Donovan further experiments in cultural mood</song>
	</category>
</playlist>

Here is the ZIP file. This file shows how Flash loads in XML. This includes:

xmlclass.fla - Flash file with DataGrid
XMLClass.as - the AS class
xmlclass.xml - a hard coded XML file used for the example
pictures - a folder of cover pictures
xmlclass.php - an optional PHP server script to access MySQL and make XML
songs_database.txt - an optional SQL statement to make the songs table
index.html - the HTML page to show the Flash swf

We also recommend using the Falcon data class to make all this easier!

Please visit our exciting Blog at http://interactivemultimedia.wordpress.com