The main interface is divided into 3 sections. The left sidebar holds selected UI element composition tools, right side bar has all the main web UI element lists, including, shadow effects, images, text, whereas the bottom section contains the timeline editor to choreograph animations.
The Elements pane lets you show/hide selected element and lock it down to prevent further editing. When you select an element from the main screen, it immediately highlights it in Elements pane, making it easier to hide or lock it. When you hover mouse pointer over an item listed in Elements, it tells you class initials with name, so you can easily identify it in CSS file.
The properties pane at left side shows composition tools for selected UI element of your web page. Once selected, you can change its location size, opacity, text font family, size, and text styles, set transform origin, image rotation and so on.
The timeline editor enables you to view timeline of each animated element. If you’re dealing with one huge CSS file, click filter button to show only animated elements in Elements pane to quickly edit their positions, colors, size, etc. At the bottom-left of pane, you have zoom button to magnify the timeline for verifying allocated time and transition effect of all the animated elements.
Apart from creating cross-browser compatible animated content for all widely popular web browsers, including, Firefox, Chrome, Internet Explorer 9, web content created through this tool will work seamlessly on iOS and Android platforms too. According to official community, Edge Preview is in active development and will soon be updated with host of features. Adobe Edge works on Windows Vista and Windows 7.