Video Motion Tracked in 3D onto HTML5 Video

The description pretty much says it all really.

Adobe Edge Animate CC 2014 was finally released publicly yesterday and this demo takes advantage of its new functionality which is the ability to import video (and use it visually in your projects). It makes life so much easier now that you can see the video you’ve imported in your stage rather than writing video tags and then running it on a server.

So this demo is a progression of my earlier videos. It’s using Greensock’s Draggable and I’ve motion tracked a truck and then applied that tracking data to a video which remains in perspective even whilst it’s playing.

I can think of hundreds of commercial uses for this kind of technology from virtual tours and geographical information overlays of places to immersive, in-depth product demonstrations.

I’m interested in your comments  – how do you think this technique could be used?


Chris Gannon Edge Animate Templates



10 thoughts on “Video Motion Tracked in 3D onto HTML5 Video

  1. The new video addition (visual) to Edge is really a huge plus! You have once again knocked it outta the park with this 3d motion tracking. Amazing job! …a person could only wish that some how the steps and one lil Air app that spits out a json file would someday become available …??? Amazing job sir!

    1. Thanks Joe – as I’ve said in the comments on other posts it’d be pretty hard to open source this. It involves several processes, several bits of software (After Effects, Mocha Pro, Greensock, Edge Animate, Flash AIR), custom programs and parsers.

      This technique has taken me a long time to get it to where it is (a LOT of unpaid time!).

      So I am looking to teach this process (paid of course) to agencies and individuals who want to learn how it’s done (and the multitude of pitfalls) – otherwise if I just chucked all the bits of code on a server I would never be able to manage all the support calls and emails.

      So if you or your employer are interested in learning this then feel free to get in touch.

  2. Just wanted to say you have some cutting edge techniques there Chris. I think that it is only the next logical step would be to teach those who wanted to know. Out of interested will this be an online venture or an actual walkin class?

  3. Love this!
    I’m thinking interfaces right away.. That would fall in to place as you drag..
    At least for the scrub play feature…
    To me that opens up features that would make me play with after effects and import it in to edge to make a cool experience..

    Would this part, the scroll / scrub to play be a thing you could share?

    I used to have a scroller that could control a movieclip in flash, i spend hours making stuff with that back in the day 🙂

    The other tracking feature is a bit harder.. but defiantly a cool thing, reminds me of a demo i saw on max in .. 2007 i think it was.. Where this cool flash guy replaced the head of a bank robber with your own face to make it a personal experience.. This was of course before social media and stuff like that..

    1. Hi Poul,

      The scroller/scrubber bit is a heavily modified version of this:

      I’ve rewritten it in JavaScript and it now uses Greensock’s Draggable plus I’ve enhanced the image loading to avoid the iPad’s memory limit (the method used in the URL above hits the iPad’s memory limit and too many images means it stops loading).

      Hopefully this is a good starting point.

      1. With no real coding ability i must wait until someone makes it for Muse in a ultra simple version 🙂

        But thanks for the inspiration and the reply 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s