No one logged in. Log in



Print RSS

 




June 15, 2015 

The 2015 Release of Edge Animate CC Brings Performance and Productivity Improvements!

We’re excited to announce the release of Adobe Edge Animate CC (2015)! In this release, we’ve rolled out a couple of key features focused on improved performance and productivity improvements.

On-Stage Text Editing

We have heard your requests and have implemented on-stage text editing. This means that you can style and edit text directly on the stage, instead of making edits out of context in a pop-window.

Edge onstage text

 

Faster Performance with 64-bit Chromium Embedded Framework (CEF) Support

On-stage rendering is now faster than ever thanks to 64-bit CEF support. Performance directly on the stage within Animate now has similar performance to browsers that use the Chromium engine, such as Google Chrome.

We can’t wait to see what you build with these new features, and we hope to get your feedback and input.

Happy Animating!

The Edge Animate Team

 

9:00 PMComments (0)Permalink
January 13, 2015 - Chris Converse

Add Your Responsive Project To a Web Page

Once you have completed your Edge Animate project, the next question is,
“Now what do I do with it?”

With a variety of publishing options available to us in the latest release of Adobe Edge Animate CC, it can be intimidating to take the next step of implementing your composition into your project. This blog post will focus on implementing your responsive Edge Animate composition into an existing web page.

chrisconverse_post_1174_figure_01

Continue reading…

8:00 AMPermalink
November 20, 2014 - Tareq Aljaber

Edge Animate Bug-Fix Update is Now Available – Download Now!

The latest release of Edge Animate CC (October 2014) introduced major architectural and runtimechanges to reduce the runtime size by 55% in addition to other new features. Even though we performed necessary testing, we still expected a few issues to come up given the magnitude of the changes implemented. Luckily, we have a great and active community who have reported these issues, worked closely with us to help reproduce them, and they also confirmed our fixes.
We just released an update with fixes for all known issues that our customers have reported. Here is a list of the top issues we’ve addressed in this update:

Timeline control and triggers
We’ve fixed multiple timeline issues such as resetting movie properties while looping, multiple triggers using the bindTriggersAction() method, and settings timeline controls (stop, reverse, etc.) on the first frame.

Continue reading…


October 16, 2014 

Using responsive Edge Animate compositions in Dreamweaver

In previous versions of Dreamweaver, if you embedded your Animate compositions using the Responsive Scaling feature, you may have run into some issues with your project not rendering correctly with the rest of your responsive page. The latest versions of Animate and Dreamweaver contain a fix for this issue so you can now safely embed your responsive Animate projects.

responsiveOn the left shows how responsive Animate compositions would cause a white space in the rest of your website when embedded in Dreamweaver. On the right is the fix!

Known issues when working with multiple Animate projects

There is one known issue with this fix; when you insert multiple responsive Animate compositions on a single HTML page, Dreamweaver does not render the animations. To workaround this issue, you need to tweak the code a little.

This blog post will walk you through the changes that you need to do in the code in Dreamweaver to get all the responsive compositions rendered on the page.

  1. Download and install the latest version of Adobe Edge Animate (CC 2014.1) and Adobe Dreamweaver (CC 2014.1) using the Creative Cloud application.
  2. Create two or more responsive Animate compositions, and publish them to get the .oam files.
  3. Create an HTML page in Dreamweaver, and select Insert > Media > Edge Animate Composition, and then select a .oam fileSave and preview in browser to see the Edge composition playing.
  4. Insert your second .oam file. If you preview in browser now, you will find none of the Edge compositions rendered on the HTML page.
  5. Merge the code generated for each .oam file in the <head> section of the Dreamweaver HTML page, such that the code looks like this:

<!–Adobe Edge Runtime–>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>

<script>

var custHtmlRoot=”EdgeComp1/Assets/”
var script = document.createElement(‘script’);
script.type= “text/javascript”;
script.src = custHtmlRoot+”edge_includes/edge.5.0.0.min.js”;
var head = document.getElementsByTagName(‘head’)[0], done=false;
script.onload = script.onreadystatechange = function(){

if (!done && (!this.readyState || this.readyState == ‘loaded’ || this.readyState == ‘complete’)) {

done=true;
//1st composition

(function() {
var custHtmlRoot=”EdgeComp1/Assets/”;
var opts ={
scaleToFit: “both”,
centerStage: “none”,
minW: “0”,
maxW: “undefined”,
width: “550px”,
height: “400px”
};

opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition(‘EdgeComp1′, ‘EDGE-2308149′, opts,
{“dom”:{}}, {“dom”:{}});
})();

 

 //2nd composition

 (function() {
var custHtmlRoot=”EdgeComp2/Assets/”;
var opts ={
scaleToFit: “both”,
centerStage: “none”,
minW: “0”,
maxW: “undefined”,
width: “550px”,
height: “400px”

};

opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition(‘EdgeComp2′, ‘EDGE-2639752′, opts,
{“dom”:{}}, {“dom”:{}});

})();

 

script.onload = script.onreadystatechange = null;
head.removeChild(script);

                        }

};

