Objetos visibles y contenedores en ActionScript 3

Este tip esta hecho para aquellos que les ha dado duro pasar de ActionScript 2 a ActionScript 3 y están cabreados con Adobe. También para los que no entienden bien eso de addChild, getChildAt, y otros códigos extraños.

En este tip explicare los fundamentos para entender como Actionscript 3 Maneja los objetos gráficos en Flash. Y con gráficos me refiero a todo lo que uno puede ver como, texto, imágenes, vídeo y vectores.

Este tip esta hecho de lo que aprendí leyendo la guía de flash, el capitulo 12 “Programación de la visualización”. Pero si no quieres volverte loco con frases como “..hasta que se añada la instancia del objeto de visualización a un contenedor de objeto de visualización de la lista de visualización..”, lee esta guía.

Actionscript 3 vs Actionscript 2

AS3 trajo grandes cambios en la manera de hacer las cosas en flash. Y una de las cosas en las que Adobe hizo un cambio mas brusco, fue la manera de manejar la parte gráfica de Flash.
Pero aunque parezca que Adobe se complica innecesariamente con estos cambios en AS3, la verdad es que AS2 era insufrible a la hora de manejar la parte gráfica.

Por ejemplo en AS2, no había manera de saber cuantos objetos había en la película o en un MovieClip. El manejo de la profundidad era muy poco intuitivo. Para colocar un objeto al frente, había que utilizar getNextHighestDepth() que es muy fácil de escribí y recordar. Si uno quería hacer un juego de disparos, tocaba hacer un for horrendo para saber que objetos colisionaban con otros.

En fin, AS2 no es tan fácil como lo pintan. AS3 mejora muchas cosas y cuando uno lo entiende, es mucho más fácil y intuitivo de manejar que AS2.

Lo Básico

Pero bueno, entremos en materia. En AS3 hay dos tipos de objetos básicos, Objetos visibles, como un texto, imagen, vector y video y objetos contenedores, que vendrían hacer como una caja o carpeta donde uno mete los objetos visibles.


Los objetos visibles se llaman DisplayObject y los objetos contenedores se llaman DisplayObjectContainer. Pero cuales son los objetos contenedores?. Son 4.


Estos son los 4 tipos de contenedores en los que podremos colocar los objetos que se ven. El árbol genealógico quedaría así.

Propiedades de los objetos DisplayObject

Como vemos, el padre de todos es DisplayObject. Todos los hijos de DisplayObject (MovieClips, Vectores, Imágenes, etc) tienen las siguientes propiedades

• alpha = Nivel de transparencia. Predeterminado 100
  
• height = Altura en pixeles.
  
• width = Anchura en pixeles.
  
• name = nulo. Flash le coloca un nombre hasta que nosotros le demos el propio
  
• parent = el contenedordonde esta.
  
• rotation = Rotación. Predeterminado 0
  
• scaleX = Escala horizontal. Predeterminado 1
  
• scaleY = Escala vertical. Predeterminado 1
  
• visible = Si es visible o no. . Predeterminado true
  
• x = Posición en horizontal en pixeles. Predeterminado 0
  
• y = Posición en vertical en pixeles. Predeterminado 0

Hay mas propiedades, pero estas son las mas importantes. El escenario es un objeto especial, puesto que no puede tener propiedades como alpha o x, y, rotation o parent, entre otras.

Los contenedores

Hay algo que hay que tener absolutamente claro. No se puede ver algo, si no esta adentro de un contenedor. El único elemento que no necesita de esto, es el escenario. Si no tienes esto claro, fracasaras en AS3.

¿Pero como agregamos algo al contenedor?

addChild();

Todos los contenedores tienen un método llamado addChild que traducido es “Añadir Niño”. Este es uno de los métodos mas importantes en AS3. En el siguiente código vamos a crear un texto y vamos a ver como funciona addChild.

Código :

var miTexto:TextField = new TextField(); // Creo el campo de texto
miTexto.text = "Hola @#♦*•#"; // Escribo lo que quiero que diga

Si colocamos este código, no veremos nada en el escenario, porque no lo hemos agregado a ningún contenedor. Ahora lo vamos agregar al contenedor Escenario

Código :

var miTexto:TextField = new TextField(); // Creo el campo de texto
miTexto.text = "Hola @#♦*•#"; // Escribo lo que quiero que diga
this.addChild(miTexto);

