Adobe Edge Animate Team Blog

December 14, 2011 - Rich Lee

Adobe Edge Preview 3 is expiring on 12/31: Please download Preview 3.1 for an extension

Today Edge Preview 3.1 was released on Adobe Labs. Preview 3 is set to expire on December 31, 2011, regardless of when it was installed. Preview 3.1 extends the expiration until Preview 4 is available in January.

To continue using Edge, please follow these steps:

Uninstall the version you currently have.
- Mac: Run the Edge Uninstaller in the folder named “Adobe Edge Preview”, located in Applications
- Windows: Uninstall “Adobe Edge Preview” using Add or Remove Programs
Download Edge Preview 3.1
Unzip the file and run the Adobe Installer

We intended to release Preview 4 before Preview 3 expires, but we feel it needs more work before making it available. We are VERY excited about the new features we’re working on, and think it will be worth the wait. Preview 4 will introduce:

Symbols: Create reusable objects that animate and interact independently of the main composition.
Persistent Code Panel: Easily navigate to any code in your composition.
Element Display: Manage an element’s lifetime so they’re displayed only when needed.

Preview 4 will also include improvements to usability, as well as fit and finish.

Thanks for using Edge and being a part of our community. We’re sorry for the trouble and appreciate your understanding. Stay tuned for more updates on Preview 4, and Happy Holidays!

Regards,
Rich

4:47 PM Comments (19) Permalink

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.