head.appendChild(script);

</script>
<style>

.edgeLoad-EDGE-2308149 { visibility:hidden; }
.edgeLoad-EDGE-2639752 { visibility:hidden; }

</style>

<!–Adobe Edge Runtime End–>

This workaround is just for the case where you want to embed multiple responsive Animate compositions inside of Dreamweaver; no need to worry if you just have a single composition. This workaround is a temporary way for you to get started, in the future we’ll be improving this workflow to make it easier for you to embed multiple Animate projects.

You can download the samples zip file from link given below, which has the following files for reference:

  • Dreamweaver HTML file after inserting the first OAM file.
  • Dreamweaver HTML file after inserting the second OAM file
  • Dreamweaver HTML file after the code is merged into the <head> section.
  • Whole Dreamweaver project with Edge OAM files.

Download link for sample files

Happy animating!!!

Vivek Kumar

Edge Animate Team

 

 

10:20 PMComments (0)Permalink
October 6, 2014 - Tareq Aljaber

Edge Animate reduces runtime size by 55%, ‘Save to Custom Folders’ feature, new Preloader options, and more!

Today we launched a major update to Edge Animate CC! In just three short months since launching a jam-packed release with major new features, we’re happy to announce a new update with a 55% more optimized runtime, fewer project output files, and more. This release is a major milestone to provide web designers with tools and features to easily publish lightweight HTML animations across different screens.

The latest update to the 2014 of Edge Animate CC

The latest update to the 2014 of Edge Animate CC

 

Here’s what we’re delivering to you today:

Reduced supporting runtime size by 55%

The team has been hard at work to reduce the runtime size by 55%, both by compressing our own runtime and removing dependencies on JQuery. This means a smaller payload size and reduced number of downloads required for running compositions, giving you faster loading times when viewing projects on the web.

This is a significant milestone for Animate as we work towards delivering lightning fast animations on the web. We’ve also been working closely with our friends at the IAB to help bring Animate in alignment with emerging web guidelines for advertising, giving authoring to the world of HTML ads.

Save your images, media and scripts to custom folders

Save your images, media and scripts to custom folders

Save your images, media and scripts to custom folders

 

In previous releases of Edge Animate, you had limited control on where to publish your assets regardless of their type (images, audios, videos, etc.), making it difficult to organize your site files..

In this release, we’ve mainstreamed the publish workflow by re-engineering and redesigning the publish setting dialog to choose where to place your files at publish time for each type of asset (images, audios, videos, and scripts). No need to manually copy-paste and organize folders.

Fewer project output files to manage

One of the great improvements we’ve delivered this release is publishing fewer output files. Fewer project output files means fewer files to manage, which means more time to build beautiful animations. With the latest release a composition will only have one JavaScript file compared to three JavaScript files with previous releases.

New preloader options

The latest release of Edge Animate gives you the option and control whether to include the preloader into your HTML file, or have it as a separate JavaScript file. For small compositions, users might prefer to include it into the HTML file to reduce the number of required files that need to be downloaded, resulting in a faster load time.

With a 55% reduced runtime size, fewer published files, streamlined publish options and new preloader options the latest release of Edge Animate is giving you the lightweight tools you need to create animations on the web.. Download the latest release by visiting creative.adobe.com and start animating.

We can’t wait to see what you build with these new features, and we hope to get your feedback and input.

Happy Animating!

The Edge Animate Team



June 2014: New Updates!!!

 The 2014 release of Edge Animate CC includes several new features and enhancements to help you create rich animations faster and easier. Read on for a quick introduction to new features and links to resources offering more information.

  • Support for HTML5 video
  • Import sprite sheets from Flash Pro, Photoshop or other design tools
  • Linking support for DPS Articles
  • Updated actions editor
  • Copy and paste SVG artwork from Illustrator
  • Hand and Zoom tools


Support for native HTML5 video

Edge Animate provides an intuitive user interface to let you import HTML5 videos into your compositions.

