Video Panning

[brantseibert]

I would like to place a full screen video on the page and give the user the ability to control the timeline of the video. The user would grab a control and move it left or right in order to walk forward or back through the video.

 

What I mean by "walk" through the video is to move frame by frame forward or back, at a slower or faster rate. The farther right or left (from center) the user moves the control, the faster it plays. The maximum speed would be the FPS of the FLA (say 24 or 30 frames per second [FPS]). So the control regulates both the direction and frame rate.

 

I understand that direction can be controlled by play() and reverse(). Can this be combined with code that controls the FPS?

 

To visualize the effect, imagine a movie camera shoots a scene of two people walking down a street, and the camera is walking with them at the same speed -- so that the buildings in the background are panned. Now imagine grabbing a control and making the people walk backwards or forwards at a slower or faster speed. The building in the background passes horizontally across the screen and the user controls the speed.

 

Thank you.

[GreenSock]

Video is a bit tricky in this sense. Normal animations can definitely do this sort of thing - watch the whole animation on the home page of http://www.greensock.com/ and wait until the end and then you'll see a scrubber show up at the bottom. You can drag that back and forth to go through the animation. However, video is typically a different beast because of how keyframes are handled. Typically you can only skip to a keyframe on a video - you cannot just go frame-by-frame unless you encode the video with keyframes on every frame which would make your video insanely huge (in terms of file size) or terrible quality. The exception here is if you embed the video on the timeline of a MovieClip inside Flash. Usually that's not the best idea because it forces the whole video to be embedded inside your swf, lengthens compile times significantly, and doesn't allow the video to run at its native frame rate (if different than the swf).

 

If you need this functionality, you'll probably need to embed the video in a MovieClip timeline and then if you want to control it along with other tweens, you could use a frame tween kinda like:

 

myVideoMovieClip.stop();
var tl:TimelineLite = new TimelineLite({useFrames:true});
tl.append(...append/insert your tweens...);
tl.insert( new TweenMax(myVideoMovieClip, myVideoMovieClip.totalFrames - 1, {frame:myVideoMovieClip.totalFrames, ease:Linear.easeNone}) );
tl.append(...append/insert other tweens...);

 

Then you can skip to any spot on the TimelineLite using either gotoAndStop() or by setting the currentTime property. You could hook up a scrubber or whatever to set the appropriate currentTime whenever they're updated, for example.

 

Hope that helps!