Guía del usuario Cancelar

Aspectos básicos de animaciones en Animate

  1. Guía del usuario de Adobe Animate
  2. Introducción a Animate
    1. Novedades de Animate
    2. Glosario visual
    3. Requisitos del sistema para Animate
    4. Métodos abreviados de teclado de Animate
    5. Trabajar con varios tipos de archivo en Animate
  3. Animación
    1. Aspectos básicos de animaciones en Animate
    2. Cómo utilizar los fotogramas y fotogramas clave en Animate
    3. Animación fotograma a fotograma en Animate
    4. Uso de la animación de interpolación clásica en Animate
    5. Herramienta Pincel
    6. Guía de movimiento
    7. Interpolación de movimiento y ActionScript 3.0
    8. Acerca de la animación de interpolación de movimiento
    9. Animaciones de interpolación de movimiento
    10. Creación de una animación de interpolación de movimiento
    11. Uso de fotogramas clave de propiedad
    12. Animación de la posición con una interpolación
    13. Edición de interpolaciones de movimiento con el editor de movimiento
    14. Edición del trazado de movimiento de una animación de interpolación
    15. Manipulación de las interpolaciones de movimiento
    16. Adición de aceleraciones personalizadas
    17. Creación y aplicación de ajustes preestablecidos de movimiento
    18. Configuración de grupos de interpolación de animación
    19. Uso de interpolaciones de movimiento guardadas como archivos XML
    20. Interpolaciones de movimiento e interpolaciones clásicas
    21. Interpolación de forma
    22. Uso de la animación de la herramienta Hueso en Animate
    23. Trabajar con el rigging de personajes en Animate
    24. Uso de las capas de máscara en Adobe Animate
    25. Uso de escenas en Animate
  4. Interactividad
    1. Creación de botones en Animate
    2. Conversión de proyectos de Animate a otros formatos de documento
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Adición de interactividad con fragmentos de código en Animate
    5. Creación de componentes HTML5 personalizados
    6. Uso de componentes en HTML5 Canvas
    7. Creación de componentes personalizados: Ejemplos
    8. Fragmentos de código para componentes personalizados
    9. Prácticas recomendadas - Publicidad con Animate
    10. Autoría y publicación de realidad virtual
  5. Espacio de trabajo y flujo de trabajo
    1. Creación y administración de pinceles
    2. Uso de Google Fonts en documentos HTML5 Canvas
    3. Utilización de las Bibliotecas Creative Cloud y Adobe Animate
    4. Utilización del Escenario y el panel Herramientas en Animate
    5. Flujo de trabajo y espacio de trabajo de Animate
    6. Uso de las fuentes web en documentos de HTML5 Canvas
    7. Líneas de tiempo y ActionScript
    8. Trabajo con varias líneas de tiempo
    9. Configuración de preferencias
    10. Utilización de los paneles de edición de Animate
    11. Creación de capas de la línea de tiempo en Animate
    12. Exportación de animaciones para aplicaciones móviles y motores de juegos
    13. Desplazamiento y copia de objetos
    14. Plantillas
    15. Buscar y reemplazar en Animate
    16. Deshacer y rehacer en el panel Historial
    17. Métodos abreviados de teclado
    18. Uso de la Cronología en Animate
    19. Creación de extensiones HTML
    20. Opciones de optimización para Imágenes y archivos GIF animados
    21. Configuración de exportación de imágenes y archivos GIF
    22. Panel de Recursos en Animate
  6. Multimedia y vídeo
    1. Transformación y combinación de objetos gráficos en Animate
    2. Crear y trabajar con instancias de símbolo en Animate
    3. Calco de imagen
    4. Cómo utilizar el sonido en Adobe Animate
    5. Exportación de archivos SVG
    6. Creación de archivos de vídeo para su uso en Animate
    7. Cómo añadir un vídeo a Animate
    8. Trabajo con puntos de referencia de vídeo
    9. Dibujo y creación de objetos en Animate
    10. Remodelado de líneas y formas
    11. Trazos, rellenos y degradados en Animate CC
    12. Uso de Adobe Premiere Pro y After Effects
    13. Paneles de color en Animate CC
    14. Apertura de archivos de Flash CS6 con Animate
    15. Uso de texto clásico en Animate
    16. Colocación de ilustraciones en Animate
    17. Mapas de bits importados en Animate
    18. Gráficos 3D
    19. Trabajo con símbolos en Animate
    20. Dibujo de líneas y formas en Adobe Animate
    21. Uso de bibliotecas en Animate
    22. Exportación de sonidos
    23. Selección de objetos en Animate CC
    24. Trabajo con archivos AI de Illustrator en Animate
    25. Aplicación de patrones con el pincel rociador
    26. Aplicación de modos de mezcla
    27. Organización de objetos
    28. Automatización de tareas con el menú Comandos
    29. Texto en varios idiomas
    30. Utilización de la cámara en Animate
    31. Uso de Animate con Adobe Scout
    32. Trabajo con archivos de Fireworks
    33. Filtros de gráficos
    34. Sonido y ActionScript
    35. Preferencias de dibujo
    36. Dibujo con la herramienta Pluma
  7. Plataformas
    1. Conversión de proyectos de Animate a otros formatos de documento
    2. Compatibilidad con plataformas personalizadas
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Creación y publicación de un documento de WebGL
    5. Empaquetado de aplicaciones para AIR para iOS
    6. Publicación de aplicaciones de AIR for Android
    7. Publicación para Adobe AIR para escritorio
    8. Configuración de publicaciones de ActionScript
    9. Prácticas recomendadas - Organización de ActionScript en una aplicación
    10. Uso de ActionScript con Animate
    11. Prácticas recomendadas - Directrices de accesibilidad
    12. Accesibilidad en el espacio de trabajo de Animate
    13. Cómo escribir y gestionar scripts
    14. Activación de la compatibilidad con plataformas personalizadas
    15. Información general sobre compatibilidad con plataformas personalizadas
    16. Creación de contenido accesible
    17. Uso de plugins de compatibilidad con plataformas personalizadas
    18. Depuración de ActionScript 3.0
    19. Activación de la compatibilidad con plataformas personalizadas
  8. Exportación y publicación
    1. Exportación de archivos de Animate CC
    2. Publicación de OAM
    3. Exportación de archivos SVG
    4. Exportación de gráficos y vídeos con Animate
    5. Publicar documentos de AS3
    6. Exportación de animaciones para aplicaciones móviles y motores de juegos
    7. Exportación de sonidos
    8. Exportación de archivos de vídeo QuickTime
    9. Control de reproducción de vídeo externo con ActionScript
    10. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    11. Prácticas recomendadas - Convenciones de vídeo
    12. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    13. Prácticas recomendadas - Estructuración de archivos FLA
    14. Prácticas recomendadas de optimización de archivos FLA para Animate
    15. Configuración de publicaciones de ActionScript
    16. Especificación de configuración de publicación para Animate
    17. Exportación de archivos de proyector
    18. Exportar imágenes y archivos GIF animados
    19. Plantillas de publicación HTML
    20. Uso de Adobe Premiere Pro y After Effects
    21. Compartir y publicar animaciones rápidamente

 Como la mayoría de las cosas en Animate (anteriormente Flash Professional CC), la animación no requiere ActionScript. Sin embargo, puede crear animaciones con ActionScript si lo desea.

