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.
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.
Muy bueno para la transición de AS2 a AS3. Felicitaciones! Por:The Fricky!
AXM muy buen tip, me ha aclarado mas cosas acerca AS Por:psycho-vnz
Exelente, con los diagramas quedó mas que explicado Si no me equivoco, la propiedad alpha (Le faltan las negritas) es de 0 - 1, o al menos así me funciona en la clase Tween Por:bryanisimo
como diria monty burns....excelente. Por:noctam_blog
Esto debo guardarlo en los marcadores y mirarlo luego con mas calma.
Realmente muy claro y gráfico. Excelente. Si todos los tutoriales fueran así de claros, apoyándose en imágenes, todo sería más sencillo de comprender y hasta creo que motivaría a más de uno de hacer lo mismo. Sólo creo que hay un pequeño detalle o yo lo hago mal, al crear en forma gráfica los cuadros, ambos serán visibles, pues se están creando en el contenedor escenario (stage) y como siempre los objetos tienen la propiedad visible=true... es así o yo comento error? Gracias igualmente por este excelente tip, que para mí merece ser mini-tutorial
Saludos Por:FerCoff_blog
Muy bien. Ahora tengo dos fla el primero es el principal y alli tengo un var:loader1:Loader al que cargo un swf. Yo quiero que ese swf tenga acceso al principal
Como son las rutas ahora? Por:javi_blog
muy bien. es muy cierto eso de que una imagen vale mas de mil palabras. thx Por:devntn_blog
Excelentisimo, estoy adentrándome a la programacion Flash y esto es muy fácil e intuitivo. Por:Nafiux_blog
Esto a mi me parece muy bien xk asi podremos RECICLAR xk el medio ambien te esta fatal osea tiooooo!!¡¡ Por:Carmen Maria_blog
Parece que algo aclara Por:Tajajon_blog
Esta super bueno, queda todo bien explicado y de manera grafica.
muy currado....................
enhorabuena!!!!!!!!!! Por:epinom-blog
lee esta guía.
