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/animation000"+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
nathan, 
ana and one other person are discussing. 
![http://www.piterwilson.com/stuff/animation/animation000"+i+".jpg"](http://www.piterwilson.com/stuff/animation/animation000"+i+".jpg"){kind=link}
Alex 12:35 am on January 31, 2009 Permalink
you could make some money by turning this into a facebook app, and it still wouldn’t cost people money
ana 4:05 pm on March 12, 2009 Permalink
juan! how come i cannot download my funny gif animation?
http://www.piterwilson-toys.com/wcsmt2/player/27877/
Piterwilson 4:38 am on March 13, 2009 Permalink
Ana, it’s fixed, try again
nathan 11:06 am on August 22, 2009 Permalink
Hi, this Web Cam Stop Motion you have is great, but for some reason on my macbook I can’t capture any of the images. The camera comes up fine after adjusting it and I can see myself, but the capture button isn’t active. Is there more setting I need to adjust or is it coz of something else?