Creating Motion Through the Timeline

Exclusive offer: get 50% off this eBook here
Learning Adobe Edge Animate

Learning Adobe Edge Animate — Save 50%

Create engaging motion and rich interactivity with Adobe Edge Animate with this book and ebook

£16.99    £8.50
by Joseph Labrecque | November 2012 | Web Development

The goal of Adobe Edge Animate is to allow users to easily create standards-based motion and interaction without having to deal with a lot of code by hand. This article explores the motion side of the equation through animated content and the Timeline.

In this article by Joseph Labrecque , author of Learning Adobe Edge Animate, we will cover:

  • The Timeline
  • The Playhead
  • The Pin
  • Transitions
  • Keyframes
  • Easing

(For more resources related to this topic, see here.)

Animation within Edge Animate

There are many applications that 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 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). 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.

Unlike the frame-based timeline in Flash Professional, the Edge Animate Timeline is purely time-based.

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.

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: WToggles 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 that 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.

Normally, the Playhead and the Pin are both synced. If not, they can be resynced through the application menu: Timeline | Toggle Pin.

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.

To quickly sync or unsync the Pin from the Playhead, we can double-click on the Playhead to toggle between each state. We can also use the keyboard shortcut (P) to accomplish this same task—or even use the control in the Timeline which performs this action..

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.

Command

Shortcut

Go to Previous Keyframe

Ctrl + Left Arrow (Windows), Command + Left Arrow (Mac)

Go to Next Keyframe

Ctrl + Right Arrow (Windows), Command + Right Arrow (Mac)

Creating motion

Animating element properties within Edge Animate is fairly straightforward. 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.

Note that most elements will not appear within the Timeline until their properties are actually modified across time. The reasoning for this is if nothing is actually animated, there is no reason to clutter the Timeline.

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

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:

Not all properties have keyboard shortcuts assigned to them by default, though we can easily assign them for commonly used properties, if we wish. This is accomplished through the application menu: Edit | Keyboard Shortcuts....

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.

  1. Create a new Edge Animate project and save it to your local disk.
  2. Adjust the Stage as follows by using the Properties panel:
    • Stage W: 600 px
    • Stage H: 350 px
    • Background Color: #000000
    • Overflow: hidden
  3. Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
  4. For each property listed, make the following adjustments within the Properties panel:
    • Location X: 20 px
    • Location Y: 230 px
    • Size W: 100 px
    • Size H: 100 px
    • Background Color: #c0c0c0
  5. Still using the Properties panel, click on the keyframe diamond next to the properties for Location, Background Color, and Rotation. This will set a keyframe for each property within the Timeline.
  6. Be sure that Auto-Keyframe properties is in its selected state in the Timeline. Since we have already marked each of these properties with initial keyframes, any adjustments we make across time will be auto-keyframed.
  7. Our project should now appear as shown in the following screenshot. We are ready to proceed with the remainder of this exercise.

  8. Drag the Playhead over to the ruler marker labeled 0:04 and release.
  9. Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
    • Location X: 480 px
    • Background Color: #900000
    • Rotation: 480 deg
  10. Notice that we now have transition bars appear on the Timeline with another set of keyframes at the end of our animation sequence.
  11. We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence.

    When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so. The resulting end state is displayed in the following screenshot:

    Note that any of the properties of an element can be keyframed, thus modified over time in the way we have done here.

