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!
Posted by: James | October 8, 2007 09:25 AM
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!
Posted by: Laurence Salerno | October 13, 2007 05:48 PM
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
Posted by: Aran | November 12, 2007 10:22 PM
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!
Posted by: Michael Coleman | November 13, 2007 10:54 AM
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
Posted by: Patrick James | December 3, 2007 12:03 PM
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
Posted by: Shannon | April 21, 2008 07:13 AM