jeremypetrequin / jsMovieclip

A javascript little framework to animate spritesheet as AS3 movieclip

JSMovieClip

JS movieclip is a small javascript library to quickly and easily create, integrate, and control animations in an HTML page.

It is compatible with all browsers, from Internet Explorer 6 to latest smartphone (iOS, Android..).

JS MovieClip uses "sprite", that is to say a large image containing all the frames of to animation. Then, It will allow to play and control the animation with stop(), play(), gotoAndPlay() ... like any Flashers does.

V1 stable

###Creation###

First, you need a sprite, a big image containing each frame of your animation. You have 3 options :

• Horizontal sprite http://jsmovieclip.jeremypetrequin.fr/samples/basic/poulpe.png
• Vertical sprite http://jsmovieclip.jeremypetrequin.fr/samples/basic/poulpe_1.png
• Custom sprite http://jsmovieclip.jeremypetrequin.fr/samples/basic/poulpe_2.png

The only requirement is that each frame need to have the same size!

To simply create it : in Flash or After Effects, export your animation in a PNG sequences, and join it in a sprite with photoshop, GIMP, TexturePacker...

Then, you need a DOM element, div or whatever you want :

<div id="my-element"></div>

After, you need to apply to it the width and the height of a frame and the sprite as background :

#my-element {
    width : 200px;
    height : 200px;
    background:url(sprite.png) no-repeat;
}

And now, instanciate a new JSMovieclip object :

var movieclip = new JSMovieclip(document.getElementById('my-element'), params);

First parameter can be a DOM element, an array of DOM elements, a jQuery (or Zepto..) object, a NodeList...

Second parameters are options, they can be :

{
    framerate : 25,
    stopCallback : fn,
    frames : [],
    direction : 'h' || 'v',
    frames_number : 0,
    width : 0,
    height : 0
}

So :

• the framerate is the framerate of your animation, in Frame Per Second, the default is 25
• In stopCallback you can pass a function it'll call each time the movieclip stops

For the sprite, you have several options, so,

• if you have a horizontal sprite, you can simply specifie the direction : 'h' (horinzontal), the frames_number and the width of a frame
• For a vertical sprite, set direction to 'v', the frames_number, and the height of a frame
• If you have a custom sprite, just set the frames array with each frame : [{x:0, y:0}, {x:200, y:0}, {x:400, 0}, {x:0, y:200}, {x:200, y:200}, {x:400, y:200} ,....] (you can also use this parameter for a vertical or a horizontal sprite)

###API###

There are some public methods :

play the animation from the frame where you are, boolean ````loop````` to specifie if you want to loop or not

mc.play(loop : boolean); 

stop the animation (dispatch the stop callback)

mc.stop();

play the animation from the frame frame, boolean loop to specifie if you want to loop or not

mc.gotoAndPlay(frame:int, loop:boolean); 

go and stop directly to a frame

mc.gotoAndStop(frame:int);

block the animation between two specifics frames :

mc.loopBetween(frameStart:int, frameEnd:int);

all animation are now between frameStart and frameEnd animation

mc.loopBetween(1, 10).play(true); //play animation between first frame and 10's

If you call mc.loopBetween(); you can call clearLoopBetween to reset first and lastFrame to the default

mc.clearLoopBetween();

get current frame

mc.currentFrame():int

go back to a frame

mc.prevFrame();

go to the next frame

mc.nextFrame();

if play : stop, if stop : play, boolean loop to specifie if we want to loop or not

mc.toggle(loop:boolean);

Change the way of playing :

mc.changeWay(1); // play in the normal way
mc.changeWay(-1); // invert the playing
mc.changeWay(-1, true); //the second param, a boolean to stay a the same frame

Get current way of playing, return 1 or -1

mc.getWay():int

All method are chainable (except currentFrame() and getWay() ), so you can do :

mc.loopBetween(12, 14).gotoAndPlay(12)

V1 jQuery plugin version

Instance :

$('element(s)').JSMovieclip(params);

recover the movieclip object

var mc = $('#element').data('JSMovieclip'); 

You can now apply all the public method on mc object

mc.play();
mc.stop();
//....

Samples & Usefull links

###Sample###

• Basic example : http://jsmovieclip.jeremypetrequin.fr/samples/basic/
• Multiple : http://jsmovieclip.jeremypetrequin.fr/samples/multiple/
• Control the animation : http://jsmovieclip.jeremypetrequin.fr/samples/controls/
• Squirrel : http://jsmovieclip.jeremypetrequin.fr/samples/squirrel/

###Experiment###

• Little game experiment : http://jsmovieclip.jeremypetrequin.fr/samples/game/

###Tools###

• Convert TexturePacker JSON Array export to Javascript Array : http://jsmovieclip.jeremypetrequin.fr/tools/convert/

###Articles###

• Workflow Flash > Texture Packer > JSMovieclip : https://gist.github.com/14a77d4652c096a1fac7