Interactive Electronic Cigarette with Adobe Edge Animate April 23, 2014



While working with a client I had a chance to spend some more time using Adobe’s new animation tool called Adobe Edge Animate (http://html.adobe.com/edge/animate/). After spending a few hours with it, I must say I absolutely love working with Adobe Edge Animate.

Design expressive, animated content with ease, precision, and realism. Or, you can add motion and interactivity to existing HTML layouts and templates.

One thing that was missing from this tool, that was added in a recent update, was the ability to make the animations responsive. But now with a simple click of a button the while animation will scale down to fit the page or container it’s inside of. This changes everything for me now and I know I will be using this tool more often in the future.

To make this animation I started with a PSD file and exported each piece as a PNG file. I then imported each one onto the Adobe Edge Animate stage to begin adding some interactivity. All in all I think this whole animation took me about 4 hours to build.

I still need to prevent double clicks during the open and close phase of this but I am still very happy with the way this turned out.



Christian Gehrke


Leave a Reply

Developed by Christian Gehrke