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;

 	}

    }

}

The startPlay button has gotten a major update. When you use it it not only pauses the video playback but it also stops the NetStream. Meaning that there is no video downloading until the user begins playback.

That comes in very hand here on my blog where I have multiple videos on the homepage at any given time. I don’t want to needlessly have those videos downloading if the user isn’t going to watch all of them. And that takes a huge burden off my server.

Here’s an example. Watch for the download progressBar closely when you click play. You should see it grow quickly even though the video has been sitting there for a few minutes.

Here’s how it works. For progressive streaming once the NetStream starts downloading a function runs that takes a Bitmap snapshot of the current frame visible in the videoWindow. Then it kills the NetStream so that no more downloading can occur. If everything has worked correctly the user will never know because they will still see one of the first few frames of the video sitting there.

Sometimes the Bitmap snapshot happens before any video is rendered so the user would see a blank screen. I’m working on that.

When the user starts playback the NetStream is recreated and downloading begins.

This should work with RTMP streams as well but there might be a few bugs. And it doesn’t apply to MP3s at all.

I’m still working on adding more to video.Maru before launching version 3.5 but the scrolling XML nav is ready to use. Since so many people have asked for this feature I thought I’d go ahead and document it so that everyone can start using it.

[ Download Source ]

Here’s how it works:

1. Create your XML playlist as you always have. Nothing changes with that.
2. Use a linkBTNholder to hold the linkBtn’s that are created from the XML list.
3. The linkBTNholder will act as a mask for the LinkBtn’s and will determine the height of the scroll area.
4. Create scrollUp, scrollDn, and scrollThumb MovieClips. Place them on the same layer level as the linkBtnHolder. Don’t bother positioning them because the videoMaru code will do that for you.
   • The scrollUp MovieClip will be placed at the upper-right corder of the linkBtnHolder.
   • The scrollDn MovieClip will be placed at the lower-right corner of the linkBtnHolder.
   • The scrollThumb will automatically center itself horizontally between the scrollUp/ScrollDn MovieClips.
   • Note: Make sure the registration point is always at the upper-left corner for all these MovieClips.

That’s all you need to do to make it work but additionally I would suggest placing all of the above MovieClips inside their own MovieClip holder, it doesn’t need an instance name. And then place a slightly larger MovieClip to be a visual frame under the MovieClip that holds all the scrolling elements. You might also want to add a visual background to the scrollBar as you see from the example.

ScrollBar API calls
You can see that the scrolling sort of coasts to a stop. You can control that through the API by setting the setScrollBitDampener like this:

function videoMaruCreationComplete(maru:Object):Void {
videoMaru.setScrollBitDampener( 0.5 );
}

The number that you pass must be less than 1. Otherwise it will reset to the default of 0.8. To make it coast to a stop more quickly make the number very near 0.

You can also set how much the scrollBar moves each time the scrollUp/scrollDn is clicked. By default it is set to a value of 2. To move more set the value to a larger number.

function videoMaruCreationComplete(maru:Object):Void {
videoMaru.setScrollValue( 5 );
}

You should also notice that the mouse-wheel is enabled if the SWF has focus.

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.

If you would like to create simple rollOver effects for the linkBTNs then just do this:

• Inside the linkBTN create a MovieClip and give it an instance name of over.

The over MovieClip will play when the user rolls the mouse over the linkBTN. And it will play backwards when the user rolls the mouse off of the linkBTN. This works for linkBTNs that are placed on the stage or created at runtime via XML.

Here’s an example ( download source )

You’ll need the latest version of video.Maru for this to work.

Watch a video tutorial on creating a fadeTray.

The fadeTray is a MovieClip that you create to put whatever interface elements you want into so that they will fade out when the user doesn’t move their mouse after a specified period of time.

To use one make a MovieClip and give it an instance name of fadeTray#. The # indicates to video.Maru how long you want to wait after the user stops moving their mouse before the fadeTray begins to fade out.

For example, if you gave an instance name of fadeTray4. Then the mouse would have to remain motionless for 4 seconds before your fadeTray began to fade out.

Note: video.Maru will ignore mouse movements of less than 2 pixels per second. This way if the user just giggles the mouse a tiny bit they won’t be distracted by the fadeTray fading back in. This is what we call, “attention to user experience.” Why? Because I care.

By default it takes 1.5 seconds for the fadeTray to completely fade. The only way to change this value is with the video.Maru API.

Keeping the fadeTray on top

