If you have visited google’s home page in a modern browser (Chrome, Firefox) lately you may have noticed some cool animations happening above the search bar. I knew this could not be flash since for google using flash on the homepage would be like the Yankees settling for farm system talent. So what is producing this crazy effect? They are called sprite sheets and are taking a page from an old technology. Animated GIFs! We have all seen the hotness of animated gif’s popularized in the early 90’s. Sprite sheets are pretty much what you would expect. A flip book of images that combined together make up an animation.
Sample sprite sheet.
Making a sprite sheet
So how do we make a sprite sheet? There are a few different ways to accomplish this. We will be using Photoshop CS5 extended.
First things first we need an image sequence of the animation. This can be achieved by exporting from After Effects, Maya, Blender and a slew of other programs. If you don’t know how to do this consult your designer…
Ok assuming you have an image sequence we need to get that into Photoshop. File -> Open, navigating to the sequence folder and clicking “Image Sequence” checkbox will import the sequence into Photoshop. Leave the default frame rate at 30 and click ok.
Now you will only see 1 layer and go whaaa. Where’s my sequence? Relax. If you goto Window -> Animation you should see the animation appear if not already open.
So… Now that we have the sequence into Photoshop we need to transform it into a sprite sheet like our example above. To do this we are going to run a script on the sequence. But first we need each frame to be on it’s own layer. To distribute each video frame to an actual photoshop layer we need to click the context menu in the animation panel and choose “Flatten Frames to Layers”
Aight bro now we are ready for the magic. First you need to get a script to automate this task. Here In order to get this script to show up in photoshop you need to copy the layersToSprite.js file to your Presets/Scripts folder within your photoshop application directory and restart photoshop. (/Applications/Adobe Photoshop CS5 on mac).
You should now have a menu option File->Scripts->layersToSprite. Click that and you should see a sprite sheet sort of like the example above.
Animating with JQuery
The technique of animating the sheet really is setting up 1 css rule and then moving the background-position property to make a flipbook style animation. We are going to be using a modified version of the spritely JQuery plugin to handle the animation. Here
First we need to include jquery and spritely
Next we define some markup and CSS for the bird
Lastly we need to add the animation script.
Let’s break down the parameters. FPS is our frames per second that we want for this animation. The no_of_frames parameter is how many columns there are per row in our sprite sheet. Rows are the total number of rows in the sheet. lastRowCount is a parameter that defines how many columns are in our last row and is not needed if the last row is also full.
spRandom is a spritely function that randomly moves the sprite within a box defined by top, bottom, left and right properties. For more information on Spritely check out their website. Here
As you can see this is a pretty neat technique to create simple bitmap animations without the need of an external plugin such as Flash. I feel like this opens a great door for creative designers that have used an After Effects -> Flash workflow in the past to create cool timeline animations. I would be totally interested to see some examples of people using crazy sprite sheets to create HTML/JS/CSS animations and or games. Shoot me a comment!