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.
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.
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 comes with three options: Horizontal, Vertical and Both.
When selected the preloader will be centered as well.
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;
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;
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.
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 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.
Import Edge Animate Composition into Dreamweaver
Import Edge Animate Composition into Adobe Muse
Import Edge Animate Composition into Adobe InDesign
A Step-by-step guide to create an Interactive eBook
Edge Animate to Edge Reflow
Fireworks to Edge Animate
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.
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.
Working with Video/Audio
Adding youtube video using an iFrame
Adding Video using the Edge Hero ‘class’ reference
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.
Scale to Fit Compositions, by Sarah Hunt, Adobe Edge Product Manager
Creating Flexible Layouts, Paul Trani
Edge Animate with Drupal & WordPress
Edge Animate with Drupal, by Timm Jansen
Add Edge Animate to a WordPress Installation with the Edge Suite Plugin
Create 360 View
Enabling Gestures in Edge Animate Compositions
Interactivity with Edge Animate
How to build a web banner in Edge Animate
How to Create a Dynamic Slideshow in Edge Animate
Parallax Scrolling Made Easy with Edge Commons Library
Constructing a Dynamic Slideshow with Timeline Triggers
Binding Clicks to Dynamic Symbols
3D Cubes, Leap Motion, Edge Animate and Greensock
Using Symbols and JSON data in Adobe Edge (an older reference but the context is still relevant to the latest Edge Animate version)
Creating Variables and Conditional Statements in Edge Animate
Loading XML via AJAX into Adobe Edge
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;
- html5 video;
- 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 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.
To Add An Edge Web Font Reference to a Project
- Open an existing project file (File > Open: .an or .html) or Create (File > New).
- Open your preferred web browser and visit the following Edge Web Font resource library: http://html.adobe.com/edge/webfonts/
- The follow the below A, B, C routine detailed below.
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.
From the welcome screen we have instant access to:
- project commands: Open File for previously saved projects or Create New to start a new project;
- recently saved project files from the Recent Files list;
- resource tab options with In-App Lessons (Getting Started), notable core features (Key Features), and resource references (Resources);
- social media connection through Facebook and/or Twitter;
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;
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.
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.
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.
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.
Edge Animate: Publish to Web, Deployment Package and Adobe DPS iBooks
Adobe Edge Animate offers three publishing options via the File > Publishing menu command.
- Publish as Deployment Package: for use in other Adobe applications such as Adobe Indesign
- Publish to Apple iBooks Author
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.
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.
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.
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).
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;
[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.
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.
Download sample file below.
Animate Box Shadow Effects
Create details to elements with multiple box-shadow ‘inset’ effects.