La lista de visualización I

Hasta este momento hemos estando añadiendo instancias de símbolos (que son instancias de MovieClip) a la escena, sin preocuparnos demasiado de como se organizan dentro de ella.

Lo hemos hecho desde la interfaz de Flash, arrastrando símbolos desde la biblioteca, pero también desde el código, usando la función addChild()

De hecho, desde la interfaz de Flash, hemos hecho un uso bastante más avanzado de lo que se denomina la Lista de Visualización, porque hemos anidado unos clips de película dentro de otros; acordaos de la anidación de animaciones que hicimos para crear una pelota botando de un lado a otro de la pantalla.

En la segunda parte de este capítulo, vamos a ver como se hace eso desde el código. Pero para entender bien como funcionan las capas y las jerarquías de objetos en la lista de visualización de Flash, vamos a empezar por lo básico.

Volver al Índice

Seguiremos sin complicarnos demasiado la vida y sólo vamos a usar MovieClips, aunque debéis saber que hay muchos más tipos de objetos gráficos en actionscript (DisplayObject, DisplayObjectContainer, Sprite, Bitmap, TextField, etc)

Añadir instancias al DisplayList con addChild()

Para añadir instancias de MovieClip, creábamos un símbolo con el contenido gráfico o la animación y lo exportábamos para actionscript dándole un nombre de clase (directamente al convertir a símbolo, o una vez creado, yendo a la biblioteca y pinchando con el botón derecho en el símbolo --> Propiedades --> Exportar para actionscript).

Una vez hecho esto y desde nuestro código, si le habíamos puesto MiClip como nombre de clase al símbolo, ya desde nuestro programa podíamos hacer:

// Crear una instancia de MiClip (clase asociada a nuestro símbolo))
var nuevaInstancia:MovieClip = new MiClip();
// Añadir a la escena
addChild(nuevaInstancia);
// Colocar en las coordenadas que queramos:
nuevaInstancia.x = 130;
nuevaInstancia.y = 75;
// Escalar un 150%
nuevaInstancia.scaleX = 1.5;
nuevaInstancia.scaleY = 1.5;

Hasrta aquí el repaso de lo que hemos visto hasta ahora. Bien. Cuando hablamos de añadir a la escena estamos dando una imagen muy simplista de lo que se puede llegar a hacer con lo que en realidad se denomina Lista de Visualización (DisplayList en inglés).

Para empezar, la lista de visualización se organiza en capas, pero cada capa sólo puede tener un hijo (en nuestro caso un MovieClip). Vaya limitación ¿no? En realidad no, porque dentro de cada hijo hay, anidada, otra lista de visualización.

Pero vamos a empezar por lo fácil, que paso a paso se llega mejor:

  1. Cread un símbolo con un cuadrado naranja semitransparente de 100×100 píxeles (punto de registro en la esquina superior izquierda)
  2. Exportadlo para actionscript con el nombre de clase HijoNaranja.
  3. A continuación, en el primer fotograma de la línea de tiempo de la escena, añadid el siguiente código:
    	var hijo0:MovieClip = new HijoNaranja();
    	addChild(hijo0);
    	hijo0.x = 20;
    	hijo0.y = 20; 
    
    	var hijo1:MovieClip = new HijoNaranja();
    	addChild(hijo1);
    	hijo1.x = 40;
    	hijo1.y = 40;
    
    	var hijo2:MovieClip = new HijoNaranja();
    	addChild(hijo2);
    	hijo2.x = 60;
    	hijo2.y = 60;
    
    	var hijo3:MovieClip = new HijoNaranja();
    	addChild(hijo3);
    	hijo3.x = 80;
    	hijo3.y = 80;
    	

La imagen muestra lo que os debería quedar en la escena:
capasDisplayListEj01
Y el siguiente diagrama muestra lo que está pasando realmente:
capasDisplayList

