Skip to main content
I
ImperialElves
Participant
August 11, 2020
Answered

Help with gotoAndPlay()

  • August 11, 2020
  • 1 reply
  • 842 views

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

    This topic has been closed for replies.
    Correct answer ClayUUID

    "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.

    1 reply

    C
    ClayUUIDCorrect answer
    Legend
    August 12, 2020

    "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.

    I
    ImperialElvesAuthor
    Participant
    August 12, 2020

    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

    C
    ClayUUID
    Legend
    August 13, 2020

    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.

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices