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.
Excerpted from “Learning Edge Animate”
Alternatively, we can use the keyboard shortcut: Ctrl + N (for Windows) or Command + N (for Mac).
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.
The keyboard shortcut for this option is Ctrl + S (for Windows) or Command + S (for Mac).
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.
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.
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:
These choices only affect anything new that is created in our composition or newly imported to it. Currently established elements retain their settings.
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.
|Corner Alignment||It selects which corner to align to by default.|
|Horizontal Position Units||These toggle between pixels and percentage for new
|Vertical Position Units||These toggle between pixels and percentage for new
|Width Units||These toggle between pixels and percentage for new
|Height Units||These toggle between pixels and percentage for new
|Use 'img' tag for images||When importing images, use the img tag type.|
|'auto' for image width||When importing images, set width to auto.|
|'auto' for image height||When importing images, set height to auto.|
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.
To toggle rulers on and off, choose the Rulers option from the View menu in the application, or use the keyboard shortcuts: Ctrl + R (for Windows) and Command + R (for Mac).
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.
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.
Smart Guides can be disabled from the application menu under View | Smart Guides. Keyboard shortcut: Ctrl + U (for Windows) and Command + U (for Mac).
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:
- Navigate to the Edge Animate application menu.
- Select File | Import….
- A system file browser dialog will appear. Navigate to the .png, .gif, or .jpg
file you wish to import.
- Select the file and click on Open.
- 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.
Note that similar to SVG files, the bitmap file instance placed upon the Stage will be using the exact dimensions of the imported file itself, so it may overlap the boundaries of the Stage. This can be remedied through element manipulation by using the Properties panel.
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.
It is also possible to simply drag-and-drop a .jpg, .png, or .gif file from our operating system file explorer onto the Stage. This action will have the same effect as described above when working through the application's Import… command, but we will be able to precisely place the imported image onto the Stage when employing drag-and-drop.
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.
Unlike the frame-based timeline in Flash Professional, the Edge Animate Timeline is purely time-based.
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.
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.
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.
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 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.
Normally, the Playhead and the Pin are both synced. If not, they can be resynced through the application menu: Timeline | Toggle 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.
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.
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!
There are a number of keyboard shortcuts in Edge Animate that assist with Timeline navigation—specifically when jumping across keyframes.
|Go to Previous Keyframe||Ctrl + Left Arrow (Windows), Command + Left Arrow (Mac)|
|Go to Next Keyframe||Ctrl + Right Arrow (Windows), Command + Right Arrow
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.
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
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.
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.
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….
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.
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 alternate way of creating motion in Edge Animate.
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.
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.
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.
This represents the time taken up by the entire transition. Transitions can be extended or shortened easily by dragging the right-most edge.
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 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.
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.
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.
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.
These assets are included as part of the files for this chapter and are in the folder named banner_assets.
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.
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
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.
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!