Edge Animate

Adobe Edge Animate Main article: Adobe Edge Animate On August 1, 2011, Adobe announced the development of Edge as a new multimedia authoring tool to succeed the Flash platform for browser-delivered content, and released a preview version of the software.

  1. Edge Animate Cc 2015
  2. Edge Animate Examples
  3. Edge Animate
  4. Adobe Edge Animate Cc Download
Edge animated gifs

Anatomy of an Edge Animate Composition

Foundation Adobe Edge Animateis a project-oriented book that will walk you through the features ofEdge Animate - Adobe's exciting new motion and interaction tool forweb standards development. Edge Animate is an application that allows web designers and developers to make full use of many of the features of CSS3, JavaScript, and HTML5. Learning Timeline and Transition Techniques The art of animation is all about images changing over the course of time in a natural, pleasing, and entertaining manner. It’s the - Selection from Adobe Edge Animate Preview 7: The Missing Manual Book. Adobe Edge Animate is not a trend setter yet, but it can turn out the be exactly what you are looking for, if what you are seeking is an environment capable of providing high-quality contemporary.

Edge Animate Runtime

Edge Animate animations depend on the Edge timeline and symbol JavaScript libraries. This documentation corresponds with version 5.0 of those libraries.

You can download an un-minified version of the Animate runtime and preloader for your reference here. It is provided under a BSD-type license (as-is) for debugging, advanced scripting, general curiosity, or however you choose to use it. Use and modification of these files are neither supported nor covered by any tier of Adobe support -- please exercise discretion and use at your own risk. The Animate runtime are covered under this license.

CDN Hosting

Using the Adobe Content Distribution Network (CDN) is a great way to speed up Animate composition delivery. Compositions using the Adobe CDN all share a single URL for jQuery and the Edge Runtime. The browser caches the runtime, so the user only downloads the library once no matter how may Animate compositions they view, even if compositions are on different sites and produced by different authors.

Don't use the CDN if your composition needs to run without an Internet connection or if you want to use your own hosting exclusively.

The Animate Runtime CDN uses the following URL:

<script type='text/javascript' charset='utf-8' src='http://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js'></script>

The HTML page

Edge Animate inserts a single JavaScript tag in the of the HTML page, which allows the composition to download progressively.

Note: When debugging (especially in Chrome or Safari) you may need to refresh the browser in order to see all the files used by your composition.

<!--Adobe Edge Runtime--> <script type='text/javascript' charset='utf-8' src='edge_includes/edge.5.0.1.min.js'></script> <style> .edgeLoad-EDGE-1689000495 { visibility:hidden; } </style> <script> AdobeEdge.loadComposition('project-name', 'EDGE-1689000495', { scaleToFit: 'none', centerStage: 'none', minW: '0', maxW: 'undefined', width: '550px', height: '400px' }, {dom: [ ]}, {dom: [ ]}); </script> <!--Adobe Edge Runtime End-->

The last two parameters are the preloader and downlevel stage DOM respectively.

Important: You must leave the comments intact in order to use the file in Edge Animate.

JavaScript files


The project-name_Edge.js file contains JSON-format symbol definitions (graphics and timelines). Edge Animate overwrites this file each time you save a composition while using the application. It's recommended you only edit this file with an understanding of the Javascript language, as any information Edge Animate does not understand will be lost.


Edge Animate uses anonymous functions to provide encapsulation and restriction of variable scope. The entire project-name_edgeActions.js file is contained in a single anonymous function scope. This provides a place where you can define composition-scoped variables or functions. Be sure to define variables using var and functions using a locally scoped syntax.

Edge Animate Runtime & jQuery

Earlier versions of Edge Animate Runtime used to depend on jQuery. This dependency has been removed in version 5.0.1. However, Edge Animate runtime provides a basic implementation of $, exposed as AdobeEdge.$, with support of basic jQuery selectors and some of the commonly used jQuery APIs as listed below:

List of jQuery equivalent APIs available directly in Edge Animate runtime
  • addClass
  • append
  • attr
  • bind
  • css
  • each
  • empty
  • eq
  • get
  • hasClass
  • height
  • hide
  • html
  • is
  • offset (Only getter, no setter)
  • parent
  • parents
  • remove
  • removeClass
  • show
  • text
  • trigger
  • unbind
  • width

If you include jQuery as an external script in your composition, then Edge Animate Runtime redefines AdobeEdge.$ to jQuery and starts using the same internally. Thus any of the Edge Animate APIs which returns a wrapper, will now return a wrapper of type AdobeEdge.$. However, if jQuery is included in the composition as an external script, or is loaded before the edge runtime in the html page then the APIs will return a jQuery wrapper.


Edge animate adobe
var myVar = 'This is scoped and should not conflict with other code.';


myVar = 'this is global and might conflict with other code in the page';


function handleClick() { alert('This is scoped properly and should not conflict with other code.');

Edge Animate Cc 2015


Edge Animate Examples

Edge Animate
window.handleClick=function() { alert('This might conflict with other code in the page.');

Edge Animate

Work with elements directly

Often it is necessary to access the underlying HTML Elements. This is especially useful when handling a click event. For example, the code to access an underlying element with the name TextOne is sym.$('TextOne');

Adobe Edge Animate Cc Download

Accessing imported HTML content through actions can be done by using sym.$('#myId'); to target the ID or class of your element. You can also use this method to target DOM elements which live outside of the Edge Animate composition. For example, sym.$('footer');