Animate HTML5 Canvas - Event Listeners Firing More Than Once?
So I am incredibly new to javascript (and coding in general), and I have managed to make an incredibly basic HTML5 canvas in Animate CC. Only problem is, when I move back to the pr
Solution 1:
I managed to solve this!
The AS3 post suggested to remove the event listeners, but I couldn't figure out what the JS equivalent was, but now I know!
instance.stop();
//MAKE SURE ALL BUTTONS ARE EVENT LISTENERS
instance.messageBTN.addEventListener("click", messageTest);
function messageTest(){
console.log("Button Pressed");
}
instance.nextBTN.addEventListener("click", nextFrame);
function nextFrame(){
instance.gotoAndStop(1);
//ADD IN TO REMOVE THE EVENT LISTENER WHEN MOVING TO ANOTHER FRAME
instance.messageBTN.removeEventListener("click", messageTest);
}
Solution 2:
Make a variable:
var eventLisBool = false;
Surround your code within the listener with:
if (!eventLisBool) {
// code...
// and at the end of your listener code, include this:
eventLisBool = true;
}
Solution 3:
In HTML5 Canvas there is no nextFrame() or PrevFrame() like in Flash. You just need to create a variable and increase the number for each click:
this.stop()
var _this = this;
var frame = new Number(0);
_this.next_btn.on('click', function(){
/*
Can be used on the main timeline or on movie clip timelines.
*/
frame++;
_this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);
});
_this.prev_btn.on('click', function(){
/*
Can be used on the main timeline or on movie clip timelines.
*/
frame--;
_this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);
});
but you must put any logic condition to control your variable or functions otherwise it will decrease/increase limited frame number
Post a Comment for "Animate HTML5 Canvas - Event Listeners Firing More Than Once?"