Objetivo
Partiendo del último ejemplo que creamos, vamos a mejorarlo añadiendo nuevas funcionalidades.
- Crear una clase que funcione como un botón
- Añadir elementos en el escenario
- Programar eventos onRelease, onRollOver, onRollOut en AS3
Necesitaremos:
- Archivo flash, en este caso lo llamaremos ejemplo2.fla
- Package asociado al boton, en este caso ButtonStd.as
Empecemos
Creamos una carpeta llamada ejemplo2 y dentro de ella creamos los ficheros ejemplo2.fla y ButtonStd.as. No vamos a explicar como crear dichos archivos.
Package ButtonStd
Abrimos ButtonStd.as ( automaticamente deberia abrirse con Flash ) y escribimos lo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 | package { // Definimos el nombre de la clase // Debe empezar por mayusculas y tener // el mismo nombre que el archivo que la contiene public class ButtonStd { // Método constructor que inicializa la clase public function ButtonStd() { } } } |
Con esto no vamos a llegar muy lejos, pero es la estructura básica que debe tener nuestra clase de Boton Estandar. El AS2 soliamos usar MovieClips como botones, en AS3 no tenemos porque cambiar. Por otra parte también teniamos claro que en la gran mayoria de casos los botones ( movieclips ) realizaban acciones con determinados eventos del ratón ( onPress, onRelease, onRollOver, onRollOut ).
Por tanto sabemos que debemos importar dentro de la clase ButtonStd las clases asociadas a MovieClips y a Eventos de Raton
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | package { // Contiene la libreria para objectos MovieClip import flash.display.MovieClip; // Contiene la libreria para manipulacion de eventos del raton import flash.events.MouseEvent; // 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 { // Método constructor que inicializa la clase public function ButtonStd() { } } } |
Guardad el archivo y vamos al siguiente paso.
ejemplo2.fla
Ahora debemos crear un archivo fla con el nombre ejemplo2
Cread en el escenario un recuadro ( personalitzadlo como más os guste ), cread un campo de texto en blanco sobre el cuadro y con el nombre de label_txt
Una vez habeis hecho esto seleccionad dichos elementos y pulsad F8. Debeis rellenar los campos tal y como veis esta captura.
Con esto lo que hemos es asociar nuestro package ButtonStd a un objeto de nuestra libreria.
Ahora cread una nueva linea de tiempo y su nombre debe ser AS ya que colocaremos el código que necesitamos a continuación. Si quereis el objeto que teneis en el escenario se puede borrar ya que lo hemos incluido en la libreria.
1 2 3 4 5 6 7 8 9 | // Instancializamos la clase ButtonStd var myButton:ButtonStd = new ButtonStd (); // Ubicamos el nuevo ButtonStd // ( fijaros que no es _x y _y ) myButton.x = 100; myButton.y = 100; // Añadimos el ButtonStd al escenario // esto equivale a un attachMovie addChild(myButton); |
Modificando la etiqueta del nuevo boton
Para modificar la etiqueta asociada al botón usaremos el paso de variables. así pues fijaros como nos queda la clase. A parte añadimos un nuevo método para seleccionar y cambiar el valor del elemento label_txt que hemos creado dentro del botón.
Código package ButtonStd
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 | 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 { // Método constructor que inicializa la clase public function ButtonStd(_label:String) { this._label = _label; } // 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; } } } |
Código de la línea de tiempo para modificar.
1 | var myButton:ButtonStd = new ButtonStd ('EtiquetaBoton'); |
Eventos del boton
Vamos por la segunda parte, añadir eventos de ratón a nuestro botón. En este caso, vamos a hacer que cuando pasemos por encima el texto tenga otro color, y cuando estemos fuera recupere el color de texto original. Si pulsamos mostraremos por pantalla un simple trace.
Para ello, como nos gusta tener el código lo mejor estructurado posible vamos a crear un método donde vamos a definir todo lo relacionado con eventos y que vosotros debeis añadir al paquete actual. ( He borrado los comentarios para no alargar demasiado el codigo )
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 | package { import flash.display.MovieClip; import flash.events.MouseEvent; import flash.text.TextField; public class ButtonStd extends MovieClip { // Hemos añadido una llamada al metodo que asigna eventos public function ButtonStd(_label:String) { this._label = _label; this.setEvents(); } public function set _label(_label:String):void { this.label_txt = getChildByName("label_txt") as TextField; label_txt.text = _label; } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // 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); } private function click_handler(event:MouseEvent):void { trace('click'); } private function over_handler(event:MouseEvent):void { trace('over'); } private function out_handler(event:MouseEvent):void { trace('out'); } } } |
Probad la película y vereis que sucede. Podeis asociar muchos más eventos, pero de momento con estos tres ya tenemos más que suficiente. De momento solo hacemos trace, así que vamos a modificar el evento MOUSE_OVER y MOUSE_OUT para que cambie el texto de color.
1 2 3 4 5 6 7 | private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } |
Fácil, ¿verdad? Que si, no desespereis, si ha costado no es porque haya sido dificil, sino porque no tenemos nuestros amigos createEmptyMovieClip o attachMovie, o asignar directamente a un objeto. Pero vamos, es cuestión de paciencia.
Código completo de 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 | 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 { // Método constructor que inicializa la clase public function ButtonStd(_label:String) { this._label = _label; this.setEvents(); } // 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; } // Metodo para configurar los eventos asociados al boton private function setEvents():void { // 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); } private function click_handler(event:MouseEvent):void { trace('click'); } private function over_handler(event:MouseEvent):void { this.label_txt.textColor = 0xff0000; } private function out_handler(event:MouseEvent):void { this.label_txt.textColor = 0x333333; } } } |
Enlaces relacionados:
Display Object Container – LiveDocs Adobe
AS3 Mouse Events and Mouse Related User Actions
Hola me parece genial esta clase y la estoy intentado adaptar a una galeria que estoy haciendo mi pregunta es la siguiente:
en mi galeria tengo una variable que indica la categoria seleccionada y luego muestro las imagenes de esa galeria, ¿como modifico esa variable desde la funcion al hacer click en alguno de los botones de la clase?
Deberia ver un poco el codigo para poder saber realmente cual es la utilidad/funcionalidad de modificar dicha variable. Puede que en ultima instacion, deberias definir una varible global dentro del boton.
genial, algo muy claro y muy útil. Gracias!
Me alegro que te haya sido de utilidad!