addChild y removeChild en AS3

Monday, 15. February 2010

addChild y removeChild en AS3

This movie requires Flash Player 9

En las aplicaciones desarrolladas en Flash con ActionScript 3 existen objetos que son visuales, y otros que no lo son. Por lo tanto, existe un escenario al cual le podemos agregar y quitar elementos que nosotros mismos hemos creado, ya sea durante el desarrollo de la aplicación, o bien que sean generados por código. Las herramientas addChild y removeChild son fundamentales para controlar esta adición o sustracción de elementos del escenario. Es decir, no nos sirven para ‘elminiar’ o ‘crear’ elementos, sino para permitir o no su visualización.

Para añadir un objeto al escenario, por lo tanto, este debe primero haber sido creado y definido. A pesar de parecer obvia esta afirmación, es necesario hacer esta aclaración para comprender el proceso. Podemos utilizar elementos que tengamos en la biblioteca (y que hemos desarrollado anteriormente) o crearlos a través de la programación de nuestra aplicación.

La sintaxis es muy sencilla. en primer lugar debemos poner el término clave. En seguida, ponemos entre paréntesis el objeto que queremos hacer visible. Veamos un ejemplo:

Ejemplo

var campoDeTexto:TextField=new TextField();
campoDeTexto.text='Texto de ejemplo';
addChild(campoDeTexto);

Si copiamos este código y lo ejecutamos en Flash, podremos ver cómo se crea automáticamente un campo de texto, con el texto que le hemos indicado, y se inserta en el escenario. Si probáramos el mismo código sin la tercera línea (“addChild(campoDeTexto);”), lo que sucede es que se crea el campo de texto, con el texto indicado, pero este no se inserta en el escenario. Es decir, a partir de ese momento existe el campo de texto, pero no se puede ver.

Por lo tanto, através de addChild() y removeChild() podemos controlar la visualización de los objetos en el escenario, si estos son por naturaleza visuales, tales como un clip de película, un campo de texto, un botón, etc.

addChild(objeto) -> Añade un objeto al escenario permitiendo su visualización.
removeChild(objeto) -> Extrae un objeto del escenario, impidiendo su visualización.

Niveles de visualización (Jerarquía)

Comunmente hablamos de un ‘árbol de visualización’ a través del cual los objetos que hay en el escenario tienen una jerarquía. por lo tanto, con addChild y removeChild podemos controlar en qué nivel se encuentra el objeto en el escenario. Por ejemplo, tenemos un contenedor llamado ‘nombreContenedor’, que tiene una posición en el escenario y ese es su nombre de instancia. De esta forma, podemos agregar el objeto al contenedor específico, en vez de agregarlo directamente al escenario. Para esto escribimos el código de la siguiente forma:

nombreContenedor.addChild(objeto);
nombreContenedor.removeChild(objeto);

Por lo tanto, el objeto sería menor en jerarquía que su contenedor. Si en dado momento eliminaramos el contenedor, el objeto sería inmediatamente eliminado. Por lo tanto es importante tener en cuenta la jerarquía en la cual agregamos los elementos. debemos escribir los nombres de instancia separados por un punto, y finalmente realizar la acción de addChild(objeto) o de removeChild(objeto).

contenedor.subcontenedor.addChild(objeto);
contenedor.subcontenedor.removeChild(objeto);

Es todo por el momento. Espero que sirva de referencia para la utilización de una de las herramientas más sencillas y más importantes de ActionScript 3.0, y que este artículo sea de utilidad. Muchas gracias a todos por leer estos artículos y tutoriales. Pueden dejar dudas, sugerencias, comentarios y apreciaciones en los comentarios del blog, y trataré de responder las dudas, en la medida de lo posible.

Saludos.
Samuel Jiménez. EsK.

VN:F [1.9.1_1087]
Rating: 8.8/10 (49 votes cast)
addChild y removeChild en AS3, 8.8 out of 10 based on 49 ratings

