I made a video tutorial that covers how to install Flash Media Server 3 and get it set up to stream videos and even record video from a webcam to your hard drive. You can view it over on polyGeek.com.

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?

I know next to nothing about forums. Never really used them that much. But I’m hoping that adding forums to this blog will help the community support each other using videoMaru while I concentrate on adding features.

The main reason I added forums is because there has been an issue with videoMaru playing youTube vidoes. A few users have told me that they have solutions using PHP scripts to fix this problem. However, I don’t know much about PHP.

Therefore the first forum topic is about, wait for it, Using PHP and videoMaru together to display youTube videos. Together we can end this destructive conflict and bring order to the galaxy.

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.

One of the most common requests I’ve had is to make it so that the XML playlists would scroll. We’ll you don’t have to request it any more. Here it is. ( download FLA )

Here’s the gist of how it works. There will be more extensive documentation shortly as I’m still working on a few scrolling features.

1. Use the linkBTNholder to position your XML playlist.
2. If there are the following scroll controls: scrollUp, scrollDn, and ScrollThumb, then linkBTNholder will then be used as a mask for the linkBTNs.
3. The scroll controls will automatically snap to their correct position. Make sure that everything has a registration point in the upper-left corner or they will appear out of place.

That pretty much does it.
The startPlay button has been updated. Now when you use it it will capture a bitmap copy of the first frame of the video and then close the Netstream object so that there is no further download. When the user clicks on the startPlay button the Netstream object will be recreated and download will begin. This is mainly to save bandwidth for those who have long videos on a page that people may not ever watch.

The bitmap copy of the first frame of video is called freezeFrame. There are API getters/setters to read/change it’s width/height and x/y values, and add a callback for when the freezeFrame is created.

Here’s an example of it in action. Not that it looks any different.

The API has gotten a handful of additional hooks: ( remember, all API calls begin with videoMaru. )

1. closeNetstream() - this closes the Netstream object and halts further download of the stream. It also stops playing the video. When another video is selected a new Netstream object is created automatically.
2. setVideoComplete( fn:Function ) - has been changed to setOnVideoComplete. That was a mistake on my part that broke with the naming convention of setting callBack functions.
3. FreezeFrame : getFreezeFrameHeight():Number, getFreezeFrameWidth():Number, getFreezeFrameX():Number, getFreezeFrameY():Number, setFreezeFramePosition( x,y ), setFreezeFrameDimensions( w, h ), setOnFreezeFrameCreated( fn:Function )
4. getTimePlayed():Number, getTimeRemaining():Number : both of these return a number of seconds.
5. enableMouseSeeking( boolean ) - if set to true it allows the user to click on the timeline directly to seek in addition to using the playhead to scrub. This can also be enabled without the API by naming the timeline “timeLineSeek”.
6. setVideoWindowSizeToMeta() - change the videoWindow’s width/height to the values reported in the FLV metaData.
7. setVideoWindowSizeToStage() - change the videoWindow’s widght/height to the size of the FLA Stage.
8. setCaptionXML( path/FileName ) - change the source of the captions file. This way you can do multiple languages. The captions being displayed will automatically catch up to the timePlayed in the video.
9. setTimeFixedWidth( boolean ) - it forces the timeDisplays to show 00:00:00 instead of 0:00:00

There are a few more features to add. When that’s done and I’m satisfied that the bugs have been ironed out I’ll release video.Maru 3.5. That will probably be sometime in early 2008. Pop over to the Suggestions/Bugs page if you want to see what’s on the list.

video.Maru is an open source project started by Dan Florio - polyGeek. There have been a huge number of users who have made feature suggestions to add so I consider the entire user community to be a sort of hive-mind program manager.

I applied the MIT License to video.Maru so that others could use this software without any apprehension. Here is the full text of the MIT License:

The MIT License

Copyright (c) 2007 polyGeek

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

So what does all that mean? Essentially you are free to use the SWC for anything you wish. It can be used on commercial sites, you can create custom video interfaces that are driven by video.Maru and sell them - as many have already done, all without any fees, future or past, to be paid to anyone. Nor do you need to publish the fact that you are using video.Maru, although I wouldn’t mind if you did.

You are free to download the source code of video.Maru and use that as you wish. However, in that case you must leave the MIT License intact with the additions you make to the code.

I hope this clears up any confusion or apprehension anyone might have with using video.Maru.

Many words have been used to describe video.Maru for it’s stunning simplicity and yet powerful features - Kohinoor being my favorite.

And many talented designers have used video.Maru to create some great designs.

But just as no one buys a Ferrari Fiorano expecting that the factory floor from which it was produced is as sexy as the car itself. Neither does anyone use video.Maru for it’s well organized building and testing environment. In fact, very few have ever seen the source from which video.Maru is created.

Until now.

Here you are: the video.Maru factory floor.

If you can stomach that then go ahead and download the source FLA, minus any video content.

I do feel that I should mention that this is really only one third of the visual environment which I get to enjoy working in. Don’t tell my wife, but next year I hope to upgrade to triple 30s.

