Skip to main content
M
murkalurk2099
Inspiring
July 18, 2019
Answered

HTML5 Movieclip Button is Slow to Detect Click Events

  • July 18, 2019
  • 2 replies
  • 868 views
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?

    This topic has been closed for replies.
    Correct answer kglad

    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");}}

    2 replies

    C
    ClayUUID
    Legend
    July 18, 2019

    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.

    M
    murkalurk2099Author
    Inspiring
    July 18, 2019

    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
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    July 18, 2019

    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");}}

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    July 18, 2019

    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");}} 
    M
    murkalurk2099Author
    Inspiring
    July 18, 2019

    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...

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