Tipos de animaciones

Animate ofrece varias formas de crear animaciones y efectos especiales. Cada método proporciona distintas posibilidades para crear contenido animado.

Animate admite los siguientes tipos de animación:

Interpolaciones de movimiento

Las interpolaciones de movimiento se utilizan para establecer las propiedades de un objeto, por ejemplo, la posición y la transparencia alfa de un fotograma y, de nuevo, de otro fotograma. Animate interpola los valores de las propiedades de los fotogramas intermedios. Las interpolaciones de movimiento resultan útiles para animaciones con movimiento continuo o para la transformación de objetos. Las interpolaciones de movimiento aparecen en la línea de tiempo como grupos de fotogramas contiguos y se pueden seleccionar como un solo objeto de forma predeterminada. Las interpolaciones de movimiento son realmente potentes y fáciles de crear.

Interpolaciones clásicas

Las interpolaciones clásicas son como las interpolaciones de movimiento, aunque más difíciles de crear. Las interpolaciones clásicas permiten agregar efectos de animación específicos que no son posibles en interpolaciones basadas en el tamaño.

Poses de cinemática inversa (ya no se usa en Animate)

Las poses de cinemática inversa permiten estirar y doblar objetos de forma, así como vincular grupos de instancias de símbolos para que se muevan al mismo tiempo y con naturalidad. Una vez añadidos los huesos a una forma o a un grupo de símbolos, puede cambiar la posición de los huesos o símbolos en los distintos fotogramas clave. Animate interpola las posiciones de los fotogramas intermedios.