15 Responses to “addChild y removeChild en AS3”



  1. Cesar Flores Says:

    Hola Samuel
    navegando en la web encontre tus tutoriales, me estan siendo muy utiles, y queria saber si tienes alguno relacionado a la duplicacion de movieclip en as3, y sobre como cambiar el punto de registro de una movieclip creada por codigo.
    garcias.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  2. eskombro Says:

    No hay uno específico sobre este tema actualmente, pero ahora entra a la lista de los próximos por redactar. De todas formas puedes mirar la última parte de
    este tutorial a ver si te soluciona lo que quieres saber.

    Saludos.

    VN:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  3. Cesar Flores Says:

    Samuel
    gracias por tu respuesta, lo que ocurre es que estoy trabajando con una galeria de imagenes que se cargan en una MC, de forma externa con xml, el problema esta que al duplicar la movieclip en as3 no se puede, y como esta leyendo la imagen del xml se complica, encontre una forma montando tres MC vacios y presenta la imagen, pero al tratar de rotarla el punto de registro lo envia automaticamente a la esquina superior izquierda y no al centro como quisiera, a pesar de haberlo configurado en las opciones.

    Gracias.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  4. nancy Says:

    Hola me parece muy bueno el tutorial, pero me gustaría que me ayudaran, tengo un problema para poder cargar textos de un .txt y colocarlo en un contenedor, lo que quiero es que los textos los pueda cambiar facilmente desde un archivo externo y no tenga que abrir flash y tener que cambiarlo desde ahi. El codigo que estoy poniendo es

    function loadXML(xmlFile:String):void {
    var xmlLoader:URLLoader = new URLLoader();
    var xmlPeticion:URLRequest = new URLRequest(“dati.xml”);

    configureXMLListeners(xmlLoader);

    xmlLoader.load(xmlPeticion);

    }

    function configureXMLListeners(dispatcher:IEventDispatcher):void {

    dispatcher.addEventListener(Event.COMPLETE, onLoadXMLComplete);

    dispatcher.addEventListener(ProgressEvent.PROGRESS, onXMLProgress);

    }

    function onLoadXMLComplete(e:Event):void {

    dispatchEvent(e);

    var urlLoader:URLLoader = e.target as URLLoader;

    var xmlInfo = new XML(urlLoader.data);

    addChild(xmlInfo);
    contenedor_mc.xmlInfo.addChild;

    }

    function onXMLProgress(e:ProgressEvent):void {

    dispatchEvent(e);

    }

    por favor haber quien sabe como hacer esto

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  5. Bruce Says:

    Hola Samuel
    navegando en la web encontre tus tutoriales, me estan siendo muy utiles, y queria saber si tienes alguno relacionado a la duplicacion de movieclip en as3, y sobre como cambiar el punto de registro de una movieclip creada por codigo.
    garcias.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  6. Liliana Says:

    Samuel
    gracias por tu respuesta, lo que ocurre es que estoy trabajando con una galeria de imagenes que se cargan en una MC, de forma externa con xml, el problema esta que al duplicar la movieclip en as3 no se puede, y como esta leyendo la imagen del xml se complica, encontre una forma montando tres MC vacios y presenta la imagen, pero al tratar de rotarla el punto de registro lo envia automaticamente a la esquina superior izquierda y no al centro como quisiera, a pesar de haberlo configurado en las opciones.

    Gracias.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  7. ruben Says:

    hola:
    me gustaria trataran la siguiente instruccion:
    var manzana=getChilByName(“manzana”+i);

    manzana es un movieclip,por favor, ya que necesito programarlo en as3.
    programa: se muestra en el esenario una manzana y un cajon, debo arrastrar la manzana al cajon y depositarla debe existir un marcador y tiene que aparecer otra manzana en el mismo lugar donde se tomo la primera.
    gracias por toda la ayuda prestada, soy principiante.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  8. pacman Says:

    Hola muy buenas,

    Ahora no tengo el código a mano pero estoy usando addChild para abrir un swf externo al escenario principal y mostrandola en en unos parámetros x,y determinados.
    El problema viene cuando quiero cerrar esa ventana(swf externo), estoy probando con un botón usando JavaScript…, pero me cierra la ventana completa del navegador.
    Me podrías orientar en como poder cerrar esa ventana que utilizo con el addChild?, ahora no puedo utilizar el load/unload de as2..
    Pls help,, no encuentro nada en la red que me funcione… Mier..coles”
    Gracias
    Pac

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  9. Adrian Says:

    hola manestan re bueno los apuntes de as3 gracias y bueno espero mas :Pjaja saludos

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  10. David Says:

    podrias subir un ejemplo del uso de las categorias con objetos SWF en vez de TextField(), un ejemplo vale mas que mil palabras. Gracias.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  11. amado Says:

    estoy utilizando un ‘for’ para crear varios botones con diferentes funciones pero con el mismo componente … asi:

    var Bandeja : Boton_menu;
    for (var i:int = 0; i < myArray.length() ; i++){
    Bandeja = new Boton_menu();
    Bandeja.y = (44 + (i * 22));
    Bandeja.buttonMode = true;
    Bandeja.mouseChildren = false;
    Bandeja.addEventListener(MouseEvent.CLICK, ir)
    addChild(Bandeja);
    }

    ahora quiero eliminar todos los elementos como lo hago?

    espero que me puedas ayudar … GRACIAS….

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  12. Inty Says:

    Como puedo hacer que cuendo de clic en un boton me traiga un video de biblioteca y se ponga en el stage en la posicion que yo quiera, y las dimensiones, etc ayuda¡¡¡¡¡¡¡

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  13. diego Says:

    que pasa si hago removeChild de un objeto y luego quiero en otro momento volver a ponerlo en el escenario…?? por alguna razon no aparece, e incluso puse un trace en el constructor de “hijo” y no aparece…

    los objetos solo se pueden agregar una sola vez o cuando se hace un remove, realmente no se remueve??? como hago para que vuelva a aparecer..??

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  14. tecmobeto Says:

    Muchas gracias me sirvio mucho, me estaba volviendo loco por que no le encontraba la manera de hacerlo

    saludos

    desde mexico

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)


  15. Santiago Says:

    Muchas gracias, me aclaro algunas cosas que no tenia muy asimiladas.

    VA:F [1.9.1_1087]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply