11 03 06

Menú dinámico con Clases

Escrito por: WeeDo en AS2, Flash, Tutoriales

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).

Necesita el Flash Player 9


Clase Boton:

PLAIN TEXT
Actionscript:
  1. /*
  2. La funcion boton asigna los eventos de rollover y rollout automaticamente
  3. y tiene los metodos para habilitaro deshabilitar al boton. Ademas tenemos la opcion de darle al boton un estado de seleccioando
  4. */
  5. class Boton extends MovieClip {
  6.     // Primero definimos las variables que usaremos dentro de la clase
  7.     public function click() {
  8.     }
  9.     // generamos una funcion click que sera un metodo donde asignaremos la accion del boton
  10.     var press:Boolean;
  11.     // variable booleana que define si el boton tiene o no un estado seleccionado
  12.     var pos:Number;
  13.     // variable donde guardaremos la posicion dentro de la lista que tiene el boton
  14.     /*
  15.     funcion constructora de la clase. En esta funcion asignamos los eventos del boton
  16.     */
  17.     public function Boton() {
  18.         //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
  19.         this.onPress = function() {
  20.             this.click();
  21.             if (this.press == true) {
  22.                 this.presionado(true);
  23.                 _global.seleccionado.presionado(false);
  24.                 _global.seleccionado = this;
  25.             }
  26.         };
  27.         // en onRollOver dirigimos el cabezal del boton al frame llamado "over" para generar el efecto
  28.         this.onRollOver = function() {
  29.             this.gotoAndPlay("over");
  30.         };
  31.         // en onRollOut dirigimos el cabezal del boton al frame llamado "out" para generar el efecto
  32.         this.onRollOut = this.onReleaseOutside=function () {
  33.             this.gotoAndPlay("out");
  34.         };
  35.     }
  36.     /*
  37.     METODOS:
  38.     esta es una function privada que lleva a cabo el efecto del boton al ser seleccionado y al dejar de estarlo
  39.     */
  40.     private function presionado(estado:Boolean):Void {
  41.         if (estado == true) {
  42.             this.gotoAndPlay("press");
  43.             this.enabled = false;
  44.         } else {
  45.             this.enabled = true;
  46.             this.gotoAndPlay("pressout");
  47.         }
  48.     }
  49.     /*
  50.     SETTERS Y GETTERS:
  51.     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
  52.     */
  53.     public function set _habilitado(estado:Boolean):Void {
  54.         if (estado == false) {
  55.             this.gotoAndPlay("out");
  56.             this.onEnterFrame = function() {
  57.                 if (this._alpha>50) {
  58.                     this._alpha -= 5;
  59.                 } else {
  60.                     this.onEnterFrame = null;
  61.                     this.enabled = estado;
  62.                 }
  63.             };
  64.         } else if (estado == true) {
  65.             this.onEnterFrame = function() {
  66.                 if (this._alpha<100) {
  67.                     this._alpha += 5;
  68.                 } else {
  69.                     this.onEnterFrame = null;
  70.                     this.enabled = estado;
  71.                 }
  72.             };
  73.         }
  74.     }
  75.     public function get _habilitado():Boolean {
  76.         return this.enabled;
  77.     }
  78.     // metodos set y get de _press que asigana si el boton tiene estado de seleccionado o no
  79.     public function set _press(estado:Boolean) {
  80.         this.press = estado;
  81.     }
  82.     public function get _press():Boolean {
  83.         return this.press;
  84.     }
  85.     // metodos set y get de _pos que nos guarda y asigna la posicion en la lista del boton
  86.     public function set _pos(valor:Number) {
  87.         this.pos = valor;
  88.     }
  89.     public function get _pos():Number {
  90.         return this.pos;
  91.     }
  92. }
  93. // fin clase Boton

Clase Lista:

