Remove Movie Clip with ActionScript 3

In the first tutorial, we programmed Flash^R to move our Bio movie clip from the Flash Library and place it on the stage. It's time to work on the ActionScript that will close this movie clip. If you remember in the first tutorial, we added ActionScript to a button on the stage which told Flash to place an instance of our movie clip on the stage when the button was clicked.

The easiest way to remove this movie clip when we are finished with it is to create a "Close" button and write some ActionScript to go with it that will remove our Bio movie clip from the stage. But we don't want this button to be visible unless our Bio movie clip is visible. So we need to draw this button on the stage at the same time that we place our Bio movie clip there. We can either place this Close button on top of the movie clip or just next to it.

To draw this button, you will probably need a copy of the movie clip on the stage for reference. On Frame 1 of the Bio layer, drag a copy from the Library and set the correct X and Y positions in the Property Inspector. Now that the movie clip is in the same location that it will be when it goes live, we can draw our button. I decided to create a rectangular button with rounded corners and put the button on top of the movie clip.

Click on the Rectangle Primitive tool. Use the slider in the Property Inspector to set the Corner Radius to 10 for all four corners. Now you can draw a rounded rectangle.

Using the slider in the Color panel, I also reduced the Alpha of the rectangle to 50%. This helps the rectangle blend with the parchment.
For my example, I decided to use the simple "Close" text on top of my close button. After I add the text, I want to treat the button and the text as one object – the button. Select the rectangle and text and click Modify – Group to group them together. Go to the Property Inspector and make note of the X and Y position of the button. You will need this.
Select the button and convert to a symbol. In the dialog box, set the following values.

Name – CloseButton_Bio
Type – Button
Registration – Upper Left Square
Export for ActionScript – Checked
Class – CloseButton_Bio

In the Properties Inspector, set the Instance Name for the button to "BioClose".

You can now delete the movie clip and the button from the stage because we have both originals in the Library.
On Frame 1 of the Actions layer, open the Actions panel. Add the following code to the ActionScript code we programmed in the first tutorial. This new code will place the Close button on the stage with the Bio movie clip when the AboutButton is clicked. Then, it will remove both the Bio movie clip and the Close button, when the Close button is clicked.

AboutButton.addEventListener(MouseEvent.CLICK, goBio);
function goBio (e:MouseEvent):void {
var newBio:BioParch = new BioParch();
this.addChild(newBio);
newBio.x = 25;
newBio.y = 45;

var newBioButton:CloseButton_Bio = new CloseButton_Bio();
this.addChild(newBioButton);
newBioButton.x = 675;
newBioButton.y = 60;

newBioButton.addEventListener(MouseEvent.CLICK, closeBio)
function closeBio (e:MouseEvent):void {
removeChild(newBio);
removeChild(newBioButton);
}
}

Notice that we have placed this new code inside the goBio function. The first section of the new code will add an instance (newBioButton) of the CloseButton_Bio button to the Display list and place it on the stage at the same X and Y position that you copied down earlier. The next section of code will add an Event Listener to this newBioButton which will run the closeBio function. This function will remove the newBio movie clip and the newBioButton from the Display List when the newBioButton button is clicked. Removing these from the Display List will remove them from the stage.