Adobe Edge Quickstart Guide: Quickly produce engaging motion and rich interactivity with Adobe Edge Preview 4 and above with this book and ebook

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.

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.

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.

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.

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.

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.

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.

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.

<div id="stage" class="EDGE-937066003">
</div>

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

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:

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:

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.

Save As…

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.