Concept your design on paper is the single most important step to begin with. Draw it out. Scratch what you don’t like. Redraw it. Think ahead about the models and controls while you do this too.

This page is a good example. Even something simple like creating a tool to reconcile records across to tables needs a plan of action.

Step 1

Step 2

Step 3

Profit!

For example, the popular ajax loader file that hails from Apple’s own asynchronous progress indicator, has 12 points and loops around once a second. Well, for one thing, 12fps is really choppy, but it already plays slower on Apple’s nifty browser.

jQuery to the rescue

Did you know that jQuery can control css background positions? Are you thinking what I’m thinking?

But first, back to drawing board

So the first part was to break up the animated gif frames and spread them out across a very long canvas. Since Photoshop no longer opens animated gif files (unless you own ImageReady somewhere), Fireworks can open the file. Use Fireworks to export the frames to individual files and THEN Photoshop can import all the files as a stack.

File <Scripts> Load Files into Stack…

For our ajax loader, expand all the layers next to each other and then save it out to its own gif. The file size won’t be that difference in fact.

Now let’s get back to jQuery

In our html, just set the div with a width and height to match your gif to prevent clipping and let the script do the rest.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	setInterval(animate, mpf);
});

Now we have a script that will snap the position of the background over each “frame” at the correct frame rate. Actually, the frame rate is not divisible by 1000, but it’s close and it’s not like you could tell.

The only problem with this script is that it’s constantly running. If you look at the page in Firebug, your going to see the code whipping around with new values all the time. Annoying! Also, chances are your page isn’t going to need some animation playing constantly. Ajax loaders are intermittently called when a simple action is called as a… asynchronous progress indicator! Who knew.

So we’re going to put in a cancel command to this script: clearTimeout.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;
	var runAnimate = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	runAnimate = setInterval(animate, mpf);

	$('.animate').toggle(
		function () {
			clearTimeout(runAnimate);
		},
		function () {
			runAnimate = setInterval(animate, mpf);
		}
	);
});

Add in a toggle so show how to turn on and off the animation and were done.

It even works on ie6!