new spritely animation each click

I am trying to have a character on my page that uses the Spritely script to animate. The sprite sheet that I am using contains a total of 92 frames. I would like for the animation to be clickable.

When clicking it for the first time, I want it to play up to frame 70 and stop. Then, the next time you click it, I would like for the animation to play from frames 70 to 92 and stop.

How should I write the code?

So far, I'm able to get the animation to play up to frame 70 and stop. Even as a beginner web developer, this was fairly easy.

Here's what I have so far:

$('#stacheguy2').click(function() {
    $(this)
    .sprite({fps: 30, no_of_frames: 92, play_frames: 70,})

});

With this code, when you click the character, it plays frame 1-70 and stops. That's good. However, the next time you click it, it picks up from frame 70 and continues for another 70 frames. How can I change this so that the animation only plays frames 70 to 92 on the second click?

PS: I would like to eventually have the character perform a different frame sequence for each click.

If you could help me with this I would be so grateful! Thanks!

Solution

I had a hard time finding a 92 image PNG file for testing so I had to make do with a shorter one. Here is a working example: http://jsfiddle.net/Yhrbb/

The code in the example is this:

(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#fly').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

We can adapt it to work for you like so:

(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#stacheguy2').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $(this).sprite({fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

Note that once we reach the total frames we're simply ignoring additional clicks with the return on if (played >= total). You could reset played at that point or do whatever else you'd like. If this doesn't work, would you mind posting your PNG file or a similarly long one for use in the jsfiddle.

Configuring number of frames with an array

If you wanted to play a configured number of frames with each click you could do this: http://jsfiddle.net/dNYks/

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#fly').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

We can adapt this code to match your markup like so:

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#stacheguy2').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $(this).sprite(fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();