Trabajo con la lista de visualización

Todos los componentes ActionScript 3.0 heredan la clase DisplayObject y, por tanto, tienen acceso a sus métodos y propiedades para interactuar con la lista de visualización. La lista de visualización es la jerarquía de objetos mostrados y elementos visuales de una aplicación. Esta jerarquía incluye los elementos siguientes:

  • El escenario, que es el contenedor de nivel superior.

  • Los objetos de visualización, que incluyen formas, clips de película y campos de texto, entre otros.

  • Los contenedores de objetos de visualización, que son tipos especiales de objetos de visualización que pueden incluir objetos de visualización secundarios.

El orden de los objetos de la lista de visualización determina su profundidad en el contenedor principal. La profundidad de un objeto hace referencia a su posición de arriba abajo, o de delante atrás en el escenario o en su contenedor de visualización. El orden de profundidad es aparente cuando los objetos se solapan, pero también existe aunque no se solapen. Cada objeto de la lista de visualización tiene una profundidad correspondiente en el escenario. Si se desea cambiar la profundidad de un objeto colocándolo delante o detrás de otros objetos, se debe cambiar su posición en la lista de visualización. El orden predeterminado de los objetos en la lista de visualización es el orden en el que se colocan en el escenario. La posición 0 de la lista de visualización es el objeto situado en la parte inferior del orden de profundidad.

Añadir un componente a la lista de visualización

Se puede añadir un objeto a un objeto DisplayObjectContainer llamando al método addChild() o addChildAt() del contenedor. En el caso del escenario, también se puede añadir un objeto a su lista de visualización durante la edición creándolo o, en el caso de los componentes, arrastrándolo al escenario del panel Componentes. Para añadir un objeto a un contenedor con ActionScript, cree primero una instancia invocando su constructor con el operador new y, a continuación, llame al método addChild() o addChildAt() para colocarlo en el escenario y en la lista de visualización. El método addChild() coloca el objeto en la siguiente posición de la lista de visualización, mientras que addChildAt() especifica la posición en la que se añadirá el objeto. Si se especifica una posición que ya está ocupada, el objeto de dicha posición, y los de posiciones superiores, se mueven 1 posición hacia arriba. La propiedad numChildren de un objeto DisplayObjectContainer incluye el número de objetos de visualización que contiene. Se puede recuperar un objeto de la lista de visualización llamando al método getChildAt() y especificando la posición o, si se conoce el nombre del objeto, llamando al método getChildByName() .

Nota: si se añade un componente con ActionScript, se debe asignar un nombre a su propiedad name, en el caso de que se desee acceder a él mediante nombre en la lista de visualización.

En el ejemplo siguiente se muestran los nombres y las posiciones de los tres componentes en la lista de visualización. En primer lugar, arrastre un componente NumericStepper, un componente Button y un componente ComboBox al escenario para que se solapen entre sí, y asígneles los nombres de instancia aNs , aButton y aCb . Añada el siguiente código al panel Acciones, en el fotograma 1 de la línea de tiempo: 

var i:int = 0; 
while(i < numChildren) { 
    trace(getChildAt(i).name + " is at position: " + i++); 
}

Se deberán ver las líneas siguientes en el panel Salida: 

aNs is at position: 0 
aButton is at position: 1 
aCb is at position: 2

Desplazamiento de un componente en la lista de visualización

Se puede cambiar la posición de un objeto en la lista de visualización, así como su profundidad de visualización, llamando al método addChildAt() y proporcionando el nombre de objeto y la posición en la que se desea colocar como parámetros del método. Por ejemplo, añada el código siguiente al ejemplo anterior para colocar NumericStepper en la parte superior y repetir el bucle para mostrar las nuevas posiciones del componente en la lista de visualización: 

this.addChildAt(aNs, numChildren - 1); 
i = 0; 
while(i < numChildren) { 
    trace(getChildAt(i).name + " is at position: " + i++); 
}

Se deberá ver lo siguiente en el panel Salida: 

aNs is at position: 0 
aButton is at position: 1 
aCb is at position: 2 
aButton is at position: 0 
aCb is at position: 1 
aNs is at position: 2

El componente NumericStepper también debe aparecer delante de los otros componentes en la pantalla.

Tenga en cuenta que numChildren es el número de objetos (de 1 a n ) de la lista de visualización, mientras que la primera posición de la lista es 0. De este modo, si hay tres objetos en la lista, la posición de índice del tercer objeto es 2. Esto significa que se puede hacer referencia a la última posición de la lista de visualización, o bien al objeto superior en cuanto a profundidad de visualización, como numChildren - 1 .

Eliminación de un componente de la lista de visualización

Se puede eliminar un componente de un contenedor de objeto de visualización y su lista de visualización con los métodos removeChild() y removeChildAt() . En el ejemplo siguiente, se colocan tres componentes Button, uno delante de otro, en el escenario, y se añade un detector de eventos para cada uno de ellos. Al hacer clic en cada componente Button, el detector de eventos lo elimina de la lista de visualización y del escenario.

  1. Cree un documento de archivo de Flash (ActionScript 3.0).

  2. Arrastre un componente Button del panel Componentes al panel Biblioteca.

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente: 

    import fl.controls.Button; 
 
var i:int = 0; 
while(i++ < 3) { 
    makeButton(i); 
} 
function removeButton(event:MouseEvent):void { 
    removeChildAt(numChildren -1); 
} 
function makeButton(num) { 
    var aButton:Button = new Button(); 
    aButton.name = "Button" + num; 
    aButton.label = aButton.name; 
    aButton.move(200, 200); 
    addChild(aButton); 
    aButton.addEventListener(MouseEvent.CLICK, removeButton); 
}

    Para obtener una explicación completa de la lista de visualización, consulte “Programación de visualización” en Programación con ActionScript 3.0 .