MOTION AND INTERACTION: ADOBE EDGE

Joseph Labrecque

RMAUG miniMAX | November 8th 2011

WHO AM I? Joseph Labrecque, MA University of Denver - CTL Senior Interactive Software Engineer Adjunct Faculty Fractured Vision Media, LLC Proprietor

Twitter: @JosephLabrecque Web: http://josephlabrecque.com/

Adobe EDGE

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

HTML vs. Flash

Not quite…

Flash and HTML are not in any way enemies or opposed to one another. Both can serve very different purposes and both are useful in many different (and sometimes similar!) circumstances.

Let’s move on…

There is no solid, widely adopted tooling support for HTML animation and interaction. • Adobe has a long history or web and animation tooling:

– After Effects – Flash Professional – Dreamweaver – Edge

• As libraries and specifications mature, we can begin using these tools to effectively create content in support of the technology.

WHY ADOBE EDGE?

EDGE THEN… (Adobe MAX 2010)

EDGE NOW! (Adobe Edge Preview 3)

Edge borrows much of its animation and interactivity from Flash Professional. • The concept of a Stage. • The idea of Actions. • A standardized runtime model.

(The “Adobe Edge Runtime”) • Note that Actions in Edge are similar to Flash 4 Actions.

However, the timeline and keyframing is more akin to that found in After Effects.

FAMILIAR CONCEPTS

Edge Demo Time

• Edge content does not in any way replace what can be done in Flash… but now we have choices with the tooling we use and what technology to target based upon specific project guidelines.

• Adobe Edge is a new tool and functionality is in a period of major flux.

• The concepts in Edge should be familiar to those who have done animation in Flash.

TAKE-AWAYS

HTTP://LABS.ADOBE.COM/

Thank you.

@JosephLabrecque