Adobe Edge experiment: Eddie the Brick

Adobe has seen the future — or at least a potential future — and they have prepared accordingly. If Flash meets an untimely end, Adobe Edge will rise to take its place. Even if Flash sticks around, Adobe Edge is a cool little tool that lets you add HTML/CSS/JS animation to a page in a design-friendly interface, dragging and dropping, timelining and keyframing.

I decided to give Edge a spin, and I made this unfunny Eddie the Brick cartoon with it.

The current release is Preview 1, and it’s pretty rough. While working with it I ran into several bugs and missing features. When I first saved my project, it reset all my settings. I was stumped for a bit because I turned off the auto-keyframe function and didn’t realize there was also a function that was hiding all my static objects (because they hadn’t been automatically given keyframes). My project involved bits of text appearing and disappearing, and I couldn’t find a way to have objects only appear at certain times. I used opacity keyframes instead. Images can’t be scaled in the interface. Also, the full animation can’t be looped. None of these are big deals, and I’m sure Adobe will address them as development continues.

One thing that might be an issue occurred when I added a whole bunch of keyframes. Eddie is jittering for the whole animation, so I created a repeating pattern of him slightly, rapidly moving about. The last few pastes I did of the pattern made the program hang for several minutes. It probably also makes up the bulk of the 240k JavaScript file Edge created for the project.

All in all, it’s a cool start, and I look forward to a much-polished version of this becoming a standard part of my workflow.