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

Performnance Issue with Interactive Animation

Community Beginner ,
Dec 11, 2023 Dec 11, 2023

Copy link to clipboard

Copied

Hi all. We've created an interactive animated infographic that's got some performance issues. It lives here:
https://lunchwithravenandcrow.com/images/ANM/LCfolder/ANM-LeadershipCycle.html

 

Essentially, clicks trigger 'go to and stop,' bringing users to one of 16 frames. All works as it should at first, but then the whole thing gets really sluggish the more you use it and eventually totally stops working.

New to Animate and wondering A) why that's happening, and B) how I can fix it. Pasting the existing code from one frame below too.

Thanks in advance, all!

code-

 

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


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


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


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


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


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

 

TOPICS
Performance

Views

183

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 ,
Dec 11, 2023 Dec 11, 2023

Copy link to clipboard

Copied

it's slow for me at the start.  each click takes more than 1 second to show a response.

 

upload your fla to a file server and post a link here.

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 ,
Dec 11, 2023 Dec 11, 2023

Copy link to clipboard

Copied

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 ,
Dec 11, 2023 Dec 11, 2023

Copy link to clipboard

Copied

you're adding more and more listeners to the same object when you change frames.

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Is there a better way to animate this so we don't get the accumulation of lag/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 Expert ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

yes, all your code should be on one frame.  that will take more work than a partial fix that simply uses:

 

if(!this.framenamealreadyexecuted){

// all the code for this frame

this.framenamealreadyexecuted=true;

}

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Sorry, not sure I understand (again, very new to Animate). How would that work since different buttons point to different frames? If I put all the code in, say, frame 1, then the animation points to frame 2, where there's no code, the buttons wouldn't work would they?

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

you could use if-statements conditional on the currentLabel.  if you do that, use only one listener for each buttons.  and you'll still use:

 

if(!this.alreadyExecuted){

this.alreadyExecuted=true;

// your code

}

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Is there a way to do that with the code wizard? I'm not a coder and dependant on that tool in most cases. Or is there a good example of that in use in a similar way that I'd be using it that I could look at that you know of?

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

no, you can't use the code wizard for this.

 

just use the partial fix.  it might be good enough.

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

the partial fix being what you'd pasted, yes?

 

if(!this.framenamealreadyexecuted){

// all the code for this frame

this.framenamealreadyexecuted=true;

}

then would I just paste the entrieity of a frame's code where 'all the code form this frame' is? ie what I'd pasted in the original post like this?

if(!this.framenamealreadyexecuted){

//

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


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


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


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


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


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

this.framenamealreadyexecuted=true;

}

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

yes, but use the frame label name so each if-statement is different 

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Oh, so
if(!St2Restalreadyexecuted){...
for example (where St2Rest is a frame name in the animation

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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

yes, exactly.

 

use that same name assigned to true on that same 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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

Great—I'll give that a go. Thanks for your 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 ,
Dec 12, 2023 Dec 12, 2023

Copy link to clipboard

Copied

sure. keep this updated.

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 ,
Dec 18, 2023 Dec 18, 2023

Copy link to clipboard

Copied

re: your question as to whether this solved it for me @kglad I think I need to just change the way I'm animating it to make it simpler with fewer frames and more triggered movement. Rethinking it all now

 

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 ,
Dec 18, 2023 Dec 18, 2023

Copy link to clipboard

Copied

LATEST

ok.

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