« After Effects at Adobe Max | Main | After Effects and Leopard »

Creating Interactive Video with After Effects and Flash

Thanks to all the people who attended my presentations at Max earlier this week! For those of you who weren't there, the project that I presented demonstrates how to combine After Effects and Flash techniques to create a graphically rich video user experience with a dynamically animating heads up display. The final output is a SWF file suitable for a web site.

One of the unique aspects of this example is that the location of the HUD is being dynamically driven by event cue points in the FLV video. The cue point metadata is generated using the motion tracker in After Effects and embedded into the FLV output via the After Effects render queue.

You can watch a recorded version of the presentation to see how the project is built. It's a very thorough demonstration -- about a 40 minutes -- so grab a cup of coffee, a comfy chair, and enjoy the show. It's almost as good as being at Max, except you don't get to hear any of my corny presenter jokes. :-)

You can also download my source files and step-by-step directions to try it out for yourself. (By the way, these two links introduce some new toys that will require the latest Flash player. I'm sharing the video via the Adobe Acrobat Connect which is a great way to collaborate with others online. I posted the files to a new service offered by Adobe called Share. Share was also announced at Max, and allows you to easily share, publish and organize your documents. This is the first time I used the Share beta and it was a piece of cake and incredibly convenient.)

Enjoy!

Comments

Thanks for the great preso at Max! One of my favorites and look forward to playing with these ideas more in future projects! Thanks!

WOW! Michael, thanks so much for taking time to record your presentation so that those who were unable to attend MAX can see it. You did an outstanding job of walking us through the steps and showing how to use AE, Photoshop and Flash together in a productive, real world example. Again, given the time it takes to prepare an example like this, let alone present it, a big thank you for taking time out of your schedule to make this happen. I certainly hope that you will be able to provide additional examples in the future!

Michael.

This is great! I have successfully reproduced the effect. What I want to know is how can I rename the "Track Point 1" leaf node in AE, so that I can save more than one set of motion tracking data points? (otherwise, we end up overwriting data as the property name is the same). I want to track 4 points to use as tracking and skew data in flash. Alternatively, can the script be modded so that the user can choose the property name rather than hard coding it to "Track Point 1_Attach Point" (based on the leaf node names)

Cheers,
Aran

Hey Aran,

Glad you liked it!

Diving a bit deeper into the After Effects motion tracker will give you what you want. Each tracker source layer can have multiple tracks on it. Just push the "track motion" button again and AE will create multiple tracks on the source layer. But what I think you really want to use is the Tracker Type called "Perspective Corner Pin". This will create a tracker with four points. Alternatively, you can use the RAW track type and add as many points as you wish (using the flyout menu on the upper right corner of the Tracker Controls panel.)
Later, when running the "Convert Keyframes to Markers" script, just make sure that all of the attach points that you want to be embedded are selected. Note that even though the marker dialog is limited to showing three cue point fields, all four should actually be embedded in the FLV on output. You can confirm this when you import the FLV into Flash Professional. Enjoy!

Michael,

AWESOME video - I have always known that I could do this but I didn't quite know how to implement it. Your tutorial was great for beginners in AE and arranged so that those of us who are a bit more advanced could just squeeze out the good bits.

I am VERY interested in seeing a more in depth video that has multiple tracking points and actual "hot spots" on the video that will allow the user to click on specific items on the video.

That - linked with the dynamically updating data (that you spoke out in this video) would be just out of this world and certainly something that I know a lot of designers would be interested in learning.

Thanks for the great video. Keep up the good work.

Patrick

Yes, thanks so much for this great tutorial. It has shown me exactly what I have been looking for, well for today anyway.

I too am interested in a multiple motion track point solution. I have been working on one, based off your tutorial and I haven't had any luck. I'm able to see all the variables from the track points out-put in a trace window in Flash, but I'm not able to specifically target and use those points. Any ideas? Thanks

Shannon

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)