How to Remove a Child Dynamically in AS3

Children in the Flash AS3 (ActionScript 3 programming language) environment are used for a wide variety of Flash business, entertainment, animation and graphic applications. Child nodes in XML files are often read directly into Flash to display business reports, slide shows and play lists. Graphic objects placed on the stage in Flash are always children on the stage. Similarly, graphic objects placed in other Flash objects, such as Sprites and MovieClips, become children of the Sprite or MovieClip. Flash's child methods let you easily remove a child object from its parent object container with one simple line of code.

Things You'll Need

  • Adobe Flash Professional: CS3, CS4 or CS5 versions
Show More

Instructions

    • 1

      Start the Flash program. Click "Flash File (ActionScript 3.0)" from the splash window to create a new AS3 project file for your Flash animation project.

    • 2

      Select the "Actions" option from the Window menu on the main Flash menu bar to open the Actions editor. Position your mouse cursor on the first line of the Actions editor. Click your mouse button, and type in the code below to create a Sprite container object and place it on the flash stage (as a child of the Flash stage).

      var parentSprite:Sprite = new Sprite();

      addChild(parentSprite);

    • 3

      Type the code below starting at the next line in the Actions editor to create a rectangular movie clip graphic called myButton that is colored red, has a width of 100 pixels, a height of 50 pixels and is drawn with a line that has a width of 4 pixels.

      var myButton:MovieClip = new MovieClip();

      myButton.graphics.lineStyle(4);

      myButton.graphics.beginFill(0xFF0000);

      myButton.graphics.drawRect(100, 50, 50, 20);

      myButton.graphics.endFill();

    • 4

      Type the code below starting at the next line in the Actions editor to place myButton (the red rectangle) into the Sprite container called parentSprite as a child of parentSprite.

      parentSprite.addChild(myButton);

    • 5

      Type the code below starting at the next line in the Actions editor to add an event listener to the myButton movie clip object that will instruct Flash to execute the code in the callFunction_fn function when myButton is clicked.

      myButton.addEventListener(MouseEvent.CLICK, callFunction_fn);

    • 6

      Type the code below starting at the next line in the Actions editor to remove myButton (the red rectangle) from the stage when the function detects a mouse click has been made on the myButton object.

      function callFunction_fn(e:MouseEvent): void {

      parentSprite.removeChild(myButton);

      };

    • 7

      Copy and paste the code below into the Actions editor to ensure that there are no syntax errors and the remove Child code runs correctly.

      var parentSprite:Sprite = new Sprite();

      addChild(parentSprite);

      var myButton:MovieClip = new MovieClip();

      myButton.graphics.lineStyle(4);

      myButton.graphics.beginFill(0xFF0000);

      myButton.graphics.drawRect(100, 50, 50, 20);

      myButton.graphics.endFill();

      parentSprite.addChild(myButton);

      myButton.addEventListener(MouseEvent.CLICK, callFunction_fn);

      function callFunction_fn(e:MouseEvent): void {

      parentSprite.removeChild(myButton);

      };

    • 8

      Click the "TestMovie" option in the Control menu on the main Flash menu bar to play the remove child program. Click the red button to remove myButton from its parent, parentSprite.

Learnify Hub © www.0685.com All Rights Reserved