Create your first 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 exactly same effect.

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  HTML element we can locate within the HTML file Edge Animate produces upon saving it, as shown in the following screenshot:

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 file name and location to save the document if this happens to be a new project.

Save As…

Similar to the Save option, this provides the same functionality but will always prompt the user for a file name 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.

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.

Layout and guidance tools

When working with any element on Stage, it is useful to have some tools which assist in the layout and positioning of the elements in question. Edge Animate comes equipped with a number of tools which assist us in this task—Layout Preferences tool, Rulers, and Guides.

Layout Preferences tool

The Layout Preferences tool allows us to make some decisions around the default properties of certain element types when create or imported. The tool itself is located on the toolbar, to the right-hand side of the default color swatches. It appears as a small ruler in the toolbar, indicating layout:

When this tool is activated, a small overlay appears which allows us to set a number of layout preferences for the current project. Most of these preferences have to do with how elements are measured; using either pixels or percentage units:

The following table details the choices we have when determining layout preferences for an Edge Animate composition. The units for horizontal, vertical, width, and height, though appear to have the same description, are distinct values and it is clear when you adjust these parameters on Stage.

Rulers

When enabled, Rulers are set along the top and left-hand side axis of project stage in a similar fashion to other Adobe creative applications. They assist in visualizing the measurements between elements, the relation to Stage registration point, element alignment, and more.

Rulers also serve with the generation and positioning of manual Guides, which we will examine in the next section.

Guides

Guides are used alongside Rulers in order to more precisely plot out and position
elements on Stage. They can also be used to scope out areas in which we can draw elements
using tools such as the Rectangle tool or the Rounded Rectangle tool:

To create new Guide, be sure for Rulers been activated and are visible within the Stage panel. Click upon a ruler and drag new Guide out along that specific axis. Once Guide is positioned exactly where we like, release the mouse to drop Guide in place.

Once Guide has been placed, it can remain a pixel-based Guide or transformed into a percentage-based Guide to assist with responsive layout tools. To convert Guide from pixel units to percentages, hover over Guide and right-click. We now have the option Convert Guide to Percentage. Guide will now appear in a more teal color than the normal violet to distinguish it from pixel-based Guide. Resizing Stage will shift Guide as well—as it is now positioned based upon percentage and not absolute pixel units.

To remove Guide, simply click upon it and drag it back into Ruler. Guides can be locked from the View area of the application menu. Snapping can also be controlled from the View menu.

Smart Guides

When Smart Guides are enabled, dragging elements around Stage will cause temporary guides to appear which can assist with placement of elements. These guides will appear in alignment of other elements, or in order to align with aspects of Stage itself. For instance, in the following screenshot, Smart Guides appear when an element is dragged to the center of Stage, informing us that we will be able to center the object if dropped upon this location.

Importing external assets

Apart from the creation of basic vector and text elements within an Edge Animate
composition, we also have the ability to import external assets for use in a project.
These assets may have been prepared in another application such as Adobe
Photoshop, Illustrator, or Fireworks. Generally, we would want to use these
imported assets more than the simple shapes generated by Edge Animate, but this
will depend upon the project.
File types which can be imported into Edge Animate include:

• SVG: Scalable Vector Graphics
• PNG: Portable Network Graphics
• JPEG: Joint Photographic Experts Group
• GIF: Graphics Interchange Format
  

Importing bitmap images

Once an image file is imported into an Edge Animate project, it can be manipulated, animated, and scripted just as any other element. To import a bitmap image file into Edge Animate, we perform the following actions:

1. Navigate to the Edge Animate application menu.
2. Select File | Import….
3. A system file browser dialog will appear. Navigate to the .png, .gif, or .jpg
   file you wish to import.
4. Select the file and click on Open.
5. The file will now be placed onto the Stage and also added to the project Library under Assets. From here, we can add multiple instances of this asset to the Stage.

Now that the bitmap image asset has been imported and an instance of this asset resides upon the Stage, we can use the Selection and Transform tools to perform manipulations such as resize, scale, and skew just as we can with text or rectangle elements. Unlike vector-based elements, however, visible artifacting, blockiness, and other distortions will occur with bitmap objects.

Animation within Edge Animate

