Highlighted

Help with gotoAndPlay()

New Here ,
Aug 11, 2020

Copy link to clipboard

Copied

Good Morning,
I am pretty new to Adobe Animate and I seem to have run into an issue that I don't understand.

I have an environment animated panning left and right and I want the user to be able to click on an arrow to then play the animation to pan in the direction they wanted. The attached image is how my Timeline is set up.

Frame 1 is blank and just a white screen, and the code on the Scripts Layer is;
this.gotoAndStop("Part01");

This works the way I expect it, it immediately moves to the start of my Part 01 section and stops.
Now on Frame 2 (the start of my Part 01 section) of the Scripts Layer I have this code;

this.LeftArrow.alpha = .5;
this.RightArrow.on("click", function(){
console.log ("Move Right");
this.gotoAndPlay("Part01");
})

It starts off making my LeftArrow Button grayed out to indicate that you can't move anymore in that direction, then if the RightArrow Button is clicked it should Play my Part01 animation to move to the right, but it doesn’t.

It displays Move Right in my Console, so I know the function is being called, and it gives no errors at all, it just does nothing and I don't know why. I don't know if my logic is faulty, or if I am using the wrong function, or if it is just Chrome being a jerk...

Any help would be greatly appreciated, thank you.

--Jeff

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

"this" in event handlers points to the root window object, not the lexical context of the function definition.

 

You can either force your event handler functions to execute in the desired context by using bind on them, or declare a local copy of this in another variable and reference that instead. Something like:

var that = this;
this.RightArrow.on("click", function() {
	console.log ("Move Right");
	that.gotoAndPlay("Part01");
});

 And BTW, event handlers in CreateJS are cumulative. The second time this code executes, it won't replace the old click handler, it'll just add another one.

Views

58

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

Help with gotoAndPlay()

New Here ,
Aug 11, 2020

Copy link to clipboard

Copied

Good Morning,
I am pretty new to Adobe Animate and I seem to have run into an issue that I don't understand.

I have an environment animated panning left and right and I want the user to be able to click on an arrow to then play the animation to pan in the direction they wanted. The attached image is how my Timeline is set up.

Frame 1 is blank and just a white screen, and the code on the Scripts Layer is;
this.gotoAndStop("Part01");

This works the way I expect it, it immediately moves to the start of my Part 01 section and stops.
Now on Frame 2 (the start of my Part 01 section) of the Scripts Layer I have this code;

this.LeftArrow.alpha = .5;
this.RightArrow.on("click", function(){
console.log ("Move Right");
this.gotoAndPlay("Part01");
})

It starts off making my LeftArrow Button grayed out to indicate that you can't move anymore in that direction, then if the RightArrow Button is clicked it should Play my Part01 animation to move to the right, but it doesn’t.

It displays Move Right in my Console, so I know the function is being called, and it gives no errors at all, it just does nothing and I don't know why. I don't know if my logic is faulty, or if I am using the wrong function, or if it is just Chrome being a jerk...

Any help would be greatly appreciated, thank you.

--Jeff

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

"this" in event handlers points to the root window object, not the lexical context of the function definition.

 

You can either force your event handler functions to execute in the desired context by using bind on them, or declare a local copy of this in another variable and reference that instead. Something like:

var that = this;
this.RightArrow.on("click", function() {
	console.log ("Move Right");
	that.gotoAndPlay("Part01");
});

 And BTW, event handlers in CreateJS are cumulative. The second time this code executes, it won't replace the old click handler, it'll just add another one.

Views

59

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
Aug 11, 2020 0
Adobe Community Professional ,
Aug 11, 2020

Copy link to clipboard

Copied

"this" in event handlers points to the root window object, not the lexical context of the function definition.

 

You can either force your event handler functions to execute in the desired context by using bind on them, or declare a local copy of this in another variable and reference that instead. Something like:

var that = this;
this.RightArrow.on("click", function() {
	console.log ("Move Right");
	that.gotoAndPlay("Part01");
});

 And BTW, event handlers in CreateJS are cumulative. The second time this code executes, it won't replace the old click handler, it'll just add another one.

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...
Aug 11, 2020 0
New Here ,
Aug 12, 2020

Copy link to clipboard

Copied

Fascinating… Thank you for the replay and the explanation, I will play around with it and see what I can do.

 

I have a couple of questions for you if you don’t mind;

 

First, what exactly is the “var that = this;” line doing? I feel like based on my limited knowledge the code is replacing the variable with its value, so isn’t “that.gotoAndPlay” just being read as this.gotoAndPlay”? Based on your description is this declaring a local copy of the “this” expression? I guess I don’t really know what that means?

 

Second, I do remember reading that CreateJS is cumulative but is that a bad thing for what I am doing? Will it run the click even twice the second time through?

 

Thank you again for all your help!

 

--Jeff

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...
Aug 12, 2020 0
Adobe Community Professional ,
Aug 12, 2020

Copy link to clipboard

Copied

As I already explained, the value of "this" changes when it's called from an event handler. Assigning "this" to "that" copies its current value, which is the value you want.

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...
Aug 12, 2020 0
New Here ,
Aug 12, 2020

Copy link to clipboard

Copied

Good Morning again ClayUUID,

 

So I used the variable like you suggested and it now works!

 

We start in the middle of my environment, if you click the left arrow we pan to the left side of the environment and it grays out, if you then click on the right arrow we go back to where we started and the left arrow lights up again, if we click the right arrow here we pan to the right side of the environment and the right arrow grays out, if we click the left arrow from here we pan back to where we started and the right arrow lights up again.

 

Now I did notice one issue. If I am all the way left or right, if I click the grayed-out arrow it replays the pan to this position. I don’t have any code on those frames to look for a click on those arrows at that time…

 

I thought code would only run if we were on that frame, is that not true? Is it still seeing the click event from the previous sections? If so, how should I go about this time of interactivity in my animations?

 

Thank you again for all the help!

 

--Jeff

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...
Aug 12, 2020 0
Adobe Community Professional ,
Aug 12, 2020

Copy link to clipboard

Copied

Why would you think an event listener would be confined to a specific frame? The listener is assigned to an object, not a frame. As long as the object exists, the listener exists. If you don't want it to exist, you have to remove it.

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...
Aug 12, 2020 0
New Here ,
Aug 13, 2020

Copy link to clipboard

Copied

Ah, that makes sense. Thank you!

 

I have had a hard time finding good tutorials that actually explain why things work, and not just want to do. I find either they are all about the drawing tools and how to animate, or purely how to use JavaScript, the only ones I found that show how to use both together are making games and they have all been listed as “intermediate” or “advanced” so… I follow along but don’t really know why they are doing what they are doing.

 

From playing around with the program myself I noticed that, for instance, if the last frame of my Part01 I put the code “this.gotoAndStop(“Part02”)” then it will play through part one and at the end go to the start of part two and stop. So because of this it always just felt like code doesn’t activate until I get to that frame, but now that you explain it, it does make sense from a logic perspective that the listener is part of the object and not necessarily bound by my main timeline.

 

Thank you again for all the help!

 

--Jeff

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...
Aug 13, 2020 0