• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

Participant ,
Jan 20, 2024 Jan 20, 2024

Copy link to clipboard

Copied

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?

 

 

 

TOPICS
ActionScript , Code , Timeline

Views

422

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
community guidelines

correct answers 1 Correct answer

Participant , Feb 08, 2024 Feb 08, 2024

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:

 

Votes

Translate

Translate
Community Expert ,
Jan 20, 2024 Jan 20, 2024

Copy link to clipboard

Copied

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");

}

}

Votes

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
community guidelines
Participant ,
Jan 22, 2024 Jan 22, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 22, 2024 Jan 22, 2024

Copy link to clipboard

Copied

should be on the qchicken parent timeline 

Votes

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
community guidelines
Participant ,
Jan 25, 2024 Jan 25, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Participant ,
Jan 25, 2024 Jan 25, 2024

Copy link to clipboard

Copied

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");

}

}

Votes

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
community guidelines
Community Expert ,
Jan 25, 2024 Jan 25, 2024

Copy link to clipboard

Copied

is there an error shown in the developer console?

Votes

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
community guidelines
Participant ,
Jan 27, 2024 Jan 27, 2024

Copy link to clipboard

Copied

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.

 

Votes

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
community guidelines
Community Expert ,
Jan 27, 2024 Jan 27, 2024

Copy link to clipboard

Copied

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

 

all the error you see can be ignored.

Votes

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
community guidelines
Participant ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Participant ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

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

2. did you check the default/ignorable errors?

Votes

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
community guidelines
Participant ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

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

 

all the error you see can be ignored.

Votes

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
community guidelines
Participant ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Participant ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

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");

				}

			}
		}

Votes

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
community guidelines
Community Expert ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Participant ,
Feb 02, 2024 Feb 02, 2024

Copy link to clipboard

Copied

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.

 

Votes

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
community guidelines
Community Expert ,
Feb 02, 2024 Feb 02, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Participant ,
Feb 06, 2024 Feb 06, 2024

Copy link to clipboard

Copied

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);

}

Votes

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
community guidelines
Participant ,
Feb 06, 2024 Feb 06, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Feb 06, 2024 Feb 06, 2024

Copy link to clipboard

Copied

frameLabel should be currentLabel

Votes

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
community guidelines
Participant ,
Feb 07, 2024 Feb 07, 2024

Copy link to clipboard

Copied

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?

Votes

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
community guidelines
Community Expert ,
Feb 07, 2024 Feb 07, 2024

Copy link to clipboard

Copied

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);
}
}

Votes

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
community guidelines
Participant ,
Feb 08, 2024 Feb 08, 2024

Copy link to clipboard

Copied

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:

 

Votes

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
community guidelines