Comunidad de diseño web y desarrollo en internet online

Tutorial de uso de listeners en ActionScript 2.0

La pregunta que todos os estaréis formulando es ¿para qué quiero escuchar yo un componente?

Pues bien, nosotros tenemos que escuchar a los componentes porque de esta forma podemos capturar sus eventos, teniendo en cuenta que sus eventos pueden ser cosas como lo que hay en la siguiente lista:

Evento

Descripción

onClick

Se ejecuta cuando clicamos sobre el componente.

onChange

Se ejecuta cuando cambiamos algo en el componente.

onProgress

Se ejecuta cuando el contenido se esta cargando.

onComplete

Se ejecuta cuando el contenido se ha cargado.

onScroll

Se ejecuta cuando utilizamos el scroll en nuestro componente.

Como podéis observar, estos eventos no se podrán utilizar en todos los componentes, al igual que nos pasaba a la hora de personalizar nuestros componentes, si nuestro componente Button, no tiene barra de scroll, obviamente no podremos usar el evento onScroll. En la ayuda de Flash podéis ver qué eventos poseen los componentes, no desestimeis nunca la ayuda de Flash, pues es realmente buena.

Para utilizar los eventos podemos usarlos configurando las acciones en el mismo componente, al igual que podemos hacer con los clips de película o los botones. Por ejemplo, arrastra un componente Button a tu escena y escribe sobre el las siguientes acciones:

on (click) {
trace("Me has pulsado!!");
}
Ahora bien, esto no nos servirá para todo lo que podemos hacer, ya que si nosotros queremos adjuntar dinámicamente un componente Button, y queremos agregarle las acciones al fotograma 1, nos daremos cuenta de que no podremos llamar a los eventos como si fuese un clip de película o un botón:
_root.attachMovie("Button", "boton_comp", 1);
boton_comp.click = function() {
trace("Me has pulsado!!");
};

¿Porqué no funciona esto? Los componentes de Flash MX 2004 están programados en ActionScript 2.0 usando la versión 2 de la Arquitectura de Componentes Macromedia, a los cuales se les ha llamado Componentes V2. Cada componente es una clase y cada clase está dentro de un paquete de código ActionScript, por ejemplo, RadioButton es una instancia de la clase RadioButton que tiene su paquete ActionScript en mx.controls. A la vez cada Componente es una subclase de la clase UIObject y de UIComponent heredando todos sus métodos, propiedades y eventos.

Y todo esto nos lleva a los listeners. Como decíamos antes los Componentes V2 nos dan una gran potencia para trabajar ya que podemos usar métodos y eventos que realmente ellos no poseen, pero que heredan de clases superiores (UIObject por ejemplo).

Para usar un listener lo que tenemos que hacer es crear un objeto y asignarle el evento onClick. Luego con nuestro componente sólo tendremos que escuchar a ese objeto y ya tendremos programado nuestro evento:

attachMovie("Button", "boton_comp", 1);
al_clicar = new Object();
al_clicar.click = function() {
trace("Me has pulsado!!");
};
boton_comp.addEventListener("click", al_clicar);

¡¡De esta manera si funciona!!

Como arriba hemos explicado mediante un único evento podemos programar diferentes componentes, que de esto es de lo que se trata, de lo fácil que se pueden programar varios componentes mediante un evento. Por ejemplo, nosotros podemos usar el mismo evento onClick para diferentes componentes que posean dicho evento, como Button y Alert, a los cuales mediante un único evento podemos hacer que respondan al click del ratón.

Es importante poner nombres en los eventos que sean aclaratorios, como por ejemplo al_clicar para el evento onClick, o al_progresar para el evento onProgress. Ahora veamos que pasa si colocamos otro boton en la escena, modifica tu código para que quede como aquí abajo:

attachMovie("Button", "boton_comp", 1);
attachMovie("Button", "boton_comp2", 2);
al_clicar = new Object();
al_clicar.click = function() {
trace("Me has pulsado!!");
};
boton_comp._x = 200;
boton_comp.addEventListener("click", al_clicar);
boton_comp2._x = 0;
boton_comp2.addEventListener("click", al_clicar);
Como puedes ver, los dos botones usan el mismo evento pudiendo así reutilizar código fácilmente. Pero... un momento, los dos botones hacen lo mismo, esto no me sirve de nada. Tendremos que modificar nuestro código otra vez, para ponerle un objetivo:
attachMovie("Button", "boton_comp", 1);
attachMovie("Button", "boton_comp2", 2);
al_clicar = new Object();
al_clicar.click = function(objetivo) {
if (objetivo.target == boton_comp) {
trace("Has pulsado el boton 1!!");
} else if (objetivo.target == boton_comp2) {
trace("Has pulsado el boton 2!!");
}
};
boton_comp._x = 200;
boton_comp.addEventListener("click", al_clicar);
boton_comp2._x = 0;
boton_comp2.addEventListener("click", al_clicar);

¡¡Ahora sí!!

De esta forma podemos configurar con el objeto al_clicar todos los eventos onClick que tengamos que usar con nuestros componentes. De esta misma manera, podremos configurar todos los demás eventos que tengamos que usar en nuestra película.

Con esto que hemos explicado, podemos decir, que ya habeis aprendido los pasos preliminares para el uso y programación de componentes, ahora queda lo mejor, programar tu primer componente.

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

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