Adobe Edge Team Blog

October 21, 2011 - Josh Hatwich

MAX Wrap – Interactivity and Real-World Use

Hello World: Edge Preview 3

Many of us on the Edge team had the opportunity to attend Adobe MAX in Los Angeles a few weeks ago. We launched Edge Preview 3 at the conference and had a number of well-attended sessions where we showed a glimpse of what is possible in Edge with Preview 3. The following post should help you catch up on what you may have missed or review what you caught live.

Download Edge & Review the API

If you don’t already have Preview 3 – download it here. The Edge API has detailed information about how to use the Edge JavaScript runtime.

Download Examples

Here are the Food Truck Examples I used in my presentation. They show “Rhako’s Ramen” in various stages of development. The website in its finished form consists of 3 Edge compositions running in a single page that are coordinated to play once all three are loaded.

A bit about Interactivity

Preview 3 added support for interactivity. All your code goes into xyz_edgeActions.js. You can edit the contents of that file in an external editor, just be careful to preserve the Edge comments. Each of the “bindings” correlates to a bit of UI in Edge:

The code for each Composition and Symbol (the stage is a Symbol) is contained by a closure. Closures help encapsulate code and prevent Edge code from polluting the window namespace where it might interfere with other JavaScript.

Real-World Example

To show how Edge content might be used we created the Rhako’s Ramen noodle site. We wanted the page to behave well, so it has a pre-loader and presents an alternate display (albeit raw) for down-level browsers. There is an animation that presents a twitter data feed and three separate Edge compositions are combined into one page.

The page was built as follows:

A) Sliced the Photoshop comp created by the designer and produced assets for the “truck” part of the composition.

B) Animated the “truck” preroll.

C) Sliced the comp to produce assets for the “map” part of the composition.

D) Animated and added code to build the “map”. There are 4 approaches that can be used to build the Map area of the page. Edge will add support for Symbols in a future Preview, but for now we have one timeline to work with and can jump around it to get to different states.

E) Sliced and coded the HTML for the overall index.html page. Animated and wired up a Twitter feed to the animated elements. It cycles through recent tweets. Also added a pre-loader animated .gif that shows until all of the compositions are ready to play.