Adobe Edge Review – Create Animated Web Content using HTML5, CSS3 and JavaScript

Adobe Edge – the new age web motion and interaction design tool helps designers to integrate animated content into their websites by the use HTML5, CSS3 and JavaScript.

With regular updates, Edge would add new functionalities to match the latest web standards and use feedback from users to provide a better functionality and user experience. This article can be treated as the first look at Edge where more features are yet to come.

Adobe Edge Review

Edge Preview Highlights

Edge is primarily being used to integrate rich animated design to new as well as existing HTML design projects which look great on desktops and devices.

  • Edge’s Text and Drawing Tools for Creating New Designs
  • Easily import SVG, JPG, PNG, GIF or other web graphic files.
  • Use the timeline editor to choreograph animation. Animate size, shape, color, position, rotation and other properties.
  • Put in motion within the existing HTML files without tampering the CSS-based HTML layouts’ integrity.
  • Copy as well as paste transitions, invert them and through in more creativity by choosing from the 25+ built-in easing effects.

Features

The UI (User Interface) works on the timeline, stage and panels for properties and elements. Its inspired by some of the popular functionality and features found in class-leading tools such as Flash Professional and After Effects but definitely with easier usability. Timing and animation can be regulated by property adjustments on the timeline or WebKit-based stage. You also get the opportunity of multiple or individual object editing.

Visually author animated content
New composition can be created by using basic HTML building blocks, imported web graphics, and texts. Styling options and transformation helps you to manipulate object that is applied to the animation frame work based on jQuery.

Adding motion to existing HTML content
You get the opportunity to add elements of motion to existing HTML web document. Animation code created by Edge is stored on separate a JavaScript file that helps Edge to clearly differentiate between the original HTML and the newly created code. There are very minor changes to the HTML code in order to create references to the CSS and JavaScript file it creates.

Import web graphics files
SVG, PNG, GIF, and JPG web graphic files can be imported.

Standards – based output
Edge natively reads as well as writes CSS, HTML and JavaScript files. JSON (JavaScript Object Notation) data structure stores the animated content created by Edge. JSON is JavaScript’s formatting style which is not only easily readable but also renders work flexibility with animated content and document.

Reliable content on desktop and devices
Edge creates animated content that is purely compatible with Android and iOS platforms.

Currently Edge is free and the beta version can be downloaded from Adobe Labs website.

Adobe Flash would not be replaced by Edge, at least for the time being. Edge is targeted to the Flash animators who intend to add a touch of animation to HTML, CSS and JavaScript – based web documents.

The latest developments allow web designers to create high quality complex animations without the use of Flash plugins and all this has been possible because of the new features of HTML5 and CSS3. iOS users would be happy because they do not have the facility of Flash plugins.

There are no easy ways to create animations by using CSS, HTML and JavaScript. Coders using text editors have been the driving force behind the web standards – based animations. Designers who relied too much on Flash are unfortunately out of the race.

Edge combines all the good elements of Flash development application like key frame based timeline, dragging and dropping objects, visual animation tools to the world of web standards – based animation. If you are a Flash user then it would really easy to use Edge.

Though Adobe is marketing Edge but it still does not comply with HTML5. Well, it’s not alone and there are others like Sencha Animator and Hype that advertises their compliance with HTML5 when all of them failed to stick to the HTML4 specs.

Edge uses CSS animations, Div tags, JSON and jQuery to keep the web document in place.
When you have SVG and Canvas then why opt for CSS and Div – based animations? Keeping in mind that it is the early view of Edge and when officially Adobe says that Edge would support SVG files so we need to wait a little.  “We seriously considered canvas, but current performance on mobile browsers (especially iOS) is very bad” – this is what Mark Anders from Adobe said when a Mozilla developer raised the question.

Anders further explained that iOS 5 would provide some relief from Canvas’ poor performance. Adobe is banking on the feedback from developers to decide on their direction regarding Edge. If you too want to voice your opinions then do so through the forums.

The early release of Edge is promising and Flash developers can include this is a handy tool in their kitty. Do not forget to watch the Edge overview movie on Adobe TV to learn how to use Edge.

Release Installation Instructions, How to Install Adobe Edge

Macintosh:
1. Double click the “edge_p1_install_mac_080111.dmg” file.
2. Open the “Adobe Edge Preview” folder and double click the application named “Install”.
3. The “Welcome” screen is presented, click “Accept” to install or “Quit” to cancel installation.
4. The “Install Options” screen is presented, click “Install” to Install Edge or “Back” to return to the “Welcome” screen.
5. The “Installation Progress” screen is presented, click “Cancel” to stop installation in progress.
6. The “Thank You” screen is presented, click “Done” to close the installer or the “Adobe Edge” button to launch Edge.

Uninstall:
1. In the Applications/Adobe Edge Preview folder double click the “Edge Uninstaller” application.
2. The “Uninstall Options” screen is presented, click the “Uninstall” button to remove Edge or “Cancel” to cancel the uninstallation.
3. The “Thank You” screen is presented, click “Done” to close the uninstaller or the “Adobe Edge” button to launch Edge.

Note:
• Edge must be uninstalled before installing a new version of Edge.
• The “remove preferences” checkbox does not remove the user preferences.

Windows:
1. Double click the “edge_p1_install_win_080111.zip” file.
2. Extract the contents of the zip to a desired location.
3. Open the folder containing the extracted files and double click Set-up.exe.
4. The “Welcome” screen is presented, click “Accept” to install or “Quit” to cancel installation.
5. The “Install Options” screen is presented, click “Install” to Install Edge or “Back” to return to the “Welcome” screen.
6. The “Installation Progress” screen is presented, click “Cancel” to stop installation in progress.
7. The “Thank You” screen is presented, click “Done” to close the installer or the “Adobe Edge” button to launch Edge.

Uninstall:
1. To Uninstall select Start->Control Panel and click “Uninstall a Program” form the “Programs” section.
2. Double click “Adobe Edge” form the list of programs.

Note:
• Adobe Edge program entry has no icon in the add/remove programs screen.
• The “Uninstall Options” screen is presented, click the “Uninstall” button to remove Edge or “Cancel” to cancel the uninstallation.
• The “Thank You” screen is presented, click “Done” to close.

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

1 Comment
  1. Danny Aug 19, 5:46 pm

    Nice. Was just dooing an adobe video training. So take this together.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters