Learning Adobe Edge Animate

By Joseph Labrecque
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introducing Adobe Edge Animate

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 Animate will detail how to use this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge Animate does not rely on a plugin – so it can be run within any standard browser– even on mobile.

Learning Adobe Edge Animate begins with providing a complete overview of the shifting web landscape and the Edge Animate 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 Animate.

The book presents the reasoning behind engaging, standards-based web content and how Edge Animate fills the need for professional tooling in this area. In the book, we’ll examine content creation, the importing of external assets, how to achieve fluid animation and advanced transitioning through the Edge Animate timeline. The book also covers some cool topics such as interactivity through Actions and Triggers, and it examines workflow options across Adobe Creative Suite applications. Sprinkled throughout the book are tips and references for those coming to Edge Animate from a background in Flash Professional. Towards the end of the book, the reader will explore a variety of more advanced topics such as the Edge Animate Runtime APIs and how Edge Animate can interface with other Creative Suite applications for a full workflow.

Whether the reader is coming to Edge Animate from Flash Professional or is totally new to motion graphics on the web, Learning Adobe Edge Animate will provide a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon. In the end, you’ll have a firm grasp of what it takes to create engaging content for the web and the familiarity with Edge Animate to actually get it done!

Publication date:
October 2012
Publisher
Packt
Pages
368
ISBN
9781849692427

 

Chapter 1. Introducing Adobe Edge Animate

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

Adobe Edge Animate boasts a modern, designer-friendly user interface that should be somewhat familiar to long-time users of the Adobe Creative Suite applications. We will run through each aspect of the interface including the following options:

  • Interface features

  • Application menus

  • The toolbar

  • Stage

  • Timeline

  • Edge Animate panels

After processing the information presented here, we should have a clear understanding of the interface as a whole and also the usefulness of its individual aspects.

 

The history of Adobe Edge Animate


During the Adobe MAX 2010 conference in Los Angeles, California, Adobe engineers got on stage in front of over 5000 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 plugins.

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 tablets and Adobe Muse. Visit http://www.adobe.com/products/air.html.

While the Edge Prototype certainly appeared very different from what we know today as Adobe Edge Animate, MAX attendees went wild over the prospects of such a tool. This was the first glimpse of what would eventually become the product we know today as Adobe Edge Animate. Since that time, Adobe has released periodic updates to the Adobe Edge Preview releases on Adobe Labs, with the intent to gather 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 Animate has an excellent lineage behind it, and while creating content like this which targets HTML is quite new, the tools and techniques for authoring this material comes to us along a well-tread path.

 

The inner workings of Edge Animate


Adobe Edge Animate relies heavily on three related technologies: HTML5, CSS3, and JavaScript. The default doctype for Edge Animate created projects is HTML5; all the 2D transforms, translate(), rotate(),scale(), and skew() for example, are rendered as CSS3 (for modern browsers). 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 Animate Runtime.

In order for Edge Animate 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 Animate application itself also requires a .an file type to be present in order to author and edit a project.

Note

Any .html file can also be opened up within Edge Animate and be worked upon. A .an file and associated imports will be created upon save and publication.

HTML, CSS, and JavaScript

Edge Animate primarily targets HTML for display, supported by both CSS and JavaScript. Why? Well, the fact of the matter is these technologies have finally become capable of handling rich motion and interactive content and as these are the core technologies of the Web, it makes sense to use them whenever we can.

Let's take 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 (HTML) 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 that can allow elements within the documents to be greatly influenced through JavaScript.

CSS

Cascading Style Sheets (CSS) determine to a great extent how a website is visually structured and designed. With the CSS3 specification (still in draft), designers can still use these specifications in all modern browsers 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.

So when we look into an HTML document produced by Edge Animate, we see the following code:

<div id="Stage" class="EDGE-1632861112">
 </div>

This is the stage symbol element within which all other elements are injected upon runtime, through the use of JavaScript libraries.

