Using jQuery .on('click' to navigate through frames in the timeline by using buttons and the action events wizard

[andrewm48054372]

Hi, I've been looking at getting an Animate html project which has been created and published by a member of my team.

I noticed that on debugging, the anonymous functions hooked into click events of buttons were firing more than once.

Basically the project allows navigation through the animate timeline by adding buttons to proceed backward and forward. Our designer use the built in wizards to add click events to buttons. The code the wizard creates looks something like this:

this.frame_10 = function() { 
     var _this = this; 
     /* Clicking on the specified symbol instance executes a function. */ _
     this.blah2.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('blah3frame'); }); 

I noticed that using code similar to this results in the jquery element 'blah2' having the anonymous function added every time we navigate back to frame10.

So, to fix, I hacked the published js to include a removeClick function globally like so:

function removeClick(jqObj) { 
     if (jqObj == null) return jqObj; 
     if (jqObj._listeners == null) return jqObj; 
     jqObj._listeners.click = undefined; 
     return jqObj; 
} 

and also wrapping the calls to the .on('click' in this function like so:

    removeClick(_this.blah2).on('click', function(){ 

I did read that you should be able to call _this.blah2.off('click') to remove (click) listeners in jQuery, but for some reason this didnt work for me and the number of listeners kept building up...

Anyway, I was wondering if anyone can help with a couple of questions...

Is the above approach correct?

Is there a better way of adding the handlers (easily) preferably still using the wizards?

Is there a way of editing Animate's template wizards code snippets for adding the removeClick function?

Is there a way of editing Animate's master js template to add the removeClick function globally for all future projects?

As you may have guessed, I don't have any experience with Animate (I don't even have it installed)

Thanks for any help.

[avid_body16B8]

You could use mouseEnabled true or false accordingly.

this.blah2.mouseEnabled = false;


[kdmemory]

Hi Andrew

First of all, setting up event handlers with i.e. on('click') must not be necessarily jQuery. At least not in Animate CC where we use CreateJS in HTML5 canvas projects. CreateJS = EaselJS, TweenJS, PreloadJS and SoundJS modules. See details about on and off in the EaselJS API.

Then something like

this.frame_10 = function() {

     this.blah2.on('click', function(){

     // do many things

     };

};

is simply a function (this.frame_10) which wouldn't be called repeatedly if one navigates back to a frame with the label "frame_10" or the numeric gotoAndStop(10) in that particular timeline.

In EaselJS terms you can remove on listeners with off by doing so:

setup listener:

var blah2Listener = this.blah2.on("click", function() {

     // do all blah2 click things

}, this, false)

remove listener:

this.blah2.off("click", blah2Listener);

Hope that helps a bit

Klaus

[andrewm48054372]

Hi Klaus,

Thanks for the reply.

I've just tested again and do actually see that upon navigating to a frame, the function does seem to execute again.

Therefore navigating back to the frame again adds yet another listener.

I've just checked it in my browser by adding break points in this block: (see the bold lines)

this.frame_66 = function() {

var _this = this;

/*

Clicking on the specified symbol instance executes a function.

*/

_this.buttonNext14.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('therange');

});

var _this = this;

/*

Stop a Movie Clip/Video

Stops the specified movie clip or video.

*/

_this.stop();

}

On navigating to the frame, the first breakpoint is hit.

If I click buttonNext14 on the frame, it hits the second breakpoint, but it will hit it one extra time every time frame_66 is visited.

I did try adding...

_this.buttonNext14.off('click');

...just before the .on('click', function() {  

But on inspecting the properties of this.buttonNext14 I can see that the click listener still fills up with multiple anonymous functions.

This is why I decided to add the removeClick function myself, which ultimately sets element._listeners.click back to undefined.

This seems messy, but it does work.

Thanks for your help.

[ClayUUID]

This isn't complicated, people. Just check that an event listener exists before adding a new one.

https://createjs.com/docs/easeljs/classes/EventDispatcher.html#method_hasEventListener

if (!bla.hasEventListener("click")) {

     bla.addEventListener("click", click event handler...);

}

[andrewm48054372]

Thank you! I've wrapped one of them in that statement like so:

if (!_this.button.hasEventListener('click')) {

     _this.button.on('click', function(){

...

Mine differs in that I don't use addEventHandler - instead I am still using the .on() call that the wizard created.

Tested again today and it works, so, final question...

Is there any way of changing the Animate template code so that when my designer uses the button-click wizard (which generates the hook using .on() )?

I would obviously like to modify Adobe's own template code for these wizards to wrap the .on() in the if statement so that it never gets wired up twice.

I've tried Googling an answer to this, but couldn't find any info on changing Animate template code.

Any Animate experts ever done this?

But, thank you ClayUUID - a big help.

[ClayUUID · Accepted solution]

If you're on a Windows system, the code snippet definitions should be in:

%LOCALAPPDATA%\Adobe\Animate CC 2018\en_US\Configuration\CodeSnippets

You can also create new code snippets from within the IDE.

Add interactivity with code snippets in Animate CC

[andrewm48054372]

Thank you ClayUUI! A huge help.