Adobe Edge Changelog

What's new in Adobe Edge 0.11.0.164.20564 Preview 7

Aug 21, 2012
  • 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.

New in Adobe Edge 0.11.0.150.19347 Preview 6.1 (Jul 28, 2012)

  • Adobe Edge preview 6.1 contains a minor update to preview 6 that resolves compatibility issues between Edge projects and the recently released Firefox 14.

New in Adobe Edge 1.0.0.15309 Preview 5 (Mar 12, 2012)

  • New Publishing Features:
  • Publish to Web — Optimize your content for deployment by specifying if jQuery should be packaged with the composition, or downloaded from a CDN to improve caching. Edge also transforms the _edge.js file, and minifies both the _edge.js and _edgeActions.js files, resulting in significantly smaller files.
  • Down-level Stage for non-HTML5 Browsers — Use the new down-level stage to design static (non-animated) compositions that are compatible with older non-HTML5 browsers such as Internet Explorer 8 and below.
  • Poster Capture — You can also create a static version of any composition with a poster image that can be placed on the down-level stage. With the main stage selected, move the playhead to where you want the image to be generated, and click the Poster camera button in the Properties Panel.
  • Preloader Improvements — You can now design what gets shown during the preloader, before the framework, JQuery or composition is downloaded. Choose from a clip-art gallery of animated GIFs or import your own. The loading event is also exposed, providing information on the size and giving more control on when it's used.
  • Major Timeline Improvements:
  • Pin (formerly called the Mark) — When you make an edit, this "pins" the current value while the new value is set at the playhead. You can use this as a faster alternative to animating with keyframes.
  • Playback behavior — Playback has been improved to help you focus on a specific part of your composition.
  • Other Timeline Updates:
  • Easing Tool — Easing functions are now available on the timeline control strip, which visualizes how each of them behaves. You can choose an easing equation prior to creating an animation, and edit them for selected transitions.
  • Time Display — The time display has been removed from the timeline control strip, and is now a "heads-up" indicator next to the playhead and pin.
  • Add Keyframes via Context Menu — "Add keyframe" is now available from the contextual menu when you right-click an element or symbol.
  • Buttons on the Timeline Control Strip: Expand/Collapse Lanes, Insert Label, and Timeline Snapping are now buttons. The filter for "only show animated objects" has been moved to the bottom left.
  • Playback Action Editing — You can now double-click on a playback action to edit the type of action as well as applicable parameters.
  • New On-stage Tools:
  • Transform Tool — Use the new transform tool to skew, scale and rotate an object. You can experiment with this by moving the cursor along the edge of a selected object. It is located next to the selection tool. As a result, controlling corner roundness and the transformation point are no longer accessible with the selection tool.
  • Clip and Background Position Tool — Control the clip area of a selected object by using the green outline and grab handles. When clipped, the black outline lets you control the size, while a center roundness control lets you move the image within it.
  • Symbol Improvements:
  • Symbols Added to Timeline — All symbol instances now appear on the timeline, regardless of whether or not they are animated on the parent timeline.
  • Symbol Playback Region — The length of a symbol's timeline is now displayed on the parent timeline, taking autoplay and playback actions into account (Note – these are not considered "transitions" and cannot be operated as such).
  • Symbol Level Events — Creation and deletion events are now exposed like other events, making it easier to interact with and orchestrate symbols with the rest of your composition.
  • Other Enhancements:
  • Stage Editing with Overflow Hidden Improvements — When editing a composition with overflow set to hidden, the contents outside the div area are now shown. This allows selecting and positioning of objects. On playback, they are hidden so you can see how they would look at run time.
  • Swap Images — Swap the source of imported images via the Properties Panel. This makes it easier to design with temporary or placeholder images that can be replaced later.
  • Cursor Property — The cursor property now shows icons for applicable cursors instead of text.
  • Element Contextual Menu Enhancements — More options are available in contextual menus when an element is selected on the stage, timeline, or Elements Panel.
  • Improved Visualization of HTML Elements — In the Elements Panel, imported HTML (static) is shown as dimmer compared to HTML created in Edge (managed) .
  • Various bug fixes.

New in Adobe Edge 1.0.0.9686 Preview 3 (Oct 4, 2011)

  • Edge will continue to be updated during the preview period with additional features and improved functionality. Preview 3 introduces interactivity capabilities for Edge, the most requested functionality thus far. The first set of interactivity features include looping, hyperlinks, access to the Edge animation framework API, and the ability to handle HTML DOM events – all within Edge.
  • Actions — The core of Edge’s interactivity capabilities, Actions are functions that can be added to handle a single event.
  • The Actions Editor uses a popup interface that lets you enter JavaScript code for a function.
  • A built-in code snippet library is available for commonly used functions like go to, stop, hyperlink, etc.
  • Add your own JavaScript code to add new flexibility to your compositions.
  • Where actions can be attached:
  • Elements to handle click events
  • Stage to access composition-level events such as “loaded”
  • Timeline to access playback events such as “complete”
  • Triggers to allow time-based actions to be applied in the timeline
  • Objects other than triggers allow you to select multiple events you wish to handle, each with its own action.
  • Labels — Insert labels on the timeline as reference points in your code, to enable functionality like playing or seeking to that point in the timeline.

New in Adobe Edge 1.0.0.9686 Preview 2 (Sep 8, 2011)

  • Edge will continue to be updated during the preview period with additional features and improved functionality. Preview 2 focuses on fit and finish improvements as well as feature enhancements, many of which are in response to community feedback.
  • Smart guides — Precision guide and dimension markers are displayed when an object on the stage is moved/resized, helping to align objects in relation to others.
  • Specify semantic tags on managed elements — Change the tag type of each shape, image and text in Edge to reflect appearance in the HTML document object model (DOM).
  • Copy and paste elements — You can now copy and paste elements in Edge, to easily duplicate shapes, images or text. Duplicate images will refer to the same underlying asset.
  • Align and distribute elements — Select multiple elements, and align and distribute them via new options in the Modify menu.
  • Drag and drop z-index manipulation — In the elements panel, you can now control the z-order of shapes, text and images created in Edge.
  • Playhead time editing — You can now type into the timeline’s counter to move the playhead to a specific location, or by dragging the numeric value up or down with your mouse.
  • Windows 7 update — An error on the Windows version causing Edge to crash on startup is resolved, no longer requiring users to change the display bit depth from 32-bit to 16-bit.
  • jQuery update — Edge’s animation framework now works with the latest jQuery 1.6.2.