Digital Conversations

Adobe® Edge Preview – Flash killer?

3rd August 2011

On Tuesday, Adobe announced the launch of the preview version of its newest piece of software – Edge. In their own words:

“Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.”

I’m always interested in new tools, so I downloaded the preview and got stuck in. Now, I’ll be honest, I was a little sceptical. After many years seeing sites created by Dreamweaver with bloated and inefficient code, my hopes weren’t overly high for Edge.

The interface will feel familiar to users of Flash, with a large timeline area, and your project being built up on a stage. Adobe provide a few sample projects to give an idea of the capabilities of the software.

After playing around with the samples, I set to work creating my own animation. Wanting to keep things nice and simple, my aim was to have the sun rise, move across the screen, and then set again. Of course, I wanted to do things properly, and not use any images, knowing that if I was writing this by hand, I could craft my elements using CSS alone.

With this being an early preview, options are still quite limited. For example, I found it odd that I was limited to solid fill colours, given the popularity of CSS3 gradients at the moment.

My animation

I set the stage to have a black background, and created a rectangle. The properties box let me set the border-radius to a nice high number (allowing me to create a circle), and after applying a yellow background to it, I had my sun. After some playing around with the timeline, I had my sun rising, the sky changing from night to day, and then the sun setting, and the sky going dark. All very basic but a nice test of the software.

Now the bit I was really interested in: the code Edge would generate for my animation. I was pleasantly surprised by the fact that the JavaScript is all in self contained files, with jQuery being used as the power behind the animation. In general, the CSS and JavaScript are tidy and logical – a welcome improvement from past experience of Dreamweaver generated files!

Oddly though, no HTML5 was in use (except the HTML5 doctype). This seems to be the case for the sample projects too. Newer elements like canvas are shunned in favour of the trusty div. Backwards compatible yes, but Adobe bill Edge as “staying ahead of evolving web standards”. The software is also packaged with version 1.4.2 of jQuery, quite an old version when you consider 1.6.2 is the current version.

Overall, I’m impressed with Edge. It shows promise, and it is nice to see Adobe looking to the future. It does feel a little rushed though, and Adobe will certainly need to embrace HTML5 properly to give this product a chance of success. I hope Adobe listen to the feedback given by early users, and incorporate it into the final product.


Tagged: | | | |

I'm a Senior Interface Developer at Reading Room. I love creating beautiful web front-ends for our clients, using the latest techniques. Currently getting excited about the possibilities of mobile development and responsive design.

Leave a response

  • Your email address will not be published.

  • one + = 4

  • You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>