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

Question

please help, I have spent a whole morning trying to figure this out and have failed miserably.

I am trying to update an old swf file into a new html canvas.

So far I have updated everything including loading my desired movieclip Image_1 onto the stage into var "fl_MyInstance" this is loaded through button_1 via the following code..

---

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

}

---

When this movieclip is on stage it has a button within that is labelled close1 and I have tried many many codes to try and close it.... but it just isn't working.

The latest code I tried is..

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

Please help, I arrived at this as I know it perhaps needs to target a parent or reference the stage or root or something, but everything tried does nothing. I don't even mind clearing all children if necessary.

Hopefully somebody can help.

Mark

Answer 1

Your problem here is to do with scope. Try the following in a new file. Draw two movieclips on the stage and name them buttonAdd and buttonRemove. In your library have a movie clip named Rectangle. Now add the following code:

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

This should work but there are probably more elegant ways of achieving this.