Extending the TweenCore object

[box86rowh]

Hello all,

I am using your TimeLineMax classes in a project of mine for creating slideshows on the fly from a user's images. (Like a timeline based video maker)

I would like to add the functionality of being able to attacha video clip at a certain point in the timeline so that when the playhead hits that point in the timeline, it will fire up the video and as the playhead moves forward or back through the timeline, it will keep up to date with the clip.

I was thinking of extending the TweenGroup class to accommplish this so you could append a video clip to a timelinemax object at a certain point and have it run in the timeline smoothly as expected.

I dont want to re-invent the wheel however and was wondering if anyone has ever done anything like this before, or would have any input.

 

Thanks

Jason

[box86rowh]

I have created an extension class for the tweencore object called VideoTween and have overridden the rendertime function. I can see this is called constantly so I could use this while scrubbing to keep the video file in sync with the time line, is there any easy way for me to tell within this function if we are manually scrubbing, or just playinh normally?

[GreenSock]

Lots of ways to accomplish this sort of thing in a timeline that is running at normal speed, but video is very tricky to make slow down, speed up, skip to exact portions, etc. It has to do with codecs, keyframe frequency, bitrate, etc. Long story, but unless your video is encoded in a very specific (and bandwidth-intensive) way, you cannot just skip to exact places in the video smoothly. It'll only skip to the nearest keyframe.

 

Anyway, you could just create a VideoPlayer wrapper for your video with a "position" or "progress" getter/setter that handles placing the playhead on exactly where it should be on your video, and then you simply tween that getter/setter property with a tween. Then no fancy extending of TweenCore is necessary. You'd just insert a tween like TweenLite.to(myVideo, duration, {position:duration}) and have your myVideo instance's "position" getter/setter react when the tween changes it.

 

Make sense?

[box86rowh]

Hello all,

Thanks for your help so far!

I have successfully created a class that allows me to drop a video into the timeline seamlessly. I can seek anywhere in the clip as it is 100% keyframes and fully buffered. I can use the timeline's playhead to manipulate the video and play from any point. I am now experiancing a bit of a lag problem. It seems like the video does not start playing immediately, it sometimes hangs on the beginning of the clip for up to a second! I think this is a performance problem with the video element and Im not sure if this is something that can be fixed or not. Here is my videoTween class that handles the video element, maybe you can see something here that could be causing lag spikes, or maybe you might have a suggestion as to how i can keep the video in sync with the timeline:

 

Thanks!

package com.greensock
{
import com.greensock.core.TweenCore;
import mx.controls.VideoDisplay;
import spark.primitives.VideoElement;
import com.greensock.core.SimpleTimeline;
import flash.events.Event;
import com.greensock.TimelineMax;
import components.VideoStageItem;
public class VideoTween extends TweenMax
{
	public var vid:VideoStageItem;
	public function VideoTween(target:VideoStageItem, dur:Number, vars:Object=null)
	{
		//setting up the video connection
		vid = target;
		//adding a lsitener to watch for the timeline pausing, and to pause the video if needed
		vid.addEventListener(Event.ENTER_FRAME, function(e:Event):void{
			try{
				if((timeline as TimelineMax).paused){
					if(vid.vid.playing){
						//pause and re-calibrate with playheadtime
						vid.vid.pause();
						vid.vid.seek(time / 30);
					}
				}
			}catch(er:Error){}
		});
		super(vid, dur, vars);
	}
	override public function renderTime(time:Number, suppressEvents:Boolean=false, force:Boolean=false):void {
		//if we have reached the end of the tween
		if(time >= this.duration){
			//if the video is playing
			if(vid.vid.playing){
				//pause and reset
				vid.vid.pause();
				vid.vid.seek(vid.startFrame / 30);
			}
		}else{
			trace(time + " " + Math.round(vid.vid.playheadTime * 30));
			//if it is not playing...
			if(!vid.vid.playing){
				//if this is the first frame
				if(time == 1){
					//start
					vid.vid.play();
				}else{
					//seek to the right point
					vid.vid.seek(time / 30);
					//if the timeline is not paused
					if(!(timeline as TimelineMax).paused){
						//resume the video
						vid.vid.play();
					}
				}
			}
		}
	}
}
}

[box86rowh]

OK, for now what I have done will get me past this point, but I dont think its a permanent fix. In my enter frame listener I added a check to see if the video and timeline are out of sync, if they are out by more than 5 frames, I bring the timeline to match the video. This causes some jumpyness of the playhead at the very beginning of the video clip, but it functions ok..My main goal however is to find a way to get the video control to start playing instantly or close to it.