What is adobe edge animate?

Adobe Edge Animate is a tool made by Adobe Systems to create animations graphically. The interface of the tool is similar to flash, which has timeline, motion tween, motion path etc., but the output files are not .swf or any other adobe dependent extensions, rather they are based on open source scripting languages like javascript, open source library like jQuery and HTML5, which makes it supportable in all the modern browsers. So we can call this tool, a web development tool. The tool itself is made using C++.

Comparing Edge Animate with Flash


1. Device Support: Though flash on android are not dead yet, but Apple Inc. refused to allow flash in any iOS device and this became the major cause of the birth of Adobe Edge. As Edge gives you output basing on HTML5 and CSS3, it supports in al modern browsers.

2. Dependencies:  To run flash outputs or .swf files you need to have flash player, but the modern world love open source where there won’t be much dependencies. So less dependencies are another major advantage with Edge.

3. File Size & Speed: The flash files are heavy in size, and thus takes higher time to get loaded, but in the other hand HTML files are very much light weighted. And bandwidth and speed, really does matter.

4. Responsive Nature: The flash files have fixed layout. If a flash document is having a dimension 800X500, it will be always like that only. You can scale it, but the placements of elements can’t be changed according to the device. HTML5 provides you this feature. It’s hard to get the responsiveness using Edge Animate, but Adobe Edge Reflow is a very nice option for this.


1. Less Drawing Tool: Though basic drawing tools are there, but if you are a flash developer, you will miss a number of drawing tools and features here in Edge Animate.

2. Shape Tween: You can animate to move or resize objects very smoothly. But when you will try to create a shape tween to change the shape of an object while animating, you won’t be able to create.

3. Masking: Masking, the feature which gives you the power of showing a particular portion of your stage or element, is missing here in Edge Animate.

4. Others: Many other features and effects like, burning fire effect, graduated transparency, brush outlines, procedural effects and so on are missing.

Is it a handy HTML5 development tool?

Well, it’s not basically a web development tool, the Edge Animate. Rather we can call it a tool to create the animation part very easily. Similar to any other tool, it also has its own pros and cons.


1. Saves your time: You need not to play with coordinates any more. Using Edge animate you can create your animations and movements visually.

2. Guided Motion Path: It’s easy to make linear motions in HTML5, but if I tell you to create an animation to move an object through my own zigzag or random path, it’s gonna be very very hard. But in Edge Animate it really becomes a matter of seconds.

3. Reusable Symbols: Edge Animate enables you to create symbols. With symbols, you can save elements, or groups of elements, and their associated actions for reuse in other projects. For example, if you create a slideshow using Edge Animate and save that project as a symbol, you can export it to your desktop and then import it into another Edge Animate project.

4. Visual Timeline: Using css keyframes you can have the timeline concept in your project, but Edge Animate provides you a visual timeline. So timeline or keyframe based animations have become very simple and you need not to do any mathematical calculation.

5. Customizable Workspace: Everyone doesn’t work in the same way, so an IDE with a static layout may not be acceptable for all developers. Based on that, Adobe made the interface of Edge Animate extremely customizable. You can even save custom views to use later. If you accidentally close a panel and can’t find it, you can always revert to the default view.


1. Runtime Code: Basically Edge Animate doesn’t provide you HTML5 outputs after publishing. If you open the html file in notepad, you will find a div with id=”stage” which also has an Edge generated class. Once you open the html file in browser, the corresponding javascripts start working and creates the elements at runtime and after that it starts the animation. Due to this, though it has become easier to copy a single div and paste to integrate with some other project or file, but at the same time, if you have to integrate more than one edge animate files to a single one, you may face the id conflicting issue.

2. Hard to modify the output code: To make the loading faster, or to force a developer to use Edge Animate, it makes the output files minified. So, it is very very hard to modify the internal code from outside Edge Animate. Though modifying the filename_edgeActions.js is a little easier comparing with the other two files.

3. Uses underscores and caps: Using underscore is not recommended in web development and few servers can’t differentiate between cases of the letters. So in some cases using underscores and capital letters may affect your web development. You can modify the filenames manually and change the link sources in the main html file.

Browser Compatibility and Dependencies:

“Browser Support”:

Edge Animate is still in preview mode and Adobe is targeting the recent stable versions of the modern browsers. Below are the details of the browsers along with version numbers which supports the edge animate output files.

ie IE – 9 and above

firefox Firefox – 22 and above

safari Safari – 5.1.3 and above

chrome Chrome – 28 and above

opera Opera – 16 and above


It basically uses two javascript libraries. One is the most popular library jQuery, and the second one is a library created by adobe itself, named edge.js. Both the files are called using ajax in the backend, you don’t have to bother about this. You will find these calls in the filename_edgePreload.js

1. Jquery – 1.7.1 and above

2. edge.js – 2.0 and above.

Where it can make the difference

Flash has certainly become a giant in the animation industry and there’s no doubt on that. Originated with the application ‘SmartSketch’, developed by Jonathan Gay, flash added many more powerful drawing and animation features time & again, and gradually integrated programming features with ‘Action Scripts’, which is an object oriented programming language. So, comparing Edge right away with Flash is little too early. Adobe Edge is in its very initial state. Of course with time Adobe will add more features and effects in it. But as a web developer I must say it reduces a lot of work especially when I’ve to make an animation.

The flash developers, who doesn’t know anything about HTML CSS or Javascript, they also can develop a html div, or page very easily using their flash development concepts. And, the most interesting thing is in this tool, if you hover on something, the tooltip doesn’t show the name of the tool, neither it shows a description. Rather it shows the html or css codes. So a html developer who doesn’t know flash, he also can develop things very easily.