[Tut]XML Generated FLV Player[Tut]

**Hassan** · 08-05-2010

I assume that you have basic understanding of ActionScript / Programming to follow this tutorial. C-Sharp and C++ users will have no problem following it.

■ What is XML ?

XML stands for EXtensible Markup Language. It was designed to carry data, not to display data. If you are familiar with HTML (Language that web-pages use for displaying data), you will find it much similar as both work with tags. A tag is a markup construct that begins with "<" and ends with ">". Tags come in three types: start-tags, for example <section>, end-tags, for example </section>, and empty-element tags, for example <line-break/>. The difference between HTML tags and XML tags are that HTML tags are predefined but XML tags are not pre-defined. This means that HTML tags will only perform what has been already programmed in them. But in XML tags you decide what this tag means to you and what you want to do with it.

Here's a sample structure of the XML we are going to use:

Explanation:

<News Headline = "Michael Jackson Is Alive !!"
This will tell the program that there is a news to display with a variable that tells our program that what the news headline is. You can add anything in this variable as long as it is with in the double quotes.

Description="Michael Jackson has faked his death. `Nuff said !"
Same as above except it has no tag now and it has a different variable named 'Description'. This variable will tell us the description about this particular news.

/>
Closing tag telling that there is no more info about this news.

¦ What is FLV ?
I think you must be familiar with this video type. It stands for Flash Video. Flash Video is a container file format used to deliver video over the Internet using Adobe Flash Player versions 6–10. Youtube uses Flash Video embedded as SWF to display the videos.

Flash Player is the player that will decode the FLV and play it. Adobe Flash comes up with a player to play it. We just have to pass a few required parameters to it.

Now that you have the quick overview of what XML and FLV is, we can begin. Here we go:

■ Open Adobe Flash (Download Trial Version).
■ Create a new ActionScript 2.0 or 3.0 Document.
■ Goto Modify Menu and click Document. A Dialog will open set the width to 636 pixels and height to 361 pixels.
■¦ Press Control + F7 to open Component Inspector. Component Inspectors are built-in movie clips developed for your ease. Once it is opened, drag a 'Tree' component to the stage. Set its location to (0,0) [X,Y] via property editor. Set its size to (218,318) via property editor.

■ Next, drag a 'FLVPlayback' component from Component Inspector to the stage.
Position = (218,0)
Size = (420,320)

■ Drag a 'Label' component to the stage.
Position = (0,318)
Size = (636,43)

The design of our player is now completed. Next we will label the 3 components we just dragged. Labeling / Naming will allow us to access the controls from the code.

Renaming:

■ Select the 'Tree' component and press Control + F3 or open property panel to set its properties. Set it's name to 'tree'.

■ Select the 'FLVPlayback' component and set its name to 'player'.
■ Similarly select the 'Label' component and set its name to 'lbl'.

The renaming is done. Before we can code our player, we will need an XML file. I have created a sample XML file. Copy the following XML data into clipboard. Create a new text document in notepad. Paste the copied data into it and save it as 'XMLVideos.xml'. Save it on the same location as your document file.

Code:

<treeComponent>
<folder label = "Example Flv's on the web">
<video url="https://www.mediacollege.com/video-gallery/testclips/barsandtone.flv" label="Bars and Tone" goto = "0" volume = "100" videoAlpha = "10" desc = "Some Description"/>

<video url="https://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" label="Windy 50s Mobility Scooter Race" goto = "0" volume = "100" videoAlpha = "10" desc = "Some Description"/>


</folder>

<folder label="From My Computer">
<folder label = "Favourite Movie">
<video url="D:\Movies\Michael Jackson HIStory Tour Munich Germany 1997 - Stagevu- Your View.avi" label="Michael Jackson HIstory" desc = "MJ's History Tour"/>
</folder>

<folder label = "Favourites-Songs">
<folder label = "MJ">
<video url="E:\Michael Jackson\They don't care about us.flv" label = "They Don't Care About Us" desc = "Pure pawnage xD"/>

</folder>

</folder>
</folder>
</folder>
</treeComponent>

