Chapter 1. Introduction to Adobe Edge

Edge is an all-new tool from Adobe (currently in pre-release) which seeks to enable the authoring of motion and interactive experiences through HTML, CSS, and JavaScript in a manner consistent with other Creative Suite applications. Edge has the ability to create such experiences, due to advancements in browser technology and the need for a consistent, cross-platform solution across desktop and mobile operating systems. Over the course of this book, we will explore the basics of motion and interactivity in this new tool.

This chapter will delve into Adobe Edge itself, concentrating on the history of the Edge project, looking at the technologies behind Edge, comparing Edge with Flash Professional (as the two applications share many similarities), and finally having a brief look at the Edge welcome screen and how to create a new project.

Why we need Adobe Edge

Some may ask for an explanation as to why we need Edge when we have tools such as Flash Professional, which also creates animation and interactive contents for the web. There are a number of reasons for this, which we will now illustrate.

Flash Player restrictions

Traditionally, those of us designing animated or highly interactive content for the web have been able to rely on Flash Player to display this content without issue across Windows, Mac, and Linux. In fact, Adobe still reports that Flash Player is installed on 99% of desktop machines. There are problems though, now that we must account for mobile operating systems, which place restrictions upon, or even outright ban the Flash Player entirely. The most problematic of these platforms is Apple iOS. As Flash content is restricted from running within the iOS browser, designers have been searching for alternative ways of delivering experiences to these devices.

Note

It is worth noting that the Google Android and Blackberry QNX mobile operating systems both have robust Flash Player 11 support. However, Adobe has halted any further development for the mobile Flash Player after version 11.1. Others do have the option of licensing Flash Player and integrating it into their systems, as RIM continues to do for their QNX-based systems such as Blackberry 10 smartphones and PlayBook tablets.

Note

Though Apple iOS has banned Flash Player in the browser, Flash content can be distributed through the Apple App Store in the form of compiled applications, which target this platform. Similarly, other mobile operating systems such as Google Android and RIM Blackberry QNX also include full support for Flash-based projects through Adobe AIR.

The relationship between Adobe Edge and Adobe Flash Professional

Depending on the type of project we are working with, Edge might be considered as a competing product to Flash Professional. If we are looking to create a website landing page, rich menu system, or advertisement—then yes, Edge is definitely a competitor to Flash Professional. However, it is important to recall that Adobe produces many different tools, which produce similar output; just look at Photoshop and Fireworks for an obvious example of this.

When evaluating Edge in comparison to Flash Professional, we must take into account how new Edge and the concepts around it actually are. Flash Professional has over 15 years of history behind it. It is unrestrained by standards bodies and has a track record of rapid innovation when pushing web-based content beyond what HTML is traditionally capable of. Flash also benefits from compiling to a self-contained binary (.swf) and the powerful ActionScript 3 programming language.

While Flash Professional and Edge can do some things in a similar way, and can produce similar output in terms of motion and basic interactivity, for anything that goes beyond what HTML can handle on its own, Flash-based content is still a powerful extension for console-quality games, advanced video solutions, and other specific use cases.

Comparisons with Adobe Flash Professional

With the expectation that many designers approaching Edge will be coming to it with experience in Flash Professional, much of the tooling in Edge shares both functional and naming conventions used in that application.

Stage

The Stage can be thought of as the canvas upon which we are able to paint our scenes, or the frame within which all our action takes place. The Stage in Edge differs from the one in Flash in the way that its dimensions are controlled and the background color is applied. In Edge, the Stage is just another symbol.

Timeline

Flash Professional and Edge do share the concept of a Timeline; that is where the similarities end. The Flash timeline is frame-based while Edge includes a time-based timeline, similar to what is found in Adobe After Effects. In the end, these are just two ways of working with motion across time—in essence, this is what we are dealing with in either case.

Keyframes

Both Flash Professional and Edge give the user the ability to define keyframes across the project Timeline. Keyframes are points of distinction that define or modify various properties of an element across time. This is the most basic way in which motion is achieved in either program. Keyframes in Edge behave to a great degree such as those from Adobe After Effects.

Symbols

Symbols are reusable assets, whose instances can be used across a project. In Flash Professional, these may be movieclip, button, or graphics symbols. In Edge, there is no such distinction; though Edge symbols are most similar to Flash movieclip symbols in execution.

Library

Flash Professional organizes Symbols, Fonts, and Assets within a project Library. The Library panel is an organizational approach that provides easy access to the symbols. With Edge, we have a similar concept that also stores any symbols created for a project within that project's Library, exposed through the Library panel.

Actions

Actions in Edge can be compared with those in Flash Professional (Macromedia Flash 4). Each program has an Actions panel, which can be opened and closed as needed to access simple program instructions. In Edge, we can apply Actions to elements on the stage, and to the Timeline through Triggers.

As we can see from the previous screenshot, many of the panels present in Edge are derived from those which exist in Flash Professional. This makes the transition much simpler for Flash designers than it would otherwise be.

HTML technology maturity

For much of its history, HTML has provided a way for web designers to creatively markup content for rendering within a browser. With the draft HTML5 specification currently under development, this role has been expanded in some ways, which attempt to move beyond simple textual markup and into the rich-media space.

Note

Three tags often cited as examples of this are:

<video> - for simple video playback in HTML

<audio> - for simple audio playback in HTML

<canvas> - for programmatically rendering bitmap visuals in HTML through JavaScript APIs

Along with the core HTML specification, in development are a variety of additional specifications such as CSS3 that are intended to extend the core technologies of the web. We have also seen a great increase in the speed of JavaScript engines over the past couple of years, enabling greater use of the basic scripting language for the web. Add a number of frameworks (such as the popular jQuery [http://jquery.com/] framework) to this environment and we have quite a revolution in core web technologies.

Mobile deployment

Perhaps the single largest driving factor in the rapid evolution of core web technologies over the past two years has been the prevalence of advanced browsers on mobile devices. Due to the fact that mobile computing is still so new, users are not coming into this environment with old technology. This enables browser makers and device manufacturers to bundle web browsers with these systems that takes full advantage of HTML5, CSS3, and advanced JavaScript rendering engines.

Most mobile browsers are based upon the open source WebKit [http://www.webkit.org/] rendering engine. Couple this with the fact that prominent desktop browsers such as Google Chrome and Apple Safari also use WebKit for their rendering engines, and we have a widely adopted baseline to lean upon when developing experiences using newer technologies.