Watch video tutorial on XML basics with video.Maru 2.0

The XML support in video.Maru is extensive and supports many options. Fortunately most cases will only need to use the basics of XML support.

If you want to enable your users to select from a series of videos, much like you would with using videoLink MovieClips, but you want the list to be dynamic, or at least external to the FLA, then XML is the way to go.

Start by pointing the videoWindow at your XML file, just as you would an FLV. That will cue the video.Maru code to load and parse the XML for use. The XML file can be named anything you wish. What’s important is to get the nodes and attributes correct.

Basic XML structure

That by itself will work.

If all you wanted to do was play a series of videos, one after another you could list them as such:

That would play through those three videos, or more if you added nodes, one after another. It would then loop back to the first video and start over - unless you removed the autoPlayNext=”true” from the last node. Then it would end on the third video.

If you would like video.Maru to create links, like the videoLinks MovieClips, for each FLV in your XML file then you will have to create a MovieClip that is the shell of a button and then give it a Linkage Identifier and export it for Actionscript. Here’s the details.

Create a MovieClip. Inside the MovieClip there should be a dynamic TextField with an instance name of link. There is a corresponding XML attribute named linkText that will populate that field.

In the Library right-click on the MovieClip you just created and select the checkbox Export for Actionscript. The Identifier must be linkBTN.

(Note: you do not need to have this MovieClip on the stage. The video.Maru code will attach this MovieClip at Runtime.)

You can also include an icon in your linkBTN. To do so create a MovieClip inside your linkBTN with an instance name of linkIcon. The corresponding XML attribute is iconsrc=”folder/fileName.png”. The icon can be a .jpg, .gif, .png or .swf.

The icon will be placed at the same x,y coordinates as the linkIcon MovieClip. However, the size of the icon will be whatever size the image or swf happens to be. If you would like to override the native size of the icon then add the iconWidth=”value” and iconHeight=”value” attributes.

Now you will want to describe how video.Maru should place these buttons in your video interface. There are many options for this. The easiest is to give each button an (x,y) coordinate. To do that add the attributes btnX=”value” and btnY=”value”. You would do that for each node.

So far an XML node with everything covered up to now would look like this:

But wait, there’s more

The main problem with placing the linkBTNs with the btnX, btnY combination is that if you want to place them somewhere else you’ll have to update all these attributes. Or if you changed the height of the linkBTNs they may start to overlap. Fortunately there are solutions for these issues.

You can create a <settings> node in the XML to describe how to layout your buttons. So if you wanted to create a vertical stack of buttons, all with the same x_position and a 4 pixel gap between each linkBTN then you would have XML as such:

This will place all your buttons 10 pixels from the left edge of the Stage and stack them with a 4 pixel gap.

I know what you’re saying, “That great but it’s hard to design a video layout when I can’t see where my buttons are going to be until I publish the movie. That’s where the linkBTNholder MovieClip comes in.

If you create a MovieClip with the instance name linkBTNholder then your linkBTNs will be placed inside of that MovieClip. Now you can just move your linkBTNholder around in the authoring tool as you wish. Don’t forget to change the buttonsX=”num” in the <settings> node. That attribute still works but now it places the buttons 10 pixels from the left edge of the linkBTNholder MovieClip.

What’s next, or previous?

Just like the videoLink buttons the linkBTNs support the next and prev buttons. First, you have to create your buttons just like you did with the linkBTN. You’ll need to enable the Export for Actionscript for the next and previous buttons and their Linkage Identifiers are nextBTN and prevBTN.

In the <settings> node you can add attributes to describe where the buttons should be placed. If you wanted to place the prevBTN 200 pixels from left and 300 pixels from the top, and have your nextBTN 50 pixels to the right, then your XML would look like this:

Going Deep

You’ll also want to take a look at the deepLink functionality if you want to start playing a video other than the the one in the first node.

The whole story

Take a look at the XML documentation to get a complete list of all the functionality and attributes.