Playing with Adobe Edge

Recently, we released Adobe Edge preview 5.1 (you can grab the bits from here). Adobe Edge helps you to create interactive web sites and web animation using just HTML, CSS, and JavaScript. The tool does a really good job of being intuitive. Look at the image below:

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.

First, I saved Kevin’s example locally. Then I removed the JavaScript code (it was used for centering the logo and I didn’t need it for my example) and I inlined the CSS (this is not an Edge requirement; I did it only to contain everything in a single resource). With all these small tweaks I was ready to start my Edge animation: I opened the Edge tool, I chose Open File and selected the web page with the Adobe logo (this is one of the great things about Edge: it allows you to work directly on a web page).

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.

When you are ready to publish your project, all you have to do is to select File > Publish Settings (you can choose to embed some of the JavaScript files from CDNs instead of your server; this way you might speed up the loading time) and then hit File > Publish. The last command will create a folder named publish in the same folder where your HTML file is stored (all the JS files being minified). All you have to do is to copy this folder to your server and you are done. Here is a screenshot with the project folder:

So what did Edge add to the original file (remember that we started with only one file containing HTML and CSS)? Basically it added just JavaScript files (Edge libraries plus jQuery libraries). All the information needed for the animations are stored in a JavaScript file that ends with _edge.js. Edge didn’t touch the original file other than including the pre-loader JavaScript file; if you open the HTML file you will see in the head section these lines:


<!–Adobe Edge Runtime–>
<script type="text/javascript" charset="utf-8" src="Adobe-Logo-in-CSS_edgePreload.js"></script>
<!–Adobe Edge Runtime End–>


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.

Follow me, my blog or Edge to stay informed on what’s new and hot.

Leave a Reply