Animating with the Pin

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

  1. Create a new Edge Animate project and save it to your local disk.
  2. Adjust the Stage as follows by using the Properties panel:
    • Stage W: 600 px
    • Stage H: 350 px
    • Background Color: #000000
    • Overflow: hidden
  3. Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
  4. For each property listed, make the following adjustments within the Properties panel:
    • Location X: 20 px
    • Location Y: 230 px
    • Size W: 100 px
    • Size H: 100 px
    • Background Color: #c0c0c0
  5. Drag the Playhead to 0:04 in the Timeline.
  6. Now, go to the application menu and select Timeline | Toggle Pin. This will unsync the Pin from the Playhead. Again, the Pin is the small control directly beneath the Playhead when unsynced.
  7. Grab the Pin and drag it to 0:00 in the Timeline. This will pin the element's current properties to the 0:00 point without the need to manually insert keyframes. Keep the Playhead itself at 0:04.
  8. Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
    • Location X: 480 px
    • Background Color: #900000
    • Rotation: 480 deg
  9. Notice that we now have transition bars appear on the Timeline without the need to set any keyframes whatsoever.

  10. Go to the application menu and select Timeline | Toggle Pin to sync the Pin. We can also toggle the Pin through a keyboard shortcut.
  11. We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence.

    When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so.

    Note that, while in this case the Pin was placed at an earlier time in relation to the Playhead within our Timeline—that need not be the case. We can also place the Pin at a later time than the Playhead and the same behavior will be exhibited: current properties are pinned to the Pin position while adjusted properties align to the position of the Playhead.

Learning Adobe Edge Animate Create engaging motion and rich interactivity with Adobe Edge Animate with this book and ebook
Published: October 2012
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

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.

Note that transitions can be adjusted on a per-object or per-property basis, allowing for a great amount of freedom when defining motion behavior.

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

Note that when changing the easing behavior of a transition, we can select the entire element transition block or we may choose individual property transitions to apply a variety of transition types to the same element. It is quite flexible.

Transition easing controls

You may have noticed that the motions 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.

The transition easing algorithms available in Edge Animate are similar to others found in many ActionScript libraries for animating Flash Professional content. Unlike in Flash Professional, Edge Animate does not yet have the ability to customize these presets.

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.

Almost all easing types have three variants of themselves: ease in, ease out, and both ease in and ease out together.

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.

The cursor will adjust to look like two lines with arrows pointing to the left or right when hovering over a transition we can expand in this manner.

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.

The cursor will adjust to look like a small pointing hand if we are able to select a keyframe. Of course, any locked element keyframes cannot be interacted with in any manner.

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.

Expanding and contracting composition duration

By selecting all of the transitions within a composition, we can easily stretch or shrink the total duration in accordance with the adjusted composition length by dragging the transition head or tail in the appropriate direction.

When we adjust the length of a composition in this manner, all keyframes will shift accordingly. Be aware that timings across the entire composition will shift because of this.

Animating a website header

One of the basic use cases for Adobe Edge Animate is the creation of a simply animated website 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".

  1. Create a new Edge Animate project and save it onto the local disk.
  2. Adjust the Stage as follows by using the Properties panel:
    • Stage W: 940 px
    • Stage H: 198 px
    • Background Color: #000000
    • Overflow: hidden
  3. Go to the application menu and select File | Import... to bring up a file browser.
  4. Select all of the .png files located within the provided assets folder and click on Open. The selected files will be placed upon the Stage and also added to the project Library.
  5. The background image is the exact size of the Stage itself and should fill this entire area.
  6. The album art can be arranged evenly across the bottom of the Stage as seen in the following screenshot. We can use the mouse or the Properties panel to arrange these images. Space them evenly apart from one another.

  7. Finally, we need to add a title to this header animation. We'll use the Text tool to form the project's name along the top of the header. Choose Text Tool (T) now.
  8. Add a new text element to the Stage and type the term An Early Morning Letter, Displaced into the field.
  9. With this text element selected, enter the Properties panel and make the following adjustments:
    • ID: Title
    • Location X: 16 px
    • Location Y: 11 px
    • Font Name: Arial Black, Gadget, sans-serif
    • Font Size: 40 px
    • Font Color: #bbbbbb
  10. We should now have a composition that appears as shown in the following screenshot:

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.

  1. Using the Selection tool, click on the bg element to bring up its properties.
  2. In the Timeline, move the Pin to 00:07.000 and the Playhead to 00:00.000.
  3. Using the Properties panel, make the following adjustments:
    • Scale (linked): 115 %
    • Opacity: 25 %
  4. In the Timeline, click on the transition that we have just created to select it.
  5. In the Timeline, change the Easing selection to Ease Out | Sine to determine how the transition should occur upon playback. Leave the scale transitions as Linear.

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

