Tree Component and XML in Flash 8

This tutorial leads on from the basic mp3 player tutorial.
And the Video Player with xml tutorial.
And comes from the good work again of Lee Brimelow of GotoAndLearn.com
Then this tutorial should lead onto doing a video player with a tree component or an mp3 player with a tree component. At present the video player has a listbox that contains the names of the videos in the playlist that are detailed in the xml file.
Now we are going to use a Tree component so that you can have categories and sub-categories and a collapsible tree.
But first, you need to understand how an xml file structures its data for the Tree component.
You need a root element and we will call that tree in our xml structure.
Then we will have folder elements. These folder elements will need a "label" attribute so that the Tree component can read it.
<folder label="Pop Videos">
Then close the element
</folder>
So we have folders and within these folders we have the list of videos. We need a label for the Tree component and we have the url attribute for the filename of our video.
<video label="Some Dork" url="geek.flv"/>

Also, notice that you can have a folder within a folder. In my xml I have Canadian Animations within the Cool Animations folder. Just take note how I put the folder tags within the other folder tags to make a sub-folder.

Call your xml file "tree.xml".

<?xml version="1.0" encoding="iso-8859-1"?>
<tree>
<folder label="Pop Clips">
	<video label="Britney Spears" url="crap.flv"/>
	<video label="Justin Timberlake" url="worsecrap.flv"/>
	<video label="Bland Bimbo" url="yuck.flv"/>
</folder>
<folder label="Cool Animation">
	<video label="South Park" url="south.flv"/>
	<video label="Futurama" url="bender.flv"/>
	<video label="Drawn Together" url="bigbro.flv"/>
		<folder label="Canadian Anims">
		<video label="Pit n Kantrop" url="pitt.flv"/>
		<video label="Qui es Moi?" url="que.flv"/>
		</folder>
</folder>  
<folder label="Reality TV">
	<video label="Big Brother" url="big.flv"/>
	<video label="Survivor" url="survive.flv"/>
	<video label="Wife Swap" url="biatch.flv"/>
</folder>

</tree>

That was your xml file to hold all the data for your playlist. Make sure that you save your xml file in the same folder as your videos and your flash file. Why did we use xml I hear you ask? Because we then do not have edit the flash 8 .fla file whenever the playlist changes. We just edit the xml text file. It is a good idea. Now where was I?
We have done our xml file. Open Flash and go to Window - Components - User Interface. And drag a Tree Component onto the stage. Give it the instance name of "myTree". Bash and pummel it into whatever shape you like.
Call the layer the tree is on "tree" and lock it.
Create a new layer and call it actions. Lock it. Then put this code on frame 1, actions layer.

stop();
// create xml object
var xml:XML = new XML();
// ignore any white space
xml.ignoreWhite = true;
// onload xml function
xml.onLoad = function(){
	// link tree to xml file database
	myTree.dataProvider = this.firstChild;
}
// load xml file
xml.load("tree.xml");
// create obj for the tree listener 
var treeListener:Object = new Object();
// event function for listener 
treeListener.change = function(){
	// what is clicked on in tree
	var item = myTree.selectedItem;
	// the url attribute of that item
	var myurl = item.attributes.url;
	// if there is an element 
	// and it is not a folder 
	if(myurl){
		// play video for instance
		// or play mp3
		// or show a picture 
		trace("Selected: " + myurl);
	}
}
// register listener with function and object
myTree.addEventListener("change", treeListener);

Do not just copy and paste the code and not take the time trying to understand the Actionscript involved. I have commented most of it , so play with it and try and break it and change things around so that you understand what is happening.
Use this Tree component and xml to create a tree component instead of the listbox for the video player in the Video Player with xml tutorial.
You can also use the tree component for an mp3 player.

Flash 8 Resources

basic mp3 player tutorial.
Video Player with xml tutorial

.