Note

This may be the only HTML element you will ever see produced by Edge Animate. Everything else is handled via JSON objects and specialized JavaScript includes(features). There is an option to render other elements as static HTML, but that is optional.

How jQuery is used in Edge Animate

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 Asynchronous JavaScript and XML (AJAX) and more dynamic HTML data transfer methods. At one point, there were over 250 of these frameworks, but with the passing of time, only a handful remain 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 using JavaScript more accessible to non-programmers or those who are not familiar with the language, make it more consistent across browsers, and more powerful in its simplicity. Documentation for jQuery can be found online at http://docs.jquery.com/.

Adobe Edge Animate leverages jQuery and builds upon it within the Adobe Edge Animate Runtime and also makes use of the jQuery easing library when dealing with motion. When opening any HTML document generated by Edge Animate, we can see these includes in the head of our published document through the library preloader:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <title>AnimateProject</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="AnimateProject_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-1159339764 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-1159339764">
    </div>
</body>
</html>

Note

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 (JSON) 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 Animate uses JSON to store element definitions and attributes with a project. For example, the following JSON fragment represents a rectangle on the Stage:

content: {
  dom: [
    {
    id:'Rectangle',
    type:'rect',
    rect:['25px','40px','211px','147px','auto','auto'],
    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 Animate Runtime

The set of JavaScript libraries used in an Edge Animate project is collectively referred to as the Adobe Edge Animate Runtime. Normally, when we think of a runtime, we are talking about a piece of software like Adobe Flash Player, the Adobe Integrated Runtime (AIR), or the Java Runtime Environment . These are all self-contained pieces of software which enable the playback of applications and other content that targets these specific runtimes. The Adobe Edge Animate Runtime is very different in that it is a set of files that supports the content defined through the Adobe Edge Animate 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 Animate, you will see a JavaScript include that handles the runtime libraries included within the head of that document, as shown in the following code:

<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="AnimateProject_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-1159339764 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
 

Adobe Edge Animate and Adobe Flash Professional


Many have called for the death of Flash Player since the 2010 letter Thoughts on Flash by the late Steve Jobs of Apple, Inc. It has always seemed a foolish proposition; HTML is the standard and Flash Player is the mechanism which is able to push beyond that standard. Both technologies were never meant to be in competition with one another, but should rather be thought of as complementary.

This is still the case today, even though HTML has, at this point, finally taken on some of the responsibilities that Flash Player has long been the bearer of. Flash has also evolved with recent versions of the runtime to focus on advanced video, console-quality gaming, and rich mobile applications through Adobe AIR.

In terms of Edge Animate, we have a product that aims to take some of these tasks from Flash Player and make them truly cross-platform—even across operating systems that have no support for the browser-based Flash Player, such as Apple iOS or Windows Phone 7. The beauty of Edge Animate as an application is that it borrows much from the structures and paradigms that have been established by Flash Professional, making skills easily transferable from one application to another.

Note

While Adobe Flash Player has been made available for many Android devices, Adobe has made the decision to halt engineering efforts for the mobile Flash Player which runs in the browser. This does not impact the availability of the runtime upon existing supported devices, but does pose a challenge when considering upcoming hardware and operating system requirements.

Is Edge Animate a competing product to Flash Professional?

This depends upon the type of project we are working with. If we are looking to create a website landing page, rich menuing system, or advertisement, then yes, Edge Animate is definitely a competitor to Flash Professional. However, it is important to recall that Adobe produces many different tools that produce similar output; just look at Photoshop and Fireworks for an obvious examples of this.

When evaluating Edge Animate in comparison to Flash Professional, we must take into account how new Edge Animate 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 Player also benefits from compiling to a self-contained binary (.swf) and the powerful ActionScript 3.0 programming language.

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

Comparisons with Flash Professional

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

Stage

The Stage panel 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 panel in Edge Animate differs from this in Flash Professional, in the way that its dimensions are controlled and the background color is applied because in Edge Animate, the Stage is just another symbol.

Timeline

While Flash Professional and Edge Animate do share the concept of a Timeline, that is where the similarities end. The Flash Professional timeline is frame-based while Edge Animate includes a time-based timeline, similar to what is found in 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 Animate give the user the ability to define keyframes across the project. Timeline keyframes are points of distinction which 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 Animate behave to a great degree like those from Adobe After Effects.

Labels

Labels are a mechanism by which we can mark up the Timeline at certain points. These can be used for both visual reference while authoring, or through code to navigate to certain areas of the Timeline based upon the label itself.

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 Animate, there is no such distinction—though Edge Animate symbols are most similar to Flash MovieClip symbols in execution.

Library

Flash Professional organizes symbols, fonts, and assets within the project library. The Library panel takes an organizational approach to provide easy access to the symbols. With Edge Animate, we have a similar concept which also stores any symbols, fonts, and image assets created for a project within that project library, exposed through the Library panel.

Actions

Actions in Edge Animate 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 Animate, we can apply Actions to elements on the Stage, and to the Timeline through triggers. As we can see from the following screenshot, many of the panels present in Edge Animate are derived from those that exist in Flash Professional. This makes the transition simpler for Flash designers than it would otherwise be.

 

Installing Adobe Edge Animate and getting started


Before moving on, we'll want to be sure that Adobe Edge Animate is installed and running properly on our system. We'll also have a brief look at the Edge Animate interface and see how to create a new project.

Installing Edge Animate

To complete the demonstrations and examples included in this book, you'll need to acquire a copy of Adobe Edge Animate itself. Edge Animate 1.0 can be installed at no charge as part of a free Creative Cloud subscription.

To download Edge Animate with an existing subscription, you may use http://creative.adobe.com/.

To create a new Creative Could starter account free of charge, go to http://html.adobe.com/edge/animate/ and follow the directions provided after clicking on the Get Started button.

Adobe Edge Animate can be installed on the following systems:

  • Microsoft Windows 7

  • Apple Mac OS X [10.6]

Note

Installing Edge Animate on Microsoft Windows XP or Apple MAC OS X [10.5] is not supported in any way.

To download and install Edge Animate on a local computer, we must utilize the Adobe download manager available to us through the Creative Cloud

  1. Sign in to Creative Cloud through https://creative.adobe.com/ and click on Apps. You will see the following window:

  2. We will now be at the Apps screen. Scroll down to see Edge Tools & Services and locate the entry Edge Animate:

  3. Click on Download and Adobe Application Manager will download and install to your local computer. Scroll down the list of applications to locate Edge Animate and click on Install. Edge Animate will be downloaded and installed automatically.

We are now ready to begin using Adobe Edge Animate. Locate the startup icon on your machine to run the application or simply click on Launch App from the download manager.

Tip

Note that we can also download trials of many Creative Cloud applications through this same interface, if desired.

The Edge Animate welcome screen

When starting the Adobe Edge Animate application, we'll be presented with a welcome screen. This is very similar to the welcome screens available in other Adobe applications as it will present a number of options for us to get started using the product:

These options include the following:

  • Open File…: When we choose this option, a dialog showing the local file system will be opened for us. This allows us to browse the file system to locate Edge Animate projects that are already under construction. Edge Animate documents have the file extension .an.

  • Create New: This option will enable us to create a brand-new Edge Animate project. We will detail the specifications of this in the next topic.

  • Recent Files: Any Edge Animate projects that were previously opened within the application will be listed here. Opening these projects is as simple as clicking upon the project name.

  • Clear Recent Files: Choosing this option will clear the recent files list from both the welcome screen and the application menu.

  • Getting Started: This area displays a number of lessons that can be accessed from within Edge Animate itself. Selecting any of these lessons will open the Lessons panel and allow us to step through a sample project, learning as we go.

  • Key Features: This lists out a number of the features Edge Animate presents for our use and provides a link to the full release notes.

  • Resources: This provides access to a number of online resources, including documentation, discussion forums, project samples, and more.

  • Quiet: This option simply quiets the welcome screen and removes any items within this area from view.

  • Other Options: The welcome screen also includes some social media buttons that allow users to connect with the Edge Animate team on Facebook and Twitter.

Creating a new Edge Animate project

There are two ways in which we can create a new Edge Animate project. The first option is to simply click on Create New on the welcome screen. This will immediately create a new Edge Animate project with a blank stage. The second method of creating a new Edge Animate project is through the file menu. Simply clicking on File and then on New will have the exact same effect.

Tip

Alternatively, we can use the keyboard shortcut: Ctrl + N (for Windows) or Command + N (for Mac).

Note

Whenever we create a new document, the width and height of the Stage will automatically be sized to the resolution of 550px in width by 400px in height.

Whichever method you choose, you will now have a new project opened within Edge Animate. 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> HTML element we can locate within the HTML file that Edge Animate produces upon saving it, as shown in the following screenshot:

After our project has been created, the first order of business is to actually save the document. To save a document in Adobe Edge Animate, 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 file system, 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 (for Windows) or Command + S (for 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 (for Windows) or Command + Shift + S (for Mac).

In the case of a new project, either option will provide us with a file system dialog. We see from the previous screenshot that what we are saving is, in actuality, a .html file. This is an important thing to remember about Edge Animate projects—when we are working in the Edge Animate authoring environment, we are really working in real time with the content that is being produced.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

File structure in the Edge Animate project

As soon as we save our Edge Animate 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:

The files produced by Edge Animate include the following types (the project_name in the curly brackets represents the name of the project you use to save your work):

  • {project_name}.an: The .an 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: This .html file serves many purposes. It is the file used within an Edge Animate project that serves to bind all of the Edge Animate Runtime and project-specific files together. This is also the file which 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 Animate project, along with some code which binds the Edge Animate Stage to a specified HTML element and initializes the runtime.

  • {project_name}_edgeActions.js: This JavaScript file contains all the instances of actions defined within the Edge Animate 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.

Note

In the pre-release versions of Edge Animate, the .an file was actually given the extension .edge—we may encounter compositions in this book or on the Web which use the older extension. Either can be opened within Edge Animate.

Edge includes

The edge_includes directory contains the jQuery and Adobe Edge Animate Runtime files necessary for this all to work correctly. 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 Animate Runtime

  • jquery.easing.{version}.js: This is the minimized jQuery easing library packaged along with the Adobe Edge Animate Runtime

  • edge.{version}.min.js: This is the minimized Adobe Edge Animate Runtime library

  • json2.js: This is a helper file for older browsers

Application interface overview

Being primarily focused on motion and interactivity, the Edge Animate interface places a great emphasis upon modifying element properties over time. We will discover that the Edge Animate application configures many useful sections of the interface such as the Stage, Timeline, and Properties panels in plain view in order to make these tools readily available in our work.

The application window

Whether running Edge Animate on Windows or OS X, the application window will appear very similar across platforms. In many of Adobe's creative products, the windowing on OS X is very different than it is on Windows, as the desktop will actually show through the application—though this behavior can be toggled in recent versions as shown in the following screenshot:

With Adobe Edge Animate, the operating mode is the same across platforms—so while the reader will notice that most of the screenshots in this book feature the Windows version of Edge Animate, there should be very little difference when running the application on Mac OS X.

The application window itself is broken into a variety of separate modules. Most of these modules fall under the category of panels and can be toggled on and off, collapsed, combined with other panels, or anchored to different areas of the application window. Most of these actions are done through mouse actions and dragging.

Customizing the Edge Animate panel layout

Any panel in Edge Animate can be anchored to the application window or can be made to float within a small utility window. Floating panels are useful if placing them across different monitors on a full workstation, whereas docking these panels can preserve space on a smaller laptop display, as you can see in the following screenshot:

To tear a panel out of the main application window and create a floating panel, simply click upon the grippes next to an anchored panel's name. While the mouse button remains pressed, pull the panel from its present location. We will see the panel has now changed state. Have a look at the following screenshot:

At this point, as we move our cursor amongst other interface elements, we will see a grid appear from time to time with portions of the grid highlighted in a violet color. This color indicates that the panel may be dropped in this location to be anchored in that particular position. Release the mouse button to dock the panel, or when there is no highlighted portion of the grid to allow the panel to remain in a floating state.

Tip

Dragging a panel totally off the application window and releasing it will ensure that we create a floating panel.

Managing workspaces

In a similar fashion to other Creative Suite applications, Edge Animate provides the ability to customize the workspace and preserve a variety of these customizations through the concept of application workspaces.

The ability to easily switch between different workspaces is useful when moving between the layout, animation, and interactivity portions of a project, as the relevant panels and other interface structures can be given more prominence, and those which are not needed for certain tasks can be either dismissed or placed in a smaller role.

To create a new workspace, we will perform the following actions:

  1. First locate the Workspace selection option within the Window application menu. Click on it to reveal the drop-down choices as shown in the following screenshot:

  2. Select New Workspace and provide a name for your custom workspace in the Name field. Select OK once you are finished:

  3. To verify that your workspace has been saved, return to the Workspace drop-down menu and click on it once again. Your new workspace will appear in the list of choices. Switching between this and other workspaces is now as simple as performing a quick selection using this drop-down control:

We have a few other options for managing our workspaces aside from New Workspace. We also have Delete Workspace, which deletes the currently selected workspace from memory. In the case that while working, we have modified our workspace to assist with any specific task, it is useful to be able to reset the workspace to its default configuration. To reset a workspace that has been modified, simply choose the Reset "Default"… option (the workspace you are working on will be mentioned in this option instead of default workspace). This allows us to quickly revert to our saved workspace instead of manually moving things back to how they were.

The Edge Animate application menu

Most computer programs have a standard menu system that includes choices such as File, Edit, and View, along with a variety of application-specific choices. Edge Animate is no different in this regard, as you can see in the following screenshot:

The Edge Animate toolbar

The Edge Animate toolbar, by default, is located along the top left-hand side of the application window and contains an assortment of tools used when interacting with Stage. Here we will discover a selection tool, vector element creation tools, and a text tool for working within the Stage panel, as shown in the following screenshot:

Stage

The Stage panel in an Edge Animate project is the fundamental starting point of our element structure. Any additional elements created or imported will reside within and be animated upon this Stage. The following screenshot shows you the Stage panel:

Stage itself is actually just another symbol within Edge Animate. The element which represents Stage is the only HTML element which can be seen when viewing the source code of the .html file produced by Edge Animate. Refer to the following code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>AnimateProject</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="AnimateProject_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-1159339764 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-1159339764">
    </div>
</body>
</html>

The Stage element for any particular Edge Animate project will always have a unique class attribute called Composition ID, which is bound to JavaScript functionality contained within the project's main JavaScript file. In the case of the previous code, the class value is EDGE-1159339764 and the JavaScript file preloader is AnimateProject_edgePreload.js:

Tip

Composition ID is editable from within the contextual properties panel.

Note

Users coming to Edge Animate from Flash Professional will undoubtedly notice some similarities here, as Flash Professional also has the concept of a stage.

Though there are many differences between the two types, in Edge Animate, the Stage is much more easily controlled through the motion engine, allowing us to resize or change the background color at will. In Flash Professional, the Stage is much more static. For instance, the background color cannot be animated in any such way.

Timeline

The Timeline feature in Edge Animate defines the various elements that are at play over time and exposes changes related to these elements in a visual way. The Edge Animate Timeline is robust, yet simple to use. It inherits many of its attributes and behaviors from other applications such as After Effects and Flash Professional—yet it makes a good attempt to refine these concepts as well, as shown in the following screenshot:

Panels in Edge Animate

For those familiar with other applications in the Adobe Creative Suite, the concept of panels will be quite familiar. As an example, here we see panels as implemented in what is perhaps one of the most popular applications in the Creative Suite: Photoshop.

Panels are defined sets of functionality exposed through the application graphical user interface (GUI). Generally, the panels in Adobe Edge Animate can be closed, combined, moved, resized, and collapsed as needed. Any panels which are not present in a particular workspace configuration, can be opened through the commands in the Window menu.

To maximize any panel in Edge Animate, simply click on the panel option icon in the upper-right corner of the panel in question and choose Maximize Frame as shown in the following screenshot:

Once a panel has had its frame maximized, the workspace layout can be easily restored by clicking on the panel option icon in the upper-right corner and choosing Restore Frame Size.

Lessons

When starting out with Adobe Edge Animate, we can get a jump start by accessing tutorials within the Lessons panel. This panel displays a set of common scenarios dealing with symbols, animation, interactivity, and so on. Each lesson will step the user through a series of actions and provide a full set of example files as well.

Tip

The Lessons panel can be accessed or dismissed through the application menu by selecting Window | Lessons.

Elements

The Elements panel is a representation of all the HTML elements included as part of our Edge Animate project. Every element is always nested within the Stage and elements like this, which contain sub-elements can be twirled down to expose those elements. We may also toggle visibility of particular elements by toggling the eye icon on and off, as well as the lock icon.

When an element is locked, Edge Animate will prevent us from modifying the properties of that particular element. Refer to the following screenshot:

Tip

To reorder elements, we can drag-and-drop individual elements within the Elements panel. This will effectively modify the z-index of each element accordingly.

When editing HTML content that was not produced in Edge Animate, a small </> HTML element next to certain elements indicates that those elements would be limited in what we can do through Edge Animate. We will never see this indicator when dealing with compositions created entirely in Edge Animate.

Library

The Library panel includes a listing of imported Assets, such as bitmap and SVG images, and also a list of symbols in the Symbols menu that have been created within Edge Animate, and font definitions in the Fonts menu, which can be employed through text elements. The first two of these elements are added to the Library panel once they are included within an Edge Animate project, and can be added to the Stage from this panel. The font definitions are added through this interface and then referenced through Text elements within the Properties panel. Refer to the following screenshot:

By clicking on the plus button attributed to either category, we can either add new Assets through a file browse dialog or create a new symbol from selected elements. Web fonts can also be defined in the Fonts menu through the Library panel in this manner.

Properties

The contextual properties panel (Properties panel, herein) is one of the most important panels within Edge Animate, as this is where all of the properties of an element can be modified. The properties available to us will depend upon the element which has been selected. For instance, the Stage will have very few properties in comparison to a rectangle or text element.

Note

Many of the Adobe Creative Suite applications include the concept of a properties panel. Applications such as Flash Professional, which have been inherited from Macromedia, normally feature this panel quite prominently among the various application panels.

Actions

The Actions panel in Edge Animate allows us to insert small bits of JavaScript code into our compositions. This code comes in the form of triggers (in Triggers), events (in Events), and actions (in Actions). The basic idea is that we are either able to write JavaScript here which conforms to the Edge Animate Runtime API, or we can alternatively employ the buttons along the left-hand side of the panel to insert preconfigured bits of code onto an element, as shown in the following screenshot:

Note

Depending upon whether we are inserting code along the Timeline as a trigger or upon an element or Small symbol as an event, determines the options available for us in the options stack.

The Actions panel in Edge Animate functions very closely to the early actions panels in Flash Professional. For comparison, in the following screenshot we can see how the Actions panel in Flash Professional appears. Again, the engineers working on Edge Animate have gone to great lengths to make users of Flash Professional feel comfortable within this new environment.

Code

The Code panel serves a number of useful functions within Edge Animate. Truly, anything we can do within the Actions panel can also be done within the Code panel—so there is some replication of functionality here. What makes this panel unique is that it provides us with a view of the entire composition and the code bits scattered throughout in one place.

Note

For those familiar with Flash Professional, this is a lot like the Movie Explorer in that application, though the presentation here is much more useful as we do not have to click down through a number of objects and filters to get to each individual piece. We will notice many small things like this in Edge Animate which are improvements over ideas and workflow options present within older Adobe products. This is a good thing. Embrace it!

Adobe Edge Animate keyboard shortcuts

Edge Animate ships with a defined set of keyboard shortcuts to help us work more quickly within the application. Many of these shortcuts can be seen within the various contextual menus that can be accessed upon various elements or through the application menu. These shortcuts range from the standard copy and paste, to specialized Edge Animate commands to toggle the pin or paste actions.

Keyboard Shortcuts dialog

To access the Keyboard Shortcuts dialog, from the application menu, choose Edit | Keyboard Shortcuts… and the dialog window will appear:

From this dialog, we can review all of the assigned shortcuts in the application, or even customize them to create our own set. Custom presets are stored as XML upon the local hard drive. The dialog also supplies us with a filter and the ability to copy all keyboard shortcuts to the system clipboard in order to paste them into a text editor or some other document in order to more easily recall them when learning the application.

Adobe Edge Animate menu items

We will have a look at some of the general project options available to us from the Edge Animate application menu and provide a brief overview of the function of each option. Menu options specific to certain other Edge Animate features will be introduced along with the feature or tool itself in later chapters.

File

The File menu option provides a number of options for working with Edge Animate files themselves:

Command

Description

New

This creates a new, blank project.

Open…

This opens a previously saved project.

Open Recent

This provides a list of recently opened projects that a user can select from. Selecting one of these projects will load it into Edge Animate, similar to the Open command.

Close

This command will close the current Edge Animate project, prompting the user to save the document first, through an application alert window.

Close All

This closes all projects which are currently open. Similar to the Close command, a dialog box requesting the user to save each project will appear in a sequence.

Save

This command saves the current project. It is only valid for previously saved projects.

Save As…

This opens a browse dialog prompting the user to provide a project filename and location to save the Edge Animate project. Previously unsaved projects are required to use this command.

Revert

This reverts an opened and modified Edge Animate project to its last saved state.

Publish Settings…

This allows access to specify the settings with which to publish an Edge Animate composition.

Publish

This performs a publish operation which adheres to the settings specified in Publish Settings…. It also optimizes the composition for distribution.

Preview In Browser

While it is possible to preview certain things within the Edge Animate application itself, as projects become more complex, we will want to be sure and run them within a true browser environment. This command will launch a browser and load in the current project automatically.

Import…

This allows the import of .png, .gif, .jpg, and .svg files into a project. These imported files will appear in the project library and upon Stage.

Exit

This closes the entire application. If there are any unsaved projects open, Edge Animate will prompt the user to save the document first, through an application alert window.

Window

The Window menu provides the ability for an Edge Animate user to toggle various application panels on and off. Certain panels are off by default, and turning them on here will allow us to anchor them to the application window, or otherwise position them as floating panels. We are also given access here to workspace management commands.

Command

Description

Workspace

This provides a number of commands for managing Edge Animate workspaces.

Workspace | Default (also listed are any defined workspaces)

These are simply quick access commands to switch between defined workspaces.

Workspace | New Workspace

This command will save the current application window configuration as a named workspace for later recall.

Workspace | Delete Workspace

This deletes the currently selected workspace from application memory.

Workspace | Reset "Default"… (if there are any previously defined workspaces, they are also listed)

This command allows us to quickly revert to our saved workspace to its saved state.

Timeline

This toggles Timeline within the Edge Animate application window.

Elements

This toggles the Elements panel within the Edge Animate application window.

Library

This toggles the Library panel within the Edge Animate application window.

Tools

This toggles the Tools panel within the Edge Animate application window.

Properties

This toggles the Properties panel within the Edge Animate application window.

Code

This toggles the Code panel off and on.

Lessons

This toggles the Lessons panel off and on.

Help

The Help menu item contains information about Edge Animate as a product, and links to read about the APIs which exist when interacting with the runtime through JavaScript. The following table shows the various commands in this menu:

Command

Description

Edge Animate Help…

This opens the Edge Animate help pages in an Internet-connected web browser.

Edge Animate JavaScript API…

This provides an overview of the Adobe Edge Animate Runtime API.

Edge Animate Community Forums

This is the direct link to the forums on Adobe.com.

Change Language…

This switches the application language.

Adobe Product Improvement Program…

This is an opt-in to allow the user to participate in improving the product through the collection of anonymous usage statistics.

About Adobe Edge Animate…

Selecting this command will bring up information about Edge Animate—including specific version information.

 

Summary


In this chapter, we had a look at the history behind the Adobe Edge Animate application from its beginnings as a basic prototype and have looked into a number of the standard web technologies used by Edge Animate projects. We also discussed Edge Animate in relation to Flash Professional and many of the similarities between the two programs. If you are used to Flash Professional, picking up Edge Animate should be relatively simple! We also took a brief look at Edge Animate, including how to install the program, the options available to us using the Edge Animate welcome screen, and how to quickly create a new Edge Animate project.

We should now also be familiar with all of the menus, panels, and other interface elements available to us in the Adobe Edge Animate application window. While we have touched upon some basic functionality here, the remaining bulk of this book will detail a variety of ways in which we can use Edge Animate to create a variety of standards-based projects that leverage motion and interactivity to produce rich, engaging content for the Web.

In the next chapter, we'll look specifically at the various tools available to us within Edge Animate that allow us to create basic elements through the internal drawing tools.

About the Author

  • Joseph Labrecque

    Joseph Labrecque is primarily employed by the University of Denver as Senior Interactive Software Engineer specializing in the Adobe Flash Platform, where he produces innovative academic toolsets for both traditional desktop environments and emerging mobile spaces. Alongside this principal role, he often serves as adjunct faculty communicating upon a variety of Flash Platform solutions and general web design and development subjects. In addition to his accomplishments in higher education, Joseph is the Proprietor of Fractured Vision Media, LLC, a digital media production company, technical consultancy, and distribution vehicle for his creative works. He is founder and sole abiding member of the dark ambient recording project An Early Morning Letter, Displaced, whose releases have received international award nominations and underground acclaim. Joseph has contributed to a number of respected community publications as an article writer and video tutorialist. He is also the author of Flash Development for Android Cookbook, Packt Publishing (2011), What's New in Adobe AIR 3, O'Reilly Media (2011), What's New in Flash Player 11, O'Reilly Media (2011), Adobe Edge Quickstart Guide, Packt Publishing (2012) and co-author of Mobile Development with Flash Professional CS5.5 and Flash Builder 4.5: Learn by Video, Adobe Press (2011). He also serves as author on a number of video training publications through video2brain, Adobe Press, and Peachpit Press. He regularly speaks at user group meetings and industry conferences such as Adobe MAX, FITC, D2W, 360|Flex, and a variety of other educational and technical conferences. In 2010, he received an Adobe Impact Award in recognition of his outstanding contribution to the education community. He has served as an Adobe Education Leader since 2008 and is also an Adobe Community Professional. Visit him on the Web at http://josephlabrecque.com/.

    Browse publications by this author
Book Title
Access this book, plus 7,500 other titles for FREE
Access now