Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Overview

The following overview is certainly not complete, so be sure to check out the following official Edge Animate related resource links.

 

Script Loading

This addition to the Library Panel allows you to integrate remote (CDN) and local scripts into your compositions, loading them at run time into the composition in the preloader. Local scripts are stored in a js/ directory unless included from within the composition directory. Scripts can now be transferred with a composition during Save As and be published into OAM and iBooks packages.

This feature only supports local and remote .js files. If the script you utilizes an associate .css file, then resort to adding the css file as I have captured below. Unfortunately the new Script library does not accommodate loading .css files.

edge-animate-scripts

Here are few example Content Development Network resources to refer to for your next scripted project

Responsive Scaling/Center Stage

You can set responsive scaling in the Stage properties to “width”, “height” or “both” to scale the whole composition proportionally. Aspect ratio will be maintained and is determined by the ratio of stage width to stage height. These must be in pixels.

  • Selecting “width” resizes the composition only when the width of the document window changes.
  • Selecting “height” will scale the composition with height of document.
  • Setting Responsive Scaling “both” resizes the composition in both directions.

Scaling is determined by the size of the Stage’s parent. So if you place the stage into a static page, the stage parent’s height and width must also be set.

Placing these compositions into static files gets easier now: the composition fits into the document flow.

Note: Preloader stage also flows with your proportionate option.

Center Stage

Center Stage comes with three options: Horizontal, Vertical and Both.

When selected the preloader will be centered as well.

edge-animate-responsive-scaling

Audio Support

Edge Animate introduces support for HTML5 audio using the native audio property. With audio you can control audio playback in your compositions and bind audio to touch and mouse events, or with triggers on the timeline.

  • New audio lesson in the Welcome screen or the Wndow > Lessons menu panel;
  • Audio Management control via the Library Panel;
  • Preload Audio option from the Stage;
    Note: Preloading audio is not available on iOS and some Android devices; for widest browser support .mps and .ogg formats.
  • Intuitive Audio Property Controls for the active/selected audio element;
    Note: Default audio control visibility is ‘off’; set to ‘on’ to see the onscreen audio control bar. Volume control allows for keyframing – ideal for intro, exit or cross-fading.
  • Audio Muting Timeline icon and command option: mute audio during playback when it is set to autoplay;
  • New audio Code Snippets to the Actions popup and Code editor;

eadge-animate-audio

Supported audio formats include

  • ACC (.m4a, .acc)
  • MP3 (.mps)
  • Wav (.wav)
  • Ogg (.ogg, .oga)

Add any of the above audio format types via

  • File > Import menu command option;
  • Drag and Drop from the file system;
  • Library Panel > Audio (+) subsection;

Note: audio files, like other Edge Animate asset and Elements, adhere to strict naming convention- in other words, avoid special characters, spaces and numeral file names to avoid element ID conflicts.

Motion Path Improvements

Scale and rotate a motion path for easier editing with the following commands:

  • Hover + Alt/Option: Rotate the motion path based on the transform origin of the element;
  • Hover + Cmd/Ctrl + Option: Scale the motion path based on the transform origin of the path;
  • New tooltip overlays when mouse over any given path;

edge-animate-motion-paths

Other 3.0 Improvements

Enhancement to Distribute Command

Two new menu items have been added to the Modify > Distribute menu, “Horizontal Space” and “Vertical Space”. These commands will evenly space objects of different sizes vertically or horizontally.

Publishing improvements for OAM

The Publish Settings for the Animate Deployment Package (.oam) include two new options:

Transparent poster: Poster image for OAM files now respect transparency making it easier to layout the published OAM file with other content in apps like Muse or InDesign.

CDN Runtime: Reduce the size and load time of your .oam file by loading the runtime from an Adobe hosted CDN.

jQuery Updated to 2.0.3: Animate is now shipping with jQuery 2.0.3 (previously we were using 1.7).

MacOS X 10.6 Support: Issues around 10.6 support and this build is now compatible with MacOS X 10.6.

Best of Edge Animate Workflow Samples

Best of Edge Animate Workflow Samples

The following is a compilation of the best Edge Animate workflow examples.


Adobe Edge Animate Portal

The first stop before venturing into Edge Animate is to visit the official portal website by Adobe aptly named Adobe and HTML. Edge Animate is one of many Edge Tools and Services that compliment the Web Platform.

edge-animate1

Edge Animate Samples | Edge Animate API | Edge Animate Help Docs

For a comprehensive walkthrough about Adobe Edge Animate follow through with Paul Trani in the Learn Edge Animate, Adobe TV video series.

Edge Animate Integration with Adobe Dreamweaver, Adobe Muse, Adobe InDesign

Edge Animate leverages its workflow management with other applications by packaging its output files to .oam. You then ‘import’, ‘place’ or ‘insert’ the .oam package and the host application handles the rest. Consult the following host application workflows that best suit your needs.

an-to-dw
Import Edge Animate Composition into Dreamweaver

an-to-mu

Import Edge Animate Composition into Adobe Muse

an-to-id

Import Edge Animate Composition into Adobe InDesign

DPS Integration

A Step-by-step guide to create an Interactive eBook

an-to-rf

Edge Animate to Edge Reflow

an-to-fw

Fireworks to Edge Animate

an-to-fl

Export Flash Symbols as Sprite Sheet to Edge Symbols: Part 1 | Part 2 | Part 3


Working with Edge Animate Compositions

There is no ‘paging’ system inside Edge Animate but there is a workflow where you can bind individual compositions into a single html wrapper.

edge-animate5

An alternative approach is to use the Edge Commons ‘Composition Loader’. It is pretty straightforward and the following video demonstrations makes it look easy to set up.

edge-animate6


Working with Video/Audio

edge-animate7

Adding youtube video using an iFrame

edge-animate10

Adding Video using the Edge Hero ‘class’ reference

edge-animate11

Add Audio using Buzz.js


Scale to Fit Compositions

Learn how to make your Edge compositions adjust to the screen and a variety of devices.

edge-animate2

Scale to Fit Compositions, by Sarah Hunt, Adobe Edge Product Manager

edge-animate4

Creating Flexible Layouts, Paul Trani


Edge Animate with Drupal & WordPress

edge-animate3

Edge Animate with Drupal, by Timm Jansen

edge-animate12

Add Edge Animate to a WordPress Installation with the Edge Suite Plugin


Miscellaneous

edge-animate8

Create 360 View

edge-animate9

Enabling Gestures in Edge Animate Compositions

edge-animate13

Interactivity with Edge Animate

edge-animate14

How to build a web banner in Edge Animate

edge-animate15

How to Create a Dynamic Slideshow in Edge Animate

edge-animate16

Parallax Scrolling Made Easy with Edge Commons Library

edge-animate17

Constructing a Dynamic Slideshow with Timeline Triggers

edge-animate18

Binding Clicks to Dynamic Symbols

edge-animate19

3D Cubes, Leap Motion, Edge Animate and Greensock

edge-animate20

Using Symbols and JSON data in Adobe Edge (an older reference but the context is still relevant to the latest Edge Animate version)

edge-animate21

Creating Variables and Conditional Statements in Edge Animate

edge-animate22

Loading XML via AJAX into Adobe Edge

Edge Hero Community Portal

Edge Hero Community Portal

edge-hero

The Edge Hero community portal has released version 2 of its extension library. Its aim is to simplify and improve the workflow while working with Adobe Edge Animate by eliminating the grunt work when dealing with code. Edge Hero operates by simply adding the appropriate ‘class’ selector to the Edge Animate element.

Edge Hero offers solutions for these common Edge Animate workflow scenarios:

  • element centering;
  • forms/inputs;
  • html5 video;
  • menus;
  • canvas;
  • youtube/vimeo embedding;
  • 3D rotate including 3dcubes;
  • and much more…

Visit Edge Hero for a complete list of API class options | Edge Hero Website | Edge Hero Tutorials

Edge Animate Adds Support for Edge Web Fonts

Edge Animate Adds Support for Edge Web Fonts

Edge Animate 1.01 is now available for download, containing several bug fixes and performance improvements. This download is recommended for all users.

This update includes:

  • Added support for Edge Web Fonts
  • Performance improvements on published content
  • iOS 6 fix for multiple compositions embedded via iFrame and Adobe DPS
  • Various fixes to improve application stability

For update instructions and release notes, please visit http://helpx.adobe.com/edge-animate/release-note/release-notes-edge-animate.html.

[divider_top]

To Add An Edge Web Font Reference to a Project

  1. Open an existing project file (File > Open: .an or .html) or Create (File > New).
  2. Open your preferred web browser and visit the following Edge Web Font resource library: http://html.adobe.com/edge/webfonts/
  3. The follow the below A, B, C routine detailed below.

Edge Web Fonts

[divider_top]

 

Adobe Edge Animate reaches version 1.0

Adobe Edge Animate reaches version 1.0

Adobe Edge Animate 1.0 Overview

It’s been seven glorious public previews over the past year or so and Adobe Edge Animate has reached version 1 status.
The following overview is certainly not complete, so be sure to check out the following official Edge Animate related resource links.

Welcome Screen

From the welcome screen we have instant access to:

  1. project commands: Open File for previously saved projects or Create New to start a new project;
  2. recently saved project files from the Recent Files list;
  3. resource tab options with In-App Lessons (Getting Started), notable core features (Key Features), and resource references (Resources);
  4. social media connection through Facebook and/or Twitter;

Welcome Screen

Official Branding Color, Icon and File Extension(s)

The official branding and color scheme is now graced with a purple overtone.
The file extensions are also finalized as followed:

  • Project files now have the extension of .an;
  • Symbol export files is now .ansym;
  • Animate Deployment Package files (via File > Publish Settings) is .oam;

branding

Edge Animate: Toolset & Workspace Overview

Adobe Edge Animate strength is it’s ability to create engaging experiences through precise authoring tools and a representation on a visual timeline. Interact with elements (1-3) or create elements using the native toolset (4-7) and the end user need to worry about the fine details of HTML5 or CSS.

toolset

The following capture shows the general gist of the Edge Animate workspace: use the Toolbar tools to interact with Stage Elements, and create transitions by tracking element Property value changes over time (captured via Keyframes) in the Timeline. Additional image or .svg assets can be imported (File > Import), web font libraries or symbol instances can be housed in the Library Panel.

workspace

To adjust the workspace panel positions click and drag the active Panel handler icon to the left of the Panel title (or the entire tab itself); then drop it into one of the Panel ‘Frame’ zones on the target panel. I have them labeled as Above, Below, Left, Right and Tab. The target panel zone will highlight a shade of purple and at that point you can release the mouse to commit the reposition.

panel reposition

When you have the Panels repositioned to your liking go to the Window > New Workspace menu command to save it as a custom workspace.

Edge Animate: Localization

In addition to English, Edge is now available in German, Spanish, French, Italian, and Japanese. To switch the language, select the ‘Help > Change Language’ menu command.

localization

Edge Animate: Publish to Web, Deployment Package and Adobe DPS iBooks

Adobe Edge Animate offers three publishing options via the File > Publishing menu command.

  1. Publish to Web: Render final project for the web at the designated target directory and upload (ftp) to your web host to view.Additional web publish options allows you to target older versions of Internet Explorer by enabling the ‘google chrome frame’. Streamline the loading of frameworks by via CDN. Publish content as static HTML and HTML tags instead of injection via JavaScript improving SEO and compatibility for Screen Readers
  2. Publish as Deployment Package: for use in other Adobe applications such as Adobe Indesign
  3. Publish to Apple iBooks Author