PLAIN TEXT
Actionscript:
  1. /*
  2. Esta clase se encargara de crear una nueva lista, tomando de la libreria un boton
  3. modelo y duplicandolo, dando la opcion de poder pasarle un numero de columnas o si
  4. los botones tendras la funcion presionado.
  5. */
  6. class Lista extends MovieClip {
  7.     // Primero definimos las variables que usaremos dentro de la clase
  8.     var datos:Array;
  9.     //array que contendra los datos de los botones, como nombre, accion, etc
  10.     var linkage:String;
  11.     //el nombre del linkeage que tendra el boton en la libreria
  12.     var columnas:Number;
  13.     //cantidad de columnas en la que se mostraran los botones
  14.     var sep:Number;
  15.     //separacion en pixeles entre los botones
  16.     var press:Boolean;
  17.     //variable booleana que define si los botones tienen estado presionado o no
  18.     /*
  19.     funcion constructora de la clase, en este caso no tiene nada
  20.     */
  21.     public function Lista() {
  22.     }
  23.     /*
  24.     METODOS:
  25.     la funcion "crear" crea, como su nombre lo dice, el listado de botones.
  26.     pasamos los parametros necesarios, explicados arriba
  27.     */
  28.     public function crear(p_datos:Array, p_linkage:String, p_columnas:Number, p_sep:Number, p_press:Boolean) {
  29.         this._visible = true;
  30.         // hacemos visible la lista
  31.         // variable para acomodar el boton en X e Y segun el numero de columnas
  32.         var x:Number = 0;
  33.         var y:Number = 0;
  34.         // asignamos los parametros a las variables de la clase
  35.         this.datos = p_datos;
  36.         this.linkage = p_linkage;
  37.         this.sep = p_sep;
  38.         this.columnas = p_columnas;
  39.         this.press = p_press;
  40.         // bucle for que genera la lista de botones duplicandolos
  41.         for (var i:Number = 0; i<datos.length; i++) {
  42.             var item:MovieClip = this.attachMovie(linkage, "item"+i, i);
  43.             //genera una variable item donde guardamos la referencia al nuevo boton
  44.             //lo posicionamos en X e Y
  45.             item._x = (item._width+sep)*x;
  46.             item._y = (item._height+sep)*y;
  47.             item._press = press;
  48.             //asiganmos el valor pasado como press al metodo press de la clase Boton
  49.             item._pos = i;
  50.             //guardamos la posicion del boton para acciones futuras
  51.             var ruta:Object = this;
  52.             // asignamos a la variable "ruta" la referencia de la clase para usarla dentro de otros metodos y no perder su referencia
  53.             //le asignamos una accion al metodo click creado en la clase Boton (o sea lo que va a hacer el boton)
  54.             item.click = function() {
  55.                 trace(ruta.datos[this._pos].dato);
  56.             };
  57.             item.label_txt.text = datos[i].label;
  58.             // ponemos el texto del boton en el campo de texto dinamico que el mismo tiene
  59.             x++;
  60.             //aumentamos el valor de "x" para generar columnas
  61.             // si "x" es igual a columnas vuelve a 0 y aumenta "y" para bajar a la siguiente fila
  62.             if (x == columnas) {
  63.                 x = 0;
  64.                 y++;
  65.             }
  66.         }
  67.     }
  68. }
  69. //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:

PLAIN TEXT
Actionscript:
  1. /*
  2. La idea seria que los datos vengan de un base de datos o un XML y los bolquemos en un array
  3. en este caso cree un array cualquier para que vean como funciona el menú
  4. 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".
  5. y la propiedad datos es un texto que muestra la hacer click en el boton en un trace
  6. */
  7. listado =[]
  8. listado.push({label:“nombre 1″, dato:“dato a mostrar 1″})
  9. listado.push({label:“nombre 2″, dato:“dato a mostrar 2″})
  10. listado.push({label:“nombre 3″, dato:“dato a mostrar 3″})
  11. listado.push({label:“nombre 4″, dato:“dato a mostrar 4″})
  12. listado.push({label:“nombre 5″, dato:“dato a mostrar 5″})
  13. listado.push({label:“nombre 6″, dato:“dato a mostrar 6″})
  14. //
  15. /*
  16. el metodo que llamamos de la clase lista se llama "crear". Obviamente este metodo crea el menu y le pasamos los siguientes parametros:
  17. 1: el array que contiene todos nuestros datos
  18. 2: el linkage del boton en la libreria
  19. 3: cantidad de columnas
  20. 0: menu horizontal
  21. 1: menu vertical
  22. 2 o +: cantidad de columnas
  23. 4: separacion en pixeles entre los botones
  24. 5: true si tenemos el estado press en el boton
  25. */
  26. lista_mc.crear(listado, “boton�, 2, 10, true);

