by Josh Hatwich


February 3, 2012

Edge Preview 4 is now available for download on Adobe Labs! Preview 4 adds major new capabilities like Symbols and Web Fonts, but also has a number of refinements including tweaks to the JavaScript API. The following interactivity changes are in Preview 4.

Resolving Selectors

In Preview 3 we introduced an API that allows you to lookup a selector within a Symbol:


In almost every instance the reason you lookup a selector is to pass its result into jQuery like this:


We’ve streamlined this call in Preview 4, so now you can get the same result by doing this:


vMouse is being Depreciated

We decided to remove the vMouse options from the Edge UI in Preview 4. The idea behind vMouse is that you can write code that depends on mouseover / mouseout logic and still have it work on touch devices. We came to understand a few problems with the practice of using vMouse and decided the additional complexity was worth avoiding. In case you are wondering the problems come about when the Element changes on mouseover. Imagine a mouseover script that hides the Element. On the desktop you never get a chance to issue a click to the object, but on a touch device vMouse would synthesize vMouseover on the way to handling a click. These kinds of things can be tricky to find and resolve, so we decided to keep it simple and recommend using the raw browser events.

If you used vMouse in Preview 3, Edge will still recognize it and vMouse events will still work in Preview 4, you just won’t be able to add them via the UI. The related JS file is still bundled with Edge, so your content should keep working.

Working with Multiple Compositions

Preview 3 added the ability to place multiple compositions on a single web page and in Preview 4 we’ve made that a little easier. Preview 4 has a single-line JavaScript include for each of your compositions, so you don’t need to coordinate the shared libraries and such. You still need to specify stage elements for each composition using the Composition ID as the class name for the stage.

Showing / Hiding Elements

In conjunction with the Element Display feature that we added in Preview 4 there is a slight change to the behavior of Managed Elements around creation time. Managed Elements are the graphical components and text you create in Edge (vs. Static Elements that you define in your HTML markup directly). The change is that Edge now hides all Managed Elements at creation time and then sets their initial display state when all resources are downloaded and the composition is ready to play. This is done to avoid showing the content pop in as it arrives on the network.

Symbols & Playback Commands

In Preview 3 playback control was only available via triggers. Since Edge doesn’t execute triggers on its stage, the effect they have on the animation is only apparent when you are running in the browser. Playback commands allow you to scrub into Symbol timelines and can be a more effective means to control the timeline than one-line triggers.

Pardon the dust!

The Edge APIs will be evolving as we iterate and incorporate your feedback. We appreciate your patience as we tweak the runtime. As you try things, please bring your questions and engage the Edge team on our forums.