Tutorial 11 - Utilización de componentes

Paso 10 de 14

Al haber dado a cada botón un nombre de instancia con un número que corresponde también al de cada imagen, podemos añadir su funcionalidad en el mismo bucle en el que hemos cargado las imágenes de las miniaturas.

Añadimos en el bucle for la línea:

this["thumb"+i+"_btn"].addEventListener(MouseEvent.CLICK, loadImage);

Con esa línea habremos añadido un listener a cada botón, llamando todos ellos a la función loadImage.

Como todos los botones llaman a la misma función, ésta deberá recuperar el nombre del botón que la lanzó para saber qué imagen cargar en el contenedor principal. Como vimos en otros tutoriales, podemos identificar el nombre de la instancia que desencadena el evento con e.target.name.

Probemos con la siguiente definición de la función loadImage:

function loadImage(e:MouseEvent):void
{
    trace(e.target.name);
}

Si probamos nuestra película y pulsamos sobre los diferentes botones, comprobaremos que, efectivamente, aparecen los nombres de las instancias en el panel Salida.

Nuestro contenedor principal (main_ldr) deberá cargar una imagen que se encuentra en la carpeta images, y cuyo nombre es img seguido del mismo número que contiene el nombre de la instancia del botón que hemos pulsado, y seguido de .jpg (por ejemplo images/img2.jpg).

En las cadenas de texto se considera que el primer carácter ocupa la posición 0, el segundo la posición 1, etc. Con el método substr podemos extraer caracteres de una cadena, siendo el primer parámetro la posición desde donde se extraerán los caracteres y el segundo el número de caracteres a extraer.

En el nombre de las instancias de los botones, el número ocuparía la posición 5. Por ello, nos interesa extraer un carácter que se encuentra en la posición 5 del nombre. Para ello deberemos escribir substr(5,1).

Nuestra función loadImage quedará por tanto como sigue:

function loadImage(e:MouseEvent):void
{
    main_ldr.source = "images/img"+e.target.name.substr(5,1)+".jpg";
}

Probamos de nuevo nuestra película para comprobar la carga de las diferentes imágenes según la miniatura que pulsemos.