Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
LIBRARY:TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS Feed

Adobe Edge Animate/The Missing Manual Software/Book Review

COW Library : Adobe Flash : Michael Hurwicz : Adobe Edge Animate/The Missing Manual Software/Book Review
Share on Facebook
CreativeCOW presents Adobe Edge Animate/The Missing Manual Software/Book Review -- Adobe Flash Review


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.

 


  Adobe Flash Tutorials   •   Adobe Flash Forum
Reply   Like  
Share on Facebook


Related Articles / Tutorials:
Adobe Flash
HTML5 (CreateJS): Interactivity and Debugging

HTML5 (CreateJS): Interactivity and Debugging
  Play Video
Building on two previous tutorials on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz introduces interactivity (specifically, responding to a mouse click), debugging using the JavaScript "alert" statement, and assigning names to objects exported from Flash. Project files included.

Tutorial, Video Tutorial
Adobe Flash
HTML5 (CreateJS): Animate with JavaScript

HTML5 (CreateJS): Animate with JavaScript
  Play Video
Building on a previous introductory tutorial on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz shows how to modify the JavaScript exported from Flash, to change attributes such as position, speed, wait time, and color. Project files are included.

Tutorial, Video Tutorial
Adobe Flash
HTML5 (CreateJS) for Adobe Flash Professional CS6

HTML5 (CreateJS) for Adobe Flash Professional CS6
  Play Video
Creative COW leader Michael Hurwicz provides a brief introduction to CreateJS, an extension for Adobe Flash Professional CS6 that allows you to export Flash projects as HTML and JavaScript, even on platforms that do not support the Flash Player.

Tutorial, Video Tutorial
Adobe Flash
Building an Interactive Whiteboard in Flash: Part Two

Building an Interactive Whiteboard in Flash: Part Two
  Play Video
In part two of this series, Justin Junda walks you through the necessary steps to connect the graphical elements from part one, with Actionscript 3.0 using the Flash drawing API in order to bring this whiteboard to life.

Tutorial, Video Tutorial
Adobe Flash
Building an Interactive Whiteboard in Flash: Part One

Building an Interactive Whiteboard in Flash: Part One
  Play Video
In this tutorial, Justin Junda takes you through the step by step process on how to build and interactive whiteboard. These whiteboard are often seen in drawing applications, scratch pads, and educational sites. This is part one of a two part series. Part one takes you through setting up all the graphical elements within the stage. Then part two shows a user how to connect the graphics to Actionscript using flashes drawing API to make this whiteboard truly interactive.

Tutorial, Video Tutorial
Adobe Flash
Embedding a Speech Transcript in a Flash Video with Adobe CS5

Embedding a Speech Transcript in a Flash Video with Adobe CS5
  Play Video
In this tutorial, Creative COW Leader Michael Hurwicz shows you how to create a scrolling transcript synced with a Flash video, using Adobe Creative Suite 5 (Story, OnLocation, Premiere Pro, Soundbooth and Flash Professional).

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics - Springs

Inverse Kinematics - Springs
  Play Video
Springs are a new feature for Inverse Kinematics in Flash CS5. In this video tutorial, Creative COW leader Michael Hurwicz shows you a simple technique for implementing springs, as well as several other "tricks and traps" to make your work with Inverse Kinematics in Flash easier, more flexible and more powerful.

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics - Control Points

Inverse Kinematics - Control Points
  Play Video
Fine-tune your Inverse Kinematics animations in Flash CS5 by working with control points. In this Adobe Flash video tutorial, Creative COW leader Michael Hurwicz shows you how to associate bones with control points, how to move, add and delete control points, and how to adjust control point handles.

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics

Inverse Kinematics
  Play Video
Inverse Kinematics allows you to create structures of bones and joints and use them to animate characters in Flash. Fun and easy! Creative COW leader Michael Hurwicz shows you how in this video tutorial, step by step. Learn some basic ActionScript, too!

Tutorial, Video Tutorial
Adobe Flash
Creating an Interactive Snow Globe with Action Script 3.0

Creating an Interactive Snow Globe with Action Script 3.0
  Play Video
In this tutorial, Chris Smith and Scott Hiers from Domani Studios create a shake-snow globe using Flash CS4 and Action Script 3.0. In this tutorial, you can either watch the video or follow along with the text tutorial below.

Tutorial, Video Tutorial
MORE


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]