Con su modo de edición de símbolos botón, Flash permite al usuario controlar en todo momento la forma en que quiere que se visualice su botón en los diferentes estados. Entra en este post y crea tús propios botones paso a paso. Los botones en Flash no son más que clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento botón para un símbolo, Flash crea un símbolo con una línea de tiempo de cuatro fotogramas. Cada uno de estos cuatro fotogramas tiene una función específica correspondiente a los diferentes estados del botón:
- Reposo: aspecto que presenta el botón cuando el puntero del ratón no está sobre él.
- Sobre: aspecto del botón cuando el puntero del ratón se encuentra encima de él.
- Presionado: aspecto del botón cuando el usuario hace clic en él.
- Zona interactiva: define el área que responderá al clic del ratón. Es un área invisible.
Generalmente las imágenes de cada fotograma son pequeñas variaciones de una misma imagen. La línea de tiempo no se reproduce realmente como si se tratase de una película, el botón es sensible a las acciones del puntero del ratón saltando al fotograma correspondiente.
(información basada en el Manual Oficial Adobe Flash CS3)
Para crear nuestro botón, lo primero que haremos será abrir un nuevo documento. Para ello en la ventana emergente que se nos aparece al abrir Adobe Flash, hacemos clic en la opción Crear nuevo Archivo de Flash ActionScript 2.0. Si no apareciese la ventana emergente, iremos a la barra de estado y clicaremos en Archivo>Nuevo y en la ventana que se nos abre seleccionaremos Archivo de Flash (ActionScript 2.0) y daremos a Aceptar.
Una vez que tenemos creado nuestro documento, vamos a crear el botón. Para ello será necesario entrar en el modo de edición de símbolos. en la barra de estado iremos a Insertar y entre las opciones que nos aparecen escogeremos Nuevo símbolo.
Se abrirá entonces una ventana emergente. En ella tendremos que seleccionar el tipo de símbolo que queremos crear. En próximos post nos dedicaremos a los símbolos Clip de Pélicula y a los Símbolos Gráficos, pero ahora el que nos ocupa es el Símbolo Botón. Seleccionaremos entonces la opción Símbolo Botón y haremos clic en Aceptar.
Entraremos así en el Modo de Edición de Símbolos Botón. Nos tendremos que fijar ahora en la Línea de Tiempo. En ella descubrimos los cuatro estado del Botón a los que me referí en la introducción. Seleccionaremos haciendo clic en el modo Reposo.
Ayudados por la Barra de Herramientas crearemos nuestro botón. Seleccionaremos la herramienta Rectángulo y observaremos como, nada más escogerla, en el Panel de Propiedades aparecen las diferentes opciones que tenemos para editar el rectángulo.
En el Panel de Propiedades, cambiaremos el radio de la esquina del rectángulo a nuestro gusto para darle un aspecto de Web 2.0.
Seleccionaremos también el color que queremos que tenga el botón en su estado de Reposo.
Una vez establecidas las características del botón, trazando una diagonal lo "dibujaremos" en el escenario.
Tocará ahora editar el modo Sobre, aquel que, como decíamos en la introducción, aparece cuando el usuario pasa el ratón por encima del botón. Para ello tendremos que introducir en la Línea de Tiempo un Fotograma Clave (que no es más que un fotograma que indica un cambio de estado en el escenario). Haremos entonces clic con el botón derecho del ratón encima del fotograma Reposo y escogeremos la opción Insertar Fotograma Clave.
Pasaremos entonces a modificar el botón que ya tenemos en el escenario con, por ejemplo, un cambio de color para que, cuando el usuario pase el ratón sobre el botón éste tenga un tono más claro. Deberemos prestar especial atención a que, antes del cambio de tonalidad, nuestro botón esté seleccionado en el escenario (si por alguna razón no lo estuviera escoge la herramienta Selección en la Barra de Herramientas y traza un rectángulo sobre el botón en el escenario. Se sabe que un elemento está seleccionado porque aparece con un tramado).
Haciendo clic con el botón derecho del ratón sobre el estado Presionado en la Línea de Tiempo, editaremos el botón para cuando el usuario lo presione, éste se modifique. Como antes, escogeremos la opción Insertar Fotograma Clave en el menú emergente que se nos aparece.
Vamos a provocar un cambio de tamaño. Para ello, con el botón seleccionado en el escenario, escogeremos en la Barra de Herramientas la herramienta Transformación Libre. Observa también como, en la Línea de Tiempo, el fotograma Reposo se encuentra seleccionado (aparecerá de color negro).
Ahora, pulsando en el teclado ALT, tiraremos de una de las esquinas del botón para agrandarlo proporcionalmente desde el centro.
Pasaremos ahora a trabajar con el estado Zona Interactiva. Como decíamos en la introducción, la Zona Interactiva es el área invisible que hará responder al botón cuando el usuario pasa con su cursor sobre él. Como en el estado Presionado hicimos más grande nuestro botón (y no nos interesa tener una zona interactiva tan grande), insertaremos un Fotograma Clave Vacío. Para ello haremos clic derecho sobre el Fotograma Zona Activa y seleccionaremos la opción Insertar Fotograma Clave Vacío.
Como se puede comprobar en la ilustración, al insertar este tipo de fotograma el botón desaparece y el escenario queda vacío.
El efecto que realmente buscamos es que, solo cuando el usuario pase el cursor por encima del botón, se desencadenen los cambios de color y tamaño. Esto nos lleva a la conclusión de que la Zona Activa (o Interactiva) tendrá que ser del mismo tamaño y estar en la misma posición que el botón de Reposo. Lo que haremos entonces es ir al fotograma reposo y, por medio de Edición>Copiar, copiar el botón. Iremos después al Fotograma Zona Activa y por medio de Edición>Pegar in situ, lo pegaremos en el mismo sitio.
Ya tendremos entonces nuestra Zona Interactiva del mismo tamaño y en la misma ubicación que el botón de reposo. Como norma las Zonas Activas se ponen de color negro uniforme, cambiaremos entonces el color del botón por medio del Panel Propiedades.
Una vez tenemos los cuatro estados del botón completados, crearemos una nueva capa para ponerle un texto. Para esto haremos clic en el icono Insertar Capa que se mustra en la parte inferior de la Línea de Tiempo.
Una nueva capa se crea por encima de la capa del botón. Tendremos nuevamente que editar los modos del botón para que el texto se modifique. Haremos clic primero en el estado de Reposo (aquí no hace falta insertar un Fotograma Clave ya que viene por defecto) y seleccionaremos la herramienta de Texto de la Barra de Herrramientas.
Escribiremos el texto encima del botón del escenario haciendo las modificaciones que consideremos oportunas en el Panel de Propiedades (cambio de tamaño, tipo de letra, color, etc.)
Como hicimos anteriormente, insertamos un Fotograma Clave en el estado Sobre de la Línea de Tiempo y modificamos el color del texto.
Hacemos lo mismo en el estado Presionado: insertar Fotograma Clave y modificar el tamaño.
Para la Zona Activa insertaremos un Fotograma Clave Vacío y lo dejaremos así ya que es ésta un área invisible y con el rectángulo negro que ya tiene es más que suficiente.
Una vez creado nustro botón podremos salir del Modo de Edición de Símbolos Botón y volver al Escenario del documento. Para ello haremos clic en el icono Escena que se encuentra justo debajo de la Línea de Tiempo.
Al volver al Escenario del documento descubrimos que nuestro botón aparece como miniatura en el Panel Biblioteca. Lo que haremos entonces será arrastrarlo al escenario.
El objetivo final de todo botón es que, cuando el usuario pulse en él, éste nos redireccione hacia otra página web. Para lograr este tendremos que meterle ActionScript. Abre ahora por medio de Ventana>Acciones el Panel de acciones.
En su interior escribe:
on (release) {getURL("escribe aquí tu dirección web");
}
}
Nuestro botón estará ahora finalizado. Antes de guardar los cambios haremos una vista preliminar del mismo para ver si funciona. Para ello iremos a Control>Probar Película y comprobaremos que nuestro botón realiza los cambios de estado cuando está en reposo, pasamos sobre el y cuando hacemos clic y nos redirige a la página que le indicamos con el ActionScript.
Como queremos que además de guardarnos el archivo de Flash también nos guarde un .swf de nustro botón, tendremos que publicar el archivo. Para ello iremos a Archivo>Configuración de Publicación y en la ventana emergente que se nos abre, en la pestaña Formatos, marcaremos las casillas Flash (.swf) y HTML (.html). Después pulsaremos el botón Publicar.
En nustro escritorio (o dónde guardáramos el documento Flash) nos aparecerán los siguientes iconos que aparecen en la imagen inferior.
