Joseph Labrecque gives a presentation on Adobe Edge, a new web motion and interaction design tool from Adobe. Adobe Edge allows designers to bring animated content to websites using web standards like HTML5, JavaScript, and CSS3. It addresses the lack of solid tooling for HTML animation and interaction. Adobe Edge borrows concepts from Flash Professional like the stage, actions, and a standardized runtime model, but uses a timeline and keyframing approach more like After Effects. Edge content does not replace what can be done in Flash, but provides new choices for the tooling and technologies used.

1. MOTION AND INTERACTION:
ADOBE EDGE
Joseph Labrecque
RMAUG miniMAX | November 8th 2011

2. 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/

3. Adobe EDGE

4. 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.

5. HTML vs. Flash

6. Not quite…

7. 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.

8. Let’s move on…

9. WHY ADOBE EDGE?
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.

10. EDGE THEN… (Adobe MAX 2010)

11. EDGE NOW! (Adobe Edge Preview 3)

12. FAMILIAR CONCEPTS
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.

13. Edge Demo Time

14. TAKE-AWAYS
• 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.

15. HTTP://LABS.ADOBE.COM/

16. Thank you.
@JosephLabrecque