Menú dinámico con Clases
* * * * * 2 votos
Luego de unas semanas de no escribÃr nada, decidà comenzar con una serie de tutoriales sobre Clases.
En este caso 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).
/*
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
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
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);
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 sobre este experimento
el 11 de Marzo del 2006 a las 17:12
Muy bueno, serÃa genial también si publicaras un link con un ejemplo terminado para poder ver y comparar resultados.
Muy bueno en serio, sigue asÃ!
el 11 de Marzo del 2006 a las 20:32
A pedido de Apu les dejo un ejemplo y un .zip con los archivos del tutorial
Espero les guste y sirva
Saludos!
el 11 de Marzo del 2006 a las 0:35
Your are Nice. And so is your site! Maybe you need some more pictures. Will return in the near future.
el 11 de Marzo del 2006 a las 9:07
Muy bueno el tutorial… pero tengo un par de preguntitas..
Necesito un menu pero que los botones tengan un texto, el texto de cada boton lo cojo de un xml. Concretamente no sé como insertarle el texto a los botones de forma dinamica, el xml ya lo tengo formado pero no se como puedo modificar tu ejemplo para que coga ese texto cada boton.
Si me pudieras ayudar, te lo agradeceria bastante.
Saludos y gracias de antemano
el 11 de Marzo del 2006 a las 9:10
Perdona… me equivoqué con otro ejemplo. ya veo que en el ejemplo pones un texto a los botones pero no me funcionan cuando ejecuto el ejemplo original y la verdad es que no se porqué es..
A ver si me puedes guiar… Saludos
el 11 de Marzo del 2006 a las 10:59
en el ejemplo q puse, en el codigo figura lo del texto, pero a los botones no les puse un campo dinamico. Fijate esta linea de codigo de la clase Lista.
item.label_txt.text = datos[i].label; // ponemos el texto del boton en el campo de texto dinamico que el mismo tiene
lo que tenes q hacer es poner en el MC del boton q estas duplicando un campo de texto dinamico q se llame label_txt. El cual toma el valor del Array “listado” que uso en el ejemplo.
el 11 de Marzo del 2006 a las 15:26
BuenÃsima referencia para entrarle a las clases. Muchas gracias por compartirlo.