multiple ADOBE ANIMATE CC buttons to control the timeline not working

Question

I have to control the timeline of an animation for html5 canvas. I made all buttons and edited all codes. strangely all buttons execute the same function.

this.stop()
//---------------------------------------------------------//
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    this.gotoAndPlay(32);
}

//---------------------------------------------------------//

//---------------------------------------------------------//
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));
}
function fl_MouseClickHandler()
{
    this.gotoAndPlay(212);
}

also, this code is "generated" by adobe CC. as I"m not a coder, just a meager animator, I just copied and pasted the same one editing the symbols' names. — Altair Araujo, Jan 05 '17 at 21:46

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Please read about function hoisting; the function statements are hoisted to the top-of-the-scope, so that your code is equivalent to

function fl_MouseClickHandler() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandler() {
    this.gotoAndPlay(212);
}

...
this.stop()    
this.letterA.addEventListener("click", fl_MouseClickHandler.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandler.bind(this));

One solution would be to use function expressions:

var that = this;
this.letterA.addEventListener("click", function () { that.gotoAndPlay(32); });

or if you insist to use bind

this.letterA.addEventListener("click", (function () { this.gotoAndPlay(32); }).bind(this));

edited May 23 '17 at 12:13

Community

1
1

answered Jan 05 '17 at 21:27

Antti Haapala -- Слава Україні

129,958
22
279
321

I tried this: this.stop(); var letterA = this; this.letterA.addEventListener("click", function () { letterA.gotoAndPlay(97) }); var letterB = this; this.letterB.addEventListener("click", function () { letterB.gotoAndPlay(108) }); and it seems to have worked. I"ll try it on the main file and see if it worked. Thanks a lot! – Altair Araujo Jan 05 '17 at 21:38

score 0 · Answer 2 · answered Jan 05 '17 at 21:33

From what I can tell, you are binding the same function to two different button click events. You have two different definitions of this same function. One is most likely being written over the other and therefore both buttons will call fl_MouseClickHandler which will call gotoAndPlay with the same timestamp.

Quick fix could be just to change the name of fl_MouseClickHandler:

function fl_MouseClickHandlerA() {
    this.gotoAndPlay(32);
}

function fl_MouseClickHandlerB() {
    this.gotoAndPlay(212);
}

this.letterA.addEventListener("click", fl_MouseClickHandlerA.bind(this));
this.letterB.addEventListener("click", fl_MouseClickHandlerB.bind(this));

Also, you should watch how you use "this" as you may not be scoped to what you think.

multiple ADOBE ANIMATE CC buttons to control the timeline not working

2 Answers2