Cuidado al ordenar elementos en Flash dinámicamente

Cuando trabajamos con varios clip a la vez necesitamos darles un orden o que al cogerlos estos se posicionen en el nivel superior para que no sea tapado por los otros clip al desplazarlo, por ejemplo en un rompecabezas.

Para hacerlo tenemos varias funciones que nos pueden ayudar, como son setChildIndex, swapChildren y swapChildrenAt.

Código :

setChildIndex(child:DisplayObject, index:int):void

swapChildren(child1:DisplayObject, child2:DisplayObject):void

swapChildrenAt(index1:int, index2:int):void

Funcionan muy bien.

¿Cual es el inconveniente?

Cuando los elementos a ordenar están en el mismo escenario de trabajo, nos encontráremos con un inconveniente al pasar al siguiente fotograma.

Veamos un ejemplo:

Código :

//FOTOGRAMA 1
stop();

listar_btn.addEventListener(MouseEvent.CLICK, onListar);
function onListar(evt:MouseEvent):void
{
listChilds(this);
}

cambiar_btn.addEventListener(MouseEvent.CLICK, onCambiar);
function onCambiar(evt:MouseEvent):void
{
swapChild( clip1_mc, clip2_mc );
}

siguiente_btn.addEventListener(MouseEvent.CLICK, onSiguiente);
function onSiguiente(evt:MouseEvent):void
{
nextFrame();
}

/* FUNCIONES */

function listChilds(mc:MovieClip):void
{
trace_txt.text += "=============>\n";
for(var i:int=0; i < mc.numChildren; i++)
{
trace_txt.text += i.toString() + ' ' + String(mc.getChildAt(i)) + ' ' + mc.getChildAt(i).name + '\n';
}
}

function swapChild(mc1:MovieClip,mc2:MovieClip):void
{
if( mc1.parent != mc2.parent ) return;

var base:MovieClip = mc1.parent as MovieClip;
base.swapChildrenAt( base.getChildIndex(mc1), base.getChildIndex(mc2) );
}

Código :

//FOTOGRAMA 2
anterior_btn.addEventListener(MouseEvent.CLICK, onAnterior);
function onAnterior(evt:MouseEvent):void
{
gotoAndStop( this.currentFrame - 1 );
}

1. Click en "Siguiente Fotograma >>". Vean que no hay nada en este fotograma. Ahora den click en "<< Anterior Fotograma".
   
2. Click en "Listar". Vean que se lista en el cuadro de texto todos los elemento del Escenario con su respectivo índice.
   
3. Click en "Cambiar Orden". Notaran que los cuadros celestes cambia de posición.
   
4. Click en "Listar". Vean que se mantiene la misma cantidad de elementos pero el orden de clip1_mc y clip2_mc (los cuadros celestes), cambiaron su índice, por tanto su orden.
   
5. Click en "Siguiente Fotograma >>". Vean que se mantuvieron los MovieClips que ordenamos. (Esto no debería pasar).
   
6. Click en "<< Anterior Fotograma". Noten que la sombra de los cuadros celestes se oscurecieron, porque ahora hay más de un clip ahí.
   
7. Click en "Listar". Noten que ahora tenemos 2 elementos más. Ahora tienen 2 clip1_mc y 2 clip2_mc.

Si siguieron los pasos en orden, vieron que los elementos ordenados se mantuvieron al pasar a otro fotograma y al regresar se mantuvieron más los elementos que teníamos en ese fotograma. Y si jugaron más con los botones vemos que se siguen duplicando.

¿Cómo solucionamos esto?

Se soluciona colocando los clips, que serán ordenados, dentro de otro clip que nos servirá de contenedor.

Veamos el siguiente ejemplo:

Código :

//FOTOGRAMA 1
stop();

listar_btn.addEventListener(MouseEvent.CLICK, onListar);
function onListar(evt:MouseEvent):void
{
listChilds(cont_mc);
}

cambiar_btn.addEventListener(MouseEvent.CLICK, onCambiar);
function onCambiar(evt:MouseEvent):void
{
swapChild( cont_mc.clip1_mc, cont_mc.clip2_mc );
}

siguiente_btn.addEventListener(MouseEvent.CLICK, onSiguiente);
function onSiguiente(evt:MouseEvent):void
{
nextFrame();
}

/* FUNCIONES */

function listChilds(mc:MovieClip):void
{
trace_txt.text += "=============>\n";
for(var i:int=0; i < mc.numChildren; i++)
{
trace_txt.text += i.toString() + ' ' + String(mc.getChildAt(i)) + ' ' + mc.getChildAt(i).name + '\n';
}
}

function swapChild(mc1:MovieClip,mc2:MovieClip):void
{
if( mc1.parent != mc2.parent ) return;

var base:MovieClip = mc1.parent as MovieClip;
base.swapChildrenAt( base.getChildIndex(mc1), base.getChildIndex(mc2) );
}

Código :

//FOTOGRAMA 2
anterior_btn.addEventListener(MouseEvent.CLICK, onAnterior);
function onAnterior(evt:MouseEvent):void
{
gotoAndStop( this.currentFrame - 1 );
}

Como puedieron comprobar, ya no se mantienen los clips ordenados al pasar al siguiente fotograma porque se trabajo dentro del contenedor el orden y al pasar de fotograma el contenedor (que no fue afectado directamente), no se mantuvo.

Conclusión

Al querer ordenar elementos en Flash siempre usen un contenedor para ellos.

Archivos del ejemplo: Descargar .

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