Unidad 22. Ejercicio paso a paso: Agregar objetos dinámicamente

Ejercicio paso a paso.

1. Abre el archivo attach.fla que encontrarás en la carpeta ejercicios/attach del curso.
2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre él.
   
3. Selecciona Propiedades - botón Avanzado.
4. Se abrirá una ventana donde deberás hacer clic en la opción Exportar para ActionScript.
   
5. Deja estrella en el campo clase y pulsa OK.
   
6. Selecciona el primer fotograma de la Capa 1 y escribe el siguiente fragmento de código en el Panel Acciones (tecla F9):

   var contenedor:Sprite=new Sprite; //Creamos un contenedor
   
   addChild(contenedor); //Y lo mostramos en la escena

   Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas. Usaremos frecuentemente contenedor.numChildren para saber cuántas estrellas se muestran.
   
7. Ahora para el botón de añadir estrellas (btn_añadir), añadiremos el siguiente codigo:

   btn_añadir.addEventListener(MouseEvent.CLICK, añadir);
   
   function añadir(event):void {
   
     if (contenedor.numChildren<30) { // si el contenedor contiene menos de 30 estrellas
   
                                      //podemos añadir más
   
       var miEstrella:estrella=new estrella; // creamos una estrella en miEstrella
   
       var posY:Number; //creamos una variable para calcular la posicion Y
   
       var posX:Number; // creamos otra variable para calcular la posicion X
   
       // calculamos la posicion "y" e "x" en funcirelación con el núm. de estrellas
   
       posY=Math.floor(contenedor.numChildren/6)*miEstrella.height;
   
       posX=(contenedor.numChildren%6)*miEstrella.width;
   
       miEstrella.x=posX; // asignamos las variables de las posiciones a las coordenadas 
   
       miEstrella.y=posY; // de posicion de la estrella
   
       contenedor.addChild(miEstrella); // por ultimo añadimos la estrella al contenedor
   
     }
   
   }
   
   

   Observa como calculamos las posiciones x e y:

Para la posición Y, dividimos contenedor.numChildren (número de hijos que contiene el contenedor) entre 6, que será el número máximo de estrellas que ponemos en una fila, lo que nos indica en qué fila tendrá que ir la nueva estrella. El resultado lo multiplicamos por miEstrella.height (alto de la estrella), y esa será la distancia con la parte superior (.y).

Para la posición X, calculamos el resto (%) de numChildren entre 6, lo que nos indica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (ancho de la estrella), para calcular la distancia con el lado izquierdo (.x).


8. Ahora para el botón de quitar estrellas añadimos el siguiente código:

   
   btn_quitar.addEventListener(MouseEvent.CLICK, quitar);
   
   function quitar(event) {
   
     if (contenedor.numChildren) { // si hay más de 0 hijos devolvera el valor true
   
       // quitamos siempre numChildren - 1, que es el último elemento añadido
   
       contenedor.removeChildAt(contenedor.numChildren-1); 
   
     }
   
   }

   El método contenedor.removeChildAt borra el elemento con el índice dado. Como queremos borrar el último índice, lo calculamos con contenedor.numChildren-1. Restamos uno, porque el ínidice es en base 0. Es decir, si hay dos elementos (ínidces 0 y 1), numChildren devolverá 2.
   

Ya hemos creado una película que añade un número concreto de elementos automatizadamente.