6 Replies Latest reply on Jan 2, 2018 7:44 AM by charlesg74960127

    HTML5 making a button state stick

    charlesg74960127 Level 1

      I'm trying to make a toggle button with a Movie Clip symbol (as opposed to a Button symbol) in HTML5 Canvas. It works fine except when I move my cursor off the button, it reverts to the first frame rather than staying on the frame I sent it to via code. The button has 4 "states" residing on 4 different frames in the button labelled "play_up", "play_down", "pause_up", "pause_down" in that order. When the button is supposed to remain in the pause position, it always reverts to the play position - I assume because that's the first frame in the button. Each of these key frames in the button has a "this.stop();" command. Any suggestions on how to make a button state stick when you move your cursor off it?

       

      Here's my code.

       

      var myStage = this;
      var audioIsPlaying = 0;
      this.playPauseBtn_mc.cursor = "pointer";
      stage.enableMouseOver();
      
      
      myStage.playPauseBtn_mc.addEventListener("mouseover", playPauseBtnOver.bind(this));
      myStage.playPauseBtn_mc.addEventListener("mouseout", playPauseBtnOut.bind(this));
      myStage.playPauseBtn_mc.addEventListener("mousedown", playPauseBtnDown.bind(this));
      myStage.playPauseBtn_mc.addEventListener("pressup", playPauseBtnUp.bind(this));
      
      
      function playPauseBtnDown() {
                      if (audioIsPlaying) {
                                      // pause the audio & set button to play
                                      myStage.playPauseBtn_mc.gotoAndStop("pause_down");
                                      audioIsPlaying = 0;
                      } else {
                                      // play the audio & set button to pause
                                      myStage.playPauseBtn_mc.gotoAndStop("play_down");
                                      audioIsPlaying = 1;
                      }
      }
      
      function playPauseBtnUp() {
                      if (audioIsPlaying) {
                                      // set button to play
                                      myStage.playPauseBtn_mc.gotoAndStop("pause_up");
                      } else {
                                      // set button to pause
                                      myStage.playPauseBtn_mc.gotoAndStop("play_up");
                      }
      }
      
      function playPauseBtnOver() {
                      if (audioIsPlaying) {
                                      // set button to play
                                      myStage.playPauseBtn_mc.gotoAndStop("pause_up");
                      } else {
                                      // set button to pause
                                      myStage.playPauseBtn_mc.gotoAndStop("play_up");
                      }
      }
      
      function playPauseBtnOut() {
                      if (audioIsPlaying) {
                                      // set button to play
                                      myStage.playPauseBtn_mc.gotoAndStop("play_up");
                      } else {
                                      // set button to pause
                                      myStage.playPauseBtn_mc.gotoAndStop("pause_up");
                      }
      }