If you would like your navigation to be laid out as a grid of icons you’ll have to do a little work yourself. vidoeMaru can do rows, or columns for the navigation but not both. But the process is pretty easy and this example should be all you need to create your own or modify for your own purposes.

Even though videoMaru won’t do the icon grid for you it will still do most of the work. It will load and parse your XML and it makes it easy to load the icons. Plus, the scroll controls still work for the navigation even though videoMaru didn’t build anything itself. I actually didn’t think the scroll controls would work but I tried it as an afterthought and sure enough. So yeah for videoMaru.

If you would like to use this example the code is pretty well commented. It shouldn’t be difficult to modify it to suit your needs.

Note: if you use this any code from this example your are bound by law to add “polyGeek forever” on your gravestone.

@Joonas, you happy now?

Using XML to create navigation for your video files with videoMaru is very easy. But once you’ve loaded that XML file into videoMaru you’re pretty much locked in.

Not any more.

I’ve made a simple addition to the videoMaru API - that required a good bit of replumbing - that allows you to change the source XML that you’re using for navigation. Now you can switch between XML files easily. ( You’ll need the latest videoMaru 3.5 beta SWC for this located in the example fiile. )

Here’s all you need to use it:

videoMaru.switchXML( "path/file.xml" );

switchXML accepts either the path to a file or a string of XML code. So you could also do this:

videoMaru.switchXML( "<videos><video path=’movie.flv’ linkText=’Movie’></video></videos>” );

In usage you would have the above code inside of the videoMaruCreationComple function or inside an onRelease event.

Here’s an example in action using the later method of injecting an XML string. Click on the Group# buttons to switch the navigation.

[ download example ]

video.Maru now has the ability to respond to cue-points in your Flash videos.

Using this feature is very easy. Just use the videoMaruCreationComplete() event to tell video.Maru which function you want to use as a callback for when a cue point is reached. Then when a video passes over a cue-point it will send that information to your callback.

Below is an example. Look for the text field below the controls to change when a cue point is reached. You could use something like this to initiate changes in your design or display a message to your users.

Here is all the code that is needed to enable the reaction to cue points: ( Download Source )

To add cue points to your video using the Flash Video Encoder just select the Cue Points tab and drag the playhead across to the scene where you want to add a cue point. Then click the “+” button and give the cue point a name. That’s pretty much all there is to it. You could then use a switch () statement in your callback function to perform complex actions or like I did in the example just update a TextField.

Watch the video tutorial covering timeline controls

The timeline/playhead work in combination to show users where they are in the video and allows them a control to scrub back and forth.

Create a timeline by creating a MovieClip of arbitrary length and giving it an instance name of timeline. When the file is published the timeline will not move.

You can create the playhead anywhere on the stage and it will snap to the beginning of the timeline at runtime. When snapping the playhead will center itself vertically on the timeline and move to the right as the video plays. The user can click-hold on the playhead to drag it across the timeline.

The downloadProgress bar is not necessary for the playhead to function but it does give the user an indication of how much of the video has been downloaded and therefore how far they can scrub forward in the video - obviously, you cannon scrub past the point that the video has been downloaded.

Because the downloadProgress bar will be shrunk and stretched to display the amount of the video stream that has been downloaded I would recommend not using a line for the MovieClip. Rather it works best if you create a rectangle with no border because the border will become distorted.