Comunidad de diseño web y desarrollo en internet online

Tutorial del componente Alert de Flash

Este componente nos permitirá hacer ventanas de aviso, pudiendo configurar sus botones, e incluso hacer que nos muestre movieClips dentro de ella. Todo eso lo podemos hacer mediante un solo método que configura todas las opciones de nuestro Alert.

Con sólo dos líneas de código podemos crear nuestra propia ventana Alert. Crea un clip de película cualquiera, y exportalo para ActionScript con el nombre "prueba", una vez hecho esto, pon un componente Alert en tu biblioteca, y en el primer frame escribe el siguiente código:

import mx.controls.Alert;
Alert.show("Texto de la ventana", "Titulo de la ventana", 
			Alert.OK | Alert.CANCEL, this, "prueba", Alert.OK);

Si analizamos el método show() veremos que le pasamos en este caso varios valores, pueden parecer muchos al principio, pero es fácil acordarse de ellos, y si no, pues siempre nos queda la ayuda de Flash. Los parámetros a pasar por orden son:

  • Texto de la ventana: Pues eso, el texto que saldrá en la ventana.
  • Titulo de la ventana: El titulo de la ventana. Este parámetro es opcional.
  • Botones a mostrar: Podemos mostrar Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Debemos mostrar como mínimo uno, y como máximo los que quieras. Tenemos que usar el símbolo | para añadir más de uno.
  • Emplazamiento: Lugar donde se va a crear la ventana Alert. Podemos poner null o undefined para que se haga en el _root de la película. Este parámetro es opcional.
  • Manejador del evento click: Nombre del objeto listener que escuchará el evento click.
  • Icon: Nombre del identificador de un clip de película para mostrar en la ventana.
  • Botón predeterminado: Botón que se pulsará cuando pulsemos la tecla Enter. Puede ser uno de los cuatro botones a mostrar.

De esta forma hemos creado fácilmente una ventana, pero si queremos detectar qué botón hemos pulsado deberemos usar los listeners para escuchar a nuestro componente Alert. Borra tu código y pon este en sustitución:

import mx.controls.Alert;
alClicar = new Object();
alClicar = function (evento) {
if (evento.detail == Alert.OK) {
trace("Has pulsado OK");
} else if (evento.detail == Alert.CANCEL) {
trace("Has pulsado Cancel");
}
};
Alert.show("Texto de la ventana", "Titulo de la ventana", Alert.OK | Alert.CANCEL, this, alClicar, "prueba", Alert.OK);

Con la propiedad "detail" podemos saber qué botón ha sido el que hemos pulsado y así ejecutar nuestras acciones según nos plazca.

Por último, quedan algunas propiedades para poder configurar mejor nuestra ventana:

Estilo

Descripción/Uso

okLabel

Texto que saldrá en el Alert.OK

cancelLabel

Texto que saldrá en el Alert.CANCEL

yesLabel

Texto que saldrá en el Alert.YES

noLabel

Texto que saldrá en el Alert.NO

buttonWidth

Ancho del botón en píxeles.

buttonHeight

Alto del botón en píxeles.

Así podemos dejar finalmente nuestro código de la siguiente forma:

import mx.controls.Alert;
alClicar = new Object();
alClicar = function (evento) {
if (evento.detail == Alert.YES) {
trace("Has pulsado Si");
} else if (evento.detail == Alert.NO) {
trace("Has pulsado No");
}
};
Alert.yesLabel = "Sí";
Alert.noLabel = "No";
Alert.buttonWidth = 75;
Alert.show("¿Te gusta este tutorial tan chulo?", "Encuesta CristaLab.com",
Alert.YES | Alert.NO, this, alClicar, "prueba", Alert.OK);
Y ya está, un componente sencillo y bonito, ¿se puede pedir algo más?

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

Descargar Archivo

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