The video then can be used as part of an overlay and can have other composition elements animate around the video. Also, since the format for the video is native HTML5, it plays on iOS and Android devices as well as in modern desktop browsers.

For more information on using video in your animations, see Add video to animations.

Sprite sheet import

With Edge Animate CC 2014, you can import sprite sheets to add advanced, multi-frame animations to your Edge Animate compositions.

Sprite sheets let your graphics download faster with fewer HTTP requests. Automatic keyframing of sprites on import saves time by reducing effort spent with manual positioning of frames.

You can import sprite sheets (File > Import Spritesheet) generated in Adobe Flash Professional CC 2014 or any other tool that lets you generate sprite sheets.

Import sprite sheets
Import sprite sheets

For more information on importing sprite sheets into Edge Animate, see Import sprite sheets.

Article linking for Adobe DPS

Edge Animate lets you link to your Adobe InDesign or DPS Folio articles using the options on the user interface without writing code. You can create interactive title pages, table of contents, and advanced navigation to target articles and article subsections of your digital publications more easily and quickly.

For more information on linking elements to eBook articles, see Hyperlink elements to eBook articles.

Enhanced Actions editor

The Actions pop-up window has been redesigned to be more designer-friendly. The enhanced Actionseditor reduces the need to code, making it easier to add interactivity and more approachable for designers.

Actions popup prior to Edge Animate CC 2014
Actions pop-up window prior to Edge Animate CC 2014
Actions editor in Edge Animate CC 2014

A. Step 1: Pick an action B. Step 2: Pick a target C. Step 3: Edit the code snippet 

The new Actions editor visually guides you through the various steps in assigning actions to targets.

  1. Pick an Action - Actions are now logically grouped into categories. If you know the name of the action, you can search for the action using the search box. Else, pick a category to view the actions in it and click the required action.
  2. Pick a Target - Targets are grouped under Stage. Click Stage to view the target elements. When you click Stage, you may find a subcategory for Symbols if your composition contains symbols. Double-click the target element.
  3. Modify the code snippet as required.

If you find portions of code that are reused often, you can save them as snippets and insert them with a single click when required.

Save code snippets

In the Actions editor, click '+' adjacent to My Snippets, and then click one of the following options:

Custom snippets

Create Custom

Click to enter your own code and save it as a snippet. When you click this options, a code window appears. Type your code, click Save, and then enter a name for the snippet.

Add New From Selection

Click to save the selected portion of the code as a snippet. Enter a name for the snippet in the Actions editor.

Insert code snippets

In the code window of the Actions editor, click at the location where you want to insert the code snippet. Click My Snippets, and then choose the required snippet from the list that appears. The saved snippet gets inserted at the insertion point in the code window. 

Copy-paste from Adobe Illustrator

With Edge Animate CC 2014, you can copy (Ctrl/Cmd+C) an illustration in Adobe Illustrator, and paste it (Ctrl/Cmd+V) directly into Edge Animate. No need to save the illustration as an SVG file in Adobe Illustrator and import it through the File > Import option as in the previous versions of Edge Animate. When you paste the illustration in Edge Animate, it is automatically imported as an SVG file.

Adobe Illustrator illustrations imported as SVG files
Adobe Illustrator illustrations imported as SVG files

Scrolling hand and zoom tools

Edge Animate CC 2014 includes scrolling hand and zooming tools to help you navigate your Edge Animate composition easily.

Zoom and pan tools


Did you hear that? A new version of Edge Animate CC is here!

Hello Edge Animate fans!After months of intensive development from the Animate team, we’re proud to release a major update to Edge Animate CC (3.0) available right now with your Creative Cloud membership. This release comes jam-packed with brand new features, giving you the tools you need to keep pushing the boundaries of animating with HTML.

What will you find in this release?

Audio Support (!!)
Sound can be an essential component of any interactive multimedia experience. Whether it’s adding subtle sound effects or creating animated stories, audio will help you bring your narrative to life to enhance the experience of your viewer. We’re quite excited to bring you audio support using all the native HTML5 audio capabilities. This will let you import audio into your projects, synchronize sound with your timeline and easily control audio events with new snippets and playback controls. Since we’re using the browser as the player, anything you can do with sound in the browser you can do inside of Animate. Cool right?

We’ve put a lot of love into this feature and put together some documentation to help get you started. Check out Adding Audio to Your Animations to learn more.

