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

Download source

A sample class to make a dynamic pie chart in Actionscript 3, it includes a sample Tooltip class.

(This is a follow up on a previous Pivot rotation post i had)

Making an object’s rotation follow the mouse is easy enough, but it got a bit tricky when i wanted this rotation to be set only when i actually dragged the mouse around and not inmediatly on the mouse press. It would have saved me some time to have had this example online and i hope it does that for some people.

This class does that when given a MovieClip as a parameter. It broadcasts a couple of nice events to let you know when the rotation starts and ends. See the source file for an example.

Download the Spin disk example (.zip 660kb)

Updated this excellent example of how to draw a star to AS3 (original was 6 years old!)

Download source and example

Take this example:

source for pivottest

source for iktestpuppet2

Even thou it works more or less for what i want, a lot of limitations are evident: setting different distances betweens different neighbor anchor points or making some of them static

source here : IKTestPuppet #1

I don’t really understand the math behind it that well, but i used this tutorial made for as2 to create my own IKMember class, pretty much just copying it but translated to as3. This is my first attempt at the simplest of skeleton puppets : a Snake

Here’s the source code (IKSnake.zip)

The PWButton class takes a MovieClip and turns it into a fully functional button with some time-saving features:

• you can use the ‘data’ property to store and retrieve information, such as a parameter for later use on a function
• enable() and disable() methods, easily turn the PWButton on and off much like the SimpleButton.enabled property.
• you can set the roll over, down, and disabled states using frames within the target movieclip.

example swf:

PWButton.zip

I updated the script to actionscript 3, and added some extra comments that made me understand how this worked. I hope it saves you some time if you need to do something similar. (Please forgive the roughness of the code, its just a test for learning porpouses)

Download erasetest.fla (552 kb)