Adobe Edge Animate/The Missing Manual Software/Book Review

Michael Hurwicz www.hurwicz.com Eastsound Washington USA ©2013 CreativeCOW.net. All rights reserved.

Increasingly, web developers are being asked to create sites that are viewable on tablets and mobile devices, as well as desktops and laptops running Windows, OS X or Linux. One of the challenges in creating a site like that is animation. Flash, for many years the preferred cross-platform animation solution, is no longer supported on many tablets and mobile devices. Michael looks for - and finds - answers within Adobe's Edge Animate.

Increasingly, web developers are being asked to create sites that are viewable on tablets and mobile devices, as well as desktops and laptops running Windows, OS X or Linux. One of the challenges in creating a site like that is animation. Flash, for many years the preferred cross-platform animation solution, is no longer supported on many tablets and mobile devices. HTML5 and related standards like JavaScript or CSS3 can be used for animation, but they are defined purely in terms of code. A tool to create that code could be something as simple as a text editor. Or it could be something like Adobe's Edge Animate, an HTML5 animation authoring tool released commercially in September, 2012. (The Preview version came out in August, 2011.)

As a longtime Flash user interested in working up some HTML5 animation chops, I recently took Edge Animate for a spin. My guidebook was "Adobe Edge Animate : the missing manual" by Chris Grover. I found the trip enjoyable and instructive. I can now create simple HTML5 animations literally in minutes using Edge Animate, and continue to jazz them up using CSS3, JavaScript and jQuery. In the process, I developed HTML5 animation skills that can be applied in the Edge Animate context or elsewhere.

Mini book review: I recommend Grover's book. Probably, the less you already know, the more you'll appreciate it, because it covers every aspect of Edge Animate, and many side topics relating to HTML5 and web development in general, in a way that doesn't assume a lot about the reader's background. As such, it's thorough and easy to understand. (Depending on your background, it could be a little too thorough sometimes. For instance, the author spends more than a page discussing the relative merits of the JPEG, GIF, PNG and SVG graphics formats. You may end up skimming some pages.) Long story short, I'm sure I zipped through the learning process at least twice as fast with the book as I would have without it. It's also got tons of little tips that make the program easier to use, and who knows when I would have noticed these things on my own? (See figure below.) In addition, the author provides at least an introduction to some concepts, such as responsive design, that you probably want to understand if you're going to do any serious work in HTML5.

One of many tips from "The Missing Manual"

Okay, on to the review of Edge Animate: It really does make it really easy to create simple animations that should run on all modern browsers, as well as iOS devices (iPhone, iPod, iPad), all through a WYSIWYG interface that doesn't require any coding (but does support coding). I suspect it may be quite popular among designers who don't want to deal with code. It also works well for timeline animation with some additional scripting. (Grover's book provides numerous tutorials using this approach.)

The fact that Edge Animate is from Adobe gives it an excellent chance for longevity in the marketplace. (Though Adobe has abandoned its share of products. For instance, Adobe LiveMotion, a would-be Flash competitor, was released in 2000 and discontinued in 2003, two years before Adobe acquired Macromedia and Flash.) Another potential advantage of Edge Animate, at least in the long run, is possible workflow integration with other Adobe products. And did I mention that, for now at least, it's free? Hopefully, that should speed adoption and create a healthy user community. (To test that hypothesis, check out Adobe's Edge Animate forum.)

In addition, as I mentioned above, I found Edge Animate, especially in combination with Grover's book, to be an excellent HTML5 learning tool. (Note that I had already been using HTML, CSS and JavaScript for years, and had some exposure to jQuery, as well. That obviously made the learning a lot easier.)

Features and Functionality

In many ways, Edge Animate's features and functionality are quite limited. Take, for example, the drawing tools: They consist of text, rounded rectangle, ellipse, and rectangle. (See figure below.) Not even a line tool, much less a pen tool.

Edge Animate drawing tools

In fact, as Grover points out, all three shapes are really just variations of one shape. The underlying code is the same, but with different values applied to certain parameters. For instance, a rectangle can be thought of as a rounded rectangle with zero radius on the rounded corners. So basically you have one versatile shape and text.

For most purposes, you're probably going to end up creating graphics in something like Photoshop (or even Flash) and importing them into Edge Animate. This is a significant disadvantage, for instance, in comparison with Flash. When you create a shape in Flash using the pen tool or the line tool, it's created as a vector graphic, which means minimal file size and infinite scalability. When you have to import a graphic into Edge Animate, it means a larger file size. In addition, you also have to determine the largest size the image will be displayed at and upload the image at that size, or risk pixelation when someone blows it up too much. Edge Animate can import SVG (Scalable Vector Graphic) files, which as the name implies is a vector format. But as Adobe advises, "For the time being it's safer to use PNG on the web as there are still issues regarding cross-browser support."

