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

Html5 Canvas is lagging after a couple clicks

Community Beginner ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

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.

Views

276

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 ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

do you have any code in your project?

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 Beginner ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

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

 

 

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 ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

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.

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 Beginner ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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

 

 

 

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 Beginner ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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:

Screen Shot 2023-04-03 at 10.01.41.png

 

 

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

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 ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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

 

use:

 

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

 

// add all your button listeners 

}

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 Beginner ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

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 !!! 

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 ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

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

}

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 Beginner ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

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:

Screen Shot 2023-04-04 at 08.39.01.png

 

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) 

 

 

 

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 ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

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.

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 Beginner ,
Apr 04, 2023 Apr 04, 2023

Copy link to clipboard

Copied

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

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 ,
Apr 04, 2023 Apr 04, 2023

Copy link to clipboard

Copied

LATEST

you're welcome.

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