Highlighted

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

Explorer ,
Feb 05, 2020

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Code, Error, Timeline

Views

496

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Feb 05, 2020

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
Code, Error, Timeline

Views

497

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 05, 2020 0
Adobe Community Professional ,
Feb 05, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2020 0
Explorer ,
Feb 05, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2020 0
Shamus_ LATEST
Explorer ,
Feb 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2020 0