La instancia hijo0 queda en la capa 0, hijo1 queda en la capa 1, hijo2 en la capa 2 e hijo3 en la capa 3. Todos ellos cuelgan de la escena (stage), todos ellos son “hijos de la escena”. (En realidad esto no es exactamente así, pero vamos a suponer que sí, porque no afecta a lo que estamos aprendiendo).

Eliminar instancias del DisplayList con removeChild() y removeChildAt()

Vamos a suponer que queremos eliminar hijo2 de la escena. Lo vamos a conseguir añadiendo lo que sigue al final de nuestro programa:

removeChild(hijo2);

Sencillo ¿no?. Existe otra forma de hacerlo, sabemos que hijo2 está en la capa 2. Entonces podemos utilizar removeChildAt(numeroDeCapa), o sea:

removeChildAt(2);

Uséis un método u otro el resultado será este:
capasDisplayListEj02

Intercambiar instancias del DisplayList con swapChildren()

Vamos hacer algunos cambios en el símbolo HijoNaranja para que podamos ver mejor lo que vamos a hacer a continuación.

  1. Entramos en el símbolo y añadimos una nueva capa a la línea de tiempo y creamos un campo de texto clásico y dinámico
  2. Le pondremos como nombre de instancia: “nombre” (sin las comillas)
  3. En el propio campo de texto escribimos “nombre” también (esto es sólo para verlo).
  4. No olvideis embeber las minúsculas y los numerales para la fuente que utiliceis (mirad Trabajar con texto con Flash y actionscript si no os acordais de como hacerlo).
  5. Vamos a oscurecer también un poco la línea del recuadro y a ajustar la transparencia del relleno a un 65%.
  6. Volvemos a la escena y hacemos los siguientes cambios en el código:
    	var hijo0:MovieClip = new HijoNaranja();
    	hijo0.nombre.text = "hijo 0";
    	addChild(hijo0);
    	hijo0.x = 20;
    	hijo0.y = 20; 
    
    	var hijo1:MovieClip = new HijoNaranja();
    	hijo1.nombre.text = "hijo 1";
    	addChild(hijo1);
    	hijo1.x = 40;
    	hijo1.y = 40;
    
    	var hijo2:MovieClip = new HijoNaranja();
    	hijo2.nombre.text = "hijo 2";
    	addChild(hijo2);
    	hijo2.x = 60;
    	hijo2.y = 60;
    
    	var hijo3:MovieClip = new HijoNaranja();
    	hijo3.nombre.text = "hijo 3";
    	addChild(hijo3);
    	hijo3.x = 80;
    	hijo3.y = 80;
    	

El resultado será:
capasdisplaylistej032

Una vez compuesta nuestra lista de visualización, queremos cambiar el orden de nuestras capas. Para esto podemos utilizar el método swapChildren(), que necesita dos parámetros: los dos hijos que queremos intercambiar. Por ejemplo, si añadimos al código anterior:

swapChildren(hijo1, hijo2);

Vemos que se han intercambiado de capa las instancias hijo1 e hijo2:

Con swapChildren()
y si después añadimos:

swapChildren(hijo0, hijo3);

Queda:
capasDisplayListEj05
Como veis, hemos invertido el orden de las capas, de forma que ahora la instancia hijo0 queda en la capa 3, hijo1 queda en la capa 2, hijo2 en la capa 1 e hijo3 en la capa 0.

Existen más comandos para modificar la Lista de visualización y el orden de sus capas. Pero nosotros nos quedaremos con los tres que hemos visto (addChild(), removeChild() y swapChildren()), porque son, aparte de sencillos, lo suficientemente versátiles como para permitir bastante juego.

En la siguiente capitulo, veremos como anidar listas de visualización, que no es otra cosa que meter movieclips unos dentro de otros.

Ejercicios

Jugad con estos métodos hasta que les hayais pillado el tranquillo. Debería seros fácil. No paséis a la siguiente entrega hasta que tengáis esto dominado.

Volver al Índice

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *