Getting Edgy

When Adobe announced its new animation tool, Edge Animate, for building interactive motion graphics using web standards that are compatible with mobile, tablet and desktop environments, I was anxious to give it a try.

Adobe Edge Animate is a part of Adobe’s collection of tools and services for creating web sites, enabling designers to create flexible layouts that run on almost any devise. It uses HTML, HTML5, and CSS standards for layout and functionality along with Java script and jQuery actions to build interactivity. It offers users a timeline based interface, vector and bitmap images inclusion, ability to add interactive buttons, actions and effects, options for special visual effects and more. I found it interesting that it can animate existing CSS layouts without altering the existing CSS code. Actions in Edge Animate use Java script and everything is additive so underlying CSS and HTML code isn’t touched. This enables animators to collaborate seamlessly with web developers working in HTML and CSS, since animators can’t mess up web developers original code.

View the holiday card created using Adobe Edge Animate

The perfect opportunity to use Edge Animate came when the University Libraries asked me to make an online interactive greeting card. At the time, the software was still in beta but after some research and testing, I decided to jump in and use it for the project. I found the software somewhat familiar since I have experience with Adobe Flash and After Effects, however, there still seemed to be a steep learning curve. After some time in the software, I did get more comfortable and found the pin tool, the reusable symbols, and the individual timelines for symbols very useful. It surprised me, however, that there was no way to incorporate audio into an animation using Edge and the lack of proper drawing tools caused a lot of jumping back and forth between Illustrator and Edge.  Finally, the end product would skip or drop frames and didn’t flow as smoothly as I expected. It would pause slightly and sometimes freeze during the animation. However, I made adjustments to correct these issues the best I could and, all in all, creating the holiday card using Adobe Edge Animate was a good experience.

Because Adobe Edge Animate enables designers to create flexible layouts that will run on almost any devise and uses web standards that are compatible with current mobile, tablet and desktop technology, I think we will be seeing more and more of Adobe Edge Animate used production of educational animations, interactive learning modules and web interfaces. I also expect to see exciting educational animations produced in Edge Animate for ePubs and iBooks. My next experience with Edge Animate will hopefully be using the new version’s feature for creating html widgets in Apple’s iBooks Author. I’ll be sure to let you know how it goes.