Espero les sirva y lo usen y dejen sus comentarios sobre este experimento

Archivos del tutorial

12 comentarios sobre “Menú dinámico con Clases”

  • 1
    2 de Junio del 2006 - 17:12
    Apu dijo:

    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í!

  • 2
    2 de Junio del 2006 - 20:32
    WeeDo dijo:

    A pedido de Apu les dejo un ejemplo y un .zip con los archivos del tutorial
    Espero les guste y sirva
    Saludos!

  • 3
    22 de Julio del 2006 - 0:35
    Romaine Knuland dijo:

    Your are Nice. And so is your site! Maybe you need some more pictures. Will return in the near future.

  • 4
    26 de Enero del 2007 - 9:07
    drito dijo:

    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

  • 5
    26 de Enero del 2007 - 9:10
    drito dijo:

    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

  • 6
    26 de Enero del 2007 - 10:59
    WeeDo dijo:

    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.

  • 7
    29 de Enero del 2007 - 15:26
    Rafeo dijo:

    Buenísima referencia para entrarle a las clases. Muchas gracias por compartirlo.

  • 8
    25 de Diciembre del 2007 - 23:08
    Martin dijo:

    La verdad que hace rato veo tus trabajos y ahora con el blog voy viendo la cancha que tenes en el tema, yo recien empiezo asi que estamos con el AS 2, pero pronto me pondre en onda con AS 3. Muy bueno el ejemplo!

  • 9
    4 de Enero del 2008 - 13:40
    Alex dijo:

    Sabes, tengo poco con esto del Flash CS3… he adquirido cierto conocimiento muy básico, sobre los que es Flash. Por otro lado para ser sincero no soy programador, ni mucho menos informático o algo que se le parezca, soy Ingeniero y me gusta esto de la animación pero la verdad no se por donde empezar, hacen mención del AS 2 y AS 3; de los cuales no sé absolutamente nada. De verdad estaría muy agradecido si me dieras una pauta para irme adentrando a esto de los AS’s, ya que veo tantos sitios que manejan cosas fabulosas como tu sitio, pero me pierdo entre tanta letra y no le encuentro la lógica. Please help me?

  • 10
    4 de Enero del 2008 - 16:15
    WeeDo dijo:

    Hola Alex.
    Mira, antes que nada tenes que saber que el mundo de Flash es muy amplio, se pueden hacer muchisimas cosas, y cada cosa de distintas maneras.
    Te recomendaria que empieces llendo a www.cristalab.com, un excelente sitio donde tienen tutoriales de todo nivel y un muy buen foro donde puedes preguntar que seguro te contestaran.
    Tal vez te sea mas simple aprender AS2, antes que AS3, teniendo en cuenta que no sabes programar.
    Hechale un vistazo y cuentame, quedo a tu disposición, Saludos!

  • 11
    11 de Enero del 2008 - 19:42
    Alex dijo:

    Hola, Weedo.

    Perdón por la tardanza en contestarte, pero he tenido algo de trabajo. La verdad muchas gracias por tu apoyo. Lo revisaré y estudiaré el AS2.

    Y nuevamente muchas gracias por tu ayuda.

  • 12
    11 de Enero del 2008 - 21:17
    Alex dijo:

    Hola, nuevamente yo!!! ñ_ñ

    Saben hace poco, tuve la oportunidad de ver un archivo en word en el cual se encuentra un vídeo de una animación, se ve que es de flash ya que menciona Adobe Flash , es de una animación de un monito qu ese empieza a pelear con el mouse, posiblemente ya tuvieron la fortuna de verlo.
    Pero bueno el punto de todo esto es: como puedo exportar un desde flash un archivo para verlo en cuanto abra el documento en word.

Deje un comentario