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/