javascript button states in html5 canvas

[flashpeppe]

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

[kglad]

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'.

[ClayUUID]

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.

[flashpeppe]

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?

[flashpeppe]

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]

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

}

[flashpeppe]

tnx a lot!!!

but...

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

return 'missing name after . operator'

😞

[kglad]

i'm not sure where that that line of code is, but it should be

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

[ClayUUID · Accepted solution]

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);
    }
}

[flashpeppe]

yes!!! it works...Tnx a lot ClayUUID...:-)

could you explain a bit your solution pls?

because i have tried to target a specific frame for each button in main timeline but  don't work 🙂

in the past i have work a lot with action script 2 but i have a poor knowledge of as3. Sorry for that

I know my question are very basic but pheraps someone find it usefull!

Now that all buttons works properly i'have tried

function buttonClickHandler() {

    if (curButton) {

        curButton.gotoAndStop(0); 

    } 

    this.gotoAndStop(2); 

    curButton = this;

    exportRoot.animazTrade_mc.gotoAndPlay("1");

} 

but all buttons works in the same way calling the same action 🙂

last help!! 😉