It’s been almost a year exactly since my last update. I guess I’ve been pretty preoccupied. I wanted to do a post about an age old problem very often encountered in Flash – compositing video so that overlaying elements sync perfectly with a video. In essence, getting the true current frame of an FLV or F4V. Specifically the problem I want to talk about tackling is having an image be composited as if it were in the video. I think a great example of this is a site we (as in Firstborn, not me) did for 5 React a year or so ago. There are a couple of solutions to solve this problem that work almost perfectly 99% of the time. In general, they usually involve an XML file that contains corner points for each frame of how an image should be transformed to match the video. For live video (no CG) tracking is set up in After Effects and then the cue points are exported. While After Effects doesn’t have a native export cue points as XML option, the keyframe data can be copied & pasted out as plain text, and then you can just run a simple RegEx to convert it to XML. This is all pretty simple and isn’t the problem, the issue lies with not being able to get the exact frame that a video is displaying.
I’m not going to pretend that this solution is by any means perfect – in fact, it is far from it. There are possible performance problems from drawing the video every frame, and the video is slightly larger so you have to crop it. The video file might be larger in size due to less compression because of the drastic difference between frames due to the barcode. The biggest drawback is that this method requires a lot more prep work. However, the payoff is perfectly synced video to frame and you can still use FLVs and F4Vs without having to embed it into the timeline in Flash or use a PNG sequence, which would increase file size greatly. If you want to read some more about video frame stuff, check out Zeh’s post from a few weeks ago. You can see a demo of the final result here.