Creación de botones en Adobe Animate

Los botones de Animate (antes Flash Professional) son símbolos que contienen cuatro fotogramas. Cada fotograma de un símbolo de botón representa un estado diferente para el botón: Arriba, Sobre, Presionado y Zona activa. Estos valores determinan la forma en que el botón se comporta visualmente cuando se pasa el ratón sobre él o cuando el usuario hace clic en el botón. En este documento se explica cómo crear botones básicos y avanzados.

Crear un botón básico

  1. Seleccione Insertar > Nuevo símbolo o presione Control + F8 (Windows) o Comando + F8 (Mac OS).
    Nota: En Flash 3 y versiones anteriores, anule la selección de todo lo que esté en el escenario y seleccione Insertar > Crear símbolo.

  2. En el cuadro de diálogo Propiedades de símbolo, escriba un nombre para el nuevo símbolo de botón y elija Botón como opción de comportamiento. Haga clic en Aceptar. 

    Flash cambia al modo de edición de símbolos. El encabezado Línea de tiempo cambia para mostrar cuatro fotogramas consecutivos llamados Arriba, Sobre, Presionado y Zona activa. El primer fotograma, Arriba, es un fotograma clave vacío.
  3. Para crear la imagen del botón del estado Arriba, utilice las herramientas de dibujo, importe un gráfico o coloque una instancia de otro símbolo en el escenario. Puede utilizar un clip de película o símbolo gráfico en un botón. Sin embargo, no puede utilizar otro botón en un botón. Utilice símbolos de clip de película si desea crear un botón animado.
  4. Seleccione el segundo fotograma, llamado Sobre, y seleccione Insertar > Fotograma clave. La imagen del botón del primer fotograma aparece en el escenario.
  5. Modifique la imagen del botón para el estado Sobre. Repita los pasos 4 y 5 para los fotogramas Presionado y Zona activa.

    Nota:
    El fotograma Zona activa no está visible en el escenario durante la reproducción, pero define el área del botón que responde al hacer clic. Asegúrese de que el gráfico del fotograma Zona activa sea un área compacta lo suficientemente grande para abarcar todos los elementos gráficos de los fotogramas Arriba, Sobre, Presionado y Zona activa. También puede ser más grande que el botón visible. Si no especifica un fotograma de Zona activa, los objetos en el estado Arriba se usan como el fotograma de Zona activa
  6. Después de definir las imágenes de los cuatro estados de botón, seleccione Editar > Editar película para salir del modo de edición de símbolos.
  7. Abra la ventana de la biblioteca seleccionando Ventana > Biblioteca. Localice el botón en la ventana de la biblioteca y, luego, arrastre el símbolo de botón desde la biblioteca hasta el escenario. Este paso crea una instancia del botón en la película.

Para obtener más información sobre la asignación de acciones a la instancia de botón, consulte la documentación que se aplique a la versión de Animate que esté utilizando. La documentación se encuentra a continuación:

Asigne una acción sencilla a un botón (Flash 5)

  1. En el modo Editar película, seleccione la instancia de botón creada en el paso 7 anterior.
  2. Seleccione Ventana > Acciones para abrir el panel Acciones.
  3. En la lista del cuadro de herramientas en la parte izquierda del panel, haga clic en la categoría Acciones básicas para mostrar las acciones básicas.
  4. Para asignar una acción, siga uno de estos procedimientos:
    • Haga doble clic en una acción en la categoría Acciones básicas.
    • Arrastre una acción desde la categoría Acciones básicas de la izquierda a la lista de acciones que se enumeran en la parte derecha del panel.
    • Haga clic en el botón Añadir (+) y seleccione una acción del menú emergente.
    • Utilice el método abreviado de teclado.
  5. Si la acción seleccionada tiene los parámetros asociados, dichos parámetros aparecen en el panel Parámetros en la parte inferior del panel Acciones. (Si el panel Parámetros no está visible, haga clic en el pequeño triángulo situado en la esquina inferior derecha del panel). Elija o introduzca los parámetros correspondientes para esa acción. Por ejemplo, la acción Ir y reproducir que se muestra a continuación contiene tres parámetros: Escenario, Tipo, Fotograma, además de una opción para Ir y reproducir.