Joseph Balderson at CommunityMX.com has written a nice tutorial on video.Maru. Here’s a bit that I particularly like:

In all my years developing with Flash, I have yet to encounter a component which makes it simpler and easier to create a custom FLV video player. We’ll show that it’s so easy to create a custom player with video.Maru, you’ll be looking for the guide wires!

Joseph, thanks for spreading the good word.

At first glance video.Maru looks like the same old platform for creating custom video interfaces that millions have come to know and love.

By day video.Maru has maintained it’s mild mannered public appearance as a simple to use video component. By night it has been secreted away to a remote desert location where scientists have given it a range of features that no other component can boast of.

I can neither confirm nor deny that advanced alien technology was used in the upgrades to video.Maru (a.k.a. Mediatron) but one thing is certain: Mediatron is an even more powerful force fighting to keep designers and developers ahead of the evil and dreaded project deadline.

MP3 Support
The most prominent addition to the already powerful list of Mediatron’s capabilities is the ability to play MP3 files. You can now create an MP3 player with the same speed and ease as you could create a video player. In fact Mediatron is adept at playing both with the same interface.

You can load a list of media from an XML file that contains links to videos and MP3s and watch Mediatron switch gracefully from one to another with silky smooth precision.

Streaming with RTMP
Mediatron now supports streaming via Adobe Media Server using the RTMP protocol.

Load and convert XML to object
The API has also been expanded to include access to it’s core XML loading capabilities. So you can use Mediatron to load and parse any valid XML file and return the the results as a complex object with the same data structure as the XML file. You can read more about the XML support on the PXP2 pages here.

Interface for MovieClipLoader class
Mediatron also has a built in image loader. You no longer need to use the cumbersome MovieClipLoader class which requires creating and deleting listener objects. In one line of code you can tell Mediatron to load an image/swf into the MovieClip of your choice and return that MovieClip to your callback function when loading is completed so that you can modify it as needed.

Additions to the API

• setMP3complete( callback function ) : let video.Maru tell you when an mp3 file has completed playing.
• setMute( boolean ) : programmatically tell video.Maru to mute/unmute the audio.
• loadParseXML( path, callback function ) : provide the path and the callback function to call when the conversion is complete.
• parseXML( object ) : pass XML data directly to the xml2object converter.
• loadImage( path, MovieClip, callback function) : provide the path to the image/swf that you would like to load, the MovieClip that you would like to load the image into, and the callback function to send the MovieClip to when completed.

Source code
Despite the extreme security measures taken during the retrofits to video.Maru agents of the open source rebellion managed to get access to the source code. They have published and protected it under the MIT license and put it up on Google Code for all to see and contribute to. Currently the project is in beta status pending the results of exhaustive testing. By the end of October, 2007, it should be complete and ready for live action.

For a report on the updates without the comedy go here.

Matt Ronchetti from SISUmedia.com posted a comment on my blog that I’m particularly happy about.

Howdy again! Thought I’d drop you a line to point you at http://www.transformersmovie.com/

We just added some of the DVD information for the site. This update included adding the Flash trailer and I immediately thought of using video.Maru. It was a tight turnaround and video.Maru definitely helped speed up my development for the simple video player the client needed.

Thanks again, and I’ll be sure to let you know whenever I find a use for video.Maru in the future. Keep up the awesome work!

I’ve always thought it would be great to work on a Science Fiction movie website. This is as close as I’ve gotten, so far.

Another video.Maru user contacted me this week with some questions. He is new to Flash and doesn’t know much Actionscript - which is who video.Maru was primarily intended for. However, the manner in which he needed to use video.Maru went a little beyond the norm. He wanted one video player with lots and lots of buttons that would play different buttons.

We emailed back and forth a few times and I helped him with a solution that met his needs with a minimal amount of effort by using the video.Maru API.

Here’s the letter he sent when he got everything working:

Dan………………..you are THE MAN!!

It’s working 100%. Absolute lifesaver…! I had a couple of problems getting it to work with the original file but it was because the videoMaru movie holder needs to be in the first frame of the movie it is contained in. Which I hadn’t been doing. This then caused a few problems as it meant that when videoMaru was in the first frame of its container you could see the control buttons at all times over the rest of my site. It took a while to get round that but I just got it. I put the control buttons off the stage in the first keyframe of the videoMaru holder and then in the second keyframe I put them in position. Then put a bit of script to go to the second frame
when I want to see the player.

Hopefully you get what I mean there, but the main thing that is important here is that it now WORKS!!!!! I’m so so thankful to you for helping me out Dan. It’s an amazing application and I know that little line of code is going to feature again and again on many buttons in many future projects. A million thank you’s especially for taking the time to get hands on with the fla and especially on a Saturday!!

You really are the man!

God bless you sir,

John.

It’s very satisfying to be able to help another member of the Flash community succeed in their work. That’s the only payment I get for video.Maru and it’s all worth it.