For each image, we will create a transition lasting 00:02.000, which will 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.

  1. Using the Selection tool, click on the fvm001 element to bring up its properties.
  2. In the Timeline, move the Pin to 00:02.090 and the Playhead to 00:00.000.
  3. Using the Properties panel, make the following adjustment:
    • Location X: 986 px
  4. In the Timeline, click on the opacity transition that we have just created to select it.
  5. In the Timeline, change the Easing selection to Ease Out | Sine to determine how the transition should occur upon playback.
  6. Repeat the previous steps for each of the other album art images.

Edge Animate also includes the option to paste various elements of a transition from one object to another. For repeatable transitions such as this one, we may want to have a look at the Paste Special commands under the application Edit menu.

Animating the title text

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

  1. Using the Selection tool, click on the Title element to bring up its properties.
  2. In the Timeline, move the Pin to 00:06.000 and the Playhead to 00:05.000.
  3. Using the Properties panel, make the following adjustment:
    • Opacity: 0 %
  4. In the Timeline, click on the transition that we have just created to select it.
  5. In the Timeline, change the Easing selection to Ease Out | Sine to determine how the transition should occur upon playback.

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:

Edge Animate makes it easy to see exactly what is going on in a composition through even fine-grained transition indicators, which correspond to individual element properties.

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.

Notice that there is no interactivity to any of the elements in this banner. In the next chapter, we'll wire up a number of ways to interact with individual elements within this composition.

Learning Adobe Edge Animate Create engaging motion and rich interactivity with Adobe Edge Animate with this book and ebook
Published: October 2012
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

Automated animation techniques

While it is always possible to perform animation upon individual elements, for reasons of precision or convenience, we may often wish to take advantage of special automations which Edge Animate makes available for our use. Consequently, workflow habits can be streamlined through the use of automation commands discussed next.

Pasting motion

For transitions that need to be replicated or even just copied and tweaked slightly, Edge Animate includes a number of commands for managing copied motion attributes from one element onto another.

Paste Transitions To Location

This command will replicate the exact motion from the copied element upon the selected element. The transition will terminate upon the element's present position.

Paste Transitions From Location

This command will replicate the exact motion from the copied element upon the selected element. The transition will begin at the element's present position.

Paste Inverted

This highly useful command allows us to paste a transition in reverse—very effective for creating back and forth motion.

Paste Actions

This commend will paste only any Actions present upon an element onto another element. See the next chapter for more information on Actions

Paste All

This command, as implied by its name, will paste everything it possibly can between elements.

Automation example

In order to demonstrate what effect the Paste Transitions To Location, Paste Transitions From Location, and Paste Inverted commands would have upon a series of rectangular elements, we've prepared the following demonstration. The project files for this example can be found in the PastingMotion directory.

Initial state

In this first state, we have simply laid out four different-colored rectangle elements along the center of our Stage. We have named each element according to the paste behavior that will be applied to it, along with the uppermost block representing the original transition that the others will be pasted from.

For this original transition, we simply have the element move to the right of our Stage from its location in the center. The three other elements have no transition whatsoever at this point.

Transition begin state

This state represents the beginning of our composition. We have copied and pasted the transition information upon each element according to its name.

We can see that most of the elements appear in the center, like the original, except for the element which had a Paste Transitions To Location command applied to it:

Transition end state

This state represents the composition end and when compared with the previous screenshot, we can understand precisely how each of the element transitions were affected by the type of Paste command applied.

We could probably benefit a great deal by going through a similar exercise ourselves, with our own assets and transitions in order to become more familiar with each b ehavior.

Adobe Edge Animate menu items

We'll now have a look at some of the Edge Animate menu items, which can be used along with transitions and the Timeline when dealing with motion.

Edit

The Edit menu allows for direct object manipulation through cut, copy, and paste commands, along with selection options and access to an undo/redo history.

