Guest Post by Colin Holgate, senior programmer, Funny Garbage
At Funny Garbage, we love working on projects that are both fun and that let us flex our development muscles. We recently worked on a mobile and Facebook app for the Aéropostale P.S. brand. Targeted to teens, the app lets them use their own headshots to personalize crazy dances comprised of complex animations. This is the kind of fun characterization that Adobe Flash Professional does so well.
The development time was short and the app had to be delivered on iOS, Android, and Facebook. We knew we had to have both a Facebook and mobile presence, and we wanted to easily replicate the functionality without building separate experiences. However, a major requirement of the job was that the animation had to be HTML5 compatible for desktop browsers. This would enable users on iOS and the latest Android OS to access and share the same playback links. The same links would also work for desktop users who had not installed Flash Player. We used Flash Professional CC (using Adobe AIR to deploy to iOS and Android mobile and SWF for Facebook) to create the app, here’s how we did it.
We conducted an early test of the HTML5 Canvas feature in Flash Professional CC while it was still in beta, and it was remarkably successful. We were able to proceed with all of the other features of the app knowing from the outset that the playback was going to work. Without that ability to port over to HTML5 with complete confidence, the only alternative was to develop this project natively in four separate environments—much too complex a process and not a realistic option within our production schedule. In fact, we actually beat the launch deadline and I was the only Flash developer working on the project.
Our artists, animators, and designers spent several weeks working with the client on style, animation, and music. They used Adobe Photoshop CC and Illustrator CC for all the graphical assets, as well as for the Flash Professional animation timeline. The files were then handed over to me to use in the Facebook and mobile apps, and also to create the HTML5 versions. We included placeholder headshots for seven different animations, featuring up to three people, which users can override with their own “selfies.”
The workflow of taking the regular Flash Professional animations and exporting them as HTML5 files is quick and as simple as choosing “convert to HTML5 Canvas from AS3 document formats” from the Commands menu. When the HTML5 Canvas document is published it exports all of the code, images and sounds needed to create the animation. We did further optimizations on the exported folders of images, so that the loading of the HTML5 pages is fast.
In the end, our client was happy with the outcome—a fun, creative app to showcase the P.S. brand. We’re excited to see where we go next with using Flash Professional CC as a development tool for code-driven HTML5 Canvas projects, not just for animations. We’re also keeping an eye on Adobe Edge Tools & Services, which will help us create more responsive designs. Having cutting edge tools encourages us to stretch our skill sets and our imaginations, while at the same time discover new ways to save time and money.
