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.
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.
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.
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.
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.
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.
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.
 |
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 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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
|
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 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.
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 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.
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.
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.
Generally, Edge can be used to create many of the same types of animations and interactions that we would have expected Flash Player to handle on the web in the mid to late 1990s. This includes the movement of visual objects across the stage and basic mouse interactions.
 |
Note
Although it is now possible to create website intros, rich ads, and other motion content using a tool such as Edge, designers should be careful not to replicate the nuisances of the past. The web doesn't need more "Skip Intro" landing pages.
Edge uses an all-new timeline for producing motion which borrows a lot from other applications such as Adobe After Effects. Through the use of keyframes along the Timeline, designers have very fine-grained control over many object properties and can easily enable easing algorithms, which provide an additional flair to animated content. In many ways, the Edge Timeline is superior to that found in other animation programs due to the level of control a designer is provided, and how richly control over these properties is enabled through the tools.
Edge is not just about making things move. The Edge Runtime also includes a robust API to enable interactivity through mouse, touch, and time-based Actions. These interactive commands can be applied to individual visible objects upon the stage, or used along the Timeline in the form of Triggers. Interactivity can modify aspects of the stage Timeline, modify the properties of other objects within an Edge project, or even invoke calls to content outside of the project.
During the 2010 Adobe MAX conference in Los Angeles, California, Adobe engineers got on stage in front of over 5,000 attendees to present a software prototype built in Adobe AIR. This software allowed a user to adjust the properties of imported assets in a way very similar to the workflow of Flash Professional, but instead of outputting to SWF to target the Flash Player, the "Adobe Edge Prototype" actually output content to HTML, CSS, and JavaScript for playback in a web browser without the need for any additional plug-ins.
Note
Adobe AIR is a solution for creating desktop and mobile applications built on Flash Platform technology. Many Adobe products are built using AIR, including the new touch applications for use on Android tablets.
 |
