Tutorial 11 - Utilización de componentes

Paso 6 de 14

Creamos una nueva capa llamada as para la programación.

Antes hemos comprobado que si escribimos la ruta de una imagen en el parámetro source del componente, la imagen se mostrará en el contenedor correspondiente.

Si definimos la propiedad source de una instancia mediante código, veremos que funciona de la misma manera.

Por ejemplo, si escribimos la línea:

thumb0_ldr.source = "images/thumbs/img0.jpg";

comprobaremos que se carga la imagen correspondiente en el primer contenedor de las miniaturas.

Podríamos repetir el mismo código para las cuatro instancias cambiando sólo los números correspondientes, pero si nuestra galería tuviera muchas imágenes podría ser poco práctico hacerlo de esa manera. Veamos una manera de optimizar el código.

En primer lugar definiremos una variable que almacene el número de imágenes de nuestra galería, que en este caso son cuatro.

var numImages:uint = 4;

En otros tutoriales utilizábamos Number como tipo genérico cuando tratábamos con números, pero para números enteros positivos es más correcto utilizar el tipo más específico uint (en el caso de enteros positivos y negativos se utilizaría el tipo int).

Vamos a crear un bucle for que se ejecute cuatro veces (el número de nuestras imágenes), y que vaya cargando la imagen correspondiente en cada miniatura.

for (var i:uint=0; i<numImages; i++)
{
    this["thumb"+i+"_ldr"].source = "images/thumbs/img"+i+".jpg";
}