CSS Sprites -- an extreme example

This page

http://www.apple.com/itunes/billion-app-countdown/

has a nice train-station-style flickering counter. It looks like it
might be Flash or even a QuickTIme movie – the animation is that
smooth – but it’s not. It’s a really extreme example of the CSS
Sprites idea that Paul Dunning has done in his CSS Rollover Action.

Here’s the image they are flickering over:

http://images.apple.com/itunes/billion-app-countdown/images/filmstrip.png

That image is 6180px tall and 53px wide. A clever bit of JavaScript
adjusts the background-image top offset to make the “frames” change
several times a second during flips. The current number is set by the
server when the page loads, and a JavaScript flips the numbers at a
pre-set rate. And another bit of code calls back home to the server
every minute or so to adjust the clock to the current total, so it
never drifts too far from the truth.

Simply amazing, in my opinion.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

i love it… wish i knew how to…
:-{ you call it simple …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Complete with reflections as well. This is what Apple are so good at. Hiding complexity away so that it all looks elegant, easy or simple. Their stuff just ‘floats without any apparent means of support or propulsion’.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s also a copy of it running on the iPhone page, albeit a smaller
and it is about 17,000 in front of the other counter!
It’ll get to 1 billion before the other one!
Still like to know how to do it though, but don’t know what I would
use it for.
Regards
Steve.

On 15 Apr 2009, at 12:08, Ian Halstead wrote:

Complete with reflections as well. This is what Apple are so good
at. Hiding complexity away so that it all looks elegant, easy or
simple. Their stuff just ‘floats without any apparent means of
support or propulsion’.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve used timers like this in the past (albeit using images rather than sprites)
as a countdown to launch events (a product launch, or the start of a trade show
for example). I’ll see if I can find my old FW3 action I made for this. The
idea is that you give the action a specific date and time and the counter
counts down to the date.
5 days, 4 hours, 32 minutes and 45 seconds to go, for example.
If I did this again I’d ask the server for the current time rather than relying
on JavaScript which gets the time from the browser. Because of this you can end
up with different people seeing different times.
Regards,
Tim.

Quoting Steve Ballinger email@hidden:

Still like to know how to do it though, but don’t know what I would
use it for.


Extend Freeway the way you want with FreewayActions.com
http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

All right, you’ve got me wondering too. So I launch Firefox with
Firebug, and the first thing that happens is that Prototype.js loads
countdown.txt from apple.com. And that contains the current time and
date, a pipe symbol (|), and the starting number. I’ll leave it
running to see what else happens.

downloadcounter.js seems to be the guts of it, and it’s a very terse
bit of JavaScript that’s mostly made up of single-character function
and variable names. Not very readable. I can sort of follow its logic,
but it’s nothing I’d want to edit. It works off-line, and calls home
at an interval defined by what time of day it is to reset its counter.
Perhaps there’s times of day when the number of downloads per hour
varies wildly.

One thing I find interesting is that this code is written to support
an image of any dimension, with any number of frames. The code is
extremely abstract and configurable, and derives many of its variables
from its environment. Where I would be tempted to say “step this many
pixels and wait this many milliseconds before repeating”, this code
calculates what rate to move and how far based on the height of an
individual frame and the total height of the sprite. Very thoughtful
work.

Calling it appears to be fairly simple:

var downloadCounter = new DownloadCounter("/autopush/us/itunes/ 
includes/countdown.txt"),
	setup = function() {
		downloadCounter.setElement($("counter"));
	};
downloadCounter.setDigitImageAnimationCount(6);
downloadCounter.setDigitImageHeight(103);

Event.onDOMReady(setup);

if(AC.Detector.isiPhone()) {
	document.write('<style type="text/css" media="screen"> #main a.mac  
{ display:none; } </style>')
} else {
	document.write('<style type="text/css" media="screen"> #main a.iphone  
{ display:none; } </style>')
}

And you can see that they are using the exact same page for iPhone and
regular computer, so any difference in count will be down to the
internal implementation of the flipper logic, or possibly a different
seed date. The latest iPhone has a vastly faster JavaScript engine
than the Safari 3 on the desktop, maybe there’s a timing issue there.

Well, I’ve stared at this thing for about 15 minutes, time to go back
to work. It still hasn’t phoned home.

Walter

On Apr 15, 2009, at 2:55 PM, email@hidden wrote:

I’ve used timers like this in the past (albeit using images rather
than sprites)
as a countdown to launch events (a product launch, or the start of a
trade show
Regards,
Tim.

Quoting Steve Ballinger email@hidden:

Still like to know how to do it though, but don’t know what I would
use it for.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options