Here’s another animation that integrates dynamic content with a prerendered animation. This time we’re loading 15 images from XML and attaching them to the stage dynamically. The animation itself is also more complicated, dishing out 15 cards end-over-end while also having a smooth camera pan. The system is working, and running, great, and I should have a tutorial on how to accomplish this shortly.

Render Demo (Flash 9 Required)

Here’s a quick little demo that uses the DistortSprite class in AS3 to distort a dynamic image loaded through XML to match up in perspective to a pre-rendered, animated card.

PreRender Test (Flash 9 Required).

The basic concept here is that we have a prerendered animation from a 3D app, in this case Cinema 4D. And what we need to do is be able to dynamically attach images on top of that card in Flash. So we rendered out the animation from C4D without an image, and then motion tracked the 4 corners where the image would be placed in AfterEffects.

Then, by using Dr. Woohoo’s AE2Flash script, we were able to send that motion tracker data for the 4 corners out to an XML file. Since the dimensions of the Comp in After Effects are identical to the dimensions of the stage in Flash, the coordinates should line up. Then we simply run a DistortSprite class we have that just grabs 4 corners of a dynamic image and distorts them to those points that we calculated from the motion tracker. What we’re left with is the illusion of a dynamic image being transformed in 3D space along with our actual prerendered 3D scene.