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
aa, 
Brad, 
Emma and 7 others are discussing. 
nathan, 
ana and one other person are discussing. 
Forrest O. 12:15 am on May 7, 2009 Permalink
They already look better, more lined-up frames. This can become a real art form.
Jay Haas 7:04 pm on May 9, 2009 Permalink
Thaaaaank you for making the timer an option!
Forrest O. 10:18 pm on May 11, 2009 Permalink
Getting this error (debug player) when ghost is on and then I click “Star Over” and take the first frame:
Error: Frame out of range, please specify a frame between 1 and 1
at com.piterwilson.wcsmt.core::AnimationData/getFrameBitmap()
ashley 1:12 am on May 14, 2009 Permalink
i used to use this thing all the time, but since the update, the camera utility works and i can see myself in the frame, but i am unable to capture anything. i can’t click on any of the options and hitting the space bar does nothing. the “capture frame” “start over” and the check boxes are all faded out. i have updated to the newest version of adobe flash player and it still won’t work. is there anything else i can try?
Piterwilson 5:36 am on May 14, 2009 Permalink
Ashley, do you mean that the “camera test” is not working properly and it says “failed camera test”?
ashley 2:13 pm on May 14, 2009 Permalink
nevermind! i figured it out, it was something in the settings, thanks.
Micah 12:11 pm on May 25, 2009 Permalink
In between making each .gif, I have to reload the maker page. Otherwise, I sometimes get an error and other times the frames just don’t register. Either way, unless I reload, I am unable to make more than one .gif in a sitting. It’s not a huge deal but it can be kind of irritating!
DaVince 8:20 pm on July 11, 2009 Permalink
This is an AWE-SOME tool. Had a lot of fun with it.
I think the tool could still be improved by:
- allowing the user to set the delay in seconds – still 3 by default, but it could also be 2, 1 or 0 for instant shot.
- making the grid a bit more transparent, I found it to be useless because the grid was in the way of the picture too much.
Also, the GIF creator seems broken for me… Maybe also allow direct export of the video file (if one is created)?
Keep up the awesome work.
Charlie 3:19 pm on August 31, 2009 Permalink
Hey um i totally LOVE this, but it doesn’t let me save them? so i’ve lost like my best work on here because the 30 days ran out.
oh and i think we should be able to create accounts on here and comment on peoples videos
but totally loving this getting all my friends to try it (Y)
x
Emma 8:51 am on October 19, 2009 Permalink
Heya! Kudos on this insanely engrossing thing you got here.
I vaguely remember there being some sort of multi-shot function a long time ago; it’d be wonderful if it were possible to implement that in the current version, even if it’s only for some quick giggles.
Also as Micah mentioned before, I always have to refresh my page in order to make a new GIF. I’m not sure if it’s a problem with my settings, but do you know if there’s a way to remedy this? Thanks, mate! This is awesome.
Brad 11:47 am on November 1, 2009 Permalink
Start over and does not work in either IE or Firefox for me. I hear Shutter sound, but frames are not captured. I must go back to the “Make your own” link and click allow again.
aa 9:39 pm on February 8, 2010 Permalink
it seems like i am in the frame, but all the buttons are faded out. the camera test didn’t fail, but i can’t seem to capture anything. can anyone help me?