In Animate HTML5 canvas on named last frame of movie clip gotoAndStop on named main timeline frame

[Charles_I]

I have a movie clip on stage on top of a graphic. When the main timeline movie gets to this frame it stops and plays the nested movie clip. I want to code from the main timeline actionscript layer an event listener that detects when the last named frame of the nested clip is played and goto and stop on a named frame of the main timeline.

So, for example.

On frame 30 which is named "question_1" is a button click event listener that goes to the next frame "question1_answer1":

this.q1f1.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
      this.gotoAndStop("question1_answer1");

}

on "question1_answer1" there is a "this.stop();" and a movie clip on the stage named "qchicken" that runs an animation. On the last frame of "qchicken" I have named the frame "chicken_down" at which point I want to go back to "question_1" on the main timeline. So how do I write an event listener that does this:

this.qchicken.EVENT LISTENER THAT DETECTS WHEN "chicken_down" IS REACHED.parent.gotoAnd Stop("question_1");

And finally, how and where do I put the remove event listener code once the goto is executed (and similarly once a button is pressed on other events)? I've seen more than one variation of writing remove event listener in posts and examples of it being placed before and after the event code. Which is correct?

[kglad]

var _this=this;

createjs.Ticker.addEventListener("tick",this.chicken_downF);

function chicken_downF(){

if(_this.qchicken.frameLabel=="chicken_down"){

createjs.Ticker.removeEventListener("tick",this.chicken_downF);

_this.gotoAndStop("question_1");

}

}

[Charles_I]

Hmm, not working for me.  I put the function in the actionscript layer on the frame with the qchicken movie. And I tried putting an alert after the "if...frameLabel" line but nothing happens - the program doesn't reaches it.  Interestingly, if I put an alert in before the function it fires on the mousedown of the previous  frame before it reaches the frame where the qchicken movie is.

Also, I don't understand the reason for creating this variable, "var _this=this;". It appears to me where "_this"  is being used is still the same place where "this" is required as a key word.

[kglad]

should be on the qchicken parent timeline 

[Charles_I]

That's where I put it. The main movie timeline is the parent of the qchicken timeline. Doesn't work for me.

[Charles_I]

To clarify it's on the frame "question1_answer1" which is the frame that contains the "qchicken" movie. As I said above neither of these alerts work so the function is not being reached:

var _this=this;

createjs.Ticker.addEventListener("tick",this.chicken_downF);

function chicken_downF(){
alert("chicken_down")
if(_this.qchicken.frameLabel=="chicken_down"){
alert("chicken_down")
createjs.Ticker.removeEventListener("tick",this.chicken_downF);

_this.gotoAndStop("question_1");

}

}

[kglad]

is there an error shown in the developer console?

[Charles_I]

Yes, there are lots of errors. I have uploaded the log file. I don't know why there are so many because at the moment there is a very small amount of code in the program.  All the coding is on the actionscripts top layer of the main timeline. Here is what I have:

On frame 1 (salt animation goes to "stock" page for now):

this.stop();

this.bone.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler()
{
this.gotoAndStop("question_1");
this.bone.removeEventListener("click", this.bone);
}

