Skip to main content
C
cleiffy
Participating Frequently
March 31, 2023
Question

Html5 Canvas is lagging after a couple clicks

  • March 31, 2023
  • 1 reply
  • 462 views

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.

      This topic has been closed for replies.

      1 reply

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      March 31, 2023

      do you have any code in your project?

      C
      cleiffyAuthor
      Participating Frequently
      April 1, 2023

      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
      Community Expert
      kgladCommunity Expert
      Community Expert
      April 3, 2023

      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


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

       

      use:

       

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

       

      // add all your button listeners 

      }

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