There are many applications which enable the user to compose animated sequences. Users of Adobe Edge Animate may have experience in other programs such as Director, Flash Professional, After Effects, or even Photoshop. All of these applications handle animation in slightly different ways, but they do all share some aspects of animation techniques and tooling in common as well.

Like many digital animation programs, Edge Animate employs the concept of "tweening" between keyframes. In traditional cell-based animation, a master animator would draw out certain key frames for an animation sequence, and the frames in between these key frames would be created by apprentice or lower-ranked members of the animation team. The goal was always to create a smooth transition between each key frame created by the master animator, which would result in a
completed animation sequence.

This process is performed programmatically within Edge Animate. As keyframes are placed along the Timeline, Edge Animate will record changes in property values as transitions at the position of the Playhead (moment in time). As authors, we have the additional ability to provide the tweening engine with instruction sets based upon a variety of easing equations. This allows a more natural flow between keyframes, and can also be used to achieved certain effects such as an elastic or bounce motion.

The Edge Animate Timeline

The Timeline is where all of the motion in an Edge Animate composition is orchestrated. The Timeline itself shares concepts and constructs from other Adobe applications, most notably Flash Professional and After Effects.

Playback controls

The playback controls in Edge Animate are all grouped together in the upper-left corner or the Timeline panel. These controls allow quick access to many of the playback options available through the Timeline.

Time

The time in Edge Animate is measured in standard decimal time code format (mm:ss.ddd), and this is how it is displayed in the Time control. As the Playhead moves along the Timeline, the information in this display is updated accordingly. A user can scrub the control to the left or right to adjust the current time, or simply click on it—making it editable.

Note that the time controls in Edge Animate are actually grouped along with the Stage and are accessible from directly beneath that panel. The controls are also broken up to allow separate modification of the Playhead time (yellow), and Pin time (blue), when enabled.

Timeline options

These options can be toggled on or off depending upon current needs as they perform a variety of Timeline-related functions.

These options include the following:

• Auto-Keyframe Mode (K): Selecting this option will enable Edge Animate to generate keyframes for various properties automatically as they are adjusted along the Timeline. When not selected, any keyframes must be inserted manually.
• Auto-Transition Mode (X): When enabled, this informs Edge Animate to use immediate transitions between element property adjustments as they are animated across time.
• Toggle Pin (P): Toggles the Pin on and off. We'll discuss the Pin in more detail shortly.
  

There are also a number of options present on the bottom of the Timeline:

• Only Show Animated Elements: When this option is selected, only those elements whose properties are animated will display within the Timeline. Static elements (such as a background image, perhaps) will be hidden.
• Timeline Snapping: Toggles Timeline snapping on or off.
• Show Grid: Toggles Timeline grid on or off and allows us to set the grid spacing units.
  

More about the Show Grid control

We are also able to set the grid spacing by clicking on the small arrow to the immediate right of this icon in order to access a small list of options. We can choose to display grid lines over a selection of measurements across the Timeline.

Timeline controls

There are basically only four controls within the Timeline that we need to be concerned with: the Playhead, the Pin, Zoom, and a set of Grid controls. The functionality between controls varies greatly here, as some are used for playback, some for animation, and others are simply there for the enhancement of our overall workflow. All, however, are very useful.

The Playhead

The Playhead is the larger of the two elements on the Timeline and is represented by a solid red line which indicates the current time. We can click on the Playhead and scrub back and forth to change the current time. When an animation is being played back through Edge Animate, the Playhead will move along with the current time.

The Pin

The Pin is a unique control to Edge Animate. It is a way of pinning the current state of element properties to a certain time, while using the Playhead to determine at which time the animation should complete. The Pin can be positioned either before or after the time indicated by the Playhead—but it always indicates a starting point for the animation, with the Playhead indicating the end. Changing any element properties while the Pin is unsynced will create animation of those properties beginning at the Pin and ending at the Playhead position. In this way, we can quickly and freely create animation that is tightly controlled across the Timeline.

When the Pin has been activated, the direction of animation is indicated through a colored strip of chevrons on the Timeline. The color will be yellow or blue, depending upon the direction of motion; blue indicates motion to the left of the Pin, while yellow indicates motion to the right of the Pin.

