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.
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.
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
Import web graphics files
SVG, PNG, GIF, and JPG web graphic files can be imported.
Standards – based output
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.
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.
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
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.
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.
• Edge must be uninstalled before installing a new version of Edge.
• The “remove preferences” checkbox does not remove the user preferences.
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.
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.
• 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.