publish

Edge Animate: Stage

  • Access Stage Rulers (Ctrl/Command + R or View > Rulers menu command to toggle) and define Pixel or Percentage Guides;
  • Persistent Stage Scrollbars and an Auto Center Stage target icon command;
  • Scrub Zoom – simply scrub/drag left for zoom control. Double-click the value to manually enter a percentage into the field.
  • Relativity Marker/Pin(s) – when the Stage percentage property is used you get an adjustable ‘pin’ to preview on-stage how the design will reposition based on the value set.
  • Quickly troubleshoot event handler code or generic script errors with Code Error Hints to the lower right of the stage.

stage

Edge Animate: Property Panel

Adobe Edge Animates’ strength is how it captures an assigned (id) element tag and its (css) property changes ‘pinned’ as keyframes on the timeline. The change in property values between those keyframes then translates into a transition or a rendered animation.

The following capture outlines some of the Property Panel context element controls. In my use case the element is an ‘img’ and displays context sensitive properties not available to other elements.

property panel

Edge Animate: Elements Panel

Adobe Edge Animate Elements Panel shows a node tree structure or representation as they appear relative to the parent symbol ‘Stage’. Elements stacked or positioned to the top have a higher z-index (stack) order and appear in front of elements with a lower stack order.

The following capture dictates the majority of the Elements Panel functionality, iconography and use case scenarios.

  • All Elements are assigned a user-defined Id and Tag and is represented with an associated element type icon;
  • Then stack (position) elements using Adobe Edge Animate Group, Nesting, or Symbol Instance functionality.
  • Assign global Stage Actions (compositionReady, scroll, orientationchange, resize .etc) or local Element Actions (click, mouseover, touchstart .etc) by clicking the associated actions icon and choose from the event handler list.
  • Double-click a Symbol Instance icon to enter Symbol Edit in Place Mode.
  • Toggle ‘visibility’ is for preview mode only, and is not apply at runtime.
  • Right Click/Option Click on any Element for further context sensitive commands or go to the Modify menu command for additional commands on an active element.

elements

Edge Animate: Timeline

Adobe Edge Animate Timeline combines the element node tree structure and associated keyframe property on the left with a time-scale infographic on the right. Element property values (keyframes) are pinned at a specific times and a transition is created when that value is changed.

Also demonstrated below:

  • Custom timeline ‘Label’ and ‘Trigger’ can also dictate event conditions and handlers; Ctrl/Command + L to place a ‘Label’ at the position of the playhead. Ctrl/Command +T to place a ‘Trigger’ at the position of the playhead.
  • Filter Animated Elements to isolate only those elements that have transitions applied;
  • Enable Timeline Snapping, Grid and associated Grid Size for user-defined control;
  • Right Click/ Control Click anywhere on the Timeline or directly on a color-coded transition bar for additional context sensitive commands (also available from the Timeline menu command).

timeline

Edge Animate: Mobile-ready Content with Responsive Layouts, Restraints & Presets

For a complete overview and example use case go through the ‘Resize’ In-App Lesson on the main splash-screen.

  • Combine Stage level Percentages (optional Constraints) with a mixture of Context Position and Size properties (optional Constraints) to achieve responsive Layouts.
  • Resort to Layout Defaults for new Elements and Imported Graphics or select from a Layout Preset for an active element or image.

Edge Animate: Code Management

Access a more complete view of all the actions and Timeline triggers in a single Code window. Simply go to the Window > Code (Ctrl/Command + E) menu command. Then highlight the action or trigger to the left to view or edit.

  • Click the + icon to add global, local or timeline actions or triggers;
  • Click the Full Code button command to view and edit all actions in a single file;
  • Troubleshoot errors in code with in-panel code error hints;

