Hi wwfc,
Without knowing what spriteSequencer does and working off assumptions this is a bit of a shot in the dark:
Code:
$(document).ready(function() {
$('#sprite').spriteSequencer({
spriteSheet: "sprite_sheet.png",
columns: 30,
totalFrames: 30,
fps: 30,
width: 500,
height: 281,
onTick: currentFrame
});
// Bind mouse enter
$('#sprite').mouseenter(function(){
$('#sprite').spriteSequencer('gotoAndPlay', {frame: 1});
});
// Bind mouse exit
$('#sprite').mouseleave(function(){
$('#sprite').spriteSequencer('gotoAndStop', {frame: 1});
});
$('#play').click(function() {
$('#sprite').spriteSequencer('loop'); // Does 'loop' work?
});
$('#pause').click(function() {
$('#sprite').spriteSequencer('pause');
});
$('#gotostop').click(function() {
$('#sprite').spriteSequencer('gotoAndStop', {frame: 20});
});
$('#gotoplay').click(function() {
$('#sprite').spriteSequencer('gotoAndPlay', {frame: 10});
});
$('#playto').click(function() {
$('#sprite').spriteSequencer('playTo', {frame: 5});
});
});
function currentFrame (frame) {
$('#current-frame').html("Current frame: "+ frame);
// Loop
if(frame === totalFrames) {
if()
$('#sprite').spriteSequencer('gotoAndPlay', {frame: 1});
}
};
I'm assuming the 'loop' behaviour triggered by the clicking #play isn't working for you, it that right? Anyway, I've suggested putting a check in the currentFrame method to check if the current frame is equal to the total frames. However, I don't know if totalFrame is available to that method and it needs to be. If you know there are always 30 frames then you could hardcode frame === 30 and do away with the totalFrames variable there.
I've also suggested how you'd bind the mouseenter and mouseleave events. But as I said before this is under the assumption that those methods are working. Are your supposed "play", "pause", "gotoplay" and "gotostop" buttons working?
If my suggestion doesn't help, I think you'll need to provide more info about spriteSequencer and perhaps show the HTML on the page - in case you have any bugs there.
Cheers!
Bookmarks