Animation with Adobe Edge
September 23rd, 2013 by Gage Pacifera
A while back Genevieve over at Red Lemon Creative asked me if I could do up a mobile-friendly animation for Friends of Bristol Bay to help their efforts to protect the Alaskan bay from offshore drilling. I had done some mobile-friendly banners for Red Lemon Creative before using hand-coded JavaScript, but for this project I decided to try out the Adobe Edge animation engine.
Edge is Adobe’s HTML5-compatible counterpart to Flash, featuring a GUI that falls somewhere between Flash and AfterEffects. I think it’s still considered in beta at this point, but seems to be getting closer to being a full-fledged interactive animation solution.
It worked out pretty well for this project. Having a lot of experience working in Flash and having some AfterEffects experience, too, the GUI was familiar and intuitive. It didn’t take long to put together the animation sequence. The JavaScript hooks that allowed me to use custom functions weren’t too hard to figure out. Perhaps the trickiest part was figuring out where to modify the config files that are auto-published with the project so that the animation would work within the context of the file system. I would definitely use Edge again for similar animation projects and look forward to seeing its continued development.
You can check out the finished results at the link below. The project also had a modal slideshow associated with it. I used FancyBox for that part.