Tutorial del componente Accordion de Flash

Por Elecash el 22 de Julio de 2004 con 129,642 visitas.

Flash Bsico Otros tutoriales por Elecash.

Mediante este componente podemos a travs de unas bonitas pestaas mostrar MovieClips u otros componentes dentro de Accordion. Para ello primero tendremos que crear
las opciones del men, y una vez creadas llenarlas con lo que deseemos, veamos este ejemplo inicial, en el cual atacheamos nuestro componente desde la biblioteca
(arrastra el componente y borralo luego, se pone en la biblioteca solo), y le damos un tamao de 200x300 con setSize():
//Atacheamos el componente
attachMovie("Accordion", "miAcordeon", 1);
//Propiedades del componente
miAcordeon.setSize(200, 300);
//Le ponemos las opciones del men

miAcordeon.createChild("View", "opcion1", {label:"Un cuadrado"});

miAcordeon.createChild("View", "opcion2", {label:"Un crculo"});
miAcordeon.createChild("View", "opcion3", {label:"Un tringulo"});
Si probamos esto veremos que las opciones se han creado correctamente. Nuestras opciones se llamarn opcion1, opcion2 y opcion3, creadas dentro de View que es la
"vista" de cada "Child" del componente Accordion. Gracias a "label" podemos ponerle un nombre a nuestra pestaa.
Ahora lo que haremos ser rellenar nuestras opciones, para ello crearemos tres MovieClips y les llamaremos "cuadrado", "circulo" y "triangulo", estos MovieClips contendran
obviamente las susodichas figuras. Una vez hecho esto, exportalos para ActionScript con los mismos nombres. Aadamos este cdigo ahora:
//Propiedades de los objetos vinculados
miAcordeon.opcion1.createChild("cuadrado", "cuadrado_mc");
miAcordeon.opcion1.cuadrado_mc.move(75, 50);
miAcordeon.opcion2.createChild("circulo", "circulo_mc");
miAcordeon.opcion2.circulo_mc.move(75, 50);
miAcordeon.opcion3.createChild("triangulo", "triangulo_mc");
miAcordeon.opcion3.triangulo_mc.move(75, 50);

Usando otra vez createChild(), atacheamos dentro de cada pestaa los clips que hemos creado anteriormente, luego los centramos con move() para que quede mejor.
Para acabar de programar este componente nos faltan los listeners:
//Listener para cuando se cambia de vista
alCambiar = new Object();
alCambiar.change = function(evento) {
trace("Has cambiado a la opcin "+miAcordeon.getChildAt(miAcordeon.selectedIndex).label);
trace("Nmero de opcin: "+(miAcordeon.selectedIndex+1)+"/"+miAcordeon.numChildren);
};
//Eventos
miAcordeon.addEventListener("change", alCambiar);

El nico evento que tiene Accordion es "change", y se activa cuando cambiamos de pestaa seleccionada. Cuando cambiamos la pestaa lo que hacemos es mediante el
mtodo "getChildAt()" y la propiedad "selectedIndex", saber cual es la "label" del objeto seleccionado actualmente. La propiedad "selectedIndex" est basado en la indexacin
de cero, por lo que su primer valor ser siempre el 0 y no el 1.

En el siguiente "trace" escribimos el nmero de opcin seleccionada de "x" nmero de opciones. Para ello usamos la propiedad "numChildren", que nos dice el total de
pestaas creadas.
Igual que podemos crear pestaas, tambin podemos destruirlas. Crea un botn en tu escena y ponle de nombre de instancia "destruir_btn", luego aade este cdigo al final
del todo:
//Destruimos la ltima pestaa
destruir_btn.onPress = function() {
miAcordeon.destroyChildAt(miAcordeon.numChildren-1);
};
Gracias a destroyChildAt(), podemos eliminar aquellas pestaas que no necesitemos en un momento dado, con slo darle el nmero (en zero-based) de la pestaa a borrar.