Responsive Scaling
Creating motion for multiple screen sizes can be difficult. This is why we’re brought you responsive scaling to help your Animate projects scale up and down to fit different viewports. With this feature enabled, your projects will resize to fit whatever container you place it in and scale up and down as the container or browser resizes — keeping the aspect ratio of all your animations in place. To try it out, just check “Responsive Scaling” for the Stage properties, preview in the browser and watch the magic happen.

Script Loading
The web is beautiful in that there’s countless JavaScript libraries available which help you create anything you can imagine without having to write it yourself from scratch. If there’s anything we’ve learned from how you guys use Animate, it’s that you love bringing in JavaScript libraries to extend your compositions. Since Animate uses the open web to create your projects, it only made sense for us to easily allow you to bring in all your favourite libraries like Greensock, Edge Commons, jQuery UI and many more. In the library panel you’ll find a new section called “Scripts” — click the plus button to bring in that favourite JS library from your hard drive, or point to an online source. 

But wait, there’s more! Also included in this release are enhancements to OAM publishing, usability improvements for motion paths and object alignment, and other goodies to make your editing experience even better. To see an overview of all the new features, check out What’s New in 3.0.

Can’t wait to get your hands on it? Click on the “Install” button beside Edge Animate CC in your Creative Cloud desktop app to install, or visit creative.adobe.com and select “Download”.

Thanks to you, our loyal fans, for your ongoing feedback and support which help us drive what happens with each release. You rock. Happy animating!

Sarah Hunt
Product Manager, Adobe Web P&A


February 14, 2013 
Adobe Edge Animate 1.5 is available now on Creative Cloude 

CSS built-in filters 
Up until now, special effects and UI transitions could only be accomplished by stacking multiple images and using transitions to reveal and hide each layer. This increases the payload of your website and forces you to control multiple stacks of imagery instead of a single element. With CSS filters, you can now apply effects which were previously only available to you in image editing software like Photoshop. Filters are especially powerful in Animate and can be used on more than just images. You can apply filters to images, text, divs and symbols.
Since filters are a highly experimental feature, they’re still making their way into all the popular browser channels. Currently CSS filters are only supported in Chrome, Safari, iOS6 and Blackberry 10 browsers, but if you’re targeting a mobile-first experience or want to add some flair to your site with graceful degradation, give them a try.

Gradient Support
Gradients in Animate not only allow you to style your elements, but they’re fully animatable like any other property. This enables you to go beyond typical styling and create some interesting 2.5D effects by emulating light and depth. In this example, I’ve used a CSS filter shadow with a radial gradient to give the illusion of light being cast on the sphere. The new gradients panel allows you to apply linear or radial gradients and adjust the gradient positioning for fine-grained control. You can also choose how a radial is applied based on properties available in CSS by click-holding the radial icon.

Typography enhancements with Edge Web Fonts
No longer do you have to manually juggle code to add fonts to your Animate compositions. Edge Web Fonts gives you access to a vast library of fonts made possible by contributions from Adobe, Google and designers around the world. Edge Web Fonts are powered by Typekit, so you can be assured of high performance and stability. This will make it much easier for you to control typography at production time. Sort your fonts by style and add as many as you want to your font library. The Edge Web Font service is completely free and there’s no limit to how many fonts you can add to your content.

Check out the above features in action on Youtube.

September 24, 2012 - Rich Lee
Adobe Edge Animate 1.0 is available now with a surprise!

The day has finally come — Adobe Edge Animate 1.0 is here! We’re proud to announce that the first commercial version is now available from the Adobe Creative Cloud, as a perpetual (non-expiring) product. The surprise is that it’s FREE as an introductory offer, as a thank you for the tons of feedback we received during the preview phase, helping us get to version 1.0. We hope by making it free, we’ll get even more feedback and adoption. If you’re new to the Creative Cloud, all you need to download Edge Animate for free is go to creative.adobe.com and sign up for a membership. You’ll also have access to other Adobe Edge Tools & Services, such as Edge Inspect and PhoneGap Build.

Concluding the Preview Period
It’s been a thrilling ride for the Edge Animate team, since we first sneaked an experimental prototype of it at MAX 2010. Less than a year later, on August 1, 2011, we released Preview 1 on Adobe Labs. We really didn’t know how it would be received, but the response was overwhelming — there were 70K downloads on the first day, and major press coverage from publications like Cnet, USA Today, The New York Times, and Mac World. However, the most surprising aspect was that users were already showing off what they made with it within the first 12 hours of launch. It was incredible and flattering to know people had downloaded Preview 1, figured out how to use it, and posted their work on production sites in less than a day.

