Tutorial 11 - Utilització de components
Pas 10 de 14
En haver donat a cadascun dels botons un nom d'instància amb un nombre que correspont també al de cada imatge, podem afegir la seva funcionalitat en el mateix bucle en el qual hem carregat les imatges de les miniatures.
Afegim en el bucle for la línia:
this["thumb"+i+"_btn"].addEventListener(MouseEvent.CLICK, loadImage);Amb aquesta línia haurem afegit un listener a cada botó, cridant tots ells a la funció loadImage.
Com tots els botons criden a la mateixa funció, aquesta haurà de recuperar el nom del botó que la va llançar per saber quina imatge carregar en el contenidor principal. Com vam veure en altres tutorials, podem identificar el nom de la instància que desencadena l'esdeveniment amb e.target.name.
Provem amb la següent definició de la funció loadImage:
function loadImage(e:MouseEvent):void
{
trace(e.target.name);
}Si provem la nostra pel·lícula i premem sobre els diferents botons, comprovarem que, efectivament, apareixen els noms de les instàncies en el panell Salida.
El nostre contenidor principal (main_ldr) haurà de carregar una imatge que es troba en la carpeta images, i el nom del qual és img seguit del mateix nombre que conté el nom de la instància del botó que hem premut, i seguit de .jpg (per exemple images/img2.jpg).
En les cadenes de text es considera que el primer caràcter ocupa la posició 0, el segon la posició 1, etc. Amb el mètode substr podem extreure caràcters d'una cadena, sent el primer paràmetre la posició des d'on s'extrauran els caràcters i el segon el nombre de caràcters a extreure.
En el nom de les instàncies del botons, el nombre ocuparia la posició 5. És per aixó que ens interessa extreure un caràcter que es troba en la posició 5 del nom. Per fer-ho haurem d'escriure substr(5,1).
La nostra funció loadImage quedarà per tant com s'indica a continuació:
function loadImage(e:MouseEvent):void
{
main_ldr.source = "images/img"+e.target.name.substr(5,1)+".jpg";
}Provem de nou la nostra pel·lícula per comprovar la càrrega de les diferents imatges segons la miniatura que premem.