Html5 Canvas is lagging after a couple clicks

[cleiffy]

Hi, I'm new to adobe animate, I was using adobe flash around more than 10 years ago, and not really capable of programming. I'm creating a simple project and just using frames and go to frame scripts. After I published it, it works well, but only around a couple of clicks and then.... it become lagging and even stuck.
I have change the images into smaller resolution, also tried to minimize the simple animation, make the document size smaller, also change the fps but after I publish, it still happened just like that. 

Is there any solution to this kind of problem? Really need help here.

Thank you in advance.

[kglad]

do you have any code in your project?

[cleiffy]

Hi, thanks for youjr reply... I'm using codes like this in every button, it's like telling every button to go to another frames manually.

This is an example of script for one button that I use:

var _this = this;
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_2.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_3.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(2);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_4.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(3);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_5.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(7);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_7.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);
});

var _this = this;
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.homedrop_tablet.stop();
_this.homedrop_ampul.stop();
_this.homedrop_tanyajawab.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_1_dark.on('click', function(){
/*
Play a Movie Clip/Video or the current timeline.
Plays the specified movie clip or video.
*/
_this.homedrop_tablet.play();
_this.homedrop_ampul.play();
_this.homedrop_tanyajawab.play();

});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tablet.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_ampul.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(8);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tanyajawab.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(16);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tablet.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_ampul.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tanyajawab.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

[kglad]

change button_2 and button_3 listeners from

_this.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_2.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);

});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_3.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(2);
});

to

_this.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_2.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);

console.log(2);

});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_3.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(2);

console.log(3);
});

=============================================================================

then click button_2 > button_3 > button_2 > button_3 > button_2 > button_3 > button_2 > button_3 and see if things start to lag.  if they do, open your browser's developer console and copy and paste here the output.

[cleiffy]

Hi, thank you for giving me input.

I have tried to put the script as you have told me. just button 2 & 3.

and then i tried to click another button and come back to that button 2 & 3 again, it become laggy.

I have captured like a loading number attached:

There is number that is loading and like make it laggy there.

Does smthing wrong with the script? Or is that smthing that can be managed?

Thank you

[cleiffy]

Hi, thank you for giving me input.

I have tried to put the script as you have told me. just button 2 & 3.

and then i tried to click another button and come back to that button 2 & 3 again, it become laggy.

I have captured like a loading number attached:

There is number that is loading and like make it laggy there.

Does smthing wrong with the script? Or is that smthing that can be managed?

Thank you

[kglad]

you're adding the same listeners multiple times causing the lag

use:

if(!this.exected){
this.executed = true;

// add all your button listeners 

}

[cleiffy]

Thanks a lot for the insights that I'm using same listeners multiple times.

I tried to minimize the same multiple listeners usage and it works smoothly and great now.

Again HUGE THANKS for the help !!! 

[kglad]

you're welcome.

but i'm not sure what you mean by "minimize" the listeners usage.  you don't need to minimize anything. you just need to prevent adding listeners more than once.  in your situation, you would use:

if(!this.executed){

this.executed = true;

// and then all your code:

var _this = this;
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_2.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_3.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(2);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_4.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(3);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_5.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(7);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_7.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(1);
});

var _this = this;
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.homedrop_tablet.stop();
_this.homedrop_ampul.stop();
_this.homedrop_tanyajawab.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.button_1_dark.on('click', function(){
/*
Play a Movie Clip/Video or the current timeline.
Plays the specified movie clip or video.
*/
_this.homedrop_tablet.play();
_this.homedrop_ampul.play();
_this.homedrop_tanyajawab.play();

});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tablet.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_ampul.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(8);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tanyajawab.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndStop(16);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tablet.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_ampul.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.homedrop_tanyajawab.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and stops the movie.
Can be used on the main timeline or on movie clip timelines.
*/
_this.homedrop_tablet.gotoAndStop(0);
_this.homedrop_ampul.gotoAndStop(0);
_this.homedrop_tanyajawab.gotoAndStop(0);
});

}

[cleiffy]

Oh, Ok, what I mean by minimize is like this: (may be the correct word is simplify 🙂 )

Before... this I was putting all the same scripts for the button into each frames, like this:

Because I didn't know how to use a script for a "go next frame and prvious frame", so I thought that I need to put manually for each frame using "gotoAndStop(xx)" in each frame together with other scripts like written above, so I have multiple same scripts in each frames.

Just knew that I only need to put the script at the first timeline, and I also just found out and copy paste to use "prevFrame and nextFrame" script just by put it in the first timeline.

I will also put the the script that you have shared above, Thanks for also showing how to put it correctly.  (I was also confused how to put this script correctly) 

[kglad]

one button with one code snippet can encode all the goto next frame, and one button with one code snippet can encode all the goto previous frame.

[cleiffy]

Ok, noted, thanks a lot for your time and insights.

[kglad]

you're welcome.