This XML will generate the following result. But you'll not be able to see it. We will have to code it. The example FLV's will work on every PC, but you'll have to change the paths of the videos that are under the tag 'From My Computer'.

■ As a final step, click the first frame and press 'F9' to open Actions panel and paste the following code in it.

[PHP]xmlFile = "XMLVideos.xml";
var generateXML:XML = new XML();
generateXML.ignoreWhite = true;
generateXML.onLoad = function(success) {
if (success) {
tree.dataProvider = generateXML.firstChild;
} else {
trace("Cannot Locate XML file for videos not found. You must put it on the same directory.");
}
};
generateXML.load(xmlFile);
var respondToTree:Object = new Object();
respondToTree.change = function() {
var getSelectedTag = tree.selectedItem;
var verify = verified=getSelectedTag.attributes.url;
if (verified) {
player.contentPath = verified;
player.play();
if (getSelectedTag.attributes.desc == "") {
lbl.text = "No description defined in the XML file for this image.";
} else {

lbl.text = getSelectedTag.attributes.desc;
}
} else {
lbl.text = "Video not found !!!";
}

};
tree.addEventListener("change",respondToTree);[/PHP]

And you're done. I'll explain the code but first try your player.

Alternatively, press Ctrl+Enter to run the SWF.

Here's the final result:

Explanation of code:

xmlFile = "XMLVideos.xml";
xmlFile is a variable that stores the place where your xml file is located.

var generateXML:XML = new XML();
We initialize an XML variable that contains builtin methods for manipulating XML. We use these methods to write and retrieve data from XML. Here generateXML is a variable of type XML.

generateXML.ignoreWhite = true;
IgnoreWhite is a method of generateXML object. It tells the XML parser to ignore the whitespaces in the XML document.

generateXML.onLoad = function(success) {
if (success) {
When the generateXML object is loaded into the memory, we check whether it has been successfully loaded or not. We pass a variable 'success' inside the function to verify the success. If it is successfully loaded then it will return 'True' or a value of '1' else it will return 'False' or a value of '0'.

tree.dataProvider = this.firstChild;
DataProvider is a member of the tree component we created on stage. It loops through every tag in the XML file and creates a node in the tree component. this.firstChild means the root tag in the XML file. It means that it will start creating nodes from the root tag of the XML file.

} else {
trace("Cannot Locate XML file for videos not found. You must put it on the same directory.");
}
};

If the loading is unsuccessful then just inform the user. Trace function is an information tracer that displays your messages.

generateXML.load(xmlFile);
Load the xml file into the generateXML variable. Actually the flash compiler looks for it at the first place and executes it first.

var respondToTree:Object = new Object();
We obviously need an event that would be called when the user clicks any title in the video list. To do this we create a new object. Object is the root class of all classes so it supports all the events and properties.

respondToTree.change = function() {
To capture the click change event of the video list, we will use the change handler function of the 'tree' (video list).

var getSelectedTag = tree.selectedItem;
getSelectedTag variable will store the selected video in the list.

var verify = verified=getSelectedTag.attributes.url;
if (verified) {
player.contentPath = verified;
player.play();

verify variable will store if the url attribute of the selected video exists. If it doesn't exists then it will not play the video. If it exists it will play the video. Contentpath is the property of the 'player' component that loads the movie from the path given to it. In this case the verify variable holds the url, so it will get the value of verified variable and play it.

if (getSelectedTag.attributes.desc == "") {
lbl.text = "No description defined in the XML file for this image.";
} else {

lbl.text = getSelectedTag.attributes.desc;
}
If the description of the selected in the XML file is null simply tell the user that there is no description added else display it in the 'lbl' (Label) component we created earlier on stage. Text property will be used to do that.

tree.addEventListener("change",respondToTree);
This is required by the flash compiler. Flash compiler checks on every frame that whether some item is clicked in the list or not. If clicked, it redirects it the 'change' function we discussed earlier.

I hope you learned how to use basic flash techniques to create a XML generated FLV player.

When using this SWF on web, you can just update the XML rather than editing and uploading a completely new SWF.

If you have any questions, feel free to ask.