code management

 

Adobe Edge Animate Box Shadow Effects

Adobe Edge Animate Box Shadow Effects

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

Adobe Edge Animate adds a new feature set when working with text, image and shape (Rectangle, Rounded Rectangle, Ellipse) elements.

As captured below, top, a single Rounded Rectangle element, with a 100% Color Fill and a Box Shadow set to Inset creates a neat ‘pillow’ effect.

As captured below, bottom, I created multiple (same dimension: width/height) Rounded Rectangle elements. Then isolated the effect starting with a base shape with a Solid Color Fill of 100%; followed by a variation of Box Shadow ‘Inset’ (solid fill Color set to 0%) versions. The effect resembles a gradient style you commonly see in graphics programs like Photoshop, Illustrator or Firreworks.

Adobe Edge Animate Box Shadow

Here is an elabrate take on the above mult-shape Box Shadow ‘Inset’ – a combination of shape elements with varying Inset properties to create a realistic dial button – all image free.

Preview Box Shadow Effects or click the below image capture to preview the below output animation.

Adobe Edge Animate Box Shadow Inset 

Download sample file below.

Animate Box Shadow Effects

Create details to elements with multiple box-shadow ‘inset’ effects.

Adobe Edge Animate Simple Scrollbar Symbols

Adobe Edge Animate Simple Scrollbar Symbols

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

The following sample and download demonstrates a simple (custom) use case vertical and horizontal scroll bar.

As captured below, the process uses a simple workflow: nest a text element (child) into a content div (parent) and set the parent div ‘overflow’ property to ‘hidden’. This essentially prevents text longer than the height and width of the parent from showing.

[message type=”info”]See Tip on Nesting Text Elements[/message]

Normally an overflow property of ‘auto’ is used to compensate with standard scrollbars, but in this case we don’t have that option and have to create custom scroll features with additional event triggers.

In this case it wll be a simple scrollbar – just the (Vertical Scroll) up/down buttons; (Horizontal) left/right buttons. An image or, in my case, a rectangle element, will suffice.

To make them scroll the contents of the parent container I will use the jquery (Vertical Sample) scrollTop and (Horizontal Sample) scrollLeft methods on a ‘click’ event handler.

An Example:

The Vertical scrollbar up button, has the following click event handler:

sym.$("content").animate({ scrollTop: "-=45" }, 500);

Download (bottom of page) the sample symbol files and review the click event handlers for the remaining buttons.

Preview ScrollBar Symbols or click the following screen-capture to preview.

Adobe Edge Animate Scroll Symbols

Download the zipped Symbol files (bottom of this page); unzip; then in your Edge project file go to the Library Panel and click the + icon command to the right of the Symbols then from the context list choose ‘Import Symbols…’.

At the prompt, navigate to the unzipped location and select both the .eglib files then click Open to commit the import process. As captured below, right, you should have two new symbols called myHorizontalScroll and my VerticalScroll. Drag and drop onto the Stage of your project file to use.

Adobe Edge Animate Import Symbols

ScrollBar Symbols

Two sample symbols (horizontal and vertical scrollbars) to import into an existing Edge Animate project.

Adobe Edge Animate with Responsive Layouts

Adobe Edge Animate with Responsive Layouts

Adobe Edge Animate Preview 7 Feature Overview:

Responsive Layouts, Restraints & Presets

  • Combine Stage level Percentages (optional Constraints) with a mixture of Context Position and Size properties (optional Constraints) to achieve responsive Layouts.
  • Resort to Layout Defaults for new Elements and Imported Graphics or select from a Layout Preset for an active element or image.

ResponsiveLayouts

