What is adobe edge animate?
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.
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:
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 – 9 and above
Firefox – 22 and above
Safari – 5.1.3 and above
Chrome – 28 and above
Opera – 16 and above
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.
Still having issues?
If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.