This was the first glimpse of what would eventually become the product we know today as Adobe Edge. Since that time, Adobe has released periodic updates to the "Adobe Edge Preview" releases on Adobe Labs with the intention of gathering user feedback early and often in order to make the product conform to user expectations and become a useful addition to the Creative Suite.
With Adobe's long history of motion and interactivity in products such as Director, After Effects, and Flash Professional, Edge has an excellent lineage behind it; and while creating such content which targets HTML is quite new, the tools and techniques for authoring this material comes to us along a well-trodden and mature path.
Adobe Edge relies heavily on three related technologies: HTML, CSS, and JavaScript. There are also specific JavaScript libraries that play an essential role in making all of this work together. These include jQuery and the Adobe Edge Runtime. In order for Edge content to work successfully, all of these components must be in their correct place, and there are certain files which should not be edited once generated by the application. The Edge application itself also requires an .edge file type to be present in order to author and edit a project.
Note
Note that any .html file can also be opened up within Edge and be worked upon. An .edge file and associated imports will be created upon saving and publication.
Edge primarily targets HTML for display, supported by both CSS and JavaScript. Why? Well, the fact is that these technologies have finally become capable of handling rich motion and interactive content and as they are the core technologies of the web, it really only makes sense to use them whenever we can.
Let's have a quick look at these three specifications in light of their primary function on the web and relation to one another.
Hyper Text Markup Language is the core of the web. With the HTML5 specification (still in draft), we not only have an organic evolution of the language through additional semantic tags, but also a new set of APIs, which can allow elements within the documents to be greatly influenced through JavaScript.
Cascading Style Sheets determine to a great extent how a website is visually structured and designed. With the CSS3 specification (still in draft), designers can also be used to influence the way certain elements behave.
The JavaScript language is a superset of ECMAScript (ECMA-262) Edition 3, formalized by ECMA International, a worldwide standards body. The latest version of the language is JavaScript 1.8.5 but the real improvements in recent years have come from the browser manufacturers themselves, as they seek to improve JavaScript execution through the development of faster JavaScript engines.
When we look into an HTML document produced by Edge, we see the following:
<div id="stage" class="EDGE-937066003"> </div>
This is the Stage Symbol element within which all other elements are injected upon runtime, through the use of JavaScript libraries.
It is no exaggeration to state that jQuery is the most popular JavaScript framework in use today. Many similar JavaScript frameworks arose in 2007 with the emergence of AJAX (Asynchronous JavaScript and XML) and more dynamic HTML data transfer methods. At one point, there existed over 250 of these frameworks, but with the passing of time, only a handful remains in active development.
As stated on the project website, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. In a nutshell, jQuery aims to make JavaScript more tolerable, more consistent across browsers, and more powerful in its simplicity. Documentation for jQuery can be found online at http://docs.jquery.com/.
Adobe Edge leverages jQuery and builds upon it within the "Adobe Edge Runtime" and also makes use of the jQuery library when dealing with motion. When opening any HTML generated by Edge, we can see these includes in the head of our published document.
JavaScript Object Notation is a data-interchange format used to exchange data from one system to another. Over the past few years, it has been adopted by a variety of languages and systems for both data transmission and storage. In some ways, it is very similar to XML. Unlike XML, JSON is not a markup language but rather stores data in objects and structures represented in name/value pairs.
Edge uses JSON to store element definitions and attributes with a project. For example, the following JSON fragment represents a red rectangle on the stage:
content: {
dom: [
{
id:'Rectangle',
type:'rect',
tag:'div',
rect:[117,56,185,185],
fill:['rgba(192,192,192,1)'],
stroke:[0,"rgba(0,0,0,1)","none"]
}],
symbolInstances: [
]
},
To learn more about JSON visit http://www.json.org/.
The set of JavaScript libraries used in an Edge project is collectively referred to as the "Adobe Edge Runtime". Normally, when we think of a runtime, we are talking about a piece of software such as Flash Player, the Adobe Integrated Runtime (AIR), or the Java Runtime Environment. These are all self-contained pieces of software that enable the playback of applications and other content, which targets these specific runtimes. The Adobe Edge Runtime is very different in that it is a set of files that supports the content defined through the Adobe Edge application, but even these libraries rely upon another piece of software for them to run properly: the web browser.
If you look within an HTML file produced by Edge, you will see a JavaScript include, which handles the runtime libraries included within the head of that document.
<!--Adobe Edge Runtime--> <script type="text/javascript" charset="utf-8" src="BasicEdgeProject_edgePreload.js"></script> <!--Adobe Edge Runtime End-->
Before moving on, we'll want to be sure that Adobe Edge is installed and running properly on our system. We'll also have a brief look at the Edge interface and see how to create a new project.
To complete the demonstrations and examples included in this book, you'll need to acquire a copy of Adobe Edge itself. Edge can be installed as a trial from Adobe Labs. To download a trial version of Edge, you may use the following URL: http://labs.adobe.com/technologies/edge/
Adobe Edge can be installed on the following systems:
Microsoft Windows 7
Apple Mac OS X [10.6]
Note
Note that installing Edge on Microsoft Windows XP or Apple Mac OS X [10.5] are not supported in any way.
Once the Edge installer has been downloaded to your local machine, locate the installer and execute it using the usual method for your specific operating system.
 |
The installer will initialize, during which we must ACCEPT the software license agreement.
We are then able to install a trial version. As this is a pre-release product, we cannot input a valid serial number.
The final screen will allow us to make some choices about where exactly the installer will install Edge on our local machine, and the language that will be installed. We are also presented with an indication of how much space Edge will occupy once it has been installed upon a particular machine.
Clicking FINISH will complete the installation process using the choices we have made. It may take a few minutes for the installation to complete, depending upon your individual hardware setup.
We are now ready to begin using Adobe Edge. Locate the start up icon on your machine to run the application.
When starting the Adobe Edge application, we'll be presented with a welcome screen. This is very similar to the welcome screens available in other Adobe applications, as it presents a number of options for us to get started using the product.
 |
