Comunidad de diseño web y desarrollo en internet online

Menú en Flash dinamico de selección con Clases

Se me ocurrió armar un menú o lista dinámica el cual usa dos clases, una para los botones y otra para la lista.
Mi idea era poder crear un menu rapidamente en flash pudiendo indicarle si queremos que sea horizontal, vertical o que tenga varias columnas. (como en el caso de mi “minifolio” donde las miniaturas de mis trabajos estan en varias columnas).

(Atención especial a los comentarios del codigo, ahi está la explicación de cada paso)

Clase Boton:

/*
La funcion boton asigna los eventos de rollover y rollout automaticamente
y tiene los metodos para habilitaro deshabilitar al boton. Ademas tenemos la opcion de darle al boton un estado de seleccioando
*/
class Boton extends MovieClip {
        // Primero definimos las variables que usaremos dentro de la clase
        public function click() {
        }
        // generamos una funcion click que sera un metodo donde asignaremos la accion del boton
        var press:Boolean;
        // variable booleana que define si el boton tiene o no un estado seleccionado
        var pos:Number;
        // variable donde guardaremos la posicion dentro de la lista que tiene el boton
        /*
        funcion constructora de la clase. En esta funcion asignamos los eventos del boton
        */
        public function Boton() {
                //en onPress asignamos la funcion click que dira que hacer y en en caso de tener estado seleccionado vamos al mismo y deshabilitamos el boton
                this.onPress = function() {
                        this.click();
                        if (this.press == true) {
                                this.presionado(true);
                                _global.seleccionado.presionado(false);
                                _global.seleccionado = this;
                        }
                };
                // en onRollOver dirigimos el cabezal del boton al frame llamado "over" para generar el efecto
                this.onRollOver = function() {
                        this.gotoAndPlay("over");
                };
                // en onRollOut dirigimos el cabezal del boton al frame llamado "out" para generar el efecto
                this.onRollOut = this.onReleaseOutside=function () {
                        this.gotoAndPlay("out");
                };
        }
        /*
        METODOS:
        esta es una function privada que lleva a cabo el efecto del boton al ser seleccionado y al dejar de estarlo
        */
        private function presionado(estado:Boolean):Void {
                if (estado == true) {
                        this.gotoAndPlay("press");
                        this.enabled = false;
                } else {
                        this.enabled = true;
                        this.gotoAndPlay("pressout");
                }
        }
        /*
        SETTERS Y GETTERS:
        habilitado es un metodo set y get que habilita y deshabilita segun su valor booleano al boton, con un efecto de alpha sobre el boton
        */
        public function set _habilitado(estado:Boolean):Void {
                if (estado == false) {
                        this.gotoAndPlay("out");
                        this.onEnterFrame = function() {
                                if (this._alpha>50) {
                                        this._alpha -= 5;
                                } else {
                                        this.onEnterFrame = null;
                                        this.enabled = estado;
                                }
                        };
                } else if (estado == true) {
                        this.onEnterFrame = function() {
                                if (this._alpha<100) {
                                        this._alpha += 5;
                                } else {
                                        this.onEnterFrame = null;
                                        this.enabled = estado;
                                }
                        };
                }
        }
        public function get _habilitado():Boolean {
                return this.enabled;
        }
        // metodos set y get de _press que asigana si el boton tiene estado de seleccionado o no
        public function set _press(estado:Boolean) {
                this.press = estado;
        }
        public function get _press():Boolean {
                return this.press;
        }
        // metodos set y get de _pos que nos guarda y asigna la posicion en la lista del boton
        public function set _pos(valor:Number) {
                this.pos = valor;
        }
        public function get _pos():Number {
                return this.pos;
        }
}
// fin clase Boton 

Clase Lista:

