Iphone friendly alternative to the animated gif (with Javascript and prototype js)
UPDATE: This class has been updated, please see more details here.
The problem:
Mobile Safari only allows animated GIFs up to a certain size (that is a function of the dimensions and number of frames). If the images are larger than the limit, Safari only renders the first frame.
Much to my misfortune while working with a friend to make an Iphone app for the WCSMT website, we came to the realization that the Iphone has serious limitations to display animated gifs. Coupled with the total inability (or better put : reluctance) to display flash content, it makes the Iphone very unfriendly to displaying short animation formats, like the ones on WCSMT or Miniclip’s SketchStar.
I realize this is a very small section of the market (people who like short animated gifs) and that the animated gif is an ancient format to begin with and not a lot of people have a practical use for it. Still i set out to find the way to display short-lenght animation formats where proper video pulig-ins are overkill (or too difficult to implement practically with web-based toys that create animations).
Solution:
A javascript class that will take an array of images and display it at a constant speed. This is pretty much a simplified javascript slideshow that goes very fast!
Here’s an example, making an animated gif of this to display on the Iphone would be impossible:
How does it work?
<script src="http://www.piterwilson.com/stuff/js/prototype.js"></script>
<script src="http://www.piterwilson.com/stuff/js/animationPlayer.js"></script>
<div id="animationPlayer" style="width:320px;height:240px">
</div>
<script>
var frames = new Array();
var i;
for(i=1;i<10;i++){
frames.push("http://www.piterwilson.com/stuff/animation/animation00"+i+".jpg");
}
var myPlayer = new AnimationPlayer(frames,$('animationPlayer'));
myPlayer.play();
</script>
1. Include prototype.js
2. Include animationPlayer.js
3. Declare and array of paths to the frames of the animation. They can be jpg, gif, png or whatever.
4. Create an instance of the AnimationPlayer class, pass the array as parameter 1 and a div reference as parameter 2.
5. Call the play() function! that's it!
You can also change the frame rate by setting AnimationPlayer.frameRate to any value (in milliseconds)
Get prototype JS at http://www.prototypejs.org/
Get the AnimationPlayer class here http://www.piterwilson.com/stuff/js/animationPlayer.js
Tony, 
Nico, 
Vishal Chander and one other person are discussing.
Murray 8:11 pm on November 13, 2008 Permalink
Hey! Since you helped make FLipbook! in benetton, I was wondering if you know why I can’t sign up for benetton. I’ve tried it a few times now, but after i finish the form, it says “an email has been sent your address”. But it’s never in my inbox! I know I spelled it right too. Do you know why? My email is garymatic@gmail.com.
Vishal Chander 4:44 pm on April 6, 2009 Permalink
Gr8 Job dude…i’m goin to study this code and help u in future chages
Nico 4:38 pm on April 4, 2010 Permalink
Thanks a lot for this code man!!!!
You saved me at least 10 hours of work!!!
thank you!
Tony 7:58 pm on April 29, 2010 Permalink
Hey Piter,
This is great work! However, I was wondering if there was a way to display the labels automatically without having to mouseover the piechart? Any suggestions?