CPAUG Presentation – Edge Animate vs. Flash

On Monday, I presented on my experience working with Adobe Edge Animate and how it compared with working in Flash. Here are some notes from my presentation:

Current Ecosystem

For animation on the web, I summarized that, for the most part, there’s

• Flash
• Tumult Hype
• Edge Animate
• Javascript libraries like CreateJS and Greensock

Comparison to Flash

For the project I worked on, I ended up having to build a Flash fallback for an HTML5 Edge Animate animation (ironically, the reverse of what I was doing 8 years ago). Some of the key points:

File Size

I did a very non-scientific, simple animation of a red box easing to a point. I rebuilt the animation in JQuery, Edge, Flash, Greensock, and HTML5 Canvas. The results:

Not surprisingly, there’s a big trade-off when using Edge Animate. In all fairness, the fact that it’s WYSIWYG-based made additional client edits easy, however, my end animation was 278 kb in Flash versus a whopping 850 kb in Edge Animate.

Audio

With Flash, I was able to simply embed an MP3 file. Edge Animate has no audio support, so I instead used the HTML5 <audio> tag and had to encode the audio as OGG, MP3, and WAV. Fortunately, the audio didn’t need to sync, but it was playing in advance of the animation loading, so I added a setInterval() to briefly delay playback. Had it required syncing, I’d probably have been forced to use a library like PopcornJS.

I didn’t really give it much consideration, but being that I was just using the <audio> tag, the stock audio, albeit trimmed, normalized, and faded, is on a web server and available for download to anyone that digs deep enough. The Flash version is embedded in a SWF and not easily accessible.

IE Support

Unfortunately, because Edge Animate relies upon CSS3, it is not supported by IE8. Adobe’s workaround is to set a flag in publish preferences to prompt downloading Google Chrome Frame. This interruption in the experience isn’t ideal, hence the Flash fallback option.

I tried publishing Flash as a canvas element using the CS6′s built-in CreateJS, but the result still wouldn’t be visible in older versions of IE. I hoped I could use ExplorerCanvas to bridge this gap, but it doesn’t play nicely with CreateJS, and I came across some forum post by Grant Skinner (CreateJS’s creator) saying it wasn’t high on the priority list.

Being a good web designer, I used server-side Modernizr to detect for CSS3 support.

Playing Nice With Others

As of this writing, Edge Animate uses an older version of JQuery (1.7.1) and doesn’t rely on a CDN. I see this as a possible conflict, as a site hosting an Edge Animate animation may use a newer version of JQuery. Replacing the JQuery version isn’t an option in the IDE, and one has to sift through the minified project-name_edgePreload.js to find the reference.

Adding custom Javascript or JQuery is easily done through Edge Animate’s coding window, however, it felt like I was forced to place code through the editor, since I would have been otherwise forced to work around Edge’s preloader.

Edge Animate has a nice publish static HTML option, which actually publishes <div> tags with ids, rather than dynamically adding them to a “stage” <div>. I found this helpful in determining the id naming conventions Edge Animate outputs. Unfortunately, CSS must be modified through the IDE, as the output is actually a series of JSON objects and not a CSS file.

Further Resources and Conclusion

Edge Animate’s Javascript API was immensely helpful to me. Being that it’s an Adobe product, Edge Animate has a bunch of tutorials online.

Someone asked me if I’d still use it if I had to redo the project, and I said no. I definitely believe there’s a need for a timeline-based animation tool to introduce designers and non-programmers to animate on the web (and perhaps Edge Animate is it), but the file size trade-off was too steep for me, and I’d be curious how the project would have resulted had I simply used a Javascript animation library.

Thanks for everyone who came out to the CPAUG meeting. It was nice seeing old students and meeting some new contacts.