Scrolling XML Navigation is ready to use in video.Maru 3.5 beta
January 22nd, 2008 . by polyGeekI’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:
- Create your XML playlist as you always have. Nothing changes with that.
- Use a linkBTNholder to hold the linkBtn’s that are created from the XML list.
- The linkBTNholder will act as a mask for the LinkBtn’s and will determine the height of the scroll area.
- 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.
Great job on this!!! I got it to play youtube vids from the xml with a php page. I just have one question about the scrolling xml navigation. I would like for it to automatically play the first video on the list when the user loads the page. Right now you have to click on a video on the list to start playing a vid. Also the volume when you load the page defaults to off. How do I change this? Thnx. Keep up the good work.
Oh, and I just wanted to say again… How impressed I am with your work.
For some reason the videos will not play on page load even though I took the startplay button out. Also video one will not play when clicked on, or when you hit play. Video one does work however if you click on the second video link then the first. I’m using this for youtube streaming videos. Could this be the problem?
Great piece of work. Anyway you can make the control a little smaller?
How do I change the size of the selection box?
@Danh, I think you missed the primary function of videoMaru. videoMaru doesn’t know anything about your design. It only knows things by instance names. Anything with the correct instance name - scrollUp/scrollDn/etc - would work as the control.
I’m not sure what the selection box is. But if you want it smaller then just go in and chop off part of it and you’re done.
I have 6 video in my xml. file. Is it possible to add more than 5 video’s to the players scroll bar? Thanx.
Like I said before. great work! awesome!
Dude, thank you for all the work you have done to create Maru. I am using it to show documentaries about artist in Los Angeles. If you interested take a look at:
http://www.la-artist.com/
Thanks Video Maru!
Hello, thanks for your work!It s very helpfull.Everything s working perfect..Only one problem..when i click on a linkBtn, flash trace the following message: “curLinkBTN: _level0.instance1.instance7.linkBTNholder.link0BTN”? How can i repair this?
Thanks in advance!
@Eve, I don’t see why it’s a big deal because your users will never see it. But, if it’s really necessary then I’d suggest searching the source code - see link at the top of each page - for “trace” and remove all the trace statements.