Motion and Interaction Design for HTML5
- Recent Updates
- January 19, 2012 — Adobe Edge Preview 4 is now available! Preview 4 introduces significant new features like Symbols, Web Fonts, and Element Display. We have also a number of usability and performance enhancements.
- Download Edge Preview 4 | Watch the Edge Preview 4 introduction video
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.
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.
Download and Discuss
Download Edge Preview 4
Discuss Edge For updates from the product team, like Edge on Facebook and follow Edge on Twitter.
Edge Preview Highlights
Edge is an intuitive tool for creating motion content that runs beautifully on mobile devices and desktop browsers. It features an easy to use interface, with a properties-based timeline for impeccable accuracy and control. Create new compositions, import and animate existing web graphics, or add motion to existing HTML files without compromising integrity.
Features Introduced in Edge Preview 4 (1/19/12)
We are very pleased to introduce significant updates in this release. Preview 4 adds Symbols, the ability to create reusable objects that animate and interact independently of the main composition. Other key additions are support for web font services, and Element Display, which lets you manage how long elements are displayed on the stage.
Symbols
- Create nested animations with independent timelines and interactive capabilities.
- Programmatically control symbols via exposed APIs and pre-built code snippets.
- Edit symbol definitions in the same manner as working with other objects.
- Specify whether or not a symbol should autoplay or not.
- Control playback functionality at the playhead location, such as play or stop commands.
- Scrub or play the timeline to scrub symbols, which will follow symbol commands and autoplay definitions.
- Easily access symbol definitions and instances in the new Library Panel.
Web Fonts
- Add richer typography to your compositions by integrating a web font service. Edge supports services like FontSquirrel, Google Web Fonts, Typekit, and more.
- Access newly added fonts from the list of available fonts.
- Define a font fallback list for users who don’t have the font in your composition.
Element Display
- Control how long an element is displayed, so they only appear when needed. By default, elements are always on, even if they’re off the stage. They can be configured to be “off” (equivalent to display=”none”), removing them from the HTML rendering tree and reducing resources.
Performance
- A common version of WebKit for Mac and Windows provides a more consistent stage experience across platforms and improves performance.
- In-app playback performance has been improved, especially on Windows.
- Various bug fixes.
Getting Started
Follow these steps to get started with the Edge Preview:
- Watch the Introducing Adobe Edge Preview 4 video
- See the complete list of updates in Edge Preview 4
- Download and install Edge Preview 4
- Read the Beginner's Guide to Adobe Edge Preview
- Download and experiment with Edge Preview sample files
- See the Edge Preview Release Notes for supported features and known issues
-
Ask questions and share your feedback in the Edge discussion forum
Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.
Community
Below you'll find references and links to help you participate in the Edge community.
Online Forum
Ask questions and discuss ideas with other users of Edge in the discussion forums. Your participation and feedback are tremendously important to us. We would like to find out what you think of the product, what you think of the output, which new features you’d like to see first, if you find any bugs, or any other feedback you'd like to provide.
Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.
Adobe Developer Connection
Beginner's guide to Adobe Edge Preview
Learn how to apply and use the various new animation and interactivity features of Adobe Edge.
Introducing Adobe Edge Preview 4
Adobe Fellow Mark Anders shows new features in Edge Preview 4, such as support for symbols and web fonts.
Resources
If you want to learn more about releases on Labs as well as other Adobe technologies, visiting a user group or connecting with an Adobe Community Professional is a great place to start.
Product Details
Features
| Feature | Description |
|---|---|
| Intuitive user Interface | 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. |
| Visually author animated content | 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. |
| Add motion to existing HTML content | 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. |
| Symbols | Create reusable objects that animate and interact independently of the main composition.
|
| Interactivity | Interactivity such as looping, hyperlinks and animation control can be added within the Actions Editor. Actions can be attached to elements, the stage, timeline, or triggers. |
| Import web graphics files | Import existing web graphics such as SVG, JPG, PNG, and GIF files. |
| Standards-based output | 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. |
| Reliable content on desktops and devices | 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. |
FAQ
- What is Adobe Edge, and what does it do?
- Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites using standards like HTML and HTML5, JavaScript and CSS. It is currently in public preview and is designed to be powerful yet approachable and easy to use. Edge is currently available as a complimentary download on Adobe Labs.
Preview 4 introduces major functionality improvements and new features such as Symbols, support for Web Fonts, and Element Display. See the complete list of updates in Edge Preview 4. Upcoming previews will continue to feature additional creative capabilities and functionality – user feedback is strongly encouraged to help us improve Edge.
This is an early look at Edge, for evaluation and feedback that will help shape the features and future roadmap of Edge. Users are also encouraged to submit feature requests and report bugs. - Who should use Adobe Edge?
- Adobe Edge is ideal for visual, web and interaction designers who want to energize their content for the web with movement and transitions.
- Is Adobe Edge a standalone application?
- Yes, Edge is a standalone software application that works independently of other tools. Graphics that are created using Adobe Illustator®, Fireworks® and Photoshop® can be added to your composition in Edge. HTML documents using CSS-based layouts created in products like Dreamweaver® can also be opened in Edge.
- How does Adobe Edge differ from other Adobe tools for the web?
- Edge is a new addition to the existing set of Adobe professional web tools like Dreamweaver, Flash Professional, and Flash Builder. Each Adobe tool has strengths for their respective use cases and support different technologies:
Product Sample use cases Supported technologies Adobe Edge Preview Advertising, simple animations and motion design for new compositions or using existing CSS-based page layouts JavaScript, JSON, HTML/HTML5, CSS, web graphics including SVG, jQuery-based animation framework Adobe Dreamweaver CS5.5 Websites and web applications for desktops, smartphones, and other devices HTML/HTML5, CSS, JavaScript, jQuery, PHP, PhoneGap, site management, FTP, CMS frameworks, SVN (Subversion) Adobe Flash Professional CS5.5 Immersive interactive experiences, mobile applications, gaming, premium video, advertising ActionScript, Flash Player, AIR for desktop and mobile Adobe Flash Builder 4.5 Rich Internet applications (RIAs) and mobile applications Professional ActionScript IDE, Flex, Flash Player, AIR for desktop and mobile
See answers to more frequently asked questions (.PDF)
System Requirements
The minimum system requirements for the Edge Preview are as follows:
Windows
- Intel® Pentium® 4 or AMD Athlon® 64 processor
- Windows 7 or Windows Vista®
- Windows XP is NOT supported
- 1 GB of RAM
- 200 MB of available hard-disk space for installation
- 1280x800 display with 16-bit video card
- Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*
Mac OS
- Multicore Intel processor
- Mac OS X v10.6 and v10.7
- Mac OS X 10.5 is NOT supported
- 1 GB of RAM
- 200 MB of available hard-disk space for installation
- 1280x800 display with 16-bit video card
- Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*
Release Notes
The Edge Preview is designed for evaluation purposes only. We do not recommended that this release be used on production systems or for any mission-critical work.
