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!
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
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?
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.
thank you very much for this tutorial, it's really great and simple!
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.
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 advance
Simone
This tutorial it's so inspiring, it's 5:30 in the morning and i'm still here :D
I 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 (4x3) 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
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.
http://blogs.adobe.com/keyframes/2009/06/dynamic_advertising_with_after.html
Hey Michael
Excellent 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?
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