New Ellipse Tool (O), Layout Defaults & Text Tool (T) Improvements

  • New Ellipse Tool (O) – instead of manually configuring the Rounded Rectangle Tool (Corner properties) simply resort to the this tool: activate and Click and Drag to create Ellipse; Shift + Click and Drag for a perfect circle;
  • New Layout Defaults – set relative Position (Top: Left or Right; Bottom Left or Right) and Size (Pixels/Percentage); Use ‘img’ tags for images instead of the default ‘div’; set image width and height to Auto;
  • Text Tool (T) Improvements – now allows for multiline paragraphs.

New Ellipse Tool (O) & Layout Defaults

Timeline Improvements

  • Renamed Timeline Modes: Auto Keyframe Mode (A), Auto Transition Mode (U); Toggle Pin and Easing.
  • Snap to Grid Display Toggle & Options;
  • Create Transitions from Keyframe(s): Select a keyframe in a chain, right-click and choose Create Transition and it will be applied between them. This option is only applicable when the next keyframe captures a change in value.

Timeline Improvements

Stage Improvements

  • New Rulers – Ctrl/Command + R or View > Rulers menu command to toggle;
  • New Guide(s) – drag from the horizontal or vertical Ruler to region an area or easier placement and alignment of elements by employing the Snap to Guides option.
  • Persistent Stage Scrollbars;
  • Center the Stage Option: regardless of where your stage exists along the x, y simply click this option to snap the stage to the center.
  • Scrub Zoom – simply scrub/drag left for zoom control. Double-click the value to manually entera percentage into the field.
  • Relativity Preview Pin/Marker(s) – when the Stage percentage property is used you get an adjustable ‘pin’ to preview on-stage how the design will reposition based on the value set.

Stage Improvements

Property Panel Improvements

  • Restructured and streamlined properties in order of functionality; also when an element is active on the Stage then only its existing property attributes group is active.
  • Toggle Property Groups functionality;
  • User-defined element Class;
  • New Unit Switch– Pixel and Percentage units;
  • New Element ‘Relativity’ Position properties: Top: Left; Top: Right; Bottom: Left and Bottom: Right. Manually set an elements position relative to the Stage (Global) or relative to the Parent Element (Local), or choose from the two available Position Presets from the preset picker icon.

Property Panel Improvements

  • New Box Shadow Properties: applicable to an element, image, text or symbol;
  • New Accessibility Property;
  • New Image property options – Alt description and isolated X,Y and W, H parameters;

Property Panel Improvements

Element Panel Improvements

  • Element Group/Ungroup Functionality – select multiple elements, Right-Click and choose Group Elements in Div;
  • Element Panel now has each element represented with an associated icon;
  • Double-click directly onto a Symbol element in the Elements Panel takes you directly into ‘Edit in Place Mode’.

Element Panel Improvements

Other Notable Improvements

  • Revised Code Panel with basic Error ‘trappings’;

Revised Code Panel

  • New jQuery Events : mouseenter, mouseleave, focus;
  • New Stage Event triggers: orientationchange, resize, onError;
  • One click access to Full Code ‘script’ file within the Code Editor;
Adobe Edge: Preview 6 Available on Adobe Labs

Adobe Edge: Preview 6 Available on Adobe Labs

Preview 6 Feature Overview:

New Welcome Screen:
Simplified wemcole screen with direct access to sample ‘Getting Started’ project demos. Click the ‘Whats New’ and ‘Resources’ tabs for additional options.

New Lessons Panel:
Access six instructional lesson guides from the welcome screen “Getting Started” tab or by going to Window>Lessons once you open a document. Simply follow the intuitive onscreen directions.  For multi-screen users, Undock the Panel from the workspace to maximize screen real estate.

[divider_top]

New Code Editor:
A new enhenced project basis Actions tree-view and and full code mode of selected actions.

  • slide the tree view pane for more viewing space;
  • adjust or add new stage or element event triggers by clicking the + icon command;
  • switch to Edit All mode by clicking the icon command to the upper right of the code window;
  • and toggle Actions Presets;