Interpolaciones de forma

En la interpolación de forma, se dibuja una forma en un fotograma concreto de la línea de tiempo y se modifica o se dibuja otra forma en otro fotograma específico. Seguidamente, Animate interpola las formas intermedias de los fotogramas intermedios y crea la animación de una forma cambiante.

Animación fotograma a fotograma

Esta técnica de animación permite especificar distintas ilustraciones para cada fotograma de la línea de tiempo. Utilice esta técnica para crear efectos como el de fotogramas de una película que se suceden rápidamente. Esta técnica resulta útil en animaciones complejas donde es preciso que los elementos gráficos de cada fotograma sean distintos.

Velocidades de fotogramas

La velocidad de fotogramas, la rapidez con que se reproduce la animación, se expresa en fotogramas por segundo (fps). Si la velocidad de fotogramas es muy baja, la animación parece detenerse y volver a empezar y si es muy alta los detalles se ven borrosos. Los nuevos documentos de Animate tienen una velocidad de fotogramas predeterminada de 24 fps, con la que suelen obtener los mejores resultados en la web. La velocidad estándar de imágenes en movimiento es también de 24 fps.

La complejidad de la animación y la velocidad del sistema donde se reproduce afectan a la suavidad de la reproducción. Para determinar la velocidad de fotogramas óptima, pruebe las animaciones en varios equipos.

Solo se especifica una velocidad de fotogramas para el documento de Animate completo, por lo que debe definirla antes de crear la animación.

Identificación de animaciones en la línea de tiempo

Animate diferencia la animación interpolada de la animación fotograma a fotograma en la línea de tiempo mediante distintos indicadores en cada fotograma con contenido.

En la línea de tiempo se muestran los siguientes indicadores de contenido de fotogramas:

  • Un intervalo de fotogramas con fondo azul indica una interpolación de movimiento. Un punto negro en el primer fotograma del grupo indica que el grupo de interpolación tiene asignado un objeto de destino. Unos diamantes negros indican el último fotograma y otros fotogramas clave de propiedad. Los fotogramas clave de propiedad son fotogramas que contienen cambios de propiedades específicamente definidos por el usuario. Puede elegir qué tipos de fotogramas clave de propiedad se visualizan: haga clic con el botón derecho del ratón (Windows) o, con la tecla Comando presionada (Macintosh), haga clic en el grupo de interpolación de movimiento y seleccione Ver fotogramas clave > tipo en el menú contextual. Animate, de forma predeterminada, muestra todos los tipos de fotogramas clave de propiedad. El resto de fotogramas del grupo contienen valores interpolados para las propiedades interpoladas del objeto de destino.

     

     

  • Un punto hueco en el primer fotograma indica que se ha eliminado el objeto de destino de la interpolación de movimiento. El grupo de interpolación sigue conteniendo los fotogramas clave de propiedad y puede aplicársele un nuevo objeto de destino.

     

     

  • Un grupo de fotogramas con fondo verde indican una capa de pose de cinemática inversa (IK). Las capas de pose contienen esqueletos IK y poses. Cada pose se muestra en la línea de tiempo como un diamante negro. Animate interpola las posiciones del esqueleto en los fotogramas entre las poses.

     

     

  • Un punto negro al principio de un fotograma clave con una flecha negra y fondo azul indica una interpolación clásica.

     

     

  • Una línea discontinua indica que la interpolación clásica se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final.

     

     

  • Un punto negro al principio de un fotograma clave con una flecha negra y fondo verde claro indica una interpolación de forma.

     

     

  • Un punto negro indica un solo fotograma. Los fotogramas en gris claro que siguen a un fotograma clave contienen el mismo contenido, sin cambios. Estos fotogramas se muestran con una línea negra vertical y un rectángulo vacío en el último fotograma del grupo.

     

     

  • Una a pequeña indica que al fotograma se ha asignado una acción de fotograma con el panel Acciones.

     

     

  • Una bandera roja indica que el fotograma contiene una etiqueta.

     

     

  • Un guión doble verde indica que el fotograma contiene un comentario.

     

     

  • Un ancla dorada indica que el fotograma es un anclaje con nombre.

     

