Adobe Edge Preview 3 Available

Adobe Edge Preview 3 is now available on Adobe Labs:

http://labs.adobe.com/technologies/edge/

Edge is Adobe’s new Motion and Interaction Design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3. Below, I’ll briefly cover a few of the new additions in Preview 3 and hopefully give you some background and tips that help to get you going.

Preview 3 adds support for interactivity in the form of actions and timeline triggers which execute a custom JavaScript function, defined by you, whenever a specific event occurs on an element, or a time offset within a timeline has elapsed. Actions and triggers provide powerful hooks for manipulating the timeline, elements on the page, or for calling out to your application specific code to accomplish some task. To kick-start the use of actions and triggers, a small library of code snippets has been provided in both the actions and trigger panels in Edge, which allow you to insert the code for common tasks with just a click of a button. The snippets are a great way to get a feel for the types of things you can do with an action or trigger. It’s also a good way to start learning the basics of the Edge Runtime API which the team has started to document here:

http://adobe.com/go/edge_jsapi

Since the Edge Runtime itself uses jQuery 1.6.2, the code for your custom action/trigger functions can make full use of the jQuery core API.

Here are some things to keep in mind when writing your custom event/trigger functions:

  • Your actions and triggers are written to a JavaScript file with the same name as your HTML file, but with an “_edgeActions.js” appended to it. So for example, if you saved your composition to “foo.html”, you will find your actions and triggers in a file called “foo_edgeActions.js”.
  • Within the Actions and Trigger panel, you only type in code for the body of your custom function. You will never have to type the function keyword, or the function signature and curly braces. The Edge Runtime will call your code as if it were defined in a function with one argument named ‘e’, which is the event object for the event your action was bound to. So for example, if you added a “click” action to an element that displays an alert() with the coordinates of the click, you would type something like the following into the Actions panel:
    
    
    	// Display an alert to show the coordinates
    	// of the event.
    
    	alert(e.type + “ event was triggered on #” + e.target.id + " at " + e.pageX + ", " + e.pageY);
    
    

    When you actually click on the element, the Edge Runtime will call your code as if it were declared in a function like this:

    
    
    	function ( e )
    	{
    		// Display an alert to show the coordinates
    		// of the event.
    
    		alert(e.type + “ event was triggered on #” + e.target.id + " at " + e.pageX + ", " + e.pageY);
    	}
    
    
  • The “this” reference within your custom function will always be the symbol instance that contains the element or timeline your action/trigger was bound to. For preview 3, this symbol instance is always the stage. This makes manipulating the timeline easy since you can simply call this.play() or this.stop() directly on the stage object from within your custom function. For instance, one common question folks have is how to create an animation that loops continuously? In Preview 3 you would simply create a trigger at the very end of your timeline, and add the following code to your custom function:
    
    
    	// When this trigger is hit, restart the timeline by
    	// calling play with a time offset of zero.
    
    	this.play( 0 );
    
    
  • When creating closures within your custom function, make sure you save an instance of the “this” reference in a local variable if it is used within the closure.
    
    
    	// Save the symbol into a local variable
    	// so that we can refer to it from our
    	// our closure passed to setTimeout().
    
    	var stage = this;
    
    	setTimeout(function() {
    		stage.stop();
    	}, 60000);
    
    
  • The output for Preview 3 has been modified in such a way that allows for multiple Edge compositions to be combined into a single HTML document. Since compositions are created independently, and sometimes by different people, there is always the chance that the names used for objects within these compositions could collide. To get around this the Edge Runtime dynamically maps object names into unique ids. When using some of the code snippets, mentioned above, you may notice the use of a symbol method called lookupSelector(). This method converts the object name into a unique CSS id selector that can be passed to jQuery so that it can actually find the object/element in the DOM.
    
    
    	$( this.lookupSelector( "Text1" ) ).hide();
    
    

If you want to manipulate the timeline or one of the elements within the stage from a context outside of an action or trigger function, you will need to know this little tidbit. The stage for every composition is tagged with a unique class name. If you look at the HTML document for your Edge composition, you will see a div within the body that looks something like this:



	<div id="stage" class="EDGE-1952485">
	</div>

You can use this class name to get a reference to the stage object so you can manipulate the timeline for that stage, or to find a particular object within the stage:


	//in yourCode.js

	var stage = Edge.getComposition("EDGE-1952485").getStage();
	$( stage.lookupSelector("Text1") ).hide();

When creating your own Actions within Edge, you’ll notice options for binding to the usual mouse and touch events. You might also notice that there are a set of events that have the same name as the mouse events, but are prefixed with the lettter ‘v’:

  • vmouseover
  • vmousedown
  • vmouseup
  • vmouseout
  • vclick

The idea behind these “virtual” mouse events is to allow you to bind your action function to a single event that, under the hood, can be triggered by either a native mouse event, or the equivalent touch event on a touch device. The event object that is actually passed into your callback function is normalized to look just like a normal mouse event, so you can write your function to consume this virtual event like you normally do with mouse events on the desktop. Support for these virtual events is actually provided through the use of the standalone jQuery Mobile virtual mouse plugin which hides a lot of the complexity involved when dealing with both mouse and touch events, especially on devices that support both.

That’s about it for now. Download Edge Preview 3 and try-out the new interactivity features within your compositions. Please send any feedback, questions and requests, and samples of the compositions you’ve built, to the team via the Edge forum:

http://forums.adobe.com/community/labs/edge/