Looking back, some of us feel that Preview 1 was released too early. It only had a single timeline and couldn’t handle user interactions at all. Just about the only thing you could do with it was create a static, linear animation. There was concern that people would look at the tool and write it off as too basic or primitive for real-world use. We made a conscious decision to release early and often, taking in user feedback to help us improve it. Our development philosophy was very different what people came to expect from Adobe. In just over a year, we released six more previews. Each release incorporated user feedback and had a mix of major and incremental  improvements to the previous version. There were over half a million downloads during the preview phase, and as I mentioned earlier, the feedback we received was instrumental in making Edge Animate 1.0 what it is today.

Here’s a quick summary of the major enhancements of each Preview:
Preview 1 (8/1/11) – Single timeline, import graphic files, open HTML files
Preview 2 (9/7/11) – Fit and finish improvements and bug fixes
Preview 3 (10/1/11) – Interactivity and access to the Edge Animate API
Preview 4 (1/19/12) – Symbols, web fonts, element display lifetime
Preview 5 (3/11/12) – Optimized publishing options, down-level support for non-HTML5 browsers
Preview 6 (5/10/12) – Built-in lessons, localized in six languages, DPS and iBooks publishing
Preview 7 (8/20/12) – Resizable layouts, new drawing tools, stage improvements

We plan on releasing more updates to Edge Animate, to add new capabilities as well incorporating more feedback. Stay tuned for more news! With that said, please download Edge Animate 1.0 and let us know what you think!

Thanks,
Rich Lee
 Product Marketing Manage

Recent Updates
Aug 20, 2012 — Adobe Edge is now Adobe Edge Animate.
Preview 7 is here. New features include resizable layouts, rulers and guides, a more precise timeline, and much more.

Intuitive user interface — The features of Edge Animate are centered around a WebKit-based stage, so your compositions have fidelity across modern browsers. Design engaging HTML content with an assortment of styling options and integration with font services like TypeKit.

Animate with precision — Add motion to graphics and HTML elements with amazing accuracy with Edge Animate using the powerful, yet easy-to-use, timeline editor. Edit property-based keyframes and enhanced easing for complete animation control, or leverage the Pin tool to speed up the animation process.

Energize existing HTML — Since Edge Animate works natively with HTML, you can open HTML pages and add motion to them. The animation code generated by Edge Animate is stored in a separate file, so the integrity of the page is preserved.

Extend — Enhance the richness of your work with Edge Animate by handling user interaction and playback control. Use the built-in code snippet library or add your own JavaScript code.

Symbols — Create nested animations with independent timelines and interactive capabilities. Symbols are reusable and can be controlled via exposed APIs and pre-built code snippets.

Mobile-ready content — Content created with Edge Animate is designed to work reliably on iOS and Android devices, and modern desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9. Edge Animate also lets you define a fallback state for older browsers. pre-built code snippets.

Mobile-ready content — Content created with Edge is designed to work reliably on iOS and Android devices, and modern desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9. Edge also lets you define a fallback state for older browsers.Various bug fixes.

NEW FEATURES IN PREVIEW 7

New Resizable Layouts
Adaptability: Enable your Edge Animate compositions to adapt to different screen sizes, such as tablets and smartphones.
Percent-Based Layouts: Define how elements will respond to size changes using easy to interpret percentages.
Add min and max width to elements.
Use image presets to help control positioning.
Control percent-based layouts by positioning objects relative the top, right, bottom and left coordinates of your composition.
Layout presets make it easier to work with common layout tasks.
Symbol Resizing: Specify whether a symbol should scale or resize when instances are resized. This allows responsive elements within the symbol to work as intended (prior versions scaled symbol instances when resized).
New Lesson: Learn how to use resizable layouts in a new hands-on lesson, accessible from the “Getting Started” tab on the Welcome Screen, or from the Window menu.
Note: The above lesson in preview 7 is available in English only.

Drawing and Composition Enhancements
New Ellipse Tool: Draw perfect ellipses that can be further edited in the properties panel.
Box and Text Shadows: Apply and animate shadows for divs, images and text elements in the properties panel for richer effects.
You can also set associated properties such as blur-radius and spread.
Improved Text Editing: Create multiline text and control leading, indentation, and spacing with added text properties.
We’ve improved how text styles work when switching between ‘px’ and ‘em.’
You can also dismiss the popup with the ESC key and text will not be lost.
Background Image Size and Position: Control the background image’s size and position by pixels or percentages.
Auto-on Image Background Size: You can now set a div’s background image width and height to auto.