Capas en animación interpolada

Las escenas de los documentos de Animate pueden constar de varias capas de línea de tiempo. Utilice capas y carpetas de capas para organizar el contenido de una secuencia de animación y los distintos objetos animados. Si los organiza en capas y en carpetas, evitará que se borren, que se conecten entre sí o que se separen si se superponen. Para crear una animación que incluya movimiento interpolado a partir de más de un campo de símbolo o de texto a la vez, cada objeto debe estar situado en una capa distinta. Puede utilizar una capa como capa de fondo para albergar las ilustraciones estáticas y recurrir a capas adicionales para que contengan un objeto animado independiente.

Al crear un objeto de movimiento, Animate convierte la capa que contiene el objeto que se va a interpolar en una capa de interpolación. La capa de interpolación se muestra con un icono de interpolación junto al nombre de la capa en la línea de tiempo.

Si, además del objeto interpolado, existen otros objetos en la misma capa, Animate añade capas nuevas encima o debajo de la capa original si es necesario. Todos los objetos por debajo del objeto interpolado en su capa original pasan a una nueva capa debajo de la capa original. Todos los objetos por encima del objeto interpolado en su capa original pasan a una nueva capa encima de la capa original. Animate inserta estas nuevas capas entre las capas ya existentes en la línea de tiempo. De este modo, Animate conserva el orden de apilamiento original de todos los objetos gráficos del escenario.

Una capa de interpolación únicamente puede contener grupos de interpolación (grupos contiguos de fotogramas con interpolación), fotogramas estáticos. fotogramas en blanco o fotogramas vacíos. Cada grupo de interpolación solamente puede contener un único objeto de destino y un trazado de movimiento opcional para el objeto de destino. Puesto que no es posible dibujar en una capa de interpolación, debe crear interpolaciones adicionales o fotogramas estáticos en otras capas y, después, arrastrarlas a la capa de interpolación. Para colocar scripts de fotograma en una capa de interpolación, créelos en otra capa y arrástrelos después a la capa de interpolación. Un script de fotograma solo puede existir en un fotograma que no pertenezca al grupo de interpolación de movimiento. En general, lo mejor es conservar todos los scripts de fotograma en una capa independiente que contenga únicamente ActionScript.

Si un documento tiene varias capas, puede resultar difícil realizar el seguimiento y la edición de los objetos en una o más de ellas. Es más sencillo trabajar con el contenido de cada capa por separado. Para ocultar o bloquear las capas que no esté utilizando, haga clic en el icono del ojo o del candado situado junto al nombre de la capa en la línea de tiempo. Las carpetas de capas permiten organizar las capas en grupos más fáciles de gestionar.

Distribución de objetos en capas para crear animaciones interpoladas

Animate automáticamente mueve un objeto a su propia capa de interpolación cuando se aplique una interpolación de movimiento al objeto. Sin embargo, también es posible distribuir objetos a sus propias capas independientes de forma manual. Por ejemplo, puede elegir distribuir los objetos manualmente al organizar el contenido. La distribución manual también resulta útil para aplicar animación a objetos sin perder el control preciso sobre el modo en que se mueven entre las capas.

Al utilizar el comando Distribuir en capas (Modificar > Línea de tiempo > Distribuir en capas), Animate distribuye cada objeto seleccionado en una nueva capa independiente. Los objetos que no se seleccionen (incluidos los de otros fotogramas) se mantienen en sus capas iniciales.

