Hasta ahora hemos trabajado en la implementación de una clase que nos sirva para gestionar botones. Es muy simple, logicamente, pero con el tiempo la iremos ampliando.
Ahora toca crear un pequeño menu horizontal en este caso y activar el boton para que cuando se pase uno por encima muestre el cursor con el dedo ( hand cursor )
Objetivos
- Ampliar ButtonStd
- Crear menu basado en ButtonStd
- Realizar acciones segun el botón
Archivos requeridos
- ejemplo3.fla
- ButtonStd.as
El código
ButtonStd.as
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // Contiene la libreria para manipulacion de textos import flash.text.TextField; // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd extends MovieClip { // Variables private var _id:uint; private var _action:Function; // Método constructor que inicializa la clase public function ButtonStd(_label:String, _id:uint, _action:Function) { this._label = _label; this._id = _id; this._action = _action; this.setEvents(); } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // Activamos modo Boton ( cambia el cursor al pasar por encima ) this.buttonMode = true; this.useHandCursor = true; this.mouseChildren = false; // asociamos un metodo al evento de pulsar el raton addEventListener(MouseEvent.CLICK, click_handler); // asociamos un metodo al evento de pasar por encima con el raton addEventListener(MouseEvent.MOUSE_OVER, over_handler); // asociamos un metodo al evento salir del boton con el raton addEventListener(MouseEvent.MOUSE_OUT, out_handler); } // Metodo 'setter' para modificar la etiqueta del boton public function set _label(_label:String):void { // Usamos la función getChildByName cuando queremos buscar un // elemento creado directamente en este caso y con nombre // label_txt. Por otra parte decimos que dicho elemento es // de tipo TextField mediante as [tipo] this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = _label; } // Metodos relacionados con los eventos private function click_handler(event:MouseEvent):void { this._action(this._id); } private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } } } |
El código
Hemos añadido a nuestro código una pequeña mejora. Cuando pasamos sobre un elemento que tiene la opción de ser pulsado, debemos mostrar un icono de cursor diferente.
En AS2 usabamos useHandCursor ( true / false ) y ya estaba. Con AS3 usariamos lo siguiente:
1 2 3 | this.buttonMode = true; this.useHandCursor = true; this.mouseChildren = false; |
Fijaros que dicho código lo uso solo dentro de setEvents que es el método que gestiona los eventos.
Ahora revisemos como podemos hacer que un determinado botón realice acciones adecuadas para él mismo.
1 2 3 4 | // Metodos relacionados con los eventos private function click_handler(event:MouseEvent):void { this._action(this._id); } |
Hemos añadido dos nuevas variables, las dos serán inicializadas mediante parámetros externos cuando el boton sea inicializado. El primero es un identificador ( id ) del botón que estamos usando. En este caso dicho identificativo sera un número, muy útil para arrays y xml. Por otra parte, cuando pulsemos nuestro boton lanzaremos una acción. Dicha acción ( o función ) activará un determinado código segun el id del botón.
ejemplo3.fla
Ahora debemos abrir nuestro archivo fla. Si teneis el anterior ejemplo2 podeis reeditarlo, o sino seguid los pasos de este post.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // Array con etiquetas de los botones var labels:Array = new Array('Quienes somos','Objetivos','Productos','Contactar'); // Recorremos array creando botones var nElements:Number = labels.length; for (var i:Number = 0; i < nElements; i++) { // Instancializamos la clase ButtonStd var myLabel:String = labels[i]; var myButton:ButtonStd = new ButtonStd(myLabel, i, doActionMainMenu); // Ubicamos el nuevo ButtonStd ( fijaros que no es _x,_y o _width) myButton.x = 100 + ((myButton.width + 10) * i); myButton.y = 100; // Añadimos el ButtonStd al escenario // esto equivale a un attachMovie addChild(myButton); } function doActionMainMenu(id:uint):void { trace("Accion del elemento: " + labels[id]); } |
El código es bastante sencillo, cuando pulsamos un boton internamente llama a la función asociada y le pasa como parámetro el id del boton pulsado. Posteriormente, en el código del fla, realizamos una accion para dicho id. Por ejemplo, podriamos cargar un xml, un clip externo, abrir un menu, etc..
Lo primero muy bueno los tutoriales de flash, ayudan mucho, pero tengo un problema con esta ya que me da los siguientes errores, y no entiendo porqu, Puedes hecharme una mano.
Gracias
1084: Error de sintaxis: se esperaba rightparen antes de semicolon.
1084: Error de sintaxis: se esperaba semicolon antes de rightparen.
1084: Error de sintaxis: se esperaba rightbrace antes de end of program.
Hola Jose, gracias por el comentario y la valoración, pero no puedo ver tu codigo. Si quieres enviamelo a webmaster[en]ccaballero.com y te digo algo a ver que tal. Saludos