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.)


[Update 1/4/2010 — Fixed broken link to the archive of the source files. Downloads should be working again.]

29 Responses to Creating Interactive Video with After Effects and Flash

  1. James says:

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

  2. Laurence Salerno says:

    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!

  3. Aran says:

    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

  4. 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!

  5. Patrick James says:

    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

  6. Shannon says:

    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? ThanksShannon

  7. Luke Haddock says:

    Fantastic tutorial. I am having one problem however. When I use the script to convert keyframes to markers, my markers don’t show up as cue points, just as markers. The data is in the cue points field, however there is no Event title. As a result my markers show up without the little black dot in the center, and the cue points tab is grayed out in the render dialog so I am not able to export them with my video. Any suggestions?

  8. Michael Coleman says:

    If you’re having problems with the script, you may need to download the tutorial files which contain a new version of the “Convert Keyframes to Markers” script. Just replace the existing script in your After Effects application folder with the new one and you’re good to go.

  9. alessandro says:

    thank you very much for this tutorial, it’s really great and simple!

  10. Andy says:

    Thanks for the tutorial. It’s great and something I’d been interested in doing for a while. One thing that confused me for a while why the racerData MC seemed to track the motion but not at the original x/y coordinates of the video. I worked out it was because the racerData’s x/y’s were being positioned to the top stages coordinates, not the videos which doesn’t sit at 0’0 on the stage. Just thought I’d mention this in case it confused anyone else.

  11. simone says:

    Really interesting tutorial.I was trying to do the same, and I got some problem when I’m using the AE script. I’m working with AE CS4 and when I run the script the marker converted comes up without black square in the middle so there’s no name on them. So flash cannot read it…How can I solve this problem? There’s any updated script to run? Or am I wrong on something?Thanks in advanceSimone

  12. simone says:

    This tutorial it’s so inspiring, it’s 5:30 in the morning and i’m still here :DI wrote already before, at the end I’ve overwrited the script now it works!!!Amazing. Really thanks. Apparently the cs4 script generates cuepoint without names(black square) so flash cannot read it…Just noticed that Luke has got my same problem, just download the files of the tutorial, there’s a folder with the script, just overwrite it! Works perfectly.Got another question by the way πŸ™‚ I would like to know if there’s some way to convert multiple trackpoints in the same video and recall them in flash in somehow. The thing i should do is basically to track a grid (4×3) on top of a video so I can project images on top of it… Have u got any suggestion on how to do that?Thanks again for share.Simone

  13. Michael Coleman says:

    Here’s a article about a technique that does multiple track points. Essentially I’m using AE and Mocha to create a live corner pin in realtime in Flash.

  14. acass says:

    Hey MichaelExcellent tutorial! When I am working with Dynamic text or images, I noticed that they tend to jump around while animating. It tracks fine in my flash file, but looks a little jittery! Do you have any ideas on how to make it a little smoother?

  15. Per says:

    I have exacly the same problem that this guy describes.”One thing that confused me for a while why the racerData MC seemed to track the motion but not at the original x/y coordinates of the video. I worked out it was because the racerData’s x/y’s were being positioned to the top stages coordinates, not the videos which doesn’t sit at 0’0 on the stage”Please help me

  16. Anonymous says:

    This was a great tutorial, and you explained it very well! Thanks for taking the time to put this up.

  17. robert says:

    Does anyone have the source file they can send me. is wacked!kindest regardsrobert anthony

  18. robert says:

    saw the “Creating Interactive Video with After Effects and Flash” dating back to”October 6, 2007 “for some reason is wacked for the source filedo have the source file to view.kindest regardsrobert anthony

  19. robert says:

    saw the “Creating Interactive Video with After Effects and Flash” dating back to”October 6, 2007 “for some reason is wacked for the source filedo have the source file to view.kindest regardsrobert anth

  20. Casper says:

    Great tutorial. Is there any way you could repost the source files or just the JS file for the keyframes to markers script.I’ve realized when I run the script mine doesn’t name the markers and without names they don’t get exported to cue points.Cheers!

  21. Lisa says:

    you need to download the tutorial files and there you’ll find the “Convert Keyframes to Markers” script. You have to override this in your ae file and then you’ll have names with your markers.But I have still the problem that my cue points aren’t in my flv, so nothing can be read…I dunno what i’m doing wrong, somebody has a tip?i have the cue points in my ae and they all have namesgreetings

  22. Lee says:

    just a quick note for users that are trying to get this demo to run in CS4… if you start a new file and follow this tutorial using the CS4 playback component dragged to the stage you may not get this to work.The flvplayback component (myVid) needs to be ‘nested’ inside a movieclip… for example, click on myVid and convert to movieclip (myVideoHolder)… you then have myVideoHolder.myVid in the code, for some reason using AS3/Flash10 and the CS4 playback component we could click on the flv so it wasn’t triggering the toggleDataView function . Once it was placed inside another movieclip object it was not a problem.movieholder_mc.myVid.addEventListener(MetadataEvent.CUE_POINT, cp_listener);movieholder_mc.addEventListener(MouseEvent.CLICK, toggleDataView);

  23. Rafael Dourado says:

    REALLY GREAT VIDEO!!! I followed your instructions and tried to create a video like JibJab, with those big heads, you know? I include the big head on flash and was setting X and Y position using cue points. But, it does not look fast enough. If the point moves faster it looks like the object does not follow. On AE is everything fine. I even made changes to a few keyframes to be more precise, but it did not work. Do you know what I could do? Thank you.

  24. Andi says:

    Hi, thank you for this.One Question:Is it possible to use rotation data from the tracking in Flash too? x/y & rotation?

  25. Maikel Sibbald says:

    Very cool!I’ve got an example with multiple layers and markers. These overlap eachtother. Therefor I the cuepoints I receive in Flash. it only contains 1 marker (and not the data of multiple).Any solution to this problem? I’m using AE en media encoder cs5.

  26. Unfortunately, this is a limitation of the current design. I think you’d have to output separate FLVs (one for each overlapping marker). Sorry for the hassle. We’ll keep it in mind for improvements in the future.

  27. Maikel Sibbald says:

    Ok thank you for the feedback. So now I have another way. And it’s to read the XMP data. But as F4v is suppose to support/fire onXMPdata. it is not in my code. Only when I use flv.My target is fp10, so that should work right?In Adobe Bridge I’m seeing the XMP data for the f4v and flv. So it’s there, but I can’t access it in f4v.Any ideas?

  28. I’ve never used the XMP route before, so I don’t have any other suggestions, other than posting your question on the Flash forums for more help.

  29. This was incredibly helpful in figuring out how to create an interactive video. I don’t have it done yet but you can get an idea of what I want to do by watching this video:

    Each menu item will be clickable.. My thought is to have transparent buttons (in flash) that will hover over each text item. Clicking the button will navigate to a different movie, all contained in a swf file.

Leave a Reply

Your email address will not be published. Required fields are marked *