First look at Adobe Edge

Good-bye, Flash!!

Yesterday, Adobe Labs made available for download and preview its new program, Adobe Edge. Adobe calls it “… 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. ”

Within minutes of downloading and installing, I was off and playing with Edge. What a cool tool! No .swf or .flv files to export, no special players needed on browsers, just JavaScript and style sheets! The design interface looks a lot like Flash – it’s got a stage, timeline, and keyframes. Should be familiar for anyone who has ever created a Flash animation. But that’s where the similarities end. When you save a file, such as my sample test here, Edge automatically creates the ridiculously small files needed – in this case: test2_edge.js, test2_edge.css, test2.html and test2.edge. It also creates a folder with the images used and an include file with the Edge jQuery files. Upload those babies and you are ready to go! If you make edits to your animation, you only need to upload the .js and .css files (unless you add new images, of course).

Since this is just a preview release, there are some obvious things missing still. The vector graphic drawing tools are limited to rectangles and rounded rectangle shapes at this point. Color fills are only solid – no gradients or patterns yet. I expect to see those added soon. There is also no ActionScript – but I am not sure that will be a feature of Edge. I believe Edge is primarily for creating simple animations not game development or other interactive experiences. No video or sound import either – Flash will still be needed for those things, I imagine.

However, for simple ads or transitions Edge is a nice easy tool. Looking forward to the actual launch of this great new product from Adobe.