gotoAndPlay only works once

[pattil28523684]

Hi,

I have an Animate file that was originally created in 2020 that is used on a client's website, so it uses HTML5 canvas. My client asked for some minor changes but now when I publish the previous file (without editing) it's not working properly. 

On the main timeline I have a pie shaped graphic, and each section is a button. When the button is clicked it goes to a specific frame label on the parent timeline and plays a movie clip. In the individual movie clips, it plays part of the animation and then stops, and when they click on another button, it plays the rest of the current movie clip, then goes back to the parent timeline to the specified label and plays that. The following is the Action on the frame where it has been stopped, within the individual movie clip:

this.stop();

var _this = this;

_this.btn_intimidation_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('intimidation'); }, 833);

});

var _this = this;

_this.btn_emotional_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('emotional'); }, 833);

});

var _this = this;

_this.btn_isolation_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('isolation'); }, 833);

});

var _this = this;

_this.btn__minimize_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('minimize'); }, 833);

});

var _this = this;

_this.btn_children_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('children'); }, 833);

});

var _this = this;

_this.btn_male_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('male'); }, 833);

});

var _this = this;

_this.btn_economic_reduced.on('click', function(){

_this.gotoAndPlay('coercion_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('economic'); }, 833);

});

This works fine, but only once. If they click on any button more than once, it goes to the correct frame label but stops. I've tested every button, and every sequence that I can think of but it always stops working as soon as they click on a button a second time.

Thanks, any help would be much appreciated! 

[JoãoCésar]

Hi.

What does happen if you set the autoReset property of each animation to false?

Also make sure you're not getting any error on the browser's console.

Please let us know.

Regards,

JC

[pattil28523684]

Thanks for the response JoãoCésar. I'm not getting browser console errors.

Sorry I haven't used Animate that many times, and the last time I did was for this project 3 years ago. So I'm not sure if I'm adding the autoReset properly. I tried adding this.autoReset = false; as an Action in the first frame of 1 of the movies as a test but it didn't help (also tried setting it to "true"). And then I tried going to the main timeline and selecting the mc from there and adding but it's not helping.

[pattil28523684]

I should also mention that when I publish the animation I get the Output Warning:

"Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (38)
Modifying the transform point in a tween can produce unexpected results. (10)"

[kglad]

i don't see a problem with your code (though i dislike the way it appears that your nesting functions) IF none of that code is re-executed via the frame that contains it playing more than once.

[pattil28523684]

Thanks kglad, but I'm not really sure what you're saying.

[kglad]

does the code you've shown appear in a frame that plays more than once?

[pattil28523684]

No, the frame doesn't loop more than once. 

I don't have a lot of experience with Animate so I'm probably not explaining it well. Hopefully these screenshots will help. 

Main timeline

There is a pie shaped graphic and each section is a button. When the button is clicked it goes to a specific label/frame on the parent timeline and plays a movie clip.

Movie Clip for each section

Each section has a very similar movie clip. It plays part of the animation and then stops (this is where the code from the original post is), and when they click on another button, it plays the rest of the current movie clip, then goes back to the parent timeline to the specified label and plays that.

This worked fine when it was originally created in 2020, and allowed the user to click a button/section multiple times but now it stops working as soon as the user clicks a button a second time.

[kglad]

the layer with the pie has one keyframe?

if so, copy and paste (don't attach) a screenshot of the console after clicking a button twice and seeing the problem.

[pattil28523684]

Thanks so much for helping me with this. To help explain this you can see the HTML at https://keylinegraphix.com/wheel/power-control-wheel-aug16b.html it's for a woman's abuse site.

Each segment of the pie is a single keyframe button. If you click on the segment it takes you to a frame and it plays the mc. Here is a screenshot of the brower console after clicking a button twice. There are no errors listed.

[kglad]

when a sector is clicked something is disabling the sector's button mode.  what is that?

[pattil28523684]

When a sector is clicked, it simply goes to a frame label in the root timeline, which contains a mc for that sector. In the mc it plays part of the animation that expands that section, then stops. When a user clicks any of the other sector buttons, it plays the rest of the current animation (in this example "emotional_close") then goes to the specified frame label on the root timeline. It works to this point even when you click on that sector more than once, but the second time it doesn't play the mc, it just stops at that frame.

Could it be something to do with the setTimeout function?

this.stop();

var _this = this;

_this.btn_intimidation_reduced.on('click', function(){

_this.gotoAndPlay('emotional_close');

setTimeout(function () { 

_this.parent.gotoAndPlay('intimidation'); }, 833);

});

When one of the other sectors are clicked, I need it to play the rest of the current animation (in this case it starts at the next frame which is labeled 'emotional_close'), then it needs to go to the applicable frame label on the root timeline. I used setTimeout(function () to allow time for the rest of the current animation to play before it loaded the next section. Is there a better way to do that? And is it possible that it's causing problems?

[kglad]

no.

when you mouse over a button/sector (eg, intimidation), the cursor changes from a pointer to a hand indicating an interactive object.  when you click button/sector, and move your mouse slightly. the cursor changes to a pointer (generally indicating, this object is not interactive).

what causes that?

[pattil28523684]

When a sector is open and the text appears, it plays a mc with the section expanding (same mc is used for all open sections, just rotated). The open sector is not a button at this stage, but the rest are buttons.

I just tried removing the first gotoAndPlay function that closes the sector _this.gotoAndPlay('emotional_close'); and the setTimeout, so now it just goes directly to the new sector that has been clicked:

_this.btn_intimidation_reduced.on('click', function(){

_this.parent.gotoAndPlay('intimidation');

});

Now I can click each section numerous times without it stopping https://keylinegraphix.com/wheel/power-control-wheel-aug19.html . So it might be an issue with the code to have 2 functions on 1 mouse click, or the last frames of the animation where the sector is closing could be causing problems.

[kglad]

maybe that appearance of nested functions is problematic, after all.

[kglad]

replace the code you showed with

this.stop();

var _this = this;

var buttonA = [_this.btn_intimidation_reduced,_this.btn_emotional_reduced, _this.btn_isolation_reduced, _this.btn_minimize_reduced, _this.btn_children_reduced, _this.btn_male_reduced, _this.btn_economic_reduced];

if(!this.alreadyDefined){

for(var i=0;i<buttonA.length;i++){

buttonA[i].addEventListener("click",buttonF);

}

this.alreadyDefined = true;

}

function buttonF(e){

_this.parent_frame = e.currentTarget(buttonA[i].name.split("_")[1]);

setTimeout(parent_playF,833);

_this.gotoAndPlay("coercion_close");

}

function parent_playF(){

_this.parent.gotoAndPlay(_this.parent_frame);

}

[pattil28523684]

Thanks kglad, I can see that each button will gotoAndPlay "coercion_close" but how do I specify which parent timeline frame each individual button will go to?

[kglad]

i included that code.

[pattil28523684]

I've replaced the code on the "Coercion & Threats" section only. But the buttons don't go anywhere now and there are Console errors when I inspect the page.

[kglad]

you posted code for all your buttons.  did you have that code in more than one location?

[pattil28523684]

Each sector has it's own mc. So the animation and code is customized slightly for each sector. The original code was in the Coercion mc. Probably not the best way to do it but I have very little experience with Animate.

[kglad]

then ignore my code suggestion. i thought you listed code for all your buttons.