Adobe Edge Animate: Introduction

Adobe Edge Animate: Introduction

Recently, I had a chance to try out Adobe Edge Animate. As a front-end web developer, I tend to work mostly with text editors and FTP clients more than the “design” programs. It was an interesting opportunity to work with more design-type product. I had reviewed 3DCart before and enjoyed it, so I decided to do another review post.

What is Adobe Edge Animate?

Adobe Edge Animate is a fairly-new product by Adobe. It was released in 2011 as Adobe Edge. Now, however, there is an Adobe Edge suite with many different programs included. Adobe Edge Animate is part of that suite. The newest version is Adobe Edge Animate CC, and it is available through the Adobe Creative Cloud.

A replacement for Flash?

Edge Animate’s interface looks very much like Flash’s. Just as in Flash, Edge Animate also has a timeline where you can control the animation. Edge Animate also uses terms similar to Flash such as “stage” and “symbols.”

So is Edge Animate a replacement for Flash? It may be. Although Edge Animate is not as robust as Flash yet, it is capable of handling complex animations and could be implemented with responsive design as well. The biggest edge that Edge Animate has on Flash is that animation created with Edge Animate will work with many browsers, including mobile browsers. Flash uses ActionScript that is not supported by many mobile browsers. Unlike Flash, Adobe Edge Animate uses HTML, CSS, and JavaScript to build applications.

Using Edge Animate

adobe-edge-animate-interface

Using Edge Animate is fairly simple. Most of the animation is done through the interface shown above. The interface is very reminiscent of Flash. The above illustrates the interface for Adobe Edge Animate version 1.5.

Adobe Edge Animate File Structure

When a project is saved, Edge Animate generates a number of files: a simple HTML file and many JavaScript files. The HTML file will look something like below:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="example_edgePreload.js">
</script>
    <style>
        .edgeLoad-EDGE-4701315 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
	<div id="Stage" class="EDGE-4701315">
	</div>
</body>
</html>

As you can see, Adobe Edge Animate uses HTML5 doctype. The HTML file is fairly simple. The “magic” happens with the JavaScript files. All the other JavaScript files will be loaded from the one JavaScript file included in the HTML file, and these files make the cool Edge Animate effects possible.

Conclusion

Overall, Adobe Edge Animate is an interesting program and has a lot of potential. If Adobe Edge Animate interests you, please check out the review on Adobe Creative Cloud.

By: Blueprint