The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    JS Movieclip

    A javascript little framework to animate spritesheet as AS3 movieclip
    Filed under 

    • 🔾5%Overall
    • 79
    • 85.8 days
    • 🕩16
    • 👥1


    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


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

    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)


    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 : boolean);

    stop the animation (dispatch the stop callback)


    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


    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


    get current frame


    go back to a frame


    go to the next frame


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


    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


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

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

    V1 jQuery plugin version

    Instance :


    recover the movieclip object

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

    You can now apply all the public method on mc object;




    Show All