Adobe Edge Preview – Creating an  

Adobe Edge Preview – Creating an Animated Bird

In our studio we’d decided to create an animated bird with Adobe new product called Adobe Edge Preview. With the first test run we’d created a simple animation in HTML5. The first thing that we did was draw out the bird (not the actual bird that we are currently using). We did this in different frames: perching bird, flapping bird, facing bird, and a couple of open wing drawings.

Image Below:

Then we vectorized the drawings in Adobe Illustrator to create some scalable images of the bird. With these images we were able to create the frames necessary for the birds taking flight from one end of our screen to the next.

From our storyboard we wanted to take the bird from the right side of the screen flying right next to Xillent logo. Bird came in from the right and perched on our “contact us” button and swoop down-up right across the screen into the empty circle next to our logo. We finished it off like this.

You can preview an image of it right here:

With the final bird looking like this:

Please view the bird in action by visiting the link below. We could had added in JS effects as the bird hovers over different part of the site but left it out for simplicity.

Conclusion: One problem that we’ve found while using Edge Preview was that it was still in its Beta phase and when the newer version came out we’ve encountered some incompatibility issues opening up our older Edge file. But we were glad that we were able to create an animation without using Flash.

View the final Bird in Flight (we did not use this bird and the animation in this demo on our our homepage. We went for a bird of prey):

Demo of Bird Animation in Adobe Edge Preview

• Filed under: Blog, Code Sharing, Jquery
•