Zoom controls

There are two zoom controls in Edge Animate which allow us to expand and contract the Timeline. One is the Zoom Timeline to Fit button that appears as dual arrows in the lower-right corner of the Timeline. This will expand or contract the entire span of the visible Timeline to the current width of the Timeline panel. It can provide a good overview of the entire animation.

The second control is a slider which appears directly to the right and allows the user to manually control the zoom level of the Timeline to accommodate whatever we are specifically trying to accomplish at any particular time.

Keyframes

Similar to their representation in After Effects, keyframes in Edge Animate appear along the Timeline as small diamonds. Unlike keyframes in Flash Professional, Edge Animate keyframes are tied directly to the property that is being changed and not to the element itself. This allows for fine-grained property adjustments across the Timeline for any particular element. It is very flexible and a powerful way to animate selected element properties!

Keyframe navigation

There are a number of keyboard shortcuts in Edge Animate that assist with Timeline navigation—specifically when jumping across keyframes.

Creating motion

Animating element properties within Edge Animate is fairly straightforward. In this section, we're going to step through a number of basic ways to animate elements along the Edge Animate Timeline. Once using only the Playhead, and again using the Playhead in conjunction with the Pin. By performing the same animation in each way, we will get a feel for the different workflow styles Edge Animate makes available to us when animating element properties across time.

Inserting keyframes

There are a number of mechanisms through which we can insert keyframes into our composition; using the Properties panel, the application menu, the Timeline Keyframe buttons, or through the right-click menu. Before we move on, let's have a quick look at each of these methods.

Adding keyframes through the Properties panel

With any element selected, we can position the Playhead upon the Timeline and look to the Properties panel to insert our keyframes. Notice how most of the property values have a small diamond next to them? By clicking on this keyframe control, we will manually insert a keyframe for that property into the current Playhead position for the selected element.

Adding keyframes through the application menu

With any element selected, we can position the Playhead upon the Timeline and look to the application menu to insert our keyframes. Simply navigate to the menu and choose Timeline | Add Keyframe and then select the type of keyframe to add, based upon the property we wish to set a keyframe for.

Using the Timeline keyframe buttons

With any element selected, we can position the Playhead upon the Timeline and look to the left area of the Timeline panel to insert our keyframes. Any property which currently has a keyframe assigned to it will appear grouped beneath an element in the Timeline. These existing properties will include a small icon positioned to the right of the property name through which we can add new keyframes for that specific property.

To add new keyframes to properties which do not appear beneath an element, we can simply right-click on the element name and choose Add Keyframe to insert them.

Using right-click for Keyframe insertion

With any element selected, we can position the Playhead upon the Timeline and look to the Stage itself to insert our keyframes. Simply right-click on any element which exists on the Stage at that place in the Timeline, and choose Add Keyframe to insert any of the available properties for that element.

Animating with the Playhead

We will now do a simple animation of an element moving from one side of the Stage to the other, while rotating and changing color using the Playhead along with the Properties panel.

Animating with the Pin

Now we will perform the preceding exercise, but this time we will employ the Pin to demonstrate an alternate way of creating motion in Edge Animate.

Editing transitions

Once a transition has been established, it can be adjusted through mouse interaction via the Timeline. In order to adjust the transition delay, duration, and end we simply click-and-drag the visual transition indicators within the Timeline itself.

Transition delay

This determines when the transition should begin, measured from the start of the overall Timeline. Modification of this value is accomplished by either moving the entire transition, or by dragging the right-most edge.

Transition duration

This represents the time taken up by the entire transition. Transitions can be extended or shortened easily by dragging the right-most edge.

Transition end

This is the time with which the transition completes within the Timeline.

Modifying element properties based on transition

To select a transition to edit element properties within the Properties panel; use the mouse to select a Transition block within the Timeline. The cursor should change to a little grabby hand and clicking on the transition will cause it, along with any of its keyframes, to highlight.

We now know that the element is selected and can see that the Properties panel adjusts to reflect the properties of that element at the position of the Playhead. To adjust any properties across time, simply move the Playhead to see the Properties panel adjust to these changes.

Transition easing controls