Command

Description

Undo

Reverts the last action.

Redo

Re-performs an Undo action

Cut

Removes the selection and places it into the clipboard.

Copy

Copies a selection and places it into the clipboard.

Paste

Pastes a selection from the clipboard.

Paste Special

This is actually a series of commands which allows the pasting of specific attributes. Like any Paste command, these attributes or an accompanying element must have been cut or copied previous to this.

Paste Special | Paste

Transitions To Location

Will paste only the transitions defined on the element that has been copied or cut to a new element. The transition will terminate upon the element's present position.

Paste Special | Paste

Transitions From Location

Will paste only the transitions defined on the element that has been copied or cut to a new element. The transition will begin at the element's present position.

Paste Special | Paste Inverted

Will paste an inverted (or reverse) sequence of what has been copied or cut into the Timeline.

Paste Special | Paste All

Will paste the element which has been copied or cut as a new element along with all properties, Actions, and transitions into the Timeline

Duplicate

Makes a copy of the selected element.

Select All

Selects everything visible on the Stage.

Transform

Toggles the Transform tool on.

Delete

Removes the selected element.

Keyboard Shortcuts...

Opens the Keyboard Shortcuts dialog.

Timeline

As Edge Animate is a motion and animation-focused tool, the Timeline commands listed in the following table are core to achieving the most we can through the application interface:

Command

Description

Play/Stop

Toggles playback of the Timeline.

Return

Returns the Playhead to the previous position.

Go to Start

Sends the Timeline Playhead to 0 milliseconds.

Go to End

Sends the Timeline Playhead to the very end of the established Timeline.

Go to Previous Keyframe

Jumps the Playhead to the previous keyframe.

Go to Next Keyframe

Jumps the Playhead to the next keyframe.

Auto-Keyframe Mode

Setting this will enable Edge Animate to generate keyframes for various properties automatically as they are adjusted along the Timeline.

Auto-Transition Mode

Informs Edge Animate to use immediate transitions between element property adjustments.

Add Keyframe

Adds a keyframe of a certain selected type. This command will bring up a menu allowing us to select the property to assign the keyframe to.

Insert Label

Adds a label marker at the current Playhead position.  The label name can be edited.

Insert Trigger

Adds a new Trigger to the Actions layer along the Timeline at the current Playhead position.

Invert Transitions

Will basically reverse a transition completely.

Insert Time

Invokes a dialog which allows the insertion of time extending from the current Playhead position along the Timeline. This will extend the overall Timeline length as well.

Toggle Pin

Will toggle the Pin on and off-depending upon particular preferences when animating elements.

Flip Playhead and Pin

Toggles the position of the Playhead with that of the Pin. Only available when the Pin is active.

Snapping

Toggles snapping on and off.

Snap To

Specifies the snapping settings when snapping has been toggled on.

Snap To | Grid

Snaps to grid markers along the Timeline.

Snap To | Playhead

Snaps to the Playhead position.

Snap To | Keyframes,Labels, Triggers

Snaps to additional Timeline objects such as Keyframes, Labels, and Triggers.

Show Grid

Toggles display of the Timeline Grid.

Grid

Allows a choice in incremental gridline placement along the Timeline.

Zoom In

Scales the Stage in from its current scale.

Zoom Out

Scales the Stage out from its current scale.

Zoom to Fit

Scales the Stage to fit within constraints imposed by the size of the application window.

Expand/Collapse Selected

Expands selected elements within the Timeline to expose their individual keyframes.

Expand/Collapse All

Expands all elements within the Timeline to expose their individual keyframes.

Summary

In this article, 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!

Resources for Article :

 


Further resources on this subject:


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

Books From Packt


Adobe Edge Quickstart Guide
Adobe Edge Quickstart Guide

Mastering Adobe Captivate 6
Mastering Adobe Captivate 6

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animationl

HTML5 Games Development by Example: Beginner’s Guide
HTML5 Games Development by Example: Beginner’s Guide

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software