设置按钮状态 - Create.js/Easel.js

Question

在 Adob​​e Animate HTML5 Canvas (Create.js/Easel.js) 中，我正在尝试设置按钮的状态，但无法使用各种代码：

this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));

/*function retinoscope(evt) {
    var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
    if (retinoscopeButtonState) {
        alert(retinoscopeButtonState);
        this.retinoscopeButton.upState = this.retinoscopeButton.downState;
    } else {
        this.retinoscopeButton.downState = this.retinoscopeButton.upState;
    }
}*/

var retinoscopeButtonState = 'up';

function retinoscope(evt){ 
    if (retinoscopeButtonState == 'up'){
    this.retinoscopeButton.upState = this.retinoscopeButton.downState;
        retinoscopeButtonState = 'down';
    } else if (retinoscopeButtonState == 'down'){
    this.retinoscopeButton.downState = this.retinoscopeButton.upState;
        retinoscopeButtonState = 'up';
    }
}

Answer 1

这对我有用...

请注意，这是针对按钮 MC retinoscopeButton

中的不同 'states' 使用具有三个关键帧的 MovieClip

var toggle;

if (!root.retinoscopeButton.hasEventListener("click")) {
    toggle = false;
    root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}


root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));


function retinoscopeButtonClickHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(2);
        toggle = true;
    } else if (toggle == true) {
        root.retinoscopeButton.gotoAndStop(0);
        toggle = false
    }
}

function retinoscopeButtonRollOverHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(1);
    }
}

function retinoscopeButtonRollOutHandler() {
    if (toggle == false) {
        root.retinoscopeButton.gotoAndStop(0);
    }
}