Skip to main content
S
Shamus!
Known Participant
February 5, 2020
Answered

Canvas file - buttons not working every other time they load in the timeline

  • February 5, 2020
  • 1 reply
  • 986 views

Hi hope someone can help on this

My project is an HTML5 canvas which consists (more or less) of a main timeline in which movie clips are embedded, some of which are controlled by a big invisible button over them which does a play/pause action which targets those clips. There is a nav element at the bottom right which steps the main tineline forward/back one frame.

So far so good.

So first run - everything works fine - the button over the aeroplane clip on frame 3 plays/pauses the clip, likewise the next clip (man & quote) on the timeline plays/pauses fine

BUT

After viewing these clips and stepping back the main play/pause button stops working on both clips

THEN

When stepping forward everything works fine again. And so on...

Here is a link to the presentation  (its WIP obvs)

 

Code sample on big play/pause button:

 

var _this = this
this.fbTxt.text = _root._playing;
this.stop();

this.bigPlayBtn.addEventListener("click", pauseClip2.bind(this));

function pauseClip2()
{
if (_root._playing == true) {
//alert("playing");
_this.slide2.stop();
_root._playing = false;
_this.fbTxt.text = _root._playing;
} else {
//alert("not playing");
_this.slide2.gotoAndPlay(5);
_root._playing = true;
_this.fbTxt.text = _root._playing;
}
}

 

Code on main timeline stepper (Code on its own timeline):

 

var _this = this;
_this.stop();
_this.buttonGrp.nextBtn.on('click', function () {
	var _frame = exportRoot.currentFrame;
	var _offset = 1;
	exportRoot.bigPlayBtn.removeEventListener("click", exportRoot.pauseClip2);
	exportRoot.bigPlayBtn2.removeEventListener("click", exportRoot.pauseClip3);
	exportRoot._playing = false;
	exportRoot._playing2 = true;
	exportRoot.gotoAndStop(_frame + _offset);

});
_this.buttonGrp.prevBtn.on('click', function () {
	var _frame = exportRoot.currentFrame;
	exportRoot.bigPlayBtn.removeEventListener("click", exportRoot.pauseClip2);
	exportRoot.bigPlayBtn2.removeEventListener("click", exportRoot.pauseClip3);
	exportRoot._playing = false;
	exportRoot._playing2 = true;
	exportRoot.gotoAndStop(_frame - 1);
});

 

 (apologies for _this & this mixing - some cleaning needed)

 

Also as you can see from the alert message that I've put on the second play/pause button, there are multiple firings on the click event going on...

 

Any ideas?

This topic has been closed for replies.
Correct answer ClayUUID

You already answered your own question what's going wrong-- you're adding multiple duplicate event listeners to your buttons.

 

The reason you're getting multiple listeners is because your remove event listener code isn't working. It isn't working because you're using bind() on your event handler functions. This returns a new function wrapped around the original function. removeEventListener() only works with a reference to the original function. Your event handler appears to not use "this", so there's no reason to use bind().

 

Also, you're prefixing your local variables with an underscore (_frame, etc), which is stylistically confusing. That's usually done to denote class globals, like _this.

1 reply

C
ClayUUIDCorrect answer
Legend
February 5, 2020

You already answered your own question what's going wrong-- you're adding multiple duplicate event listeners to your buttons.

 

The reason you're getting multiple listeners is because your remove event listener code isn't working. It isn't working because you're using bind() on your event handler functions. This returns a new function wrapped around the original function. removeEventListener() only works with a reference to the original function. Your event handler appears to not use "this", so there's no reason to use bind().

 

Also, you're prefixing your local variables with an underscore (_frame, etc), which is stylistically confusing. That's usually done to denote class globals, like _this.

S
Shamus!Author
Known Participant
February 5, 2020

Thanks Clay. Fair points, I've removed the bind() element.

Same problem.

Thing is that this was happening anyway with 

 

_this.bigPlayBtn.on('click', function(){
//function
});

 

So I  tried the event handler code... but as I say - it still founders on each second go round...

I could upload a zip of the file?

S
Shamus!Author
Known Participant
February 6, 2020

EDIT: It was duplicate event handlers - I need to learn better how to remove them  😉

For now I am using an if(hasEventHandler) to check before assigning it .

Thanks

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