Flash Projects - #4 - Custom Video Player Dynamic Menu

I am typing late on this one, so I will probably re-write it for clarity in a few days. Meanwhile I hope you find it helpful.

Having programmed a custom FLV player in Flash, I wasn't satisfied with hard coded video selection menu. This would mean that whenever I want to add another video would I need to edit the source file, add another button, add the actionscript for the button, recompile the movie and re-upload the movie - with all the attendant cacheing issues. Not a great approach.

Better would be to have the video selection menu generate itself dynamically from data in an XML file. This way I would only have to compile the video player once, but could update the menu by uploading a new XML file.

I hunted down some code on the web (I forgot the URL or I would link to it), it didn't work but with a minor tweak I was left with the following:


xStart = 0;
yStart = 0;
bWidth = 101;
bHeight = 35;
menuXml = new XML();
menuXml.ignoreWhite = true;
menuXml.onLoad = loadVidData;
menuXml.load("menu.xml");
function loadVidData() {
for (var i = 0; i<this.firstchild.childnodes.length; i++) {
var bn = this.firstChild.childNodes[i].attributes.buttonName;
var b = _root.menuHolder_mc.attachMovie("button", bn, i);
b._x = xStart;
b._y = yStart+(bHeight*i);
b.txt = bn;
b.onPress = function() {
//trace(this.txt);
_root.video_ns.play(this.txt+".flv");
currentvid = this.txt+".flv";
_root.heading = this.txt;
};
}
}


Essentially it sets a few variables to start with - the starting co-ordinates of the menu when it builds (xstart and ystart), and the dimensions of the buttons that make up the menu (bWidth and bHeight). You can set your own values for these to suite your design.

Then it creates an XML object and loads an XML file called "menu.xml". If you choose to name your XML file differently, make sure you change it in the Actionscript too.

The next part builds the menu based on the content of the XML file by attaching a copy of the button library item (more about this later) for each entry in the XML file. It positions each button one below the other based on the bHeight value you set earlier.

The text on each button is also taken from the XML file variable txt.

Then we have the Actionscript that tells the button what to do when clicked. In this case it tells the video_ns netstream object to play a file with the name defined by the XML variable txt. (The Actionscript adds the file extension .flv to the end of the value defined in the XML variable txt).

We also set the currentvid variable (purpose explained in the other tutorial).

Finally we set a variable called heading to have the same value as the XML variable txt. This is used to display the title of the video in a dynamic text box.

Putting It All Together



The Menu

First create a movie clip to be used in your menu as a button. This will be repeated vertically for each video file in the XML file. The button needs to have a dynamic text box on it to display the name of the video that will be shown when it is clicked. The variable name of the dynamic text box should be txt.

Right click the button in the library and select "linkage". Set the movie clip to export for Actionscript and give it the identifier "button".

Then create an empty movie clip on the stage, and give it the name menuHolder_mc. The script above will actually fill this empty movie clip with the menu, this makes it possible to adjust the position of the menu visually, by moving the positio of the menuHolder_mc movie clip. (It will also allow us to animate the movie clip in a future tutorial).

The Title

Create a dynamic text box with the variable name heading. Put it where you want it on the screen.

The XML File

Now the flash movie is done we need to format an XML file in such a way that the Flash movie will be able to parse it to make our menu. Sample XML code follows:


<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
<menu buttonName = "Vid 1"/>
<menu buttonName = "Vid 2"/>
<menu buttonName = "Vid 3"/>
<menu buttonName = "Vid 4"/>
<menu buttonName = "Vid 5"/>
<menu buttonName = "Vid 6"/>
</menu>


You can enter as many <menu buttonName = "video file name without file extension goes here"/> lines as you like. Just make sure you put the exact file name, minus file extension. If, for instance, your file name is "Summer Holiday.flv" you put "Summer Holiday".

The Flash movie can cope with spaces in the filename, and don't forget, it is the filename that is being used to label the buttons, so I recommend you name your files with the title of the films and with spaces.

Let's face it, "Summer Holiday" reads a lot better than "holiday_video_001" on the video select menu.

Finishing Off

All you need to do is make sure the XML file, the Flash movie video player, and the FLV files listed in the XML file are all in the same folder. Then it should just work.

Anyway, as I said, it is pretty late (01:30am) for me, so I know the above is not as clear as it could be. I will rewrite in a few days.