HTML5 canvas (Animate CC) 使用按钮从舞台上删除动画片段

Question

请帮忙，我花了一个上午试图解决这个问题，但失败得很惨。

我正在尝试将旧的 swf 文件更新为新的 html canvas。

到目前为止，我已经更新了所有内容，包括将我想要的动画片段 Image_1 加载到舞台上到 var "fl_MyInstance" 这是通过 button_1 通过以下代码加载的..

this.button_1.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    var fl_MyInstance = new lib.Image_1();
    fl_MyInstance.x = 364.70;      
    fl_MyInstance.y = 199.30;       
    this.addChild(fl_MyInstance);

}

当这个动画片段在舞台上时，它有一个标记为 close1 的按钮，我已经尝试了很多代码来尝试关闭它....但它就是不起作用。

我试过的最新代码是..

this.close1.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler()
{
  stage.removeChild( fl_MyInstance );
}

请帮忙，我知道它可能需要以 parent 为目标或引用阶段或根或其他东西，但我尝试过的一切都无济于事。如有必要，我什至不介意清除所有 children。

希望有人能提供帮助。

马克

Answer 1

您的问题与范围有关。在新文件中尝试以下操作。在舞台上绘制两个动画片段并将它们命名为buttonAdd 和buttonRemove。在您的库中有一个名为 Rectangle 的影片剪辑。现在添加以下代码：

var that = this;
this.buttonAdd.addEventListener("click", addFromLibrary);
this.buttonRemove.addEventListener("click", removeClip);

function addFromLibrary(e)
{   
    window.myRectangle = stage.addChild(new lib.Rectangle());
}

function removeClip(e){
    stage.removeChild(myRectangle);
}

这应该可行，但可能有更优雅的方法来实现它。

HTML5 canvas (Animate CC) 使用按钮从舞台上删除动画片段

HTML5 canvas (Animate CC) remove movieclip from stage with button

html

html5-canvas

createjs

removechild

animate-cc