The nice thing about a fade tray is that you can put the user controls on top of the video. The problem lies with the fact that the MovieClip that you define as the videoWindow gets dynamically replaced at runtime. That means that the depth of the videoWindow will be on top of anything else on it’s layer regardless of how you stack things.

There is a very simple solution to this. Place your fadeTray on a layer above the videoWindow. Now select the videoWindow and hit F8 to convert it to a MovieClip. It doesn’t matter what you name the Symbol or what, if any, instance name you give to this MovieClip. All that matters is that now the videoWindow is embedded in a MovieClip. Now when it gets replaced at runtime it will stay under your fadeTray. This is all just part of the magic of depths in Flash.

Watch the video tutorial covering how to use the miscellaneous controls

There are a few other controls that don’t really fit into any particular category.

The startPlay button is there for you to create the interface like youTube made popular. You can place this startPlay MovieClip over the videoWindow. When the video loads it will automatically pause - even if the play/pause button has an instance name of play_btn.

When the user clicks the startPlay MovieClip it will vanish and the video will begin playing.

The loop control is very easy to use. It can be a MovieClip or TextField just so long as the instance name is loop. It obviously causes the video to play again when it reaches the end.

The back# control is a shortcut for jumping backward in the video by a set number of seconds. As a for instance. If you created a MovieClip with an instance name of back5 then when the user clicked on it the video would jump back approximately 5 seconds.

Note: Flash video can only seek - jump - to a video keyframe. When you use the seek method() in Actionscript it will seek to the nearest video keyframe. The more keyframes the finer the scrubbing and jumping is but the filesize will be larger.

The buffer# controls how many seconds of video get buffered before playback begins. For instance if you created a MovieClip with an instance name of buffer5 then the first five seconds of the video would buffer before playback begins. This does not mean that it would pause for five seconds. Hopefully it would only take 2-3 seconds to buffer 5 seconds of video. Otherwise you are streaming at about the same rate that the video is playing and playback will likely be choppy. In that case you should re-compress your video file to a lower data rate.

If you would like to enable smoothing for the video then create a MovieClip with an instance name of smoothing. This acts as a sort of smart blur to your video and can improve the apparent quality in some instances. Especially if you are stretching the video’s width/height during playback.

If you would like for the video to pause on the last frame of the video then create a MovieClip, it can be off Stage, with an instance name of pauseOnLastFrame.

For debugging purposes there is another boolean toggle called verbose. If you create a MovieClip with the instance name of verbose it will trace messages to the Flash Authoring tools Output window. This will display things like video status, the various MovieClips that were found, and not found, etc. This will have no effect on display or playback when viewed by your users.

Watch the video tutorial on how to create volume controls

The volume controls are comprised of the volumeRange, which can be oriented vertically or horizontally, and the volumeSlider.

The initial volume of the video will depend on the placement of the volumeSlider on the volumeRange. So if you want the volume to automatically be set at 50% then place the volumeSlider in the middle of the volumeRange.

The mute button is a toggle much like the play/pause button. To create a mute button place a MovieClip on the stage with an instance name of either soundon or soundoff. The instance name will determine the mute state when the SWF is loaded. So a mute button with an instance name of soundoff will cause the video to start with the sound off.

Inside of the mute button you can create two states indicated by Framelabels: on/off. When the volume is muted the video.Maru code will cause the mute button to gotoAndStop() on the off Framelabel and visa-vera.

Both volumeSlider and volumeRange support states depending on the state of the mute button - soundoff/soundon. If the volume is muted then, if supplied, the volumeRange/volumeSlider will gotoAndStop() on the muted frame label. When the sound is not muted then the volumeRange/volumeSlider will gotoAndStop() on the first frame of the MovieClip - no Framelabel is needed.

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.

Watch video tutorial on creating playback controls

The main video controls consist of the play/pause toggle button and the stop button.

Create a play/pause toggle by creating a MovieClip and giving it an instance name of play_btn or pause_btn. The difference between the two choices is that play_btn will cause the video to play automatically while using the instance name pause_btn will cause the video to start paused and wait for the user to click the button.

The button toggle supports two states that you can create by going into the MovieClip and creating two keyframes with Framelabels of playing and paused. The video.maru code will automatically gotoAndStop() on the Framelabel that corresponds to the state of the video. So an instance name of play_btn will cause the MovieClip to display the state on the Framelabel paused, and visa-versa.

Of course each Framelabel could have an animated MovieClip that animates if you wish. For those animations you will have to add your own stop() commands.

The stop button is simple enough. Create a MovieClip with an instance name of stop_btn and when the user clicks on it the video will stop and return to the beginning.