An Introduction to Adobe Edge Animate for Flash Professional Users

This article originally appeared as part of Transitioning.to.

Traditionally, those of us designing animated or highly interactive content for the web have been able to rely on Adobe Flash Player to display this content without issue across Windows, Mac, and Linux. In fact, the Google Chromium team reports that Flash Player is still installed on 99.9% of desktop machines running Chrome. There are problems though, as we must now account for mobile operating systems which place restrictions upon, or even outright ban the Flash Player entirely. On top of this, Adobe itself has ceased development of the browser-based Android Flash Player (while placing major efforts on the desktop Flash Player and AIR across devices).

With all of these forces working against browser based mobile Flash content, designers have been searching for alternative ways of delivering similar experiences to these devices. There are a number of emerging alternatives, most being restricted to motion design and basic interactivity. Adobe themselves have produced two workflows for getting animated content onto restricted devices: the CreateJS libraries available as a part of Flash Professional CS6 and Adobe Edge Animate. While the CreateJS workflow is great for those wanting to retain the familiar environment of Flash Professional – Edge Animate is a whole new creature… although many concepts been inherited from its older sibling. This article will focus upon Edge Animate and a few of those concepts.


Adobe Edge Animate


Adobe Edge Animate is an all new tool from Adobe which seeks to enable the authoring of motion and interactive experiences through HTML5, CSS3, and JavaScript in a manner consistent with other Creative Suite applications. Edge Animate is able to create such experiences at this time, due to advancements in browser technology and the need for a consistent, cross-platform solution which is able to function across desktop and mobile operating systems. This article will attempt to showcase the many conceptual similarities between the two workflows.

Adobe Edge Animate in its current form.


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 Animate differs from this in Flash, in the way that its dimensions are controlled and the background color is applied because in Edge Animate, the Stage is effectively just another Symbol. In recent previews of Edge Animate – the Stage itself can be made to be a responsive object, adjusting to different screen flows. This is great for targeting multiple screen sizes.

What makes this really interesting is that elements can be positioned by either absolute pixel coordinates or through a percentage-based coordinate system within a responsive Stage. This allows for some interesting adaptive layouts as individual elements can be pinned in relation to any of the four corners.

The Edge Animate Stage.


Properties


The Properties panel in Edge Animate works exactly as any Flash Professional user would expect it to. Most of the time in Animate, we are working with a number of basic elements: DIVs, IMGs, textual elements, and Symbol instances. There is almost always a wide group of shared properties across any of these element types – but also a number of properties which are accessible only on certain elements.

For instance, only Symbol instances can have Playback Actions attributed to them because only Symbols have their own, encapsulated Timeline. This is very similar to how MovieClip symbols work in Flash Professional.

The Properties panel adapts to whatever type of element is currently selected.


Library


Flash Professional organizes Symbols, Fonts, and Assets within a project Library. The Library panel is 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 projects Library, exposed through the Library panel.

We even have the ability to export and import Library items across Edge Animate projects or to share with the greater world as Edge Animate Symbol files. These files are basically archives of full Symbol definitions including all assets and font definitions used by the Symbol. Very convenient.

The Library is a repository for imported image files, font definitions, and Symbols.


Publish Settings


The major difference between publishing an Edge Animate composition from publishing a Flash Professional project is the actual output. Flash Professional will produce a compiled binary .swf file for embed within a browser – while Edge Animate produces a group of related .html and .js files along with a set of directories and any assets or references to other resources used in the composition.

While these items can be archived for backup – the eventual distribution requires a bit of care when considering composition publication. Edge Animate will minify and optimize a lot of the .js that is produced when publishing for the web though.

Though we are dealing with HTML & Friends – we can still optimize it for publication.


Timeline


While Flash Professional and Edge Animate do share the concept of a Timeline; that is where the similarities end. The Flash 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. Many Flash Professional users find the fine-grained Timeline of Edge Animate quite compelling.

The Edge Animate Timeline is more like After Effects than Flash Professional.


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.

An advantage of this type of keyframe over those used by Flash Professional is due to the time-based nature of the Timeline itself. Selecting all keyframes will allow us to easily resize everything across time – thus relatively extending or shortening the entire composition duration.

Keyframes can be set on a per-element basis across the Timeline.


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. These items can also be used as simple visual cues when authoring a composition. Honestly they behave just as you may expect them to, if coming from Flash Professional.

We can set Labels to easily jump to different points in the Timeline: sym.play(“JumpPoint”);


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.

Just as in Flash Professional, Symbols have their own, internal Timeline. Animation and other content can be easily nested and this animation can be controlled by the parent Timeline through the use of Actions, Triggers (Timeline Actions), or a new concept called Playback Actions which are unique to Symbol instances.

For a great overview of using dynamic data with Edge Animate Symbols – have a look at this video from Lee Brimelow.

Symbols can be instantiated multiple times upon the Stage.


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 placed at certain specific timecode. While Flash Professional uses ActionScript for programming Flash content, Edge Animate employs JavaScript.

In the figure below, we can see that we have a number of helper snippets at our disposal along the right side of the Actions panel. These snippets provide common functional bits to be inserted and modified when applied to certain evens such as mouse click or hover events. Any events that have been applied to an element are listed along the top of this panel as tabs.

Alternatively, we can use the Code panel within Edge Animate to edit the full JavaScript file without a lot of the constraints placed upon this Actions panel workflow (or even open up the .js file for editing in something like Dreamweaver or Brackets).

Edge Animate has an Actions panel which even includes a set of snippets.

Closing…

While things can certainly appear quite different from Flash Professional when working in an environment like the one Edge Animate provides, there are many similarities to take advantage of as well. The most important thing to realize is that both of these applications are tools with a base set of very similar purposes. Designers will find that once familiar with both tools, each one has strong points and weak points. This can be expressed in the type of output the tool produces – to the specific workflows provided by each tool when authoring – to how well the tool handles specific internal tasks. Learning a new tool like Edge Animate is great fun… and as a HUGE bonus; we don’t have to leave the older tools behind either!


Joseph Labrecque is author of a number of publications focusing on the Adobe Flash Platform and related technologies including the recent “Adobe Edge Quickstart Guide” and the upcoming “Learning Adobe Edge Animate” books.

This article originally appeared as part of Transitioning.to.