Home Business & Other Adobe Edge Quickstart Guide

Adobe Edge Quickstart Guide

By Joseph Labrecque
books-svg-icon Book
eBook $19.99 $13.98
Print $32.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $19.99 $13.98
Print $32.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
About this book
With the advent of HTML5 and CSS3, web designers can now create sophisticated animations without the need of additional plugins such as Flash. However, there hasn't been an easy way for creating animations with web standards until now. This book enables even those with little knowledge of HTML or programming web content to freely create a variety of rich compositions involving motion and interactivity.Learning Adobe Edge will quickly get you up and running with this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge does not rely on a plugin ñ so it can be run within any standard browserñ even on mobile.Learning Adobe Edge begins with an overview of the shifting web landscape and the Edge application. We then move on through the variety of panels and toolsets available, and explore the many options we have when creating motion and interactivity using Edge.The book presents the reasoning behind engaging, standards-based web content and how Edge fills the need for professional tooling in this area. In the book we'll examine content creation and how to achieve fluid animation and advanced transitioning through the Edge timeline. Sprinkled throughout the book are tips and references for those coming to Edge from a background in Flash Professional. Whether you are coming to Edge from Flash Professional or are totally new to motion graphics on the web, Adobe Edge Quickstart Guide provides a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon.
Publication date:
March 2012
Publisher
Packt
Pages
136
ISBN
9781849693301

 

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.

 

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.

 

What Adobe Edge can be used for


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.

Web animation

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.

Interactive content

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.

 

The history of Adobe Edge


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.

http://www.adobe.com/products/air.html

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.

 

The inner workings of Edge


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.

HTML, CSS, and JavaScript

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.

HTML

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.

CSS

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.

JavaScript

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.

Note

Note that this is the only HTML element you will ever see produced by Edge. Everything else is handled via JavaScript Object Notation (JSON) objects and specialized JavaScript includes.

How jQuery is used in Edge

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.

Note

Note that other Adobe products, such as Adobe Dreamweaver, also make heavy use of jQuery. In fact, Adobe actively contributes back to the jQuery and jQuery Mobile libraries.

JSON

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 Adobe Edge Runtime

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

Getting started


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.

Installing Adobe Edge

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.

The Adobe Edge welcome screen

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.

Creating a new Edge Project

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

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

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.

Edge project file structure

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 .edge file 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 .html file 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/

 

Summary


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.

About the Author
  • Joseph Labrecque

    Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication, and Information as an instructor of technology for the Department of Advertising, Public Relations, and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty.

    Browse publications by this author
Adobe Edge Quickstart Guide
Unlock this book and the full library FREE for 7 days
Start now