Sorry, your browser doesn't support Canvas.

Causal MovieClip and Frame

On the left canvas, It illustrates how to create animations by using MovieClip and Frame class in CasualJS Framework.

1) Create frames for a MovieClip

Each MovieClip is composited by frames. We can simply say, a Frame represents a certain DisplayObject, it has properties as below:

  • disObj //display object of the frame
  • label //a label for the frame
  • gotoFrame //can be either frameNumber or frameLabel
  • pauseFrames //number of frames to pause
  • stop //whether stop when play to this frame

  • Constructor:
    function(disObj, label, gotoFrame, pauseFrames, stop)

    For example:
    var frame = new Frame(new Bitmap(image, [16,70,32,50]));

    2) Instantiate MovieClips

    Once the frames have been created, It's easy to create MovieClips and display them.

    //pass frames data as parameter of constructor
    var mc = new MovieClip(frames);
    stage.addChild(mc);

    //add different frame groups
    var mc = new MovieClip();
    mc.addFrame(frames_left);
    mc.addFrame(frames_right);
    stage.addChild(mc);

    3) Control MovieClips

    You can use Frame.gotFrame, Frame.pauseFrames and Frame.stop properties to control the playing of MovieClips.

    You can also use these methods of MovieClip to control it:

  • play ()
  • stop ()
  • gotoAndPlay (frameNumberOrLabel)
  • gotoAndStop (frameNumberOrLabel)
  • currentFrame
  • nextFrame ()
  • getTotalFrames ()
  • addFrame (data)
  • addFrameAt (data, frameNumber)
  • setFrame (frameNumber, data)
  • getFrame (frameNumberOrLabel)
  • removeFrame (frameNumberOrLabel)