Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, javascript, and CSS3. This is an early look at Edge with more capabilities to come, focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops. Create new compositions from scratch using basic HTML building blocks, text, and imported web graphics. Manipulate objects with an array of transformation and styling options which Edge natively applies to our jQuery-based animation framework. Adobe Edge is a prototype of a tool for creating animation and transitions using the capabilities of HTML5. Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. Get Adobe Edge and take it for a test drive to fully assess its capabilities!The user interface is based on a stage, timeline, and panels for elements and properties. It’s influenced by our customers’ favorite features and functionality in class-leading tools like After Effects and Flash Professional, but innovates in its ease of use. Animations and timing can be controlled on a WebKit-based stage, or via precise property adjustments directly on the timeline. You can also make quick edits on individual or multiple objects.
Add motion elements to existing HTML web documents. Edge stores all of its animation in a separate javascript file that cleanly distinguishes the original HTML from Edge’s animation code. Edge makes minimal, non-intrusive changes to the HTML code to reference the javascript and CSS files it creates.
Import existing web graphics such as SVG, JPG, PNG, and GIF files.
Edge reads and writes HTML, CSS and javascript files natively. Animated content produced in Edge is expressed in a javascript Object Notation (JSON) data structure that preserves the CSS-based layout. JSON is a formatting style for javascript that is easily readable, and allows more flexibility to work with the document and animated content independently.
Animated content created with Edge is designed and tested to work reliably on the iOS and Android platforms, WebKit-enabled devices, and popular desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9.
Highlights include:
• Create new compositions with Edge’s drawing and text tools.
• Import popular web graphics such as SVG, PNG, JPG or GIF files.
• Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
• Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
• Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.
Features Introduced in Adobe Edge Preview 3:
Interactivity
* Actions: The core of Edge’s interactivity capabilities, Actions are functions that can be added to handle a single event.
o The Actions Editor uses a popup interface that lets you enter JavaScript code for a function.
o A built-in code snippet library is available for commonly used functions like go to, stop, hyperlink, etc.
o Add your own JavaScript code to add new flexibility to your compositions.
o 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.
Enhancements and Bug Fixes
* Multiple compositions: We’ve made some tweaks to the way elements are bound to the stage, so you can now insert multiple Edge compositions into an HTML page.
* Expand and Collapse Timeline Rows: We’ve added two commands to help you better manage the amount of space the timeline takes up. You can access the Expand/Collapse Selected and Expand/Collapse All Commands from the Timeline Menu.
* Performance: Timeline rendering has been improved (especially on playback) and a new version of WebKit has integrated for Windows.
* Copy and paste: Usability enhancements and bug fixes make copying and pasting easier to use.
* Duplicate elements: The ability to quickly duplicate elements has been added (Cmnd+D/Ctrl+D).
* Z-index manipulation: Usability for drag and drop z-ordering in the elements panel has been improved.
Homepage – http://labs.adobe.com/technologies/edge/
Size: 65.4 MB
Download Trial
0 Comments