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:
  8. 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).

  9. 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.

   Inicio