gotoAndStop doesn't work

[MarkSmit]

I don't get it. This usually works. When I click on the 'next' button (right below in the canvas) at frame 1, it goes to frame 10. Just like I intended. But when I'm at frame 10 and I click on the 'next' button again to 'gotoAndStop' at frame 20 it doesn't work and I don't know why.

Link to project file:

https://www.dropbox.com/s/7as84vdhomaj8rz/00-AN%20Marked%20graphic%20deel%202%2001.fla?dl=0

Maybe someone sees what I'm doing wrong?

[kglad · Accepted solution]

your first goto button isn't going to the frame with code (the 10th the frame). it's going to frame 10 which is the 11th frame where there is no gotoAndStop(20) code.

anyway, you need to learn how canvas counts frames.  the initial frame is frame 0, the next one is frame 1 etc.

or, even easier, use frame labels on your timeline and in your code. then you don't have to learn/remember how canvas counts frames.

[MarkSmit]

Thanks! Rookie mistake on my part. But it is a bit confusing, right?

[kglad]

@MarkSmit, i find it not worth remembering. that's why i recommend using frame labels. 

even if you have little imagination, you can use f1, f10 for the first frame and 10th frame, resp. like most of us were taught when learning to count.

though i must admit, i have no trouble with remembering arrays are 0-based.  but the canvas timeline, i just hate to look at the 23rd frame and try to remember, is that frame 22 or frame 24?

really, now that i think about it, the canvas frame numbers in the ide should be 0-based.  that would make more sense  that having the same numbering as as3 documents.

[MarkSmit]

Nice, is there a tutorial about using frame labels? So instead of 'this.goToAndPlay(10)' you can replace '10' with a frame lable?

[kglad]

click a keyframe, in the properties panel, assign a label.

in your code, use that label.

-end of tutorial-

[MarkSmit]

Haha great, thanks!

[kglad]

you're welcome.

[Nick Gioia]

Use code snippets to help you out. 

/* Click to Go to Frame and Stop
Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.

Instructions:
1. Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked.
2.Frame numbers in EaselJS start at 0 instead of 1
*/this.next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_10.bind(this));

function fl_ClickToGoToAndStopAtFrame_10()
{

this.gotoAndStop(10);
}

[kglad]

@Nick Gioia, the snippets are almost-zero help for this issue, except for the 0-based count reminder.  but users see that reminder time they test and it's a lot more noticeable when testing than in the snippets.