3D Cubes, Leap Motion, Edge Animate and Greensock

~ Chris Gannon

I have seriously neglected my blog and the reason is I’ve been super busy designing various interactive/augmented videos plus lots of 3D Leap Motion stuff.

Here are a few Vines of what I’m doing. The projects are created in Edge Animate and extensively using Greensock (as always).

The first Vine is running very smoothly on an iPad 2 and is loading JSON data from YouTube and populating the faces with thumbnails. I have implemented a simple player symbol inside Animate to contain the YouTube iframe.

The second Vine is running on the desktop and is responding to Leap Motion gestures. I’m currently implementing a method of selecting and playing the videos which is opening up my eyes to whole host of new and interesting interface gestures that can be applied to what is essentially a desktop/touch screen interface. Basically I’m being lazy and shoe-horning Leap Motion onto my existing UI when I should really be designing for the input (but to be fair, this was never meant to be used with LM).

What this is teaching me though is that gesture user interfaces and designs need careful planning and execution and differ greatly from traditional mouse and touch input interfaces. Sounds obvious, I know, but only when I actually came to design and code this did I realise how different gesture UI design needs to be.

UPDATE: You can now buy my YouCube on CodeCanyon as a nicely packaged Adobe Edge template for the staggeringly low price of just $14!.

Purchase

 

 

4 thoughts on “3D Cubes, Leap Motion, Edge Animate and Greensock”

  2. Pingback: Best of Edge Animate Workflow Samples « Heathrowe
  3. Pingback: Edge Animate Templates on CodeCanyon | Chris Gannon

  4. Dear Chris,

    The 3D cubes looks great. However, I would like to know the following:

    • Whether this cube is created in Adobe Edge Animate (and not as custom HTML5)
    • Whether this cube accepts the user gestures along X-axis only? Or can the user rotate (with the gesture interactivity) the cube in X and Y axes (similar to 3D rotation)?
    • One more point –Instead of cube, can I use embed airplane picture in your component so that the user can rotate the plane and view all sides of it (X-axis and/or Y-axis)

    Thanks for your support and expecting your response on these queries.

    Reply

Leave a comment