Interactive Video Demo for iPad and Desktop

I thought I’d share the project I’ve been working on for the past few months – it’s an interactive video interface that is designed to run on tablets as well as the desktop. I’ve created it in Edge Animate using Greensock for the interactivity and animation.

The premise is simple – you decide on the items in the video that you want to be clickable. Those items are then motion tracked and the tracking data is then converted to JSON for use in the the HTML5 video player UI.

When an item is clicked it is added to the wallet/cart at the top. This item has a URL associated with it so that when you view your list of items you can click and purchase that item.

It’s a fixed resolution on desktop and it runs in full-screen on the iPad for a more immersive experience.

This kind of interactive video has a huge number of applications and I’m pretty excited to be able to show you where I’m at with it.

As with all works-in-progress it’s a bit rough around the edges but it should give you an idea as to what is possible now.

Chris Gannon Edge Animate Templates
 

10 thoughts on “Interactive Video Demo for iPad and Desktop

  1. Hi Chris,

    How can i get in touch with you?

    I’m looking to get an interactive demo done from Android devices like the one you see on http://www.volkswagen-sportscars.fr/cars/golf-gti/ . Access this URL on a mobile device and it’s a lot simplified version of what you see on desktop. I am looking for a simplified interactive video for Android devices to showcase few specifications of a car.

    I found this link on the Greensock website. Can this be done?

    Best
    Anand

    1. The video player might end up on CodeCanyon but the motion tracking process uses a few custom bits of software that need to be used in a specific way (and you also need After Effects). So I’m unlikely to put it up there (quite apart from the fact that this process has taken me a long time to get to where it is – putting it out there for $8 somehow isn’t all that appealing 🙂 )

      1. I would be willing to shell out 50-100 to see have a look at the code! just throwing it out there in case you want to list it that high on code canyon.

      2. Thanks – I may well put the player up on CodeCanyon although it needs a spot of tidying up

  2. Brilliant!! Have you made the code available? Or perhaps an interface for ecommerce shop owners? I would definitely love to experiment. Let me know and thanks for all your hard work!

    -Blaine

    >

    1. Unfortunately the motion tracking technique is not one piece of code – it’s a whole process involving custom libraries/programs in After Effects, Mocha Pro, Flash (Air), Greensock, JavaScript/jQuery and Edge Animate that have been designed and built and honed over quite a long time.

      However I am willing to teach the process but I couldn’t do it free 🙂

      1. Would pay to learn this as well haha If you even would be willing to do private lesson I would love to learn your process! codementor.com has a way you could do this and charge hourly. Just an idea if you have any free time and would be interested to make extra money. Let me know! My email is kmartinezmedia@gmail.com

        Best,
        Katherine

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s