Edge Symbol file format:
Package project symbols from one composition to another using the new Export <> Import workflow.

  • export selected  symbol to the new .eglib file format at right-click context menu option;
  • toggle to another composition and import the symbol file (.eglib ) using the “+” symbol next to Symbols tab in the Library;
  • direct copy and paste of symbols from one composition to another;

Export format is ideal for a centralized collection of commonly used symbols. Import to project when needed. Copy and Paste is ideal when you have more than one project open: copy from one project and paste to the other.

Other Feature Enhancements

  • Re-introduced the Timecode.
  • Improved contextual menu support.
  • Six new Language support options from the Help > Change Language menu command.
  • Ability to customize Key Board Shortcuts via the Edit > Keyboard Shortcuts menu command.
  • Publish to Indesign CS6 DPS, Apple iBooks; use Google frame for IE 6, 7, 8; publish content as static HTML.

[divider_top]

Adobe Edge: Preview 5

Adobe Edge: Preview 5

Preview 5 Feature Overview:

New Welcome Screen:

Optimization and minification deployment options: specifying if jQuery should be packaged with the composition or downloaded from a CDN.

Down Level Stage for non- HTML5 Browser:

The down level stage can be used to create & publish a version of the composition that is compatible with browsers that don’t support HTML5 animation. The down level stage has minimal creation tools but you do have the ability to import graphics and create text elements, in addition to importing a poster from the main composition.

[divider_top]

Preloader Improvements:

Define a preloader before the jQuery framework or composition is dowloaded.

Swap Image:

Via the Properties panel you can now swap the source of imported images, e.g. this makes it easier to design with temporary/low resolution images and then swap in the final graphics once they’re ready.

Symbol Level Events:

The symbol creation & deletion events are now expose in the tool just like other events. This makes it easier to interact and orchestrate symbols with the rest of your composition.

[divider_top]

Timeline Improvements:

Plenty of visual improvements and some major Timeline workflow improvements.

The Pin – (Formerly called The Mark)
This accurately describes its function – it pins the current value of properties, while changes are always made at the playhead.

Activation
The pin can be activated/deactivated in a number of ways:

    • Double-click the playhead or pin
    • Menu: Timeline > Toggle Pin
    • Hotkey: P
    • The timeline control strip includes a Toggle Pin button

Visualization
The pin and region are now above the playhead. As you drag out the pin, a yellow region pointing forward will animate towards where the edit is being made.  A blue region pointing backward will animate from where the edit is made to how the object appears before the edit.

Ghost Pin + Region
When the pin is active and you press play, a “ghosted” region remains visible. You can return the playhead to its original position, and reactivate the pin, with the Return command:

    • The left-arrow button in the Timeline control strip
    • Menu: Timeline > Return
    • Hotkey: Return

Ghost Playhead
Similar to the Ghost Pin+Region, when there is no pin and you press play, a “ghosted” playhead remains visible. The return command will return the playhead to this position.

Playhead and Pin Time Displays
Playhead time display is removed from the Timeline control strip. We’ve added “heads-up” time displays directly next to the playhead and pin.

[divider_top]

New Timeline Icon Commands:

  • Insert Label
  • Expand/Collapse Lanes Unlike the two menu commands (Expand/Collapse All and Expand/Collapse Selected), this button operates on the selected lanes if there is a selection, and all lanes otherwise.
  • Timeline Snapping

Cursor property:

The cursor property in the Property Panel now shows an icon for the applicable cursor instead of a text description.

Element Contextual Menu Enhancements:

More items are available in the contextual menus when an element is selected on Stage, in the Timeline or Elements panels.

Other Feature Enhancements

  • Better Visualization of imported HTML (static) vs. created in Edge (managed) Elements: In the Elements panel we’ve removed the asterisk (*) from the name to indicate the distinction and now use a more subtle brightness in the element name.
  • New On-Stage Tools: Tranform Tool and Clip & Background Position Tool.

[divider_top]