You may have noticed that the motion achieved through the examples presented so far have been plain, linear transitions from one value to another. To provide a greater sense of realism and a fuller, dynamic nature to individual transitions, we also have the ability to assign a variety of easing equations to our transitions.

There are many easing choices within Adobe Edge Animate. The default is Linear, which will simply express a transition from A to B in an entirely linear fashion. Often, an easing algorithm of a more dynamic nature is required to express a bit more realism in motion, or to achieve a specific effect. Edge Animate comes bundled with no less than 32 easing choices to provide the user with a variety of options when determining transition easing.

Transition easing types

While Edge Animate does supply us with a large number of easing types, exactly what they do may not be obvious to many users at first glance. It is very simple to set up an Edge Animate project that allows us to adjust and visualize each of these easing types when applied to a simple transition.

Shifting transitions

Edge Animate makes it very easy to shift transitions back and forth across the Timeline. Simply use the mouse cursor to grab a transition (click and hold) and then move the mouse back and forth along the Timeline until the transition appears at the desired location. Release the mouse to complete the shift.

Changing transition duration

To adjust the duration of any transition, simply hover the mouse cursor over the beginning or end of any transition block until the cursor changes to indicate that adjustments are possible. Then, click-and-drag along the Timeline to adjust the length of a particular transition. We can also select multiple Transitions in this same way through use of the Shift key while we make additional selections along the Timeline.

Selecting transition keyframes

To select individual keyframes, simply click on the desired keyframe and perform whatever modification is desired. Some possible options include hitting the Delete key on the keyboard to remove the selected keyframes, or modifying the transition through the right-click menu.

Selecting multiple transitions

Holding the Shift key down while keyframes are selected will enable the selection of multiple keyframes. Alternatively, a selection rectangle can be drawn across multiple keyframes, but this is imprecise, as full transitions will more than likely be selected as well.

Copy and paste keyframes

While keyframes are selected, we can easily copy and paste these keyframes from one spot in the Timeline to another by moving the Playhead to another position before we paste. This is a good mechanism for copying the exact properties we want and replicating them across the Timeline.

Generating transitions through keyframes

With multiple keyframes selected, we can choose to right-click on them in order to remove or create transitions between them. This is useful when we have used auto-transition mode but then decide to retain keyframes but remove the smooth transition between them, or perform the reverse intention.

Animating a website header

One of the basic use cases for Adobe Edge Animate is the creation of a simply animated website header. We will be authoring such a composition for a studio recording project of the name An Early Morning Letter, Displaced, who wish to have images of each of their releases animate in on the header itself. Thankfully, they have provided us with all of the assets necessary for the construction of this animated header.

Project setup, asset import, and general layout

The first step in this composition will be to set up our Edge Animate project, import all of the assets, and arrange them upon the Stage. We will begin by arranging the assets in their final form, as they should appear at the end of the animation once it has completed playback. The Pin makes it quite easy to animate "backwards".

Performing the animation of elements

We will now perform the animation of all elements on the Stage through use of the Playhead, Mark, and Properties panel.

Animating the background

We will create a transition lasting 00:07.000, which will fade in the background element while slightly adjusting its scale.

Animating the cover art (do this for each cover art image)

For each image, we will create a transition lasting 00:02.000, which with slide the image in from off-screen, resulting in a playful bounce before coming to a rest. We will stagger the transitions of each subsequent image to begin at the midpoint of the previous transition, creating a flurry of motion within the composition.

Animating the title text

We will create a transition lasting 00:05.500, which will fade in the title text element.

Finishing up!

Once all of the elements are added to the Stage, positioned correctly, and animated properly through transitions, the Edge Animate Timeline will look similar to what we see in the following screenshot:

The result of our animated banner appears in a web browser, as shown in the following screenshot. To publish an Edge Animate composition to the browser, we can choose File | Preview in Browser from the application menu.

Summary

In this chapter, we've examined how to create motion in Adobe Edge Animate by making use of the Timeline, Playhead, Pin, and Properties panel. Those who are familiar with Flash Professional or After Effects should recognize just how familiar many of these concepts are, and possibly how refined and evolved these concepts have become as implemented in the Edge Animate application interface. It is quite easy to both create and edit animation within an Edge Animate composition!