Asigne una acción sencilla a un botón (Flash 4 y anterior)

  1. En el modo Editar película, seleccione la instancia de botón creada en el paso 7 anterior.
  2. Asegúrese de que no esté seleccionada la opción Habilitar botones del menú Control.
  3. Haga doble clic en el botón para abrir el cuadro de diálogo Propiedades de la instancia.
    Nota: En Flash 2, este cuadro de diálogo era el cuadro de diálogo Propiedades de vínculo: botón.

  4. Asigne la acción. Para ello, seleccione la ficha Acción en el cuadro de diálogo Propiedades de la instancia. A continuación, haga clic en el botón de signo más (+) y haga doble clic en la acción correspondiente.

    Nota:
    En Flash 2 asigne la acción con el menú emergente Acción en el cuadro de diálogo Propiedades de vínculo: botón. Solamente se puede asignar una acción a un botón.
  5. Asegúrese de que la opción Habilitar botones esté activada nuevamente (aparecerá una marca de verificación junto a ella) en el menú Control.

  6. Si la acción seleccionada tiene parámetros asociados, dichos parámetros aparecen en el panel Parámetros a la derecha del panel Acciones. Elija o introduzca los parámetros correspondientes para esa acción.

Cree botones avanzados

Una vez que haya dominado un botón sencillo, intente con botones más complejos de Animate. Puede crear botones invisibles, botones con estados animados y botones con efectos de sustitución. 

Es importante comprender los estados Zona activa al diseñar un botón complejo. La forma y el área del botón representa el área activa del botón.Para experimentar con el estado Zona activa, haga lo siguiente:

  1. Introduzca un botón desde bibliotecas comunes hasta el escenario. Edite el botón.
  2. Resalte el fotograma en el estado Zona activa del botón e inserte un fotograma clave. Pruebe este comportamiento en una película.

  3. Cambie el tamaño del objeto en el estado Zona activa de manera drástica, y pruébelo.
  4. Elimine el fotograma clave en el estado Zona activa y pruebe el botón.

  5. Observe el efecto en el cursor del botón y los estados Arriba, Sobre y Abajo que se muestran cuando se activa el botón. 

Botones invisibles

Puede dejar vacíos los estados de botón Arriba, Sobre y Presionado. Si estos estados están vacíos, defina el estado Zona activa de forma que contenga el contenido.

Cuando el estado Arriba del botón está vacío o es invisible, el botón se representa en el escenario con una forma azul. La forma es el equivalente al contenido en el fotograma clave siguiente dentro del botón. Esta forma azul no es visible en su película final.

Botones con estados animados

Para crear botones animados en Animate, coloque un clip de película en el estado del botón que esté animando.

  1. Cree un clip de película para cada estado del botón que desee animar.
  2. Cree el botón.
  3. Coloque los clips de película en los estados del botón que desee animar.
  4. Coloque el botón en el escenario.
    Nota: Los clips de película no se pueden probar en el editor de Animate. Seleccione Control > Probar película o expórtelo como archivo SWF para probarlo.

Una sustitución en una zona de la película afecta a otra área de la película

Para crear este efecto, mueva los elementos del estado Zona activa a un área distinta del escenario de los elementos en el estado Sobre del botón. Este método funciona para los efectos de sustitución simple. El área activa del botón se encuentra en un área distinta del escenario que el efecto de sustitución.

Información adicional

Una buena manera de aprender más sobre los botones y su creación es estudiar los botones incluidos como muestras en Animate. En la versión 5, estos botones de muestra se encuentran en el menú Ventana > Bibliotecas comunes > Botones. Si utiliza la versión 4, se puede acceder a estos botones seleccionando Bibliotecas > Botones. En la versión 2, las bibliotecas de botones de muestra son accesibles desde el menú Xtras.

Una descripción general de la creación de un botón también está disponible en las lecciones que se suministran con la versión 5. Elija Ayuda > Lecciones > 06 Botones desde Flash para acceder a esta lección.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?