By popular demand, the following features have been added to the WCSMT Maker, right now, we’ll call it a BETA version and appreaciate any feedback or bug reports:
Camera Test (automatic): This feature will test the camera image before starting an animation to prevent those blank animations from popping up. If you can’t see your webcam’s image and you fail the camera test, please follow this recommendations.
Timer Enable/Disable : Now you can disable the timer,and capture a frame without having to wait 3 seconds if that is easier for you.
Ghost Frame: A guide that shows you the contents of the frame before.
Grid: A simple grid to help you align things on the image.
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)
on Dec 9, 2008 the new WCSMT was released. Ever since i have been putting together these little videos that are reminiscent of the Face ones created at Fabrica years ago by Ross Phillips and the Interactive team there.
