Tutorial del componente Accordion de Flash

Mediante este componente podemos a través de unas bonitas pestañas 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 tamaño 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 círculo"});
miAcordeon.createChild("View", "opcion3", {label:"Un triángulo"});

Si probamos esto veremos que las opciones se han creado correctamente. Nuestras opciones se llamarán 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 pestaña.

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. Añadamos este código 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 pestaña 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 opción "+miAcordeon.getChildAt(miAcordeon.selectedIndex).label);
	trace("Número de opción: "+(miAcordeon.selectedIndex+1)+"/"+miAcordeon.numChildren);
};
//Eventos
miAcordeon.addEventListener("change", alCambiar);

El único evento que tiene Accordion es "change", y se activa cuando cambiamos de pestaña seleccionada. Cuando cambiamos la pestaña lo que hacemos es mediante el método "getChildAt()" y la propiedad "selectedIndex", saber cual es la "label" del objeto seleccionado actualmente. La propiedad "selectedIndex" está basado en la indexación de cero, por lo que su primer valor será siempre el 0 y no el 1.

En el siguiente "trace" escribimos el número de opción seleccionada de "x" número de opciones. Para ello usamos la propiedad "numChildren", que nos dice el total de pestañas creadas.

Igual que podemos crear pestañas, también podemos destruirlas. Crea un botón en tu escena y ponle de nombre de instancia "destruir_btn", luego añade este código al final del todo:

//Destruimos la última pestaña
destruir_btn.onPress = function() {
	miAcordeon.destroyChildAt(miAcordeon.numChildren-1);
};

Gracias a destroyChildAt(), podemos eliminar aquellas pestañas que no necesitemos en un momento dado, con sólo darle el número (en zero-based) de la pestaña a borrar.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Tutorial del componente Accordion de Flash

Publica tu comentario

o puedes...