Skip to main content
F
flashpeppe
Participating Frequently
January 9, 2017
Answered

javascript button states in html5 canvas

  • January 9, 2017
  • 3 replies
  • 2205 views

Hello people  🙂

I have 7 buttons on my stage (button1, button2, etc) all MC's. I would like to control the RollOver, RollOut & CLick with js.

At first I thought I could just tell my button Listener where to go

i.e. gotoAndStop(2) which is RollOver state. or gotoAndStop(3) which is Click state. and gotoAndStop(1) which is RollOut state.

But when I "Click" and then rollout, I need the button to stay "clicked" until some other button is "clicked".

i'm trying this but there is something wrong.

// loop through the buttons and give them mouse click listeners
for ( var i:int = 1 ; i <= 7; i++ ){
   var curButton:MovieClip = getChildByName ("button"+i);
   // set click lisitener
  curButton.addEventListener ( MouseEvent.CLICK, buttonClickHandler.bind(this) );
   // set rollover listener
  curButton.addEventListener ( MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this) );
   // set rollout listener
  curButton.addEventListener ( MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this) );

   // set initial state
  curButton.gotoAndStop(1);
}

function resetStates (){
   for ( var i = 1; i<=7; i++){
   var curButton = getChildByName("button"+i);
  curButton.gotoAndStop(1);
   }
}

function buttonRollOverHandler ( evt:MouseEvent ){
  resetStates();
  evt.target.gotoAndStop(2);
}
function buttonRollOutHandler ( evt:MouseEvent ){
  resetStates();
}
function buttonClickHandler ( evt:MouseEvent ){
  resetStates ();
  evt.target.gotoAndStop(3);
}

tnx to all

    This topic has been closed for replies.
    Correct answer ClayUUID

    tnx a lot!!!

    but...

    this.['button'+i].gotoAndStop(1);

    return 'missing name after . operator'

    :-(


    Okay this unholy mishmash of AS3 and CreateJS APIs needs to stop. This works, assuming the "buttons" are actually movieclips pretending to be buttons:

    this.stop();
    // required only if no actual buttons are used
    stage.enableMouseOver(20);
    // variables
    var numButtons = 7;
    var i, b, curButton;
    // initialize
    for (i = 1; i <= numButtons; i++) {
        b = this["button" + i];
        b.cursor = "pointer";
        b.mouseChildren = false;
        b.addEventListener("click", buttonClickHandler.bind(b));
        b.addEventListener("mouseover", buttonRollOverHandler.bind(b));
        b.addEventListener("mouseout", buttonRollOutHandler.bind(b));
    }
    // event handlers
    function buttonClickHandler() {
        if (curButton) {
            curButton.gotoAndStop(0);
        }
        this.gotoAndStop(2);
        curButton = this;
    }
    function buttonRollOverHandler() {
        if (this != curButton) {
            this.gotoAndStop(1);
        }
    }
    function buttonRollOutHandler() {
        if (this != curButton) {
            this.gotoAndStop(0);
        }
    }

    3 replies

    F
    flashpeppeAuthor
    Participating Frequently
    January 9, 2017

    in this way there are no errors in consol but

    movieclips doesn't listen calls

    var button = new createjs.MovieClip();

    var curButton = new createjs.MovieClip();

    // loop through the buttons and give them mouse click listeners

    for (var i = 1 ; i <= 7; i++){

      

        curButton.getChildByName(button+i);

       // set click lisitener

    curButton.addEventListener (MouseEvent.CLICK, buttonClickHandler.bind(this));

       // set rollover listener

    curButton.addEventListener (MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this));

       // set rollout listener

      curButton.addEventListener (MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this));

       // set initial state

      curButton.gotoAndStop(1);

    };

    function resetStates (){

       for ( var i = 1; i<=7; i++){

       //var curButton = ["button"+i];

      curButton.gotoAndStop(1);

       }

    }

    function buttonRollOverHandler (currentTarget){

      resetStates();

      evt.target.gotoAndStop(2);

    }

    function buttonRollOutHandler (currentTarget){

      resetStates();

    }

    function buttonClickHandler (currentTarget){

      resetStates ();

      evt.target.gotoAndStop(3);

    }

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 9, 2017

    try:

    this.clickedButton = null;

    // loop through the buttons and give them mouse click listeners

    for (var i = 1 ; i <= 7; i++){

    // set click lisitener

    this['button'+i].addEventListener (MouseEvent.CLICK, buttonClickHandler.bind(this));

    // set rollover listener

    this['button'+i].addEventListener (MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this));

    // set rollout listener

    this['button'+i].addEventListener (MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this));

    // set initial state

    this['button'+i].gotoAndStop(1);

    };

    function resetStates (tl){

    for ( var i = 1; i<=7; i++){

    if(tl.clickedButton!=tl['button'+i]){

    tl['button'+i].gotoAndStop(1);

    }

    }

    }

    function buttonRollOverHandler (e){

    e.currentTarget.gotoAndStop(2);

    }

    function buttonRollOutHandler (e){

    resetStates(this);

    }

    function buttonClickHandler (e){

    resetStates (this);

    this.clickedButton=e.currentTarget;

    e.currentTarget.gotoAndStop(3);

    }

    F
    flashpeppeAuthor
    Participating Frequently
    January 9, 2017

    tnx a lot!!!

    but...

    this.['button'+i].gotoAndStop(1);

    return 'missing name after . operator'

    :-(

    C
    ClayUUID
    Legend
    January 9, 2017

    At a glance, the first thing that's going to cause problems is that you're use AS3 code, not JavaScript. There's no such thing as strict variable typing in JS.

    No such thing as getChildByName, either. Instead of:

    = getChildByName ("button"+i);

    You'd do:

    = this["button" + i];

    Remember that the CreateJS API that Canvas mode uses is generally more AS2-like than AS3-like. And that frame numbers in Canvas are 0-based, not 1-based.

    F
    flashpeppeAuthor
    Participating Frequently
    January 9, 2017

    thanks all for reply

    mmmmmmhhh!!! doesn't work...

    for (var i = 1 ; i <= 7; i++){

       var curButton = new createjs.MovieClip();

        this.curButton.getChildByName("button"+i);

    i'have tried changing with -  this["button"+i] -

    curButton is undefined - unexpected type error.

    Any suggestion?

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 9, 2017

    in your click handler assign a variable indicating evt.currentTarget was the last clicked button.  use that variable in resetStates() to determine which to 'reset' and which to not 'reset'.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices