Comunidad de diseño web y desarrollo en internet online

swapDepths y getNextHighestDepth en Actionscript 3

Seguramente todos recordéis el sistema de profundidades que utilizaba ActionScript 2. Las profundidades eran infinitas, y podías tener un objeto en la profundidad -1492 y colocar el siguiente en la profundidad 15 si querías, dejando vacías las 1506 profundidades intermedias. En ActionScript 3 esta forma de interpretar la profundidad ya no existe, y se ha reemplazado por una mucho más lógica.

ActionScript 3


En ActionScript 3, el concepto de profundidad es algo mucho más real: si tienes, por ejemplo, 3 clips en el escenario, sus profundidades serán 0, 1 y 2 respectivamente (al igual que los elementos de los Array o los meses del año, las profundidades se cuentan a partir de 0).

Ahora las profundidades solo indican el orden de representación de los children (hijos; lo que se refiere a los clips que hay dentro de otro) del escenario. Esto conviene explicarlo gráficamente:
- Imaginemos que tenemos 4 clips de película (clipA_mc, clipB_mc, clipC_mc y clipD_mc) en nuestra linea de tiempo principal, y el último de ellos contiene otros 2 clips (clipE_mc y clipF_mc) en su interior. Las profundidades se representarían así:
    root
      clipA_mc (Child: 0)
      clipB_mc (Child: 1)
      clipC_mc (Child: 2)
      clipD_mc (Child: 3)
        clipE_mc (Child: 0)
        clipF_mc (Child: 1)

Los 4 primeros clips son hijos de root, y los otros 2 son hijos de clipD_mc.

¿Qué ha pasado con getDepth()?


El viejo método getDepth tiene ahora el equivalente getChildIndex. Su utilización es bastante similar. Si en AS2, utilizábamos estos códigos:

Código :

this.clipD_mc.clipF_mc.getDepth() //Código situado en el root
this.getDepth() //Codigo situado dentro de un clip

Ahora su equivalente sería:

Código :

this.clipD_mc.getChildIndex(clipF_mc) //Código situado en el root
parent.getChildIndex(this) //Código situado dentro de un clip

Ahora nuestros clips no tienen su propia profundidad, sino que tienen la propiedad de ser hijos (Child) de su clip superior (parent).

swapDepths() ya no existe


Y, de hecho, no existe un método equivalente exacto. Ahora debemos utilizar el método swapChildren, con el que podremos cambiar de lugar 2 clips, sin que esto afecte al resto. Pongo un ejemplo gráfico:
- Tenemos un clipA, encima de este un clipB, y encima un clipC. El escenario nos queda así:
    clipA (Profundidad: 0)
    clipB (Profundidad: 1)
    clipC (Profundidad: 2)

- En AS2, si utilizásemos el código clipA.swapDepths(10), el resultado sería:
    clipB (Profundidad: 1)
    clipC (Profundidad: 2)
    clipA (Profundidad: 10)

- Sin embargo, en AS3, tendríamos que utilizar el código this.swapChildren(clipA, clipC), lo que nos intercambiaría estos clips, pero dejando el escenario así:
    clipC (Profundidad: 0)
    clipB (Profundidad: 1)
    clipA (Profundidad: 2)

- Pero, ¿qué pasa si solo queremos que clipA vaya al frente, pero no queremos que clipC aparezca por debajo de clipB? La solución sería cambiar clipA por clipB, y luego clipA por clipC. El resultado sería:

Código :

//clipA (Prof: 0), clipB (Prof: 1), clipC (Prof: 2)
this.swapChildren(clipA, clipB)
//clipB (Prof: 0), clipA (Prof: 1), clipC (Prof: 2)
this.swapChildren(clipA, clipC)
//clipB (Prof: 0), clipC (Prof: 1), clipA (Prof: 2)


Mi querido getNextHighestDepth() ha desaparecido


Como acabamos de ver, si queremos que un clip se superponga al resto como si de un swapDepths(getNextHighestDepth()) se tratara, debemos intercambiar la profundidad del clip con la de todos los clips con una profundidad superior a éste. ¿Y que pasa si tenemos 100 clips en el escenario? Evidentemente, no vamos a ir intercambiando todos uno por uno, por eso he creado la siguiente función:

Código :

function traerAlFrente(MC:MovieClip):void{
   //Esta variable obtiene la posición (profundidad) del MovieClip
   var pos:Number = this.getChildIndex(MC)
   //Mientras que el clip no se encuentre por encima
   //del resto, se ejecutará la siguiente función
   while(pos < this.numChildren - 1){
      //La variable "siguiente" obtiene el
      //MovieClip inmediatamente superior
      var siguiente:MovieClip = this.getChildAt(pos+1) as MovieClip
      //Se intercambia la posición de los dos clips
      this.swapChildren(MC,siguiente)
      //Actualizamos el valor de la variable "pos"
      pos = this.getChildIndex(MC)
   }
}

La propiedad numChildren nos devuelve el número de "hijos" que tiene el clip. Si tienes un clip que contiene a otros 4 en su interior, las profundidades de estos son 0, 1, 2 y 3 respectivamente, pero el valor de numChildren es 4.

Les dejo aquí un ejemplo de la utilización de la función traerAlFrente(MC):

Hagan clic en un clip de película para llevarlo al frente.


Otras propiedades con las que podemos jugar son addChild (añade un clip al escenario o a otro clip), removeChild (parecido a removeMovieClip), removeChildAt (elimina el clip situado en esa profundidad), etc. No obstante, no profundizaré en el uso de estas (al menos de momento).

Espero que les haya gustado el tip :D

Descarga el archivo .fla del ejemplo

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

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate