Adobe Edge is a piece of software to help designers and developers add animations to a website using a gui (graphic user interface). It is still in the preview stage of development and is limited in features. The interface of Edge is familiar to anyone who knows Adobe programs. After checking out a few introductory videos I jumped right in.
I mocked up a Photoshop document and then coded the site in HTML and CSS. Then I brought this into Edge to animate. After plying around a bit, i realized that edge cannot change text properties if the text is not created in the program. This meant that I could not animate text size. Also, if I want to make a fallback for just part of the page this is not possible so I decided to try out a different workflow. I could see this workflow working in other situations, but it was not working for what I wanted to do.
I went straight to Edge with my mock up from earlier. I created a new project and then added all my assets to the project folder. I had a bit of trouble with the fonts at first, but I worked it out. I created all of my text in the program and animated it. After I was happy with the animation, I added the button using a trigger. Then, I created a fallback image that would be shown if the user’s browser is not capable of showing the animation. Lastly, I went to my IDE and added some CSS. I copied the important bits of the created HTML document and pasted them into my experiment page and made a few more CSS adjustment.
Adobe Edge could become an extremely valuable tool for creating animations that use no flash. It seems to be a good starting point that can be easily edited and adjusted with a jQuery, HTML, and CSS. It could also be useful in opening a completed HTML document to add a few animations.