Si colocamos este código, vemos que en pantalla sale Hola @#♦*•#. Sencillo no?
Ahora Vamos a meter nuestro texto en un contenedor de tipo Sprite.

Código :

var miTexto:TextField = new TextField();
miTexto.text = "Hola @#♦*•#";

var miContenedor:Sprite = new Sprite(); // Creamos nuestro contenedor 
this.addChild(miContenedor); // Agregamos 

miContenedor.addChild(miTexto); // Agregamos el texto al contenedor

Si colocamos este código veremos que aparece nuestro Hola @#♦*•# en pantalla. Como vemos en este código, hay que agregar también los otros contenedores al escenario, si no hacemos esto, no serán visibles.

Tipos de contenedores

Para saber todas las características de cada tipo de contenedor lo mejor es ir a la referencia de Adobe.

• Guía Stage o Escenario
  
• Guía Loader. Este objeto solo puede tener un hijo. El objeto que carga con el método load.
  
• Guía Sprite
  
• Guía MovieClip
  
• Guía DisplayObjectContainer
  
• Guía DisplayObject

La posición de un objeto dentro de un contenedor.

Otra de las cosas importantes, es que cada contenedor, tiene una lista de los objetos que le hemos metido adentro. Esta lista tiene tres datos, la posición dentro del contenedor, el tipo de objeto y el nombre.

Al código que vimos antes le agregamos un segundo texto y lo colocamos dentro del contenedor sprite

Código :

var miTexto2:TextField = new TextField();
miTexto2.text = "Chao @#♦*•#";
miTexto2.y = 20;
miContenedor.addChild(miTexto); // Agregamos el texto el segundo texto

Ahora le agregamos una imagen en un contenedor Loader

Código :

var carga:Loader = new Loader(); // Creamos el contenedor de carga
carga.load(new URLRequest("imagen_Cualquiera.jpg")); // Le damos el archivo a cargar
this.addChild(carga); // Agregamos el contenedor a la escena

Después creamos de manera grafica dos cuadros yc con F8 los convertimos en MovieClip y de nombre de instancia les ponemos cuadro1 y cuadro2. Colocamos el siguiente codigo.

Código :

miContenedor.addChild(cuadro2); // Colocamos el cuadro 2 en el contenedor

Si hicimos todo el código anterior, La estructura de nuestra película quedaria asi:


Con esta imagen se entiende bien el concepto de profundidad. Los objetos que están mas arriba, de la lista de visualización, aparecerán por delante. Si la imagen del ejemplo fuera muy grande, taparía todo lo demás por que esta en la parte mas alta de la lista.

Pero nada mas hemos visto addChild, y los contenedores tienen otros métodos y propiedades. Hay una propiedad, que nos dicen el numero de hijos que tiene un contenedor, o un método que nos permite buscar con el nombre un hijo dentro de un contenedor, o métodos que nos cambiar el orden del índice.

numChildren:

Nos permite saber cuantos hijos tiene un contenedor. En el ejemplo anterior seria.
trace(this.numChildren);
Resultado 3;

getChildAt():

Nos dice que objeto esta ocupando la posición que le indiquemos.
miContenedor.getChildAt(1).visible = false;
Se desaparece miTexto2

removeChildAt():

Saca del contenedor el objeto le indiquemos. miContenedor.removeChildAt(1);
Saca del contenedor miTexto2. Ojo no lo elimina, solo lo saca del contenedor, y al no estar adentro de ningún contenedor no se puede ver. Para eliminarlo se utiliza delete.

getChildByName():

Me busca el objeto que tenga el nombre que yo le diga
miContenedor.getChildByName(“Cuadro2” ).x = 200;
Me mueve el Cuadro2 horizontalmente hasta la posición 200;

setChildIndex():

Cambia la posicion de un hijo a donde nosotros le indiquemos
this.setChildIndex(this.getChildAt(2), 0);
Hace que la imagen se vaya al fondo de la película

addChildAt():

Agrega un hijo, pero nosotros le decimos en que lugar

getChildIndex():

Nos dice en que posición esta un hijo

Con esto claro será mucho mas fácil y divertido programar en AS3. Sin esto claro, sera un tormento, como escribir un tip con con el BBCode del foro.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.