Sorry, your browser doesn't support Canvas.

Causal Button

On the left canvas, It illustrates Button class in CasualJS Framework.

1) Inherit from MovieClip

A Button is a MovieClip in CasualJS. Typically, there 4 frames in a Button which represent 4 states: up, over, down, disbled.
You can set display objects as skins, handle mouse events easily.

  • Button.state.UP // up
  • Button.state.OVER // over
  • Button.state.DOWN // down
  • Button.state.DISABLED // disbled

  • Constructor:
    function(upState, overState, downState, disabledState)

    For example:
    var up = new Bitmap(buttons, [0, 0, 64, 64]);
    var over = new Bitmap(buttons, [64, 0, 64, 64]);
    var down = new Bitmap(buttons, [128, 0, 64, 64]);
    var disbaled = new Bitmap(buttons, [192, 0, 64, 64]);
    var playBtn = new Button(up, over, down, disbaled);
    playBtn.x = 250;
    playBtn.y = 50;
    stage.addChild(playBtn);

    2) Handle Mouse Events

    It's very easy to handle mouse events for buttons, you just need to set a callback for specific mouse event:

    //these callbacks are null by default
  • onMouseMove
  • onMouseOver
  • onMouseOut
  • onMouseDown
  • onMouseUp