Another area where Edge Animate could use some improvement is in its masking capabilities. Edge Animate can simulate a rectangular mask using its clipping tool. More mature tools, like Flash, support masks of any shape.

Other than drop shadow, Edge Animate is also lacking in effects, such as glow, blur or bevel.

HTML5 is definitely capable of greater things than this. (Check out Motorola Mobility's Ninja, for example.) Over time, I would expect the Edge Animate toolset to grow: No one expects Edge Animate 1.0 to have all the features of Flash, which is in its twelfth generation. It's still early days for Edge Animate. It's certainly not poised to cannibalize any significant share of the Flash market. Most observers seem to think it will be a number of years before anything like that starts to happen, and not only because of the relative maturity of the two products, but also because of the current state of HTML5. In the video arena, for example, one knowledgeable observer describes that state as one of "constant flux."

User Interface

There are some novel aspects to the user interface that were not obvious to me at first. For example, Edge Animate features a two-part playhead. The top part is called the pin. The bottom part is commonly referred to as "the bottom part", or "the gold part" or just "the playhead." (See figure below.)

The two-part Edge Animate playhead

The figure below, from Grover's book, explains how it works:

How the two-part playhead works

The Edge Animate user interface took a little getting used to (thus the value of the book), but at the same time, as a Flash user, some aspects were very intuitive: There's a timeline, a Properties panel and symbols with independent nested timelines, for example. After Effects users should feel at home in many ways, as well. Heck, even having used a video editor will give you a little bit of a head start. And, for Flash ActionScripters, there's always the fact that ActionScript and JavaScript are siblings, with a lot of family resemblances.

In the end, once I knew what was what, I was able to work efficiently and intuitively in the UI.

Trying to Integrate jQuery UI

For one animation I attempted with Edge Animate, I realized that I wanted to use jQuery UI. Now, Edge Animate has jQuery and JSON built in, but not jQuery UI. Grover's book also had nothing on it (naturally, since his focus is Edge Animate). So I Googled up some information on integrating jQuery UI into Edge Animate. (Other people had tried it, some successfully, apparently.) I worked at it for quite a while, with partial success but ultimately continuing mysterious malfunctions.

Initially just as a test to try to figure out what I might be doing wrong, I started playing around with implementing the animation in HTML5 (jQuery, jQuery-UI and CSS3), without Edge Animate, creating and editing files directly in Dreamweaver. I was surprised at how quickly I was able to reliably achieve the simple effects I was going for. (It helped that Dreamweaver provides code hinting and real-time syntax checking for jQuery. See figures below.)

A code hint and (in yellow and red) a syntax error in Dreamweaver

 

Dreamweaver provides a code hint and (upper left) approves the syntax

Edge Animate does provide syntax checking. (See the lower left corner of the figure below.) But no code hinting.

Syntax checking in Edge Animate

To make a long story short, I ended up just doing the animation using jQuery, jQuery UI and CSS in Dreamweaver. I got over trying to get jQuery UI to work with Edge Animate.

Conclusion(s)

One conclusion I drew is that the code framework that Edge Animate creates is complex, and I clearly don't understand it fully. Note that you do not have to understand it fully to use Edge Animate successfully and even push Edge Animate beyond its native limits by hand-editing some of the code it produces. (Again, Grover's book illustrates this extensively.) On the other hand, it can be difficult to take that code to places it wasn't designed to go (e.g. jQuery-UI).

I also conclude that Edge Animate may appeal primarily to designers (who may still dabble in some light scripting), and those who are called upon to produce HTML5 animations but prefer working with a timeline. If Adobe does a good job with quality assurance, so that even as the product becomes more complex, the animations produced still pass standards-compliance muster and run reliably across different platforms, Edge Animate should be a godsend to those users. (Being based on jQuery is definitely a good start for standards compliance and cross-browser compatibility.)

I have asked myself whether some might use Edge Animate to quickly set up the basics, and then dive deep into the underlying code to do the serious work. It's all right there and available. My question, though, is whether someone with the skills required to do that really needs Edge Animate at all? And to what extent they'd be willing to accept general-purpose auto-generated code in preference to their own hand-coded optimized stuff? I know I quickly ran into a case (the jQuery-UI example above) where I found it easier just to hand-code the whole thing.

Not that I'd stake my life on any prediction about Edge Animate. I wonder if I went back and read reviews of Macromedia Flash version 1.0 from 1996, how well I'd find any of them predicted the uses Flash would be put to in coming years?

 

Edge Animate Version 1.0 is currently available as a free download from Adobe Creative Cloud. At some point, it will cost $499 for a perpetual license or $14.99 per month for a single application subscription. Edge Animate will also come with a full Creative Cloud subscription ($49.99 per month paid annually, or $74.99 per month on an ad hoc basis).

"Adobe Edge Animate: the missing manual," by Chris Grover, was published by O'Reilly Media, Inc., in 2013.