El comando Distribuir en capas puede aplicarse a cualquier elemento del escenario, incluidos los objetos gráficos, las instancias, los mapas de bits, los clips de vídeo y los bloques de texto separados.

Las nuevas capas creadas con Distribuir en capas

Cada capa nueva creada durante la operación de distribución en capas recibe el nombre del elemento que contiene:

  • Una capa nueva que contiene un elemento de biblioteca (como un símbolo, un mapa de bits o un clip de vídeo) recibe el nombre del elemento.

  • Una capa nueva que contiene una instancia con nombre recibe el nombre de la instancia.

  • Una capa nueva que contiene un carácter de un bloque de texto separado recibe el nombre del carácter.

  • Una capa nueva que contiene un objeto gráfico (que no tiene nombre) recibe el nombre Capa1 (o Capa2, etc.), ya que los objetos gráficos no tienen nombre.

    Animate inserta las nuevas capas bajo las capas seleccionadas. Las capas nuevas se organizan de arriba a abajo, en el orden en el que se crearon inicialmente los elementos seleccionados. Las capas de texto separado se organizan en el orden de los caracteres, ya sea de izquierda a derecha, de derecha a izquierda o de arriba a abajo. Por ejemplo, supongamos que dividimos el texto FLASH y lo distribuimos en capas. Las nuevas capas, denominadas F, L, A, S y H, se ordenan de arriba abajo, con la F en primer lugar. Estas capas aparecen inmediatamente después que la capa que inicialmente contenía el texto.

Distribución de objetos en capas

  1. Seleccione los objetos que quiera distribuir en capas independientes. Los objetos pueden estar en una misma capa o en varias capas, que pueden ser no contiguas.
  2. Realice uno de los siguientes pasos:
    • Seleccione Modificar > Línea de tiempo > Distribuir en capas.
    • Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en uno de los objetos seleccionados y elija Distribuir en capas.

Creación de animaciones interpoladas mediante la distribución de objetos en fotogramas clave

Novedad de Animate

Animate permite automáticamente distribuir objetos en distintos fotogramas clave. Puede elegir distribuir los objetos cuando esté organizando el contenido en el escenario. Hacerlo manualmente, resulta muy tedioso y lento. La distribución es muy útil cuando se crea una animación interpolada colocando objetos en distintos fotogramas clave. Sería posible asignar distintos objetos o estados de objetos a fotogramas clave individuales. De hecho, cuando la cabeza lectora pase por estos fotogramas claves, se producirá un efecto de animación interpolada.

Cuando se utiliza el comando Distribuir en fotogramas clave, Animate distribuye cada objeto seleccionado en un nuevo fotograma clave distinto. Los objetos que no se seleccionen (incluidos los de otros fotogramas) se mantienen en sus capas iniciales.

El comando Distribuir en fotogramas clave puede aplicarse a cualquier elemento del escenario, incluidos los objetos gráficos, las instancias, los mapas de bits, los clips de vídeo y los bloques de texto.

Nuevos fotogramas creados con la opción Distribuir en fotogramas clave

  • Los nuevos fotogramas creados con la opción Distribuir en fotogramas clave se organizan según la secuencia en que se hayan seleccionado los objetos.
  • Si se deja algún objeto de la capa sin seleccionar al llevar a cabo la operación Distribuir en fotogramas, los fotogramas de dichos objetos no se verán afectados. Los objetos seleccionados para su distribución se asignan a fotogramas clave desde el fotograma inmediatamente contiguo al último fotograma del contenido original. Por ejemplo, si Objeto1 y Objeto2 están en una capa que tiene 50 fotogramas. Si se elige Objeto1 para su distribución, se colocará en el 51º fotograma clave.

Distribución de objetos en fotogramas clave

  1. Seleccione los objetos que quiera distribuir en capas independientes. Los objetos pueden estar en una misma capa o en varias capas, que pueden ser no contiguas.

  2. Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en uno de los objetos seleccionados y elija Distribuir en fotogramas clave.

Recursos adicionales

En el siguiente artículo se trata la animación en Animate:

Logotipo de Adobe

Inicia sesión en tu cuenta