Wednesday, August 3, 2011
I recently took the time to play around with the beta of Adobe Edge. Edge is an animation package similar to Flash. But while Flash outputs swf files which run in the Flash VM, Edge outputs HTML, JavaScript and CSS capable of running in any modern browser.
Here are some of the things I found while playing with it:
- The generated code is surprisingly clean. The output consists of
- an HTML file (with a few imports and a single div tag)
- a CSS file (easy to read, with IDs that match the object names defined in the tool)
- a Javascript file (reasonably easy to read, but with a lot of animation data in it)
- JQuery dependencies
- Edge Javascript dependencies
- You don't want to edit any of these files other than the HTML, but from the HTML, you can add your own CSS or Javascript if you want to make changes above and beyond what the tool does.
- No real drawing tools - The current version only offers 3 shapes: rectangle, rounded rectangle and text. I assume there are more on the way. In addition to a few CSS tricks, they could have provided some basic shapes by generating SVG (or maybe HTML 5 canvas). You can still do just about anything you need to by drawing your shapes in Illustrator and exporting them as SVG or rasterized images. There is no explicit Illustrator support other than 'import image', but it auto detects changes in files.
The animation above was created with Edge. The output consists of 4 static javascript files, a generated javascript file, an html file and a css file. I had to embed it in an iframe to get it to display right in this blogger page (not overlap anything) and I had to write some extra javascript by hand to get the animation to repeat.
- Doesn't use Canvas - By now it should be obvious that Edge animates traditional DOM objects. It isn't just a port of the Flash VM to javascript running within a canvas. While this is nice in most cases (such as when you want to customize the output using additional Javascript or CSS), it would be nice to have a little more power than what HTML has to offer (arbitrary shapes for example). I wonder if there couldn't be a hybrid solution in the future, where a canvas could be added to an Edge animation to allow canvas-based frameworks to be mixed into Edge.
- No event listing - So far, this is for animation only. You can't listen to clicks, drags or mouse movement over your shapes. I imagine this is just because it's so early in the product's life. In the mean time, these are just objects in the DOM, so a couple of lines of javascript are all you need to get a reference and add a listener.
- No sound or video - while html 5 does support video now, I was more concerned with sound. Sound effects and animation go together like chocolate and peanut butter. I can't help but feeling my creations seem like little silent movies in their current state.
- No components - Of course, components are more in the domain of Flex than Flash, and it would be a little early to expect components in an Edge environment
- The Stage metaphor - Edge uses a 'Stage' metaphore rather than a 'page' metaphore like you would find in Dreamweaver (or any content-driven web page). Seems like a silly thing to point out, but this tool is for making an animation in a box. It is not for making a web site. After you finish, you can take the resulting animation and plug it into your web page by pasting in all the dependencies and the div tag.
- Doesn't crop to the stage - Because Edge is so similar to Flash, I was a little surprised when I ran my animation for the first time and saw artifacts running out of the stage. Of course it makes sense, a jpg or svg doesn't stop rendering just because it ran out of the stage.. it's not in a plugin like shapes in Flash are. I initially didn't think this was a big problem, but I haven't found many good work arounds. When you add your animation to an existing web page, there are a lot of cases where the artifacts are going to run out onto the rest of your page. I've seen others solve this by loading the animation in an iframe, but that seems kind of dirty to me (although I had to resort to this trick in the example above)
- Browser compatibility - It seems to work fairly well on modern browsers. I was running into issues on IE8 and Firefox 3.6, but that turned out to be lack of SVG support (I was animating SVG drawings created in Illustrator). Other than that, I haven't seen any problems.
- Mac support - It runs on a Mac, which is more than I can say for JavaFX 2. I'm only mentioning this, because I wouldn't have even picked up Edge if I could have been working in JavaFX, but since I don't have a Windows machine at home, I found myself looking at other things.
Here's another example which uses SVG heavily (won't work in older browsers)