/*
Esta clase se encargara de crear una nueva lista, tomando de la libreria un boton
modelo y duplicandolo, dando la opcion de poder pasarle un numero de columnas o si
los botones tendras la funcion presionado.
*/
class Lista extends MovieClip {
        // Primero definimos las variables que usaremos dentro de la clase
        var datos:Array;
        //array que contendra los datos de los botones, como nombre, accion, etc
        var linkage:String;
        //el nombre del linkeage que tendra el boton en la libreria
        var columnas:Number;
        //cantidad de columnas en la que se mostraran los botones
        var sep:Number;
        //separacion en pixeles entre los botones
        var press:Boolean;
        //variable booleana que define si los botones tienen estado presionado o no
        /*
        funcion constructora de la clase, en este caso no tiene nada
        */
        public function Lista() {
        }
        /*
        METODOS:
        la funcion "crear" crea, como su nombre lo dice, el listado de botones.
        pasamos los parametros necesarios, explicados arriba
        */
        public function crear(p_datos:Array, p_linkage:String, p_columnas:Number, p_sep:Number, p_press:Boolean) {
                this._visible = true;
                // hacemos visible la lista
                // variable para acomodar el boton en X e Y segun el numero de columnas
                var x:Number = 0;
                var y:Number = 0;
                // asignamos los parametros a las variables de la clase
                this.datos = p_datos;
                this.linkage = p_linkage;
                this.sep = p_sep;
                this.columnas = p_columnas;
                this.press = p_press;
                // bucle for que genera la lista de botones duplicandolos
                for (var i:Number = 0; i<datos.length; i++) {
                        var item:MovieClip = this.attachMovie(linkage, "item"+i, i);
                        //genera una variable item donde guardamos la referencia al nuevo boton
                        //lo posicionamos en X e Y
                        item._x = (item._width+sep)*x;
                        item._y = (item._height+sep)*y;
                        item._press = press;
                        //asiganmos el valor pasado como press al metodo press de la clase Boton
                        item._pos = i;
                        //guardamos la posicion del boton para acciones futuras
                        var ruta:Object = this;
                        // asignamos a la variable "ruta" la referencia de la clase para usarla dentro de otros metodos y no perder su referencia
                        //le asignamos una accion al metodo click creado en la clase Boton (o sea lo que va a hacer el boton)
                        item.click = function() {
                                trace(ruta.datos[this._pos].dato);
                        };
                        item.label_txt.text = datos[i].label;
                        // ponemos el texto del boton en el campo de texto dinamico que el mismo tiene
                        x++;
                        //aumentamos el valor de "x" para generar columnas
                        // si "x" es igual a columnas vuelve a 0 y aumenta "y" para bajar a la siguiente fila
                        if (x == columnas) {
                                x = 0;
                                y++;
                        }
                }
        }
}
//fin de clase Lista 

Lo que debemos hacer una vez creadas las clases es armar un MovieClip en Flash que será nuestro botón. Dentro de él tenemos que hacer la animación del efecto over y out con sus respectivas etiquetas en los frames.
Este MC debe estar en la libreria con un linkage el cual utilizaremos para agregar el boton al menú. Además debemos asignarle la Clase “Boton”.
Para la lista creamos un MC vacio en escenario al cual le asiganmos la Clase “Lista” y le ponemos el nombre de instancia que querramos (en este ejemplo “lista_mc”).

Una vez hecho esto en el primer frame de nuestra película escribimos en siguiente código:

/*
La idea seria que los datos vengan de un base de datos o un XML y los bolquemos en un array
en este caso cree un array cualquier para que vean como funciona el menú
la propiedad "label" que pueden ver sería en texto que aparecera en el boton, si es que dentro del MC del boton hay un Textfild dinamico con el nombre "label_txt".
y la propiedad datos es un texto que muestra la hacer click en el boton en un trace
*/
listado = [];
listado.push({label:"nombre 1", dato:"dato a mostrar 1"});
listado.push({label:"nombre 2", dato:"dato a mostrar 2"});
listado.push({label:"nombre 3", dato:"dato a mostrar 3"});
listado.push({label:"nombre 4", dato:"dato a mostrar 4"});
listado.push({label:"nombre 5", dato:"dato a mostrar 5"});
listado.push({label:"nombre 6", dato:"dato a mostrar 6"});
//
/*
el metodo que llamamos de la clase lista se llama "crear". Obviamente este metodo crea el menu y le pasamos los siguientes parametros:
1: el array que contiene todos nuestros datos
2: el linkage del boton en la libreria
3: cantidad de columnas
0: menu horizontal
1: menu vertical
2 o +: cantidad de columnas
4: separacion en pixeles entre los botones
5: true si tenemos el estado press en el boton
*/
lista_mc.crear(listado, "boton", 2, 10, true);

Espero les sirva y lo usen y dejen sus comentarios en el foro sobre este experimento.

¿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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate