| Artículos | 01 ENE 1999

Dar vida a los botones con Flash 3

Anime sus boton

Compartir

Katherine Ulrich.

Como ratas en un laboratorio, los usuarios de ordenadores ( desde los jugadores a los navegantes de la Web ) saben qué hacer al ver un botón: hacer clic sobre él y esperar a que algo suceda . Con Macromedia Flash 3, una herramienta para crear animaciones basadas en vectores, los diseñadores pueden crear botones que proporcionen a los usuarios no sólo un premio, sino también un control real en entornos multimedia y en la Web .

Con la metáfora de línea de tiempo correspondiente a la interfaz de Flash, se sitúan los objetos y elementos en una escena, crea animaciones fotograma a fotograma en la línea de tiempo y se generan escenas . Cuando esté preparado, se exporta el trabajo como una película . Los botones de Flash permiten a los usuarios controlar la película finalizada ejecutando y parando la reproducción, yendo a un fotograma específico, e intercambiando escenas .

Pero los botones son más que un mecanismo para desplazar a los visitantes de un sitio a otro, éstos pueden contener sus propias animaciones y constituir la base de sofisticados elementos de interfaz, como menús desplegables . Si usted ya ha aprendido los fundamentos sobre cómo crear películas Flash, es hora de dar vida a su botones .

Fundamentos de los botones

Para crear un botón en Flash, en primer lugar tiene que crear un objeto denominado símbolo, un elemento reutilizable almacenado en la librería de películas . Puede modificar el color, brillo, transparencia y otros atributos de un símbolo cada vez que lo utilice, pero Flash descargará el gráfico básico sólo una vez .

Crear un botón es similar a crear una película convencional de Flash: usted trabaja con objetos sobre una escena y secuencias en una línea de tiempo, y cambia el aspecto de dichos elementos mediante el uso de keyframes ( fotogramas de referencia, vea ?Construir un botón básico? ) . No obstante, mientras que las películas convencionales pueden tener cientos de fotogramas que se reproducen secuencialmente a lo largo del tiempo, los botones tienen cuatro fotogramas que se reproducen en respuesta a ciertas acciones con el ratón . Las primeras tres se corresponden con los tres posibles estados del botón: Up ( nada está sucediendo, el botón espera a que algo ocurra ) , Over ( el ratón ha entrado en el área del botón ) , y Down ( el usuario ha pulsado sobre el botón ) . El cuarto fotograma, Hit, define los límites del botón .

Si bien no resulta visible para el usuario final, cualquier gráfico sólido en el fotograma Hit puede ser el elemento activo para el botón en la película final . El gráfico de Hit puede ser una copia del gráfico Up, Over o Down; también puede dibujar una figura encerrando todos los elementos que componen el botón y, entonces, rellenar el polígono con color . Igualmente, puede dibujar una figura que no entre en contacto con los gráficos Up, Over y Down . Por ejemplo, un cuadrado invisible en la esquina inferior derecha de la escena puede activar la aparición de un botón circular en la esquina superior izquierda .

Respuesta del botón

Nosotros, lo humanos, somos como ratas de laboratorio en otro sentido: nos apoyamos en acciones visuales para decidir qué constituye un botón . En un sitio de información convencional, un botón puede tener el aspecto de algo parecido al mundo real; digamos, por ejemplo, un interruptor o una barra de ajuste de volumen . En los sitios o juegos más caprichosos, los botones pueden estar camuflados como parte del escenario . Cuando el ratón se mueve sobre dicho tipo de botón, un cambio sutil en el aspecto o un sonido pueden ser la única indicación del propósito dual del gráfico .

Los símbolos de botón empleados en Flash 3 hacen que sea sencillo crear una respuesta visual; simplemente deberá utilizar diferentes gráficos para cada estado del botón . Flash también le permite asociar sonidos con fotogramas individuales del botón . Para los botones que emulan interruptores del mundo real, u otros elementos, puede vincular un sonido de ?clic? al fotograma Down para proporcionar mayor realismo, para botones más agradables, puede añadir sonido al fotograma rollover para advertir a los usuarios que se encuentran ubicados sobre un elemento interactivo .

Botones en movimiento

Para ir más allá de los botones estáticos de tres fotogramas, necesitará los símbolos movie-clip de Flash ( animaciones autocontenidas de bucle que se reproducen dentro de un único fotograma de película ) . Sitúe un clip de película en el fotograma Up de un botón, y obtendrá una animación que responderá a la acción del ratón .

Puede variar las animaciones sutilmente para cada estado del botón o cambiarlas completamente . Por ejemplo, una interrogación parpadeante puede comenzar a girar cuando el ratón se desplaza sobre él; hacer clic en el botón puede resultar en que la interrogación cambie de color o figura . El truco reside en crear diferentes clips de película para cada fotograma del botón ( vea ?Botones animados basados en clips de película? ) .

Los clip de película son realmente mini películas de Flash; éstas puede contener todos los elementos de una película convencional . Puede anidar clips de película dentro de otros clips de película e, igualmente, anidar botones dentro de clips de película . Debido a que estos se reproducen continuamente en un único fotograma, puede utilizar clips de película para crear botones que permanezcan animados aunque la película que los contenga esté detenida .

Botones en acción

Además de contener acción, los botones deben hacer algo . Para que los botones realicen alguna función, necesita asignarles acciones ( comandos embebidos que controlen aspectos como la reproducción o parada en la reproducción de una película, yendo a un fotograma específico o pantalla, o enlazando con un URL específico; vea ?Las acciones hacen funcionar a los botones? ) .

Puede asignar acciones a los fotogramas del mismo modo que a los botones . En el caso de los fotogramas, Flash ejecuta una acción tan pronto como la película alcanza el fotograma que contiene dicha acción . Los botones, sin embargo, responden a eventos del ratón . Es por esto por lo que los botones ofrecen una acción no disponible en los fotogramas ( On MouseEvent ) , que le permite definir el movimiento del ratón preciso para ejecutar las acciones del botón . Tenga en cuenta que debe vincular las acciones a una instancia de su botón ( una copia utilizada en una película ) , no a los fotogramas que componen el propio botón .

Para modificar la opción On MouseEvent por omisión, Release, seleccione otro parámetro en el apartado Actions del cuadro de diálogo Modify Instances . Press responde al apartado de pulsar el botón del ratón cuando esté sobre el botón . Release Outside responde cuando el usuario hace clic con el ratón en el interior del área del botón pero, a continuación, desplaza el ratón fuera del área del botón . Roll Over responde cuando el cursor está desplazándose por el área del botón; Drag Over responde al cursor moviéndose en el área del botón mientras éste está pulsado . Roll Out responde al cursor moviéndose fuera del área del botón; Drag Out responde al cursor en movimiento fuera del área de acción mientras que el botón está pulsado .

Dar un giro a los botones

El mejor modo de manejar los botones es que usted construya alguno . Comience con un botón simple, estático, que tenga un aspecto distinto en cada estado . A continuación, añada clips de película y acciones . Con un poco de práctica, pronto estará construyendo botones que sorprendan a las ratas multimedia más curtidas .

Construir un botón básico

-------------------------------------

Para hacerse una idea de cómo f

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información