These options include the following:
Create New: This option will enable us to create a brand new Edge project. We will detail the specifics of this in the next topic.
Open File…: When we choose this option, a local filesystem browse dialog will open for us. This allows us to browse the filesystem to locate Edge projects that are already under construction. Edge documents have the file extension
.edge.Recent Files: Any Edge projects that were previously opened within the application will be listed under this option. Opening these projects is as simple as clicking upon the project name.
Other options: The welcome screen also includes some social-media buttons that allow users to connect with the Edge team on Facebook and Twitter. There are also resources listed for learning how to get started using Edge for those who are new to the application, and sample projects, which we can download.
There are two ways in which we can create a new Edge project. The first option is to simply click Create New on the welcome screen. This will immediately create a new Edge project with a blank stage. The second method of creating a new Edge project is through the File menu. Simply clicking on File and then New will have the exact same effect.
 |
Whichever method you choose, you will now have a new project opened within Edge. This project will look quite scarce to begin with, as it basically consists of a single, blank stage symbol. This stage is representative of the single<div> that we can locate within the HTML file, which Edge produces upon saving.
 |
After our project has been created, the first item of business is to actually save the document.
To save a document in Adobe Edge, we can go to the File menu and choose either the Save or Save As… options.
This option will either save the current document, if it has been previously saved to the filesystem, or it will prompt the user to provide a filename and location to save the document if this happens to be a new project.
The keyboard shortcut for this option is Ctrl+S (Windows) or Command+S (Mac).
Similar to the Save option, this provides the same functionality but will always prompt the user for a filename and location through a system dialog. This is useful when saving separate versions of the same project, or when you simply want to save the project to a new location.
The keyboard shortcut for this option is Ctrl+Shift+S (Windows) or Command+Shift+S (Mac).
 |
In the case of a new project, either option will provide us with a filesystem dialog. We see from the previous screenshot that what we are actually saving is an .html file. This is an important thing to remember about Edge projects: when we are working in the Edge authoring environment, we are really working in real time with the content that is being produced.
As we save our Edge project, a number of files are produced and included in the location we specified when naming the initial .html file. We'll have a look at each of these files, and what their specific purpose is within our project.
 |
{project_name}.edge:The.edgefile produced along with the project simply preserves properties within the authoring environment. Examples of these properties include whether certain elements are twirled down through the Elements panel, specific colors, and fonts used in the project. This file allows environment settings to be preserved across sessions.{project_name}.html:The.htmlfile serves many purposes. It is the file used within an Edge project that serves to bind all of the Edge Runtime and project-specific files together. This is also the file that is effectively opened within the authoring environment. Finally, running this file in a browser allows us to preview our full project.{project_name}_edge.js:This is actually a file containing all of the JSON structures associated with an Edge project, along with some code that binds the Edge stage to a specified HTML element and initializes the runtime.{project_name}_edgeActions.js:This JavaScript file contains all of the Actions defined within the Edge application.{project_name}_edgePreload.js:This JavaScript file serves to load in all of the other files and bind them to the project upon runtime. There is also the groundwork in Adobe Edge Preview 4 for composition preloaders, but this is not yet complete.edge_includes:This directory contains the jQuery and Adobe Edge Runtime files necessary for the proper working of the project. None of the files within this directory should ever be modified manually.jquery-{version}.min.js:This is the minimized jQuery library packaged along with the Edge Runtime.jquery.easing.{version}.js:This is the minimized jQuery easing library packaged along with the Edge Runtime.edge.{version}.min.js:This is the minimized Adobe Edge Runtime library.yepnope.js:This is asynchronous conditional resource loader to manage the assets that need to be loaded based upon the client environment. Read more about it at: http://yepnopejs.com/
In this chapter, we had a look at some ways in which the web landscape is changing, specifically when talking about the roles of the primary technologies used to create motion and interactive design in the browser. The content produced by Edge would only have been possible using Flash Player in years past. HTML, CSS, and JavaScript have advanced to the point where this sort of content can now be produced using core web technologies. At the same time, Adobe Flash Player and the wider Flash Platform have expanded beyond these roles.
We have also taken a look at the history behind the Adobe Edge application from its beginnings as a basic prototype and have looked into a number of the standard web technologies used by Edge projects. We also discussed Edge in relation to Adobe Flash Professional and many of the similarities between the two programs. If you are used to Flash Professional, picking up Edge is relatively simple!
Finally, we had a brief look at Edge itself, including how to install the program, the options available to us using the Edge welcome screen, and how to quickly create a new Edge project.