Comunidad de diseño web y desarrollo en internet

Tutorial del componente Button de Flash








Anteriormente hemos podido ver levemente este componente en los capítulos "Personalizar los componentes" y "Escuchando nuestros componentes". Ahora veremos que otras funciones podemos añadirle al componente Button. Copia en tu primer fotograma el código que habíamos hecho, y no olvides poner un componente botón en tu librería:


//Atacheamos el menu de nuestra librería
attachMovie("Button", "mi_boton", 1);
//Propiedades del menu
mi_boton._x = 0;
mi_boton._y = 0;
mi_boton.setSize(100, 20);
mi_boton.setStyle("themeColor", "haloOrange");
//Fuentes
mi_boton.fontFamily = "_sans";
mi_boton.fontSize = 10;
mi_boton.label = "CLICAME";
//Eventos del botón
al_pulsar = new Object();
al_pulsar.click = function() {
trace("Me has clicado...");
};
mi_boton.addEventListener("click", al_pulsar);

Ahora veamos que más podemos hacer con nuestro botón:

Estilo

Descripción/Uso

icon

Nombre de un objeto de nuestra librería. El botón no modificará su tamaño para hacerse igual de grande que el objeto en cuestión, deberemos modificar mediante setSize el tamaño a nuestra conveniencia.

Con labelPlacement podemos modificar la posición del objeto en el botón.

label

Texto que saldrá en el botón.

labelPlacement

Posición del icono en relación al texto que haya en nuestro botón. Podemos posicionar a la izquierda, a la derecha, encima o debajo del texto nuestro icono mediante "left", "right", "top" y "bottom" respectivamente.

selected

Booleano que nos dice si nuestro botón está pulsado en este momento o no. Esta propiedad solo funciona si toggle es igual a true.

toggle

Propiedad que convierte nuestro botón, en un botón interruptor, esto quiere decir que, una vez pulsado, sólo se desactiva al pulsar de nuevo sobre el.

Vamos a modificar un poco nuestro código, para ver diferentes propiedades. Primero haz un símbolo cualquiera, y exportalo en la biblioteca para actionscript, ponle de nombre icono. Ahora quita tu código actual, y añade este:

//Atacheamos el menu de nuestra librería
attachMovie("Button", "mi_boton", 1);
//Propiedades del menu
mi_boton._x = 0;
mi_boton._y = 0;
mi_boton.setSize(100, 20);
mi_boton.setStyle("themeColor", "haloOrange");
//Fuentes
mi_boton.fontFamily = "_sans";
mi_boton.fontSize = 10;
mi_boton.label = "CLICAME";
mi_boton.toggle = true;
mi_boton.icon = "icono";
mi_boton.labelPlacement = "left";
//Eventos del boton
al_pulsar = new Object();
al_pulsar.click = function() {
if (mi_boton.selected == true) {
trace("Ahora estoy activado");
} else if (mi_boton.selected == false) {
trace("Ahora estoy desactivado");
}
};
mi_boton.addEventListener("click", al_pulsar);

Fíjate como ahora al clicar, el botón se mantiene pulsado como si fuese un interruptor. Esto es gracias a la propiedad toggle, y dentro del listener, con la propiedad selected podemos saber cuando esta activado y cuando no.

Hasta el próximo 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.

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