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.

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 a video tutorial covering how to create a fullScreen video interface with video.Maru.

To create a button that toggles the FullScreen view create a MovieClip and give it an instance name of fullscreen_btn. That button will act as a toggle to switch back and forth from in-browser to FullScreen views.

You’re done as far as video.Maru is concerned. But there’s a bit of work to on the HTML container page to allow this to work.

The <object><embed> tags need to have attributes that give the SWF permission to go FullScreen. The simple version of this is to find the allowFullScreen tag and give it a value of true.

If you would like to read more visit the Exploring full-screen mode in Flash Player 9 on the Adobe.com site for more details.

FullScreen support requires the Flash 9,0,28,0 player or above.

Be sure to read the video.Maru API page for more details about how to control FullScreen and change the layout of your design when switching.

Watch a video tutorial on creating links to other videos in you video interface.

videoLinks allow you to create links to other videos in your video interface.

Creating a videoLink is similar to creating the videoWindow. Somewhere inside your videoLink MovieClip there needs to be a dynamic TextField with a text value that is the path to the video you would like to play when the user clicks on the MovieClip.

If you have more than one videoLink you must differentiate their instance names by appending an index number to the end of the instance name.

Example, if you have 3 videoLink MovieClips then you could give them instance names of videoLink1, videoLink2, videoLink3. However, the index numbers do not need to be sequential, just make sure they are unique or you will get an error when publishing the FLA: 256 levels of recursion exceeded.

You can also create next and prev (previous) buttons for the user to navigate through the videoLinks. The order of navigation is based on the index number appended to the videoLink MovieClips.

The videoLinks also support states for the currently playing video. To enable states create a keyframe inside your videoLink MovieClip with a frame label of nowPlaying. When the user clicks that MovieClip the nowPlaying state will be displayed. Otherwise it will display frame 1. The next/prev MovieClips are also integrated with the videoLink states.

If the video that plays at startup is also one of the videoLink MovieClips then it will automatically display that MovieClip in the nowPlaying state. Otherwise all of the videoLinks will display frame 1. In that case if the user clicks on either the next or prev button the videoLink with the lowest index number will always be selected first.

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.