11/21/11

Image Sprites, Easy Animation


For my project, I intend to post a short animation about Cinderella Getting Dress at the entry of the website, followed by an interactive animation to be the dynamic visualisation.  These animation would be 2D, short and with limited branches, which are inspired by the technology named Image Sprites. Google.com made this technology to be an amazing tool for online animation.

The video above is what Google Doodle to honour the birthday of Jim Henson, who was well known as the creator of The Muppets. It's not a gif nor video, but some collection of images put into a single image(image sprites, defined by w3cschool.com). 

henson11-hp-3o.png From Google.com

Google Logo – Jim Henson's 75th Birthday 
Maybe you already guess how it came from when you see the pictures above, for each movement, we create small images similar as "frame" of Flash, which is not strange for us animation students. To make it easy to control, it's better for the images to has the same width and height. Then we merge these images to be a big one, and use Javascript and CSS code to show certain part of the collection.

explain the image sprites 
In my website, I use the image and the idea of the Google logo in honor of Martha Granham to rebuild the animation, trying to understand this technology. You can visit it thought this link.

Collection of the movement of Google Logo to Honor Martha Granham
Try the Image Sprites, All source from Google.com

No comments:

Post a Comment