Skip to main content
Known Participant
March 10, 2023
Question

HTML5 Canvas Code Error

  • March 10, 2023
  • 4 replies
  • 1486 views

I coded it so that when the button is clicked it goes to frame 2 and plays the animation, but when i test it goes to frame 4 instead? How can i fix.

This is my first time using HTML5 Canvas and just a quick demo so please excuse the bad quality.

This topic has been closed for replies.

4 replies

kglad
Community Expert
Community Expert
March 10, 2023

if you fail to account for the way canvas counts frames, you'll be off by 1 frame, not 2 frames.  are you sure it's off by 2, and not 1?

RoadbobekAuthor
Known Participant
March 12, 2023

Im sure

kglad
Community Expert
Community Expert
March 12, 2023
quote

Im sure


By @Roadbobek

 

meaning?

JoãoCésar17023019
Community Expert
Community Expert
March 10, 2023

Hi.

 

In the HTML5 Canvas document, the first frame is 0. So when you use gotoAndPlay(2), you're actually sending the timeline to the third frame. So you should use gotoAndPlay(1) to send to the second frame.

 

Also, the click event listener is being readded everytime that frame is revisited. Thus you should add a check to prevent it. For example:

var _this = this;

if (!_this.frame0Started) // frame0Started is just a custom property
{
	_this.button_1.on("click", function()
	{
		_this.gotoAndPlay(1);
	});

	_this.frame0Started = true;
}

 

I hope this helps.

 

Regards,

JC

RoadbobekAuthor
Known Participant
March 11, 2023

I copy and pasted the code you suggested and it went from being offset by 2 frames to 1 frame. I changed the start frame to 0 and it works well. But when I tried copying the code for another animation everything broke.

kglad
Community Expert
Community Expert
March 11, 2023

create a new fla that allows you to simplify and test the problem you're seeing, so it's easier to understand what you're doing incorrectly.

RoadbobekAuthor
Known Participant
March 10, 2023

To clarify when I said "when the button is clicked it goes to frame 2" "it" is referring to the animation.

 

RoadbobekAuthor
Known Participant
March 10, 2023

I coded the same thing just with a different button, so when I press the button the animation should go to frame 20 but instead, it goes to frame 22. Same problem!