You have the web page loaded on the canvas (Edge uses WebKit to render web pages), you have the timeline at the bottom, and on the right side you have a panel with all the HTML DOM elements from the current page. Here is a screenshot of an interactive design created with this tool:
I know there are some people who don’t trust visual tools that create web pages. But I encourage you to take a look at this tool and also give us feedback to make it better (Edge was downloaded by a large number of people, a clear sign that the tool answers a need many people have). If you are not able to visualize code like Neo, a tool that helps you to code visually is simply awesome :)
There are many more things that the tool can do and as we move on towards the launch day more features will be added. If you want to check all the features that Edge supports, make sure you take a look at this page. If you prefer watching a video, here is the link. And if you want to see some cool sites created with Edge check this link or this (if this isn’t enough check the Facebook page).
A simple example of a web animation
My fellow evangelist Kevin Hoyt created the Adobe logo using just CSS and DIV elements (that’s right, no letters). Once the Edge preview 5 was out I thought that this would be the perfect opportunity to play with the tool on some cool HTML code.
Having the page loaded in Edge, it is time to create my simple animation. The timeline features two important parts: the playhead and the pin. Using these two tools you can either animate from the current state of the DOM to a future one, or you can animate towards the current state of the DOM.
For what I want to create I have to use the second scenario: I want to animate the individual parts of the logo from “nothing” to the finished logo. To do that I will enable the pin by clicking on the third icon from the Timeline panel (see the picture below). This will add to the timeline a little blue icon.
Adobe Edge allows you to control the easing equation for your animations. If you click the fourth icon from the Timeline panel you will be able to select the equation to be used.
Once I selected the easing equation I moved the pin to the right of the playhead. This means that I will create an animation towards the current state, which means that at the end of the animation the logo will look like the one created by Kevin.
Now I am ready to be creative with the different parts of the logo. I can play with the position by dragging the DIV elements in different positions, rotate (right-click on an element and choose Add Key Frame > Rotate), and changing its opacity (right-click on the element and choose Add Key Frame > Opacity).
You can orchestrate the animations so instead of moving all elements with the same speed and at the same time you can choose to delay some of them (just select the elements on the timeline and drag to the right or left and/or compress the animation line when you want to accelerate or slow an animation). You can insert key frames along an existing animation to fine tune the whole animation. In short, you have pretty much everything you’d expect from an animation tool.
You can see the final animation here.
What browsers are supported
Basically almost all browsers are supported: Chrome, Safari (including iOS and Android), Firefox, and Internet Explorer 9. For older browsers you have an option to create an image from any state of the animation and display that image.
Where to go next
I hope this short introduction raised your curiosity and you’ll try the product and give us feedback. As I said earlier, as we move on towards the 1.0 release it is important that people who actually build the web try this product and help us make the best tool for motion and interaction web content based on web standards – here you can find the product forum, a perfect place to share your thoughts.