Adobe Edge Preview 3 Available Now!

To coincide with the kickoff of Adobe MAX in LA, we are releasing Preview 3 of Adobe Edge.  You can download it from Adobe Labs here.

Preview 3 is what I would call a major release.  It adds what we have referred to internally as “interactivity”, but it’s more than that.  It’s the ability to add JavaScript code from within Edge to do a whole range of things.  This has been the #1 requested feature from the community, so we’re really excited about finally being able to deliver it and to see all of the amazing things that people do with it.

In a nutshell, what it allows you to do is add JavaScript functions to handle DOM and animation events.  So, for example, you can handle when the user clicks or touches an element – we support both mouse and touch events.  In response, you can kick off an animation, modify part of the DOM or do anything else you like – it is HTML after allo.  Animation based events are those such as the animation is complete, or doing an update, etc.  This allows you to do looping or stopping playback at a certain point or a range of other things.

We’ve also added Labels that you can put on the Timeline.  These can help organize the timeline, but can also be used in the API and then referred to in API that accept timecodes.  Triggers are points on the timeline that fire an event that you can handle.

At the heart of these features are Actions, which are functions that you add to handle a single event. You can edit actions with the Actions Editor, which pops up to allow you to enter the code for the function. It also provides access to a library of snippets, which are useful not only for easily adding code to do common tasks, but also for learning the Edge API.

For objects that dispatch a range of events, such as DOM Elements (including the Stage), and the Timeline, you also have the ability to add handlers for different events – you pick the event and then add the code for that event handler.  For Triggers, which currently fire just one event, you can immediately enter the body of the event handler function.

As part of this, we’ve also opened up the Edge animation framework API.  Previously, we hadn’t documented it, though we did post some snippets to help people do simple things, such as looping or handling clicks.  A key reason we had held back was that we had wanted to simplify how to use it and we’ve done that.  For example, previously to play the timeline, you would do something like the following:

      $.Edge.symbol.get($(“#stage”)).play(“Default Timeline”);

We’ve now simplified it so that it looks like this:

      this.play();

All of the code that you create is stored in a JavaScript file that is separate from the one that Edge creates to store its timeline animation and content to inject.  The file only contains Actions code.  We did this so that you can edit this code outside of Edge, in the editor of your choice. In fact you can do so while Edge is running – just save it and Edge will prompt you as to whether it should load the updated file.  Give it a try!

In addition to the coding features, there are a bunch of other great things that we’ve added as well.   Copy and paste has been enhanced so that it’s more reliable and you have more control, and you can even copy transitions from multiple objects to multiple objects, which is really useful. We’ve also modified the way that we bind to elements to support hosting multiple Edge compositions on an HTML page.  One of my favorite new features is a set of commands to toggle whether the selected animated elements or all elements are expanded or collapsed in the Timeline Editor.  Very useful for working on large animations!  You can read about the complete list of features here.

Overall, this is great release with a lot of features that have been asked for since day one.  You asked we delivered!

So check it out and let me know what you think!