timeline controls
June 24th, 2007 . by polyGeek |
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.
The timeline scrubber seems to toggle my play/pause button each time I drag the playhead (each time I drag and release the playhead, the play/pause button switches to the opposite state).
When I replaced the VideoMaru swc with the version that was on your old site, the scrubber worked properly (the video would be in the “play” state each time I released the playhead).
Has something changed between those versions?
per zenbug comment:
in this mc:
_polyGeek.com-video.Maru 3.1
AS layer:
Event Functions
in:
function onPlayheadRelease()
change to this:
function onPlayheadRelease():Void {
ph.stopDrag();
if ( isPlaying == false) {
/*pg code
if( isMusic ) {*/
isMusicStopped = false;
isSeekNow = false;
var perc:Number = ( ph._x - tm._x ) / ( tm._width - ph._width);
var seekTo:Number = Math.floor( ( music.duration / 1000 ) * perc );
music.start( seekTo );
} else {
doSeek( false );
stopMouseList();
/* pg code
//isPlaying = false;
//onPlayPause();*/
}
if( isRTMPstream ) {
var perc:Number = ( ph._x - tm._x ) / ( tm._width - ph._width );
var seekTo:Number = vidLen * perc;
this.ns.seek( seekTo );
}
}
only tested a few times but worked for me…thanks polygeek, this is a great timesaver.
@ZenBug, that was a bug. It’s been fixed in 3.5 beta. You can download it from the link at the top of the page.
Hi, great component and thanks for sharing. As an audio/video professional, I have one minor suggestion. Your video tutorials are very helpful, however the audio is extremely low. You should normalize the audio to -3db, and ideally compress it a bit to make it easier to hear.
The component is a great tool.
Thanks
@Randy, thanks for the feedback. I knew the audio was low but didn’t know how to fix. Thanks for giving me the details.
I plan on redoing all of the videos over time. I’ll be sure to apply your suggestion.