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.

This is easily the question I get asked the most about video.Maru: how can I put controls on top of the videoWindow?

It’s very easy to do:

• select the videoWindow MovieClip
• Hit the F8 key to convert that to a MovieClip - essentially embedding the videoWindow within another MovieClip
• Give it any symbol and instance name you want
• Make sure that your controls are on a layer above the layer which holds the videoWindow holder - you probably already did this

video.Maru uses recursion to find all the controls so you could nest the videoWindow, or any other control, inside as many MovieClips as you wish and it will still work - provided the control is defined on frame one of the timeline.
The reason that the videoWindow ends up on top of other controls is that the videoWindow gets replaced at runtime with a MovieClip that is embedded in the Library.

MovieClips created at runtime automatically get placed on top of any MovieClips that are on the stage at authoring time. That’s because authoring time MovieClips get a depth starting at -16383. Creating MovieClips at runtime defaults to starting at a depth of 0, above anything on the Stage at authoring time.

I received a handful of emails and comments here at polyGeek.com telling me that youTube videos weren’t streaming through video.Maru any longer.

The good news is that I got it to work again, although it will takes a little more work to get the ID string. The bad news is that Google/youTube can change things around at any time and make it more difficult or impossible to stream their videos through video.Maru. If you are using this feature for your clients I’d be sure to have a backup in case if this happens again. Or should I say when it happens again.

You will need to use the new video.Maru 3.0 beta SWC to make this work.

Since making the change youTube has changed again and the fix doesn’t seem to be working. If the video below plays when you click the play button then it’s working. Otherwise youTube is messing around with things again. Use this feature at your own risk.

Here’s the new method of getting the ID string:

1 - Go to youTube and pick out the video that you want to stream through video.Maru.

You will get a URL that looks something like this: http://youtube.com/watch?v=IDstring.

2 - Edit the URL string by removing the word watch? And change the “=” sign to a “/”. Here is an example:

3 - Now browse to that URL and you will get a very long URL and the video you were watching will appear in a large video interface. You need to grab two pieces of that new URL as illustrated below:

4 - The string that you want to give to video.Maru in order to play a video is: youtube=SomeID&t=SomeLongString.

To play the video above would be: youtube=uCsdPszJLNQ&t=OEgsToPDskJK0D5QnoklN-REer7a0Cq2

You can use that in your XML or directly in your videoWindow or in a linkBtn.

Thanks to Abdul Qabiz’s Blog for figuring out the details on how to implement the changes.

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 the video tutorial on creating a reflection and masking the videoWindow

To create a reflection of the videoWindow make a MovieClip and give it an instance name of reflection. You can place it anywhere in relation to the videoWindow MovieClip but it looks best if it goes directly below.

The shape inside the reflection MovieClip can fade out by using a gradient that has an alpha fade applied.

For best results you can make the reflection MovieClip just slightly wider than the videoWindow MovieClip. If they are both the same width you may notice that the reflection is 1 pixel short of the width of the videoWindow.

Masks are very easy to create. Just make a MovieClip in the shape that you want the mask to be and place it over the videoWindow. Give the mask an instance name of videoMask. That’s it.

You can experiment with using wild shapes or text in the videoMask MovieClip. If you use text make sure that the TextField is of type static and not dynamic. Also, make sure that the font isn’t a device font such as _sans.

Watch video tutorial on creating a videoWindow and it’s features

The videoWindow is the instance name of the MovieClip you create that will be replaced at runtime to display the video that you have indicated.

In order to tell the videoWindow which video to play you create a dynamic TextField inside the videoWindow and put the path to your FLV, or XML, file in TextField.

The _alpha setting of your videoWindow MovieClip will be applied to your video.

There are four ways to indicate which FLV to play.

1 - by relative path from the swf file that you are working with.

Example: “vids/water.flv”

2 - by using an http address.

Example: “http://polygeek.com/video_tutorials/vids/sea.flv”

3 - by pointing to an XML file that has the necessary data.

Example: “data/videos.xml” or “http://polygeek.com/video_tutorials/vids/videos.xml”

4 - Feature to be reveled soon.

The videoWindow MovieClip gets replaced at runtime with elements inside the SWC. You didn’t actually think a MovieClip could play a video did you?

MovieClips that are placed on the stage at runtime have a higher depth than those at authoring time. (Technically speaking, all objects on the stage at authoring time have large negative depths.) So how would you be able to put something over the videoWindow at authoring time and have it stay there? It’s pretty simple. Just embed the videoWindow inside of another MovieClip. The MovieClip that now holds the vidoeWindow does not need an instance name. Now the graphics that you place over the MovieClip that is holding the videoWindow will stay on top of the videoWindow.

If this seems nonsensical and bewildering then welcome to the world of depth management in Flash.