Here is a short - 6 minute - video tutorial to help you create rollovers effects for your video interface controls.

[ Download Example | Download FLV ]

If you want to use the new API call - playBackward() - mentioned in this video you’ll need the latest videoMaru 3.5 beta SWC - see link at top of window.

playBackward( mc ) works be taking the MovieClip that you pass and creating an onEnterFrame function. On each enterFrame event it says: gotoAndStop( this._currentframe - 1 );

Then it checks to see if this._currentframe == 1. If so then it deletes the onEnterFrame function.

It looks like this:

function playBackward( mc:MovieClip ):Void { mc.onEnterFrame = function():Void {

 	this.gotoAndStop( this._currentframe - 1 );

		if( this._currentframe == 1 ) {

 		delete this.onEnterFrame;

 	}

    }

}

If you would like to provide a visual display of the percentage of the video file that has been downloaded then use the downloadProgress MovieClip. It will be automatically centered placed at the same location as the timeLine and will be stretched to become the same width as the timeLine when the video has completed downloading.Here’s an example of it in action: ( download example FLA )

A few things to know:

• I would suggest using a rectangle - any width - as the shape inside the downloadProgress MovieClip. It will stretch as much as needed without pixelizing.
• Don’t use a stroke on the shape. It will deform in the corners and doesn’t look good.
• The registration point should be x=0 and y = something near 0. You may have to move the shape up or down inside the MovieClip to adjust it’s vertical placement over the timeLine. The video.Maru code will vertically center the downloadProgess bar over the timeLine. Depending on your design it may not end up where you want it.

It’s pretty simple to perform some action when a video completes playing. You use the videoMaruCreationComplete function to set a callback - videoMaru.setOnVideoComplete( fn ) - to some function that you would like to run when your video finishes playing.

Here is a simple example that is fully commented. Hopefully you can follow this template to do what ever you need to do.

Here is the code that enables this. You’ll need to look inside the FLA to understand the layer structure and read the comments.

function videoMaruCreationComplete():Void {
videoMaru.setOnVideoComplete( theVideoIsOver );
}
//
function theVideoIsOver():Void {
this._parent._parent.gotoAndStop( "videoOver" );
}