HTML5 making a button state stick

[charlesg74960127]

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

[kglad]

your mouseout is problematic.  ie, don't use goto's if your movieclip is already on the correct frame.

[charlesg74960127]

I only added the mouseout to try and make the button stay on the "pause_up" frame. I just removed it to test it again and without the mouseout I get the same behavior, namely the button always reverts to the first frame, "play_up", regardless of where I leave it. The mouseover is redundant. I don't think I need that.

[kglad]

then why do you have a pressup???

is that the problem?  ie, you should NOT have a pressup?

[charlesg74960127]

I do have a mouseout listener.

myStage.playPauseBtn_mc.addEventListener("mouseout", playPauseBtnOut.bind(this)); 

Did I code it right?

[kglad]

why do you have a pressup?

[charlesg74960127 · Accepted solution]

I have a press up because the action happens on mousedown not mouseup. It's going to control audio and I want an immediate response when the user clicks down on the button rather than waiting for the mouse up.

In any case, I found the answer to my problem, though I'm I don't really understand why this works. I need to use "rollout" rather than "mouseout". It seems to have something to do with the fact that rollout doesn't "bubble" but I'm not sure what that means. See

EaselJS v1.0.0 API Documentation : DisplayObject