Load Img Based From Current Video Frame

[HyperNerd]

Hi again!

 

Tonight's challenge - Let's say I have VideoLoader playing along and I also have an asset folder with a still frame for each and every frame of said video. How would I go about setting up my code so that when the video is paused, the current frame is read and the matching still frame is loaded?

 

The only methods I can think of involve embedding the video in the SWF, which would be too large. I'm hoping there is a way to leverage VideoLoader to do this. Also, there could potentially be 6000 jpg stills, I'd need a way to short-hand the code.

 

Any ideas or suggestions on something like this? Thanks!!!

[Carl]

hi,

 

Can you elaborate on why you need to do this? It will help us tailor a solution. Do you have higher resolution stills you want to load?

 

I think even if what you wanted to do were possible, the implementation would be highly impractical and require a massive video as you would have to encode keyframes for every frame thus having a massively large video.

 

check out the 'keyframes' section here:

http://www.communitymx.com/content/article.cfm?page=3&cid=EBD77

 

By having keyframes for each frame, you are basically back at square 1 of having 6000 individual images (as embedding the video in a swf/movieclip would create) and you would have none of the advantages of video compression

 

good conversation of people discussing how you can only seek to a keyframe:

http://www.actionscript.org/forums/showthread.php3?t=172910

 

Hopefully the links above shed more light on the subject. I'm really not an expert on Flash video.

[HyperNerd]

Hi Carl,

 

Yes, that is exactly why. I'd like to be able to load a hi-res jpg dynamically of the currently paused VideoLoader frame. Does VideoLoader have any feature to track frame count/current frame? Maybe it's something that could be done by time? That would be 24-30 frames in each second though...

 

I'm only intermediate with AS3 and newer to Greensock, but I'd assume we would code something like:

 

function onPause(e:LoaderEvent):void
{
  if (currentFrame=="_____")
  {
	  currentImage = new ImageLoader("_____", {...});
	  currentImage.load();
	  setChildIndex(currentImage.content, 1);
  }
}
function onResume():void
{
  TweenLite.to(currentImage.content), 1, {autoAlpha:0, onComplete:onPlay});
}
function onPlay():void
{
  myVideo.playVideo();
  currentImage.dispose();
}

 

Just as a basic idea. I clearly don't quite grasp the logic yet. How do we match up the "_____" in my example? Maybe set up some kind of array and reference an XML file?

 

As a specific example, I'd like to achieve something similar to:

www.onlybecausewecan.com

[Carl]

the videoLoader has a videoTime property which will tell you the position of the video's playhead in seconds. You could convert that time to the most recent whole second by converting to uint:

 

http://adrianwiecek.com/2011/01/11/math-floor-vs-int-vs-uint-cast/

 

var imageNum = uint(myVideoLoader.videoTime); 10.2345 will be 10

var frameImage:ImageLoader = new ImageLoader("frame" + imageNum + ".jpg", {});

 

note that assumes you have a jpg for every second of video not every frame of the the video (30 per second).