HTML5 Movieclip Button is Slow to Detect Click Events

[murkalurk2099]

stage.enableMouseOver(30)
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
function SmartRollOver(){
     if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
          this.mvc_IndexButton.gotoAndPlay("Over");}}
function SmartRollOut(){
     if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 10){
          this.mvc_IndexButton.gotoAndPlay(19 - (this.mvc_IndexButton.currentFrame-5));}}
function SmartSelect(){
     if(this.mvc_IndexButton.currentFrame >= 4 && this.mvc_IndexButton.currentFrame <= 9){
          this.mvc_IndexButton.gotoAndPlay("Select");}}

As the GIF demonstrates, moving the cursor quickly over the button and clicking results in nothing happening. On the successful click, at the end of the clip, I wait until the "Over" animation phase has finished before clicking: now the "Select" function does trigger.

My hypothesis is that the "Over" animation must complete its phase before another function can run its own animation, but I don't know for sure. On the unsuccessful clicks, I am clicking somewhere before frame 5, sometimes on frame 4. It seems that only when I click on frame 5 that the "Select" function works. Increasing the document framerate reduces the problem slightly but does not eliminate it altogether.

Is there a way to make the "rollover" animation skip when the "click" event is triggered?

The button looks really good when it is run at 60 fps, is it prohibitive to run HTML at such a framerate?

[kglad]

try:

1. stage.enableMouseOver(30) 
2.  
3. this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this)); 
4. this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this)); 
5. this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this)); 
6.  
7. function SmartRollOver(){ 
8.      if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){ 
9.           this.mvc_IndexButton.gotoAndPlay("Over");}} 
10.  
11. function SmartRollOut(){ 
12.      if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 10){ 
13.           this.mvc_IndexButton.gotoAndPlay(19 - (this.mvc_IndexButton.currentFrame-5));}} 
14.  
15. function SmartSelect(){ 
16.     // if(this.mvc_IndexButton.currentFrame >= 4 && this.mvc_IndexButton.currentFrame <= 9)
17. { 

1.           this.mvc_IndexButton.gotoAndPlay("Select");}} 

[murkalurk2099]

I tried your code with no luck.

I changed my code to:

stage.enableMouseOver(30)
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
function SmartSelect(){
    if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
          this.mvc_IndexButton.gotoAndPlay("Select");}}
function SmartRollOver(){
    if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
          this.mvc_IndexButton.gotoAndPlay("Over");}}
function SmartRollOut(){
    if(this.mvc_IndexButton.currentFrame >= 4 && this.mvc_IndexButton.currentFrame <= 9){
          this.mvc_IndexButton.gotoAndPlay(19 - (this.mvc_IndexButton.currentFrame-5));}}

Since the rollout animation stops on frame 19, the rollover and select animations need to be able to run from between 0 and 19.

But the click event handler is still being blocked when the button is clicked during the rollover animation...

[ClayUUID]

Did you not write the code that you're using? You explicitly have an IF check in your event handler that says to ignore the click unless your button clip is within a certain frame range. So... that's exactly what's happening.

[murkalurk2099]

ClayUUID  wrote

Did you not write the code that you're using? You explicitly have an IF check in your event handler that says to ignore the click unless your button clip is within a certain frame range. So... that's exactly what's happening.

Indeed. Yet the clicks should execute their event handler since, as shown in the GIF, they are occurring in the specified frame range (frames 0 to 9 are where the rollover animation lies on the timeline)... but I believe it is being blocked by the rollover. I guess what I'm trying to ask is, since I have two event handlers that want to run within the same frame range, how can I make it so that the click overrides or supersedes the rollover?

[kglad · Accepted solution]

the rollover executes first, then the click, then the rollout.

if you want to eliminate the rollout when the button is clicked use a boolean in the click method:

1. stage.enableMouseOver(30)
2. var clickedBool;
4. this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
5. this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
6. this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
8. function SmartRollOver(){
9.      if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
10.           this.mvc_IndexButton.gotoAndPlay("Over");}}
12. function SmartRollOut(){
13. if(!clickedBool){
14.      if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 10){
15.           this.mvc_IndexButton.gotoAndPlay(19 - (this.mvc_IndexButton.currentFrame-5));}
16. } else {
17. clickedBool=false;
18. }
19. }
20. function SmartSelect(){
21.     // if(this.mvc_IndexButton.currentFrame >= 4 && this.mvc_IndexButton.currentFrame <= 9)
22. {

clickedBool=true

1.           this.mvc_IndexButton.gotoAndPlay("Select");}}

[murkalurk2099]

I put the booleans in, still no luck.

I changed the code to:

stage.enableMouseOver(30)
var clickedBool;
this.mvc_IndexButton.addEventListener("click", SmartSelect.bind(this));
this.mvc_IndexButton.addEventListener("rollover", SmartRollOver.bind(this));
this.mvc_IndexButton.addEventListener("rollout", SmartRollOut.bind(this));
function SmartRollOver(){
     if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
          this.mvc_IndexButton.gotoAndPlay("Over");
     }
}
function SmartRollOut(){
     if(!clickedBool){
          if(this.mvc_IndexButton.currentFrame >= 4 && this.mvc_IndexButton.currentFrame <= 9){
               this.mvc_IndexButton.gotoAndPlay(19 - (this.mvc_IndexButton.currentFrame-5));
          }
     }
     else{
          clickedBool=false;
     }
}
function SmartSelect(){
    if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19){
          clickedBool=true
               this.mvc_IndexButton.gotoAndPlay("Select");
     }
}

But the button still behaves as it did when I made the GIF...

[kglad]

you didn't comment out the conditional in your click listener.

[murkalurk2099]

When I do that I get a blank page, the console shows an Uncaught SyntaxError: Unexpected token this for http://127.0.0.1:8090/Index%20Button_HTML.js:216 which I assume is referring to line 216:

215.     // actions tween:

216.     this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

Edit: Ignore that link, (can't unlink it)

[murkalurk2099]

Facepalm, I missed commenting out the closed curly on 29.

OK, now the button still does not execute the click unless the rollover animation completes. But also, subsequent clicks will cause the selection animation to run again.

This is the reason I put in the frame range condition for the SmartSelect function:

if(this.mvc_IndexButton.currentFrame >= 0 && this.mvc_IndexButton.currentFrame <= 19)

Once selected, the button needs to stay on frame 29 (the end of the selection animation). I have another animation for deselection that I want to run under two conditions: clicking the same button again, or clicking another button, but I'm not bothering with that yet.

I want the buttons to behave like this:

[kglad]

use the clickedBool to prevent further clicks and don't reset it in the rollout listener.  reset it when you want to be able to click it again, if ever.