Decida qué tipo de botón se ajusta mejor a sus necesidades.
- Guía del usuario de Adobe Animate
- Introducción a Animate
- Animación
- Aspectos básicos de animaciones en Animate
- Cómo utilizar los fotogramas y fotogramas clave en Animate
- Animación fotograma a fotograma en Animate
- Cómo trabajar con la animación de interpolación clásica en Animate
- Herramienta Pincel
- Guía de movimiento
- Interpolación de movimiento y ActionScript 3.0
- Acerca de la animación de interpolación de movimiento
- Animaciones de interpolación de movimiento
- Creación de una animación de interpolación de movimiento
- Uso de fotogramas clave de propiedad
- Animación de la posición con una interpolación
- Edición de interpolaciones de movimiento con el editor de movimiento
- Edición del trazado de movimiento de una animación de interpolación
- Manipulación de las interpolaciones de movimiento
- Adición de aceleraciones personalizadas
- Creación y aplicación de ajustes preestablecidos de movimiento
- Configuración de grupos de interpolación de animación
- Uso de interpolaciones de movimiento guardadas como archivos XML
- Interpolaciones de movimiento e interpolaciones clásicas
- Interpolación de forma
- Uso de la animación de la herramienta Hueso en Animate
- Trabajar con el rigging de personajes en Animate
- Uso de las capas de máscara en Adobe Animate
- Uso de escenas en Animate
- Interactividad
- Creación de botones en Animate
- Conversión de proyectos de Animate a otros formatos de documento
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Adición de interactividad con fragmentos de código en Animate
- Creación de componentes HTML5 personalizados
- Uso de componentes en HTML5 Canvas
- Creación de componentes personalizados: Ejemplos
- Fragmentos de código para componentes personalizados
- Prácticas recomendadas - Publicidad con Animate
- Autoría y publicación de realidad virtual
- Espacio de trabajo y flujo de trabajo
- Creación y administración de pinceles
- Uso de Google Fonts en documentos HTML5 Canvas
- Utilización de las Bibliotecas Creative Cloud y Adobe Animate
- Utilización del Escenario y el panel Herramientas en Animate
- Flujo de trabajo y espacio de trabajo de Animate
- Uso de las fuentes web en documentos de HTML5 Canvas
- Líneas de tiempo y ActionScript
- Trabajo con varias líneas de tiempo
- Configuración de preferencias
- Utilización de los paneles de edición de Animate
- Creación de capas de la línea de tiempo en Animate
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Desplazamiento y copia de objetos
- Plantillas
- Buscar y reemplazar en Animate
- Deshacer y rehacer en el panel Historial
- Métodos abreviados de teclado
- Uso de la Cronología en Animate
- Creación de extensiones HTML
- Opciones de optimización para Imágenes y archivos GIF animados
- Configuración de exportación de imágenes y archivos GIF
- Panel de Recursos en Animate
- Multimedia y vídeo
- Transformación y combinación de objetos gráficos en Animate
- Crear y trabajar con instancias de símbolo en Animate
- Calco de imagen
- Cómo utilizar el sonido en Adobe Animate
- Exportación de archivos SVG
- Creación de archivos de vídeo para su uso en Animate
- Cómo añadir un vídeo a Animate
- Dibujo y creación de objetos en Animate
- Remodelado de líneas y formas
- Trazos, rellenos y degradados en Animate CC
- Uso de Adobe Premiere Pro y After Effects
- Paneles de color en Animate CC
- Apertura de archivos de Flash CS6 con Animate
- Uso de texto clásico en Animate
- Colocación de ilustraciones en Animate
- Mapas de bits importados en Animate
- Gráficos 3D
- Trabajo con símbolos en Animate
- Dibujo de líneas y formas en Adobe Animate
- Uso de bibliotecas en Animate
- Exportación de sonidos
- Selección de objetos en Animate CC
- Trabajo con archivos AI de Illustrator en Animate
- Aplicación de modos de mezcla
- Organización de objetos
- Automatización de tareas con el menú Comandos
- Texto en varios idiomas
- Utilización de la cámara en Animate
- Filtros de gráficos
- Sonido y ActionScript
- Preferencias de dibujo
- Dibujo con la herramienta Pluma
- Plataformas
- Conversión de proyectos de Animate a otros formatos de documento
- Compatibilidad con plataformas personalizadas
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Creación y publicación de un documento de WebGL
- Empaquetado de aplicaciones para AIR para iOS
- Publicación de aplicaciones de AIR for Android
- Publicación para Adobe AIR para escritorio
- Configuración de publicaciones de ActionScript
- Prácticas recomendadas - Organización de ActionScript en una aplicación
- Uso de ActionScript con Animate
- Accesibilidad en el espacio de trabajo de Animate
- Cómo escribir y gestionar scripts
- Activación de la compatibilidad con plataformas personalizadas
- Información general sobre compatibilidad con plataformas personalizadas
- Uso de plugins de compatibilidad con plataformas personalizadas
- Depuración de ActionScript 3.0
- Activación de la compatibilidad con plataformas personalizadas
- Exportación y publicación
- Exportación de archivos de Animate CC
- Publicación de OAM
- Exportación de archivos SVG
- Exportación de gráficos y vídeos con Animate
- Publicar documentos de AS3
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Exportación de sonidos
- Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
- Prácticas recomendadas - Convenciones de vídeo
- Prácticas recomendadas - Directrices de edición de aplicaciones SWF
- Prácticas recomendadas - Estructuración de archivos FLA
- Prácticas recomendadas de optimización de archivos FLA para Animate
- Configuración de publicaciones de ActionScript
- Especificación de configuración de publicación para Animate
- Exportación de archivos de proyector
- Exportar imágenes y archivos GIF animados
- Plantillas de publicación HTML
- Uso de Adobe Premiere Pro y After Effects
- Compartir y publicar animaciones rápidamente
- Solución de problemas
Pasos básicos para la creación de botones
-
Símbolo de botón
La mayoría de usuarios eligen símbolos de botón por su flexibilidad. Los símbolos de botón contienen una línea de tiempo interna especializada para estados de botón. Puede crear fácilmente y de forma visual distintos estados Arriba, Presionado o Sobre. Los símbolos de botón también cambian de estado automáticamente cuando reaccionan a las acciones del usuario.
Botón de clip de película
Puede utilizar un símbolo de clip de película para crear efectos de botón sofisticados. Los símbolos de clip de película pueden contener casi cualquier tipo de contenido, incluidas animaciones. Sin embargo, los símbolos de película no tienen incorporados los estados Arriba, Presionado y Sobre. Deberá crear estos estados usted mismo con ActionScript. Una desventaja es que los archivos de clip de película son más grandes que los archivos de botón.
Componente de botón de ActionScript
Utilice un componente de botón si solo necesita un botón estándar o un conmutador y no quiere personalizarlo demasiado. Los componentes de botón de ActionScript 2.0 y 3.0 vienen con código incorporado que habilita los cambios de estado. De este modo, no es necesario definir la apariencia o el comportamiento de los estados de los botones. Basta con arrastrar el componente hasta el escenario.
Los componentes de botón de ActionScript 3.0 permiten cierta personalización. Puede vincular el botón a otros componentes y compartir o visualizar los datos de la aplicación. Contienen funciones incorporadas, como compatibilidad con accesibilidad. Están disponibles los componentes Button, RadioButton y CheckBox.
Los componentes de botón de ActionScript 2.0 no se pueden personalizar. El componente sí habilita cambios de estado.
-
Defina los estados del botón.
Fotograma Arriba
El aspecto del botón cuando el usuario no está interactuando con él.
Fotograma Sobre
La apariencia del botón cuando el usuario está a punto de seleccionarlo.
Fotograma Presionado
El aspecto del botón cuando el usuario lo selecciona.
Fotograma Zona activa
El área que responde ante el clic del usuario. La definición del fotograma Zona activa es optativa. Si el botón es pequeño o si el área gráfica no está contigua, definir este fotograma puede resultar útil.
El contenido del fotograma Zona activa no está visible en el escenario durante la reproducción.
El gráfico del fotograma Zona activa es un área sólida lo bastante grande para abarcar todos los elementos gráficos de los fotogramas Arriba, Presionado y Sobre.
Si no especifica ningún fotograma Zona activa, se utilizará la imagen del estado Arriba.
Puede hacer que un botón responda al hacer clic en un área distinta del escenario o al pasar el ratón por encima. Coloque el gráfico del fotograma Zona activaen otra ubicación distinta a la de los gráficos de fotogramas de botones.
-
Asocie una acción al botón.
Para que suceda algo cuando el usuario seleccione un botón, debe añadir código ActionScript a la línea de tiempo. Inserte el código ActionScript en los mismos fotogramas que los botones. El panel Fragmentos de código contiene código predefinido de ActionScript 3.0 para muchos usos habituales de botones. Consulte Cómo añadir interactividad mediante fragmentos de código.
ActionScript 2.0 no es compatible con ActionScript 3.0. Si su versión de Animate utiliza ActionScript 3.0, no podrá pegar código de ActionScript 2.0 en el botón (y viceversa). Antes de pegar ActionScript desde otro origen en los botones, debe comprobar si la versión es compatible.
Creación de un botón con un símbolo de botón
Para que un botón sea interactivo, coloque una instancia del símbolo del botón en el escenario y asigne acciones a la instancia. El usuario asigna las acciones a la línea de tiempo raíz del archivo FLA. No añada acciones a la línea de tiempo del símbolo de botón. Para añadir acciones a la línea de tiempo del botón, utilice un botón de clip de película.
-
Seleccione Edición > Anular todas las selecciones, o bien, haga clic en un área vacía del escenario para garantizar que no haya nada seleccionado en el escenario.
-
Seleccione Insertar > Nuevo símbolo.
-
En el cuadro de diálogo Crear nuevo símbolo, especifique un nombre. Para el tipo de símbolo, seleccione Botón.
Animate cambia al modo de edición de símbolos. La línea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Arriba, Sobre, Presionado y Zona activa. El primer fotograma, Arriba, es un fotograma clave vacío.
-
Para crear la imagen del botón del estado Arriba, seleccione el fotograma Arriba en la línea de tiempo. A continuación, utilice las herramientas de dibujo, importe un gráfico o coloque una instancia de otro símbolo en el escenario.
Es posible utilizar símbolos gráficos o símbolos de clip de película dentro de un botón, pero no se puede utilizar otro símbolo de botón.
-
En la línea de tiempo, haga clic en el fotograma Sobre y, a continuación, elija Insertar > Línea de tiempo > Fotograma clave.
Animate inserta un fotograma clave que duplica el contenido del fotograma anterior Arriba.
-
Con el fotograma Sobre aún seleccionado, cambie o modifique la imagen del botón en el escenario para crear el aspecto que desee para el estado Sobre.
-
Repita los pasos 5 y 6 para el fotograma Presionado y el fotograma opcional Zona activa.
-
Para asignar un sonido a un estado del botón, seleccione el fotograma de dicho estado en la línea de tiempo y seleccione Ventana > Propiedades. Seguidamente, seleccione un sonido en el menú Sonido del inspector de propiedades. Únicamente los sonidos que ya se han importado aparecen en el menú Sonido.
-
Cuando haya terminado, seleccione Edición > Editar documento. Animate con esto vuelve a la línea de tiempo principal del archivo FLA. Para crear una instancia del botón creado en el escenario, arrastre el símbolo de botón desde el panel Biblioteca al escenario.
-
Para probar la funcionalidad de un botón, utilice el comando Control > Probar. También es posible previsualizar los estados de un símbolo de botón en el escenario seleccionando Control > Habilitar botones simples. Este comando permite ver los estados Arriba, Sobre y Presionado de un símbolo de botón sin utilizar Control > Probar.
Activación, edición y prueba de símbolos de botón
De forma predeterminada, Animate mantiene deshabilitados los símbolos de botón mientras los está creando. Seleccione un botón y, después, habilítelo para ver su respuesta ante eventos de ratón. La práctica recomendada es deshabilitar los botones mientras trabaja con ellos y habilitarlos rápidamente para probar su comportamiento.
Para seleccionar un botón, utilice la herramienta Selección para arrastrar un rectángulo de selección alrededor del botón.
Para habilitar o deshabilitar botones en el escenario, seleccione Control > Habilitar botones simples. Este comando actúa como alternador entre los dos estados.
Para mover un botón, utilice las teclas de flecha.
Para editar un botón, utilice el inspector de propiedades. Si no está visible, seleccione Ventana > Propiedades.
Para probar el botón en el entorno de edición, seleccione Control > Habilitar botones simples.
Para probar el botón en Flash Player, seleccione Control > Probar película [o Probar escena] > Probar. Este método es el único válido para probar botones de clip de película.
Para probar el botón en el panel Vista previa de biblioteca, seleccione el botón en la biblioteca y haga clic en Reproducir.
Botones para la solución de problemas
Utilice los siguientes recursos para solucionar los problemas más habituales que surgen al trabajar con botones:
Nota técnica: Adding actions to shared buttons (Incorporación de acciones en botones compartidos, en inglés) (Adobe.com)
Recursos adicionales para botones
Las siguientes notas técnicas contienen instrucciones para algunos casos concretos de botones:
Nota técnica: How to create a new button (Cómo crear un nuevo botón en inglés) (Adobe.com)
Nota técnica: Creating advanced buttons (Creación de botones avanzados, en inglés) (Adobe.com)
Nota técnica: How can one button do different things at different times? (Cómo puede un botón hacer cosas distintas cada vez, en inglés) (en inglés; en Adobe.com)