Stage Enhancements
Resizable Stage: Alter the size of the stage to preview how your composition responds to different size screens. Simply set the stage dimensions to percentages and grab the handles on the new ruler.
Rulers: Design with more accuracy using new on-stage rulers, activated from the View menu or hotkeys (Mac: Opt+Cmd+R, Win: Ctrl+Alt+R).
Guides: Guides can now be dragged from rulers and placed within your composition to help with element positioning, available in both pixels or percentages. To delete guides, drag them off the stage area, and lock or unlock the from the View menu or keyboard shortcuts (Cmd/Ctrl+;).
Positioning: Control the positioning of the stage in-app with a new centering toggle and ability to scroll beyond the top/left stage boundary.
Event Handling: Support for orientation change and resize events has been added.
New ‘mouseenter’ and ‘mouseleave’ events make it easy to control mouse events without interruption from other elements.

Timeline Improvements
Adjustable Timeline Snapping and Grid: Adjust the time granularity of where the playhead snaps for greater animation precision.
Selectable time-based increments are now available in milliseconds or emulated frames per second (FPS), with a visible grid.
Keyframes and Transitions: You can now manipulate individual keyframes independent of transitions, and creating transitions and keyframes has been made easier.
For two keyframes of different values, you can select them and select "Create Transitions" via the contextual menu.
You can select and then copy/paste keyframes, with transitions being created (or not) based on the Auto-Transition Mode switch.
Jump to previous or next keyframes from the contextual menu, or using Cmd or Ctrl +left or right arrow keys.
Transitions can be selected and removed, leaving keyframes intact.
Add keyframes to elements in the timeline using a new keyframe button.
Marquee selection does not select rollups, resulting in more accurate selection of transitions.
The playhead and pin are now fully visible at time ‘0.’
On-stage nudging works when focus is on the timeline.
Refreshed Lesson: The in-app lesson named “Animate” has been updated to reflect improvements with keyframes.
Note: The above lesson in preview 7 is available in English only.

Usability Improvements
Grouping: Group objects to help organize and control your on-stage elements.
Drag Visibility and Lock Icons: Toggle lock and visibility functions in the elements panel and timeline.
Assets in Finder (Mac) or Explorer (Win): Easily access and manage your imported graphics by navigating the file system directly from Edge Animate.
Redesigned Properties Panel: The properties panel now has collapsible sections and other improvements:
Global and Applied positioning: This allows you to get see the computed position of an element (global) or the values that Edge Animate assigns to the element (applied), for direct access to underlying properties.
Toggles: New toggles for clip and shadow have been added, as well as a tag picker.
Element Panel Icons: Icons have been added in the elements panel to visually distinguish element types.
CSS Classes: Custom CSS attributes can be defined on elements, using the ‘userclass’ functionality that is accessible from the properties panel (next to the ‘display keyframe’ and tag selection dropdowns).

New Keyboard Shortcuts: 
Show or hide code editor (Mac: Cmd+E, Win: Ctrl+E)
Maximize selected panel (~)
Switch between open compositions (Mac: Cmd+~ or Cmd+Shift+~, Win: Ctrl+~ or Ctrl+Shift+~)
Toggle forward through open documents (Mac: Cmd+`, Win: Ctrl+`)
Toggle backward through open documents (Mac: Cmd+Shift+`, Win: Ctrl+Shift+`)

Code Editor Improvements
Code Tree: The code tree has been re-skinned, and issues when switching to full code mode and back have been fixed.
Symbols: The code editor now shows only the body of selected symbol, making it clearer to focus on specific edits.
Errors: JavaScript errors are reported in the status line of the editor.

Accessibility
Screen Reader Compatibility: Edge Animate now publishes HTML tags (using the static HTML publishing output) for accessibility.
Set tab index, alt tags, and titles for elements.

Warnings and Errors
Warnings Display: Warnings and errors are displayed in the time code bar underneath the stage on the right. Click on the icon to get more details of the error or warning.
Code Panel Errors: The code panel will display information on errors in your JavaScript code.
onError Events: Events can be executed in a browser when an error occurs, to help debug compositions.

Lessons
New ‘Resizable Layout’ Lesson: Get hands-on with resizable layouts with a new in-app lesson, accessible from the “Getting Started” tab on the Welcome Screen, or from the Window menu
Refreshed ‘Animate’ Lesson: This in-app lesson has been updated to reflect improvements with keyframes.
 Note: The above lessons in preview 7 are available in English only.