this.salt.addEventListener("click", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2()
{
this.gotoAndPlay("moviesalt");
this.salt.removeEventListener("click", this.salt);
}

On frame 28:

this.gotoAndStop("question_1");

On frame 29 (named "stock" not in use yet):

this.stop();

On frame 30 (named "question_1"):

this.stop();

On frame 31 (named "question1_answer1")

var _this=this;

createjs.Ticker.addEventListener("tick",this.chicken_downF);


function chicken_downF(){

if(_this.qchicken.frameLabel=="chicken_down"){

createjs.Ticker.removeEventListener("tick",this.chicken_downF);

_this.gotoAndStop("question_1");

}

}

That's a pretty minimal amount of code for all those errors.

[kglad]

create a new canvas project. test the empty project.  check the dev console.

all the error you see can be ignored.

[Charles_I]

I created an exact replica of the project using graphic boxes for each button and text on the canvas of each frame to indicate which frame you are on. The third page, question 1 answer 1 plays the qchicken movie but does not go back to the question 1 frame when it reaches the chicken_down frame (where there will be two more button choices eventually). There are still too many console errors for me to figure out which one is indicating the problem.

But, for a reason I don't understand the forum won't let me upload an .fla file, even if I change extension to something else - it says:

"Correct the highlighted errors and try again.

The attachment's testmovie.fla content type (application/octet-stream) does not match its file extension and has been removed."

How can I upload this file for you to look at?

So I've changed the file exentsion to .txt even though it's an .fla file.

[Charles_I]

Sorry I forgot to remove the last line - doesn't appear that I can edit a post.

[kglad]

1. you can't upload an fla file here.

2. did you check the default/ignorable errors?

[Charles_I]

I don't know where default/ignorable errors are. Are they in Animate, if so where, or in the browser? How do I get to this report?

I stripped everything out of my test movie except the question 1 frame (with a simple stop and button to go to the next frame) and the question 1 answer 1 frame which contins the animation movie, which runs and is supposed to go back to question 1 when done, and I can't get your script to work. The only way I can get this to work is to put

this.parent.gotoAndStop("question_1");

on the last frame inside the movie. I was hoping to do this from the main timeline so all the scripts are there but it's not working for me.

[kglad]

create a new canvas project. test the empty project.  check the dev console.

all the error you see can be ignored.

[Charles_I]

Did that - no difference that I can see between the blank movie and my test movie. However I checked the .js file generated with a published movie and there is an error that says,

'chicken_downF' is defined but never used.

[Charles_I]

Excertp from .js file:

// stage content:
(lib.testMovie = function (mode, startPosition, loop, reversed) {
		if (loop == null) {
			loop = true;
		}
		if (reversed == null) {
			reversed = false;
		}
		var props = new Object();
		props.mode = mode;
		props.startPosition = startPosition;
		props.labels = {
			question_1: 0,
			question_1_answer_1: 1
		};
		props.loop = loop;
		props.reversed = reversed;
		cjs.MovieClip.apply(this, [props]);

		this.actionFrames = [0, 1];
		// timeline functions:
		this.frame_0 = function () {
			this.stop();

			this.q1f1.addEventListener("click", fl_MouseClickHandler.bind(this));

			function fl_MouseClickHandler() {
				this.gotoAndStop("question_1_answer_1");

			}
		}
	
		this.frame_1 = function () {
			this.stop();

			var _this = this;

			createjs.Ticker.addEventListener("tick", this.chicken_downF);

			function chicken_downF() {

				if (_this.qchicken.frameLabel == "chicken_down") {

					createjs.Ticker.removeEventListener("tick", this.chicken_downF);

					_this.gotoAndStop("question_1");

				}

			}
		}

[kglad]

how can you check the js file without loading the html that's tied to the js file.

[Charles_I]

Animate generates an HTML file and a js file when it's published. Since I am unable to upload the js file I have copied the piece of code, above, that has an x beside the line "'chicken_downF' is defined but never used." when viewed in my Brackets code editor.

[kglad]

i have no idea why i typed this.chicken_downF.  that should be chicken_downF.bind(this)

[Charles_I]

So I tried this, and as before the function is not being reached because both alerts come up as "no." I might just have to go with putting the code in the movie clip which works fine.

var _this = this;
var yesno = "no";

alert(yesno);

createjs.Ticker.addEventListener("tick", chicken_downF.bind(this));

function chicken_downF() {

	if (_this.qchicken.frameLabel == "chicken_down") {

		yesno = "yes";
		return yesno;

	}
		alert(yesno);

}

[Charles_I]

Except I just noticed that alert in the function is undefined and I don't know how to fix that and test properly if the problem is that the frame label name is not being reached, or the redirect back to the main timeline is not working

[kglad]

frameLabel should be currentLabel

[Charles_I]

Finally, got it working. Thanks. So part 2 of my question do I need to add a stop event listener and/or stop the ticker line of code to keep it from continuing to run in the background? Or will it stop once it reaches the main frame label?

[kglad]

no, you should explicitly stop it.

var _this = this;

var chicken_downFF = chicken_downF.bind(this);

createjs.Ticker.addEventListener("tick", chicken_downFF);

function chicken_downF() {

if (_this.qchicken.currentLabel == "chicken_down") {

createjs.Ticker.removeEventListener("tick", chicken_downFF);

}

}

[Charles_I · Accepted solution]

Thanks. So, with the gotoAndStop line the complete working

var _this = this;
var chicken_downFF = chicken_downF.bind(this);
createjs.Ticker.addEventListener("tick", chicken_downFF);

function chicken_downF() {

	if (_this.qchicken.currentLabel == "chicken_down") {
		createjs.Ticker.removeEventListener("tick", chicken_downFF);
